html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    font-size: 100%;
    vertical-align: baseline
}

html {
    line-height: 1
}

ol,
ul {
    list-style: none
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

caption,
th,
td {
    text-align: left;
    font-weight: normal;
    vertical-align: middle
}

q,
blockquote {
    quotes: none
}

q:before,
q:after,
blockquote:before,
blockquote:after {
    content: "";
    content: none
}

a img {
    border: none
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
    display: block
}

@font-face {
    font-family: "latoblack";
    src: url("../fonts/lato-black-webfont.eot");
    src: url("../fonts/lato-black-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/lato-black-webfont.woff") format("woff"), url("../fonts/lato-black-webfont.ttf") format("truetype"), url("../fonts/lato-black-webfont.svg#latoblack") format("svg");
    font-weight: normal;
    font-style: normal
}

@font-face {
    font-family: "latoregular";
    src: url("../fonts/lato-regular-webfont.eot");
    src: url("../fonts/lato-regular-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/lato-regular-webfont.woff") format("woff"), url("../fonts/lato-regular-webfont.ttf") format("truetype"), url("../fonts/lato-regular-webfont.svg#latoregular") format("svg");
    font-weight: normal;
    font-style: normal
}

@font-face {
    font-family: "latolight";
    src: url("../fonts/lato-light-webfont.eot");
    src: url("../fonts/lato-light-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/lato-light-webfont.woff") format("woff"), url("../fonts/lato-light-webfont.ttf") format("truetype"), url("../fonts/lato-light-webfont.svg#latolight") format("svg");
    font-weight: normal;
    font-style: normal
}

.hidden {
    display: none !important
}

.transition,
.button.replay:hover svg,
.social-buttons div a,
.social-buttons div a:before,
.social-buttons div a svg,
.social-buttons div a svg path,
.share ul,
.share ul li:nth-of-type(1),
.share ul li:nth-of-type(2),
.share ul li:nth-of-type(3),
.share ul li:nth-of-type(4),
.share ul li:nth-of-type(5),
.share ul li:nth-of-type(6),
.share ul li:nth-of-type(7),
.share ul li:nth-of-type(8),
.share ul li:nth-of-type(9),
.share ul li:nth-of-type(10),
.share ul li a,
.share ul li a:before,
.share ul li a svg,
.share ul li a svg path,
.button-modal p,
.button-modal:before,
.carousel menu b:before,
.carousel menu b:after,
header,
#language,
#region,
.site-wrapper[data-page="geometrywars"] .platforms #retailer,
#language+i,
#region+i,
.site-wrapper[data-page="geometrywars"] .platforms #retailer+i,
#logo-flat .top,
#logo-flat .bottom,
#logo-png .top,
#logo-png .bottom,
#nav-control,
#nav-control:before,
#nav-control:after,
nav a:before,
header.open nav a:nth-of-type(1),
header.open nav a:nth-of-type(2),
header.open nav a:nth-of-type(3),
header.open nav a:nth-of-type(4),
header.open nav a:nth-of-type(5),
header.open nav a:nth-of-type(6),
header.open nav a:nth-of-type(7),
header.open nav a:nth-of-type(8),
header.open nav a:nth-of-type(9),
header.open nav a:nth-of-type(10),
main .features ul,
main .accolades ul,
.site-wrapper[data-page="promo"] .slide:nth-of-type(1) .replay:hover svg {
    -moz-transition: all 0.3s cubic-bezier(0.46, 0.01, 0.2, 1.51);
    -o-transition: all 0.3s cubic-bezier(0.46, 0.01, 0.2, 1.51);
    -webkit-transition: all 0.3s cubic-bezier(0.46, 0.01, 0.2, 1.51);
    transition: all 0.3s cubic-bezier(0.46, 0.01, 0.2, 1.51)
}

.transition-no-bounce,
.button.follow-game,
.button.follow-game .default,
.button.follow-game .networks,
.button.share,
.button.share .social-buttons,
.button.share .base,
.button.share .social-buttons *,
.mobile-follow a,
.mobile-follow a *,
footer .button,
.popup-button,
.popup-button:before,
.carousel .left,
.carousel .right,
.carousel .left:before,
.carousel .left.right:before,
.carousel .right:before,
.carousel menu,
header #logo-png .white,
header #logo-png .gradient,
nav a+div,
nav a+div:before,
nav a+div:after,
main .features ul li,
main .accolades ul li,
main .screenshots ul li,
main .media ul li,
main .section-features ul li,
main .screenshots ul li .share,
main .media ul li .share,
main .section-features ul li .share,
main .screenshots ul li .image-div:before,
main .media ul li .image-div:before,
main .section-features ul li .image-div:before,
main .screenshots ul li h3,
main .media ul li h3,
main .section-features ul li h3,
main .videos ul li,
main .videos ul li h3,
main .developers .content .left .button,
main .explore .button,
.site-wrapper[data-page="home"] .head .logo,
.site-wrapper[data-page="home"] .game-promo .content,
.site-wrapper[data-page="home"] .game-promo .content .page-link,
.site-wrapper[data-page="promo"] .slide {
    -moz-transition: all 0.3s cubic-bezier(0.74, 0.35, 0, 0.99);
    -o-transition: all 0.3s cubic-bezier(0.74, 0.35, 0, 0.99);
    -webkit-transition: all 0.3s cubic-bezier(0.74, 0.35, 0, 0.99);
    transition: all 0.3s cubic-bezier(0.74, 0.35, 0, 0.99)
}

.italic {
    font-style: italic;
    font-weight: 900
}

hr {
    background: repeating-linear-gradient(90deg, #0db2f0 0%, #0db2f0 24.999%, #9c9c9c 25%, #9c9c9c 49.999%, #cacaca 50%, #cacaca 74.999%, #fcfcfc 75%, #fcfcfc 100%) top left;
    background-size: 100% 100%;
    margin: 0;
    width: 100%;
    height: 10px;
    border: none
}

* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.button {
    display: inline-block;
    position: relative;
    padding: 20px 40px;
    border-radius: 4px;
    font-family: "latoblack", sans-serif;
    font-size: 18px;
    letter-spacing: 4px;
    text-transform: uppercase;
    cursor: pointer;
    overflow: hidden
}

.button.replay,
.button.share {
    padding-left: 80px
}

.button.replay .replay-icon,
.button.replay .share-icon,
.button.share .replay-icon,
.button.share .share-icon {
    position: absolute;
    width: 40px;
    height: 40px;
    margin-left: -50px;
    margin-top: -12px
}

.button.follow-game {
    position: relative;
    border: 2px solid #999;
    overflow: hidden;
    color: #999;
    box-sizing: border-box;
    font-size: 0;
    height: 58px
}

.button.follow-game:hover {
    background-color: #999
}

.button.follow-game .default,
.button.follow-game .networks {
    position: relative;
    height: 100%;
    min-width: 191px;
    display: inline-block;
    -moz-backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    top: 0
}

.button.follow-game .default {
    -moz-transition-delay: 0s;
    -o-transition-delay: 0s;
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
    -moz-transform: translate(0, 0) scale(1);
    -ms-transform: translate(0, 0) scale(1);
    -webkit-transform: translate(0, 0) scale(1);
    transform: translate(0, 0) scale(1);
    font-size: 14px;
    opacity: 1;
    z-index: 1
}

.button.follow-game .networks {
    -moz-transition-delay: 0s;
    -o-transition-delay: 0s;
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
    -moz-transform: translate(0, 300%) scale(0);
    -ms-transform: translate(0, 300%) scale(0);
    -webkit-transform: translate(0, 300%) scale(0);
    transform: translate(0, 300%) scale(0);
    opacity: 0;
    z-index: 2
}

.button.follow-game .networks .icon {
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-right: 20px;
    margin-top: -20px;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat
}

.button.follow-game .networks .icon:last-of-type {
    margin-right: 0
}

.button.follow-game:hover .default {
    -moz-transition-delay: 0s;
    -o-transition-delay: 0s;
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
    -moz-transform: translate(0, -300%) scale(0);
    -ms-transform: translate(0, -300%) scale(0);
    -webkit-transform: translate(0, -300%) scale(0);
    transform: translate(0, -300%) scale(0);
    opacity: 0
}

.button.follow-game:hover .networks {
    -moz-transition-delay: 0s;
    -o-transition-delay: 0s;
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
    -moz-transform: translate(0, 0) scale(1);
    -ms-transform: translate(0, 0) scale(1);
    -webkit-transform: translate(0, 0) scale(1);
    transform: translate(0, 0) scale(1);
    opacity: 1
}

.button.share {
    -moz-transition-delay: 2s;
    -o-transition-delay: 2s;
    -webkit-transition-delay: 2s;
    transition-delay: 2s;
    position: relative;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.button.share .social-buttons,
.button.share .base {
    -moz-backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    box-sizing: border-box;
    position: relative;
    top: 0;
    left: 0
}

.button.share .base {
    -moz-transform: translate(0, 0) scale(1);
    -ms-transform: translate(0, 0) scale(1);
    -webkit-transform: translate(0, 0) scale(1);
    transform: translate(0, 0) scale(1);
    -moz-transition-delay: 2s;
    -o-transition-delay: 2s;
    -webkit-transition-delay: 2s;
    transition-delay: 2s
}

.button.share .social-mobile>div {
    line-height: 62px
}

.button.share .social-buttons {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    margin-top: 3px;
    margin-left: 3px;
    position: absolute;
    -moz-transform: translate(0, 100%) scale(0);
    -ms-transform: translate(0, 100%) scale(0);
    -webkit-transform: translate(0, 100%) scale(0);
    transform: translate(0, 100%) scale(0);
    -moz-transition-delay: 2s;
    -o-transition-delay: 2s;
    -webkit-transition-delay: 2s;
    transition-delay: 2s;
    pointer-events: none
}

.button.share .social-buttons .social-button {
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    width: 24px;
    height: 24px
}

.button.share .social-buttons .social-button.facebook {
    background-image: url(../images/social/facebook-icon.png)
}

.button.share .social-buttons .social-button.twitter {
    background-image: url(../images/social/twitter-icon.png)
}

.button.share .social-buttons .social-button.youtube-social {
    background-image: url(../images/social/youtube.png)
}

.button.share .social-buttons * {
    -moz-backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

.button.share .social-buttons .base:hover {
    -moz-transition-delay: 0s;
    -o-transition-delay: 0s;
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
    -moz-transform: translate(0, -300%) scale(0);
    -ms-transform: translate(0, -300%) scale(0);
    -webkit-transform: translate(0, -300%) scale(0);
    transform: translate(0, -300%) scale(0)
}

.button.share .social-buttons .base:hover+.social-buttons {
    -moz-transform: translate(0, 0) scale(1);
    -ms-transform: translate(0, 0) scale(1);
    -webkit-transform: translate(0, 0) scale(1);
    transform: translate(0, 0) scale(1);
    -moz-transition-delay: 0s;
    -o-transition-delay: 0s;
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
    pointer-events: auto
}

.button.share:hover {
    -moz-transition-delay: 0s;
    -o-transition-delay: 0s;
    -webkit-transition-delay: 0s;
    transition-delay: 0s
}

.button.share:hover .base {
    -moz-transform: translate(0, -300%) scale(0);
    -ms-transform: translate(0, -300%) scale(0);
    -webkit-transform: translate(0, -300%) scale(0);
    transform: translate(0, -300%) scale(0);
    -moz-transition-delay: 0s;
    -o-transition-delay: 0s;
    -webkit-transition-delay: 0s;
    transition-delay: 0s
}

.button.share:hover .social-buttons {
    -moz-transform: translate(0, 0) scale(1);
    -ms-transform: translate(0, 0) scale(1);
    -webkit-transform: translate(0, 0) scale(1);
    transform: translate(0, 0) scale(1);
    -moz-transition-delay: 0s;
    -o-transition-delay: 0s;
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
    pointer-events: auto
}

.button.share:hover {
    background-color: #00aeef
}

.button.share.small {
    padding: 17px 30px 17px 75px
}

.button.share.small .base {
    font-size: 13.9px
}

.button.share.small .social-buttons div {
    width: 24px;
    height: 24px;
    margin-top: 16px;
    margin-left: 5px
}

.button.share.small .social-buttons div:first-of-type {
    margin-left: 0
}

.button.share.small .social-buttons div a {
    width: 24px;
    height: 24px
}

.button.replay .replay-icon svg {
    -moz-transition: all 0s linear;
    -o-transition: all 0s linear;
    -webkit-transition: all 0s linear;
    transition: all 0s linear
}

.button.replay:hover svg {
    -moz-transform: rotate(-360deg);
    -ms-transform: rotate(-360deg);
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg)
}

.social-buttons div {
    position: relative;
    display: inline-block;
    margin-right: 10px;
    width: 40px;
    height: 40px
}

.social-buttons div a {
    display: inline-block;
    position: relative;
    width: 100%;
    height: 100%;
    margin-top: -4px
}

.social-buttons div a:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    z-index: -1;
    background-color: #00aeef;
    -moz-transform: translate(-50%, -50%) scale(0);
    -ms-transform: translate(-50%, -50%) scale(0);
    -webkit-transform: translate(-50%, -50%) scale(0);
    transform: translate(-50%, -50%) scale(0);
    border-radius: 50%
}

.social-buttons div a svg {
    position: absolute;
    width: 33px;
    height: 33px;
    display: inline-block;
    top: 4px;
    left: 4px
}

.social-buttons div a svg path {
    fill: #232323
}

.button.blue,
.social-buttons.blue {
    color: #00aeef;
    border: 2px solid #00aeef
}

.button.blue *,
.social-buttons.blue * {
    fill: #00aeef;
    border-color: #00aeef;
    color: #00aeef
}

.button.white,
.social-buttons.white {
    color: #fff;
    border: 2px solid #fff
}

.button.white *,
.social-buttons.white * {
    fill: #fff;
    border-color: #fff;
    color: #fff
}

.button.grey-light,
.social-buttons.grey-light {
    color: #eee;
    border: 2px solid #eee
}

.button.grey-light *,
.social-buttons.grey-light * {
    fill: #eee;
    border-color: #eee;
    color: #eee
}

.button.grey-dark,
.social-buttons.grey-dark {
    color: #232323;
    border: 2px solid #232323
}

.button.grey-dark *,
.social-buttons.grey-dark * {
    fill: #232323;
    border-color: #232323;
    color: #232323
}

.no-touch .button.share {
    -moz-transition-delay: 0s;
    -o-transition-delay: 0s;
    -webkit-transition-delay: 0s;
    transition-delay: 0s
}

.no-touch .button.share .base,
.no-touch .button.share .social-buttons {
    -moz-transition-delay: 0s;
    -o-transition-delay: 0s;
    -webkit-transition-delay: 0s;
    transition-delay: 0s
}

.touch .button.share {
    background-color: #999;
    border-color: #999
}

.touch .button.share .base {
    -moz-transform: translate(0, -300%) scale(0);
    -ms-transform: translate(0, -300%) scale(0);
    -webkit-transform: translate(0, -300%) scale(0);
    transform: translate(0, -300%) scale(0);
    -moz-transition-delay: 0s;
    -o-transition-delay: 0s;
    -webkit-transition-delay: 0s;
    transition-delay: 0s
}

.touch .button.share .social-buttons {
    -moz-transform: translate(0, 0) scale(1);
    -ms-transform: translate(0, 0) scale(1);
    -webkit-transform: translate(0, 0) scale(1);
    transform: translate(0, 0) scale(1);
    -moz-transition-delay: 0s;
    -o-transition-delay: 0s;
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
    -moz-backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    pointer-events: auto
}

.touch .button.follow-game {
    background-color: #999;
    border-color: #999;
    height: auto
}

.touch .button.follow-game .default {
    opacity: 1;
    color: #fff;
    margin-bottom: 30px
}

.touch .button.follow-game .networks {
    -moz-transform: translate(0, 0) scale(1);
    -ms-transform: translate(0, 0) scale(1);
    -webkit-transform: translate(0, 0) scale(1);
    transform: translate(0, 0) scale(1);
    opacity: 1
}

.share {
    position: absolute;
    width: auto;
    height: auto;
    text-align: center
}

.share .button {
    color: #232323;
    border: 2px solid #232323;
    outline: none;
    padding: 20px 40px;
    cursor: pointer;
    font-family: "latoblack", sans-serif;
    border-radius: 4px;
    font-size: 15px;
    letter-spacing: 2px;
    text-decoration: none;
    display: inline-block;
    text-transform: uppercase
}

.share .button i {
    position: relative;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid #232323;
    box-shadow: -8px -6px 0 0 #232323, -8px 6px 0 0 #232323
}

.share .button i:before,
.share .button i:after {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 9px;
    height: 2px;
    background-color: #232323
}

.share ul {
    -moz-transform: translate(-100%, 0);
    -ms-transform: translate(-100%, 0);
    -webkit-transform: translate(-100%, 0);
    transform: translate(-100%, 0);
    -moz-transition-duration: 0s;
    -o-transition-duration: 0s;
    -webkit-transition-duration: 0s;
    transition-duration: 0s;
    -moz-transition-delay: 0.1s;
    -o-transition-delay: 0.1s;
    -webkit-transition-delay: 0.1s;
    transition-delay: 0.1s;
    max-width: 0;
    position: absolute;
    left: 0;
    height: 100%;
    list-style: none;
    overflow: hidden;
    white-space: nowrap;
    top: 0
}

.share ul li:nth-of-type(1) {
    -moz-transition-duration: 0.1s;
    -o-transition-duration: 0.1s;
    -webkit-transition-duration: 0.1s;
    transition-duration: 0.1s;
    -moz-transition-delay: 0.06667s;
    -o-transition-delay: 0.06667s;
    -webkit-transition-delay: 0.06667s;
    transition-delay: 0.06667s
}

.share ul li:nth-of-type(2) {
    -moz-transition-duration: 0.1s;
    -o-transition-duration: 0.1s;
    -webkit-transition-duration: 0.1s;
    transition-duration: 0.1s;
    -moz-transition-delay: 0.13333s;
    -o-transition-delay: 0.13333s;
    -webkit-transition-delay: 0.13333s;
    transition-delay: 0.13333s
}

.share ul li:nth-of-type(3) {
    -moz-transition-duration: 0.1s;
    -o-transition-duration: 0.1s;
    -webkit-transition-duration: 0.1s;
    transition-duration: 0.1s;
    -moz-transition-delay: 0.2s;
    -o-transition-delay: 0.2s;
    -webkit-transition-delay: 0.2s;
    transition-delay: 0.2s
}

.share ul li:nth-of-type(4) {
    -moz-transition-duration: 0.1s;
    -o-transition-duration: 0.1s;
    -webkit-transition-duration: 0.1s;
    transition-duration: 0.1s;
    -moz-transition-delay: 0.26667s;
    -o-transition-delay: 0.26667s;
    -webkit-transition-delay: 0.26667s;
    transition-delay: 0.26667s
}

.share ul li:nth-of-type(5) {
    -moz-transition-duration: 0.1s;
    -o-transition-duration: 0.1s;
    -webkit-transition-duration: 0.1s;
    transition-duration: 0.1s;
    -moz-transition-delay: 0.33333s;
    -o-transition-delay: 0.33333s;
    -webkit-transition-delay: 0.33333s;
    transition-delay: 0.33333s
}

.share ul li:nth-of-type(6) {
    -moz-transition-duration: 0.1s;
    -o-transition-duration: 0.1s;
    -webkit-transition-duration: 0.1s;
    transition-duration: 0.1s;
    -moz-transition-delay: 0.4s;
    -o-transition-delay: 0.4s;
    -webkit-transition-delay: 0.4s;
    transition-delay: 0.4s
}

.share ul li:nth-of-type(7) {
    -moz-transition-duration: 0.1s;
    -o-transition-duration: 0.1s;
    -webkit-transition-duration: 0.1s;
    transition-duration: 0.1s;
    -moz-transition-delay: 0.46667s;
    -o-transition-delay: 0.46667s;
    -webkit-transition-delay: 0.46667s;
    transition-delay: 0.46667s
}

.share ul li:nth-of-type(8) {
    -moz-transition-duration: 0.1s;
    -o-transition-duration: 0.1s;
    -webkit-transition-duration: 0.1s;
    transition-duration: 0.1s;
    -moz-transition-delay: 0.53333s;
    -o-transition-delay: 0.53333s;
    -webkit-transition-delay: 0.53333s;
    transition-delay: 0.53333s
}

.share ul li:nth-of-type(9) {
    -moz-transition-duration: 0.1s;
    -o-transition-duration: 0.1s;
    -webkit-transition-duration: 0.1s;
    transition-duration: 0.1s;
    -moz-transition-delay: 0.6s;
    -o-transition-delay: 0.6s;
    -webkit-transition-delay: 0.6s;
    transition-delay: 0.6s
}

.share ul li:nth-of-type(10) {
    -moz-transition-duration: 0.1s;
    -o-transition-duration: 0.1s;
    -webkit-transition-duration: 0.1s;
    transition-duration: 0.1s;
    -moz-transition-delay: 0.66667s;
    -o-transition-delay: 0.66667s;
    -webkit-transition-delay: 0.66667s;
    transition-delay: 0.66667s
}

.share ul li {
    position: relative;
    -moz-transform: translate(66px, 0);
    -ms-transform: translate(66px, 0);
    -webkit-transform: translate(66px, 0);
    transform: translate(66px, 0);
    display: inline-block;
    margin-right: 10px;
    margin-top: 9px;
    width: 40px;
    height: 40px
}

.share ul li a {
    display: inline-block;
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid #232323;
    margin-top: -4px
}

.share ul li a:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    z-index: -1;
    background-color: #00aeef;
    -moz-transform: translate(-50%, -50%) scale(0);
    -ms-transform: translate(-50%, -50%) scale(0);
    -webkit-transform: translate(-50%, -50%) scale(0);
    transform: translate(-50%, -50%) scale(0);
    border-radius: 50%
}

.share ul li a svg {
    position: absolute;
    width: 33px;
    height: 33px;
    display: inline-block;
    top: 4px;
    left: 4px
}

.share ul li a svg path {
    fill: #232323
}

.share ul li a:hover {
    border-color: #fff
}

.share ul li a:hover:before {
    -moz-transform: translate(-50%, -50%) scale(1);
    -ms-transform: translate(-50%, -50%) scale(1);
    -webkit-transform: translate(-50%, -50%) scale(1);
    transform: translate(-50%, -50%) scale(1)
}

.share ul li a:hover svg path {
    fill: #fff
}

.share:hover ul {
    max-width: 1000px;
    padding-right: 20px;
    -moz-transition: ease-in-out 0s 0s;
    -o-transition: ease-in-out 0s 0s;
    -webkit-transition: ease-in-out 0s;
    -webkit-transition-delay: 0s;
    transition: ease-in-out 0s 0s;
    opacity: 1
}

.share:hover ul li {
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0)
}

.share.bottom {
    bottom: 30px
}

.share.right {
    right: 30px
}

.share.top {
    top: 30px
}

.share.left {
    left: 30px
}

.mobile-follow {
    display: none
}

@media screen and (max-width: 800px) {
    .mobile-follow {
        display: block;
        position: relative;
        padding: 45px 0;
        padding-left: 5px;
        overflow: visible;
        background-color: #f7f7f7;
        text-align: center
    }
}

.mobile-follow span,
.mobile-follow ul {
    display: inline-block
}

.mobile-follow span {
    font-family: "latoblack", sans-serif;
    font-size: 13px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: #8f8f8f;
    position: relative;
    -moz-transform: translate(-10px, -15px);
    -ms-transform: translate(-10px, -15px);
    -webkit-transform: translate(-10px, -15px);
    transform: translate(-10px, -15px)
}

@media screen and (max-width: 800px) {
    .mobile-follow span {
        display: block;
        -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
        padding-bottom: 10px
    }
}

.mobile-follow a {
    border-color: #8f8f8f !important
}

.mobile-follow a * {
    border-color: #8f8f8f;
    fill: #8f8f8f !important
}

.mobile-follow a:hover {
    background-color: #00aeef;
    border-color: #00aeef !important
}

.mobile-follow a:hover * {
    color: #fff;
    fill: #fff !important
}

footer {
    width: 100%;
    bottom: 0;
    background-color: #ccc;
    box-sizing: border-box;
    text-align: center;
    display: block;
    position: relative;
    height: 100px;
    z-index: 10;
    overflow: visible
}

footer a {
    color: #fff;
    text-decoration: none
}

footer a:hover {
    color: #232323
}

footer span {
    height: 100%;
    padding: 0 60px;
    padding-top: 35px;
    box-sizing: border-box;
    display: inline-block;
    font-size: 14px;
    line-height: 18px;
    overflow: visible;
    font-family: "latoregular", sans-serif;
    color: #fff;
    width: 100%
}

@media screen and (max-width: 600px) {

    footer span:first-of-type,
    footer span:last-of-type {
        float: none
    }
}

@media screen and (max-width: 600px) {
    footer span {
        display: block;
        padding-top: 25px;
        font-size: 14px
    }
}

footer .button {
    position: absolute;
    display: inline-block;
    background-color: #ccc;
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    border: 2px solid #fff;
    cursor: pointer;
    box-shadow: 0 0 0 10px #ccc;
    border-radius: 50%;
    padding: 0;
    width: 30px;
    height: 30px;
    left: 50%;
    top: 0
}

footer .button:hover {
    background-color: #fff
}

footer .button:hover i {
    background-color: #ccc
}

footer .button:hover i:before,
footer .button:hover i:after {
    background-color: #ccc
}

footer .button i,
footer .button i:before,
footer .button i:after {
    position: absolute;
    -moz-transform-origin: top center;
    -ms-transform-origin: top center;
    -webkit-transform-origin: top center;
    transform-origin: top center;
    -moz-backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    background-color: #fff;
    width: 2px;
    border-radius: 2px
}

footer .button i {
    height: 15px;
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%
}

footer .button i:before,
footer .button i:after {
    content: "";
    height: 10px;
    margin-left: -1px
}

footer .button i:before {
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg)
}

footer .button i:after {
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg)
}

.preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 100000;
    -moz-transition: all 0.3s ease-in-out, left 0s linear 0.4s;
    -o-transition: all 0.3s ease-in-out, left 0s linear 0.4s;
    -webkit-transition: all 0.3s ease-in-out, left 0s linear;
    -webkit-transition-delay: 0s, 0.4s;
    transition: all 0.3s ease-in-out, left 0s linear 0.4s;
    box-sizing: border-box;
    display: none !important
}

.preloader .top,
.preloader .right,
.preloader .bottom,
.preloader .left {
    position: absolute;
    background-color: #1ab6f1;
    display: inline-block;
    -moz-transition: all 0s linear;
    -o-transition: all 0s linear;
    -webkit-transition: all 0s linear;
    transition: all 0s linear;
    opacity: 0
}

@media screen and (max-width: 1024px),
(max-height: 600px) {

    .preloader .top.top,
    .preloader .top.bottom,
    .preloader .right.top,
    .preloader .right.bottom,
    .preloader .bottom.top,
    .preloader .bottom.bottom,
    .preloader .left.top,
    .preloader .left.bottom {
        height: 10px
    }

    .preloader .top.left,
    .preloader .top.right,
    .preloader .right.left,
    .preloader .right.right,
    .preloader .bottom.left,
    .preloader .bottom.right,
    .preloader .left.left,
    .preloader .left.right {
        width: 10px
    }
}

.preloader .top {
    top: 0;
    left: 0;
    width: 100%;
    height: 20px;
    -moz-transform-origin: left top;
    -ms-transform-origin: left top;
    -webkit-transform-origin: left top;
    transform-origin: left top
}

.preloader .right {
    top: 0;
    right: 0;
    width: 20px;
    height: 100%;
    -moz-transform-origin: top right;
    -ms-transform-origin: top right;
    -webkit-transform-origin: top right;
    transform-origin: top right
}

.preloader .bottom {
    bottom: 0;
    right: 0;
    width: 100%;
    height: 20px;
    -moz-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom
}

.preloader .left {
    bottom: 0;
    left: 0;
    width: 20px;
    height: 100%;
    -moz-transform-origin: bottom left;
    -ms-transform-origin: bottom left;
    -webkit-transform-origin: bottom left;
    transform-origin: bottom left
}

.preloader.finished {
    left: 300%;
    opacity: 0;
    -moz-transform: scale(1.1, 1.1);
    -ms-transform: scale(1.1, 1.1);
    -webkit-transform: scale(1.1, 1.1);
    transform: scale(1.1, 1.1);
    display: none
}

#age-gate {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000000;
    background-color: rgba(255, 255, 255, 0.8)
}

#age-gate .request,
#age-gate .sorry {
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    position: absolute;
    display: inline-block;
    text-align: center;
    top: 50%;
    left: 50%
}

#age-gate .request h1,
#age-gate .request h2,
#age-gate .sorry h1,
#age-gate .sorry h2 {
    color: #fff;
    font-family: sans-serif
}

#age-gate .request h1,
#age-gate .sorry h1 {
    font-size: 28px;
    line-height: 32px
}

#age-gate .request h2,
#age-gate .sorry h2 {
    font-size: 21px;
    line-height: 24px
}

#age-gate .request li,
#age-gate .sorry li {
    display: inline-block;
    max-width: 400px;
    padding: 30px
}

#age-gate .request li+li,
#age-gate .sorry li+li {
    padding-left: 0
}

#age-gate .request li select,
#age-gate .sorry li select {
    margin-top: 10px;
    width: 100%
}

#age-gate .request .button,
#age-gate .sorry .button {
    font-size: 21px;
    line-height: 24px;
    font-family: sans-serif;
    position: relative;
    display: inline-block;
    padding: 10px 15px;
    cursor: pointer;
    color: #000;
    background-color: #fff
}

#age-gate .request select,
#age-gate .sorry select {
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: #fff;
    color: #000;
    border: none;
    outline: none;
    padding: 10px;
    position: relative;
    border-radius: 0;
    box-shadow: none;
    text-align: right;
    cursor: pointer;
    padding-right: 25px
}

#age-gate .request select+i,
#age-gate .sorry select+i {
    content: "";
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    position: absolute;
    border-top: 7px solid #000;
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
    margin-top: 28px;
    margin-left: -10px;
    pointer-events: none
}

.button-modal {
    position: fixed;
    display: inline-block;
    padding: 20px 40px;
    z-index: 500;
    overflow: hidden;
    border: 2px solid #00aeef;
    border-radius: 4px;
    background-color: transparent;
    text-align: center;
    box-sizing: border-box;
    -moz-transition: all 0.25s cubic-bezier(0, 0.01, 0, 1);
    -o-transition: all 0.25s cubic-bezier(0, 0.01, 0, 1);
    -webkit-transition: all 0.25s cubic-bezier(0, 0.01, 0, 1);
    transition: all 0.25s cubic-bezier(0, 0.01, 0, 1);
    opacity: 0;
    padding: 20px 40px;
    border-radius: 4px
}

.button-modal:before {
    background-color: #00aeef
}

.button-modal div {
    max-width: 700px;
    text-align: center
}

.button-modal h1,
.button-modal p,
.button-modal i {
    -moz-transition: all 0.25s cubic-bezier(0, 0.01, 0, 1);
    -o-transition: all 0.25s cubic-bezier(0, 0.01, 0, 1);
    -webkit-transition: all 0.25s cubic-bezier(0, 0.01, 0, 1);
    transition: all 0.25s cubic-bezier(0, 0.01, 0, 1)
}

.button-modal h1 {
    font-size: 15px;
    letter-spacing: 4px;
    color: #fff;
    font-family: "latoblack", sans-serif;
    text-transform: uppercase
}

@media screen and (max-width: 800px) {
    .button-modal h1 {
        font-size: 18px
    }
}

.button-modal p {
    display: none;
    font-size: 15px;
    line-height: 30px;
    letter-spacing: 0.04em
}

@media screen and (max-width: 800px) {
    .button-modal p {
        padding: 0;
        font-size: 16px;
        line-height: 28px
    }
}

.button-modal.visible {
    background-color: #00aeef;
    opacity: 1
}

.button-modal.visible p {
    max-width: 800px;
    padding: 30px 0;
    box-sizing: border-box;
    font-family: "latoregular", sans-serif;
    text-align: left;
    position: relative
}

@media screen and (max-width: 800px) {
    .button-modal.visible p {
        padding: 5px 0
    }
}

.button-modal.full {
    overflow: scroll !important;
    background-color: #00aeef;
    border-color: #fff !important;
    border-radius: 0 !important
}

.button-modal.full:before {
    background-color: #00aeef
}

@media screen and (max-width: 800px) {
    .button-modal.full {
        padding: 0 20px 0 0
    }
}

.button-modal.full div {
    text-align: left;
    padding: 30px;
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    max-height: 100%;
    position: relative;
    top: 50%;
    left: 50%
}

@media screen and (max-width: 800px) {
    .button-modal.full div {
        -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
        left: 0;
        top: 0
    }
}

.button-modal.full h1 {
    font-size: 30px;
    display: inline-block;
    padding-bottom: 5px;
    margin-bottom: 30px;
    margin-top: 0px;
    border-bottom: 2px solid #fff;
    letter-spacing: 12px;
    position: relative;
    left: 50%;
    -moz-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0)
}

@media screen and (max-width: 800px) {
    .button-modal.full h1 {
        letter-spacing: 0.3em;
        margin-top: 30px;
        margin-bottom: 30px;
        padding: 0 0 5px 0;
        border: none;
        font-size: 18px;
        left: 0;
        -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0)
    }
}

.button-modal.full p {
    display: block
}

.button-modal.full i {
    display: inline-block;
    position: fixed
}

.button-modal.full-border {
    border-width: 20px
}

@media screen and (max-width: 800px) {
    .button-modal.full-border {
        border-width: 10px
    }
}

.button-modal.highlight {
    color: #fff;
    border-color: #00aeef
}

.button-modal.highlight:before {
    -moz-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
    opacity: 1
}

.button-modal:before {
    content: "";
    width: 100%;
    height: 100%;
    background-color: #00aeef;
    -moz-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
    -moz-transform-origin: left center;
    -ms-transform-origin: left center;
    -webkit-transform-origin: left center;
    transform-origin: left center;
    position: absolute;
    opacity: 0;
    z-index: -1;
    top: 0;
    left: 0
}

.button-modal i {
    display: none;
    position: absolute;
    cursor: pointer;
    top: 40px;
    right: 40px;
    width: 30px;
    height: 30px
}

@media screen and (max-width: 800px) {
    .button-modal i {
        top: 30px;
        right: 30px
    }
}

.button-modal i:before,
.button-modal i:after {
    content: "";
    width: 100%;
    height: 2px;
    background-color: #fff;
    position: absolute;
    top: 50%;
    left: 50%
}

.button-modal i:before {
    -moz-transform: translate(-50%, -50%) rotate(-45deg);
    -ms-transform: translate(-50%, -50%) rotate(-45deg);
    -webkit-transform: translate(-50%, -50%) rotate(-45deg);
    transform: translate(-50%, -50%) rotate(-45deg)
}

.button-modal i:after {
    -moz-transform: translate(-50%, -50%) rotate(45deg);
    -ms-transform: translate(-50%, -50%) rotate(45deg);
    -webkit-transform: translate(-50%, -50%) rotate(45deg);
    transform: translate(-50%, -50%) rotate(45deg)
}

.popup-button {
    font-size: 15px;
    letter-spacing: 4px;
    color: #00aeef;
    padding: 20px 40px;
    border-radius: 4px;
    border: 2px solid #00aeef;
    box-sizing: border-box;
    font-family: "latoblack", sans-serif;
    text-transform: uppercase;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    text-align: center;
    padding: 20px 40px;
    border-radius: 4px
}

.popup-button .data-title,
.popup-button .data-message {
    display: none
}

.popup-button:before {
    content: "";
    width: 100%;
    height: 100%;
    background-color: #00aeef;
    -moz-transform-origin: left center;
    -ms-transform-origin: left center;
    -webkit-transform-origin: left center;
    transform-origin: left center;
    position: absolute;
    opacity: 0;
    z-index: -1;
    top: 0;
    left: 0
}

.popup-button:hover {
    color: #fff
}

.popup-button:hover:before {
    opacity: 1
}

.carousel {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.carousel .left,
.carousel .right {
    position: relative;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    box-sizing: border-box;
    border: 2px solid #00aeef;
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    padding: 0;
    font-size: 0;
    letter-spacing: 0;
    line-height: 0
}

.carousel .left.left:before,
.carousel .left.right:before,
.carousel .right.left:before,
.carousel .right.right:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -moz-backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    opacity: 1
}

.carousel .left.left:before,
.carousel .right.left:before {
    border-right: 8px solid #00aeef;
    margin-left: -2px
}

.carousel .left.right:before,
.carousel .right.right:before {
    border-left: 8px solid #00aeef;
    margin-left: 2px
}

.carousel menu {
    position: relative;
    width: 100%;
    text-align: center
}

.carousel menu b {
    display: inline-block;
    position: relative;
    width: 20px;
    height: 20px;
    margin: -1px
}

.carousel menu b:before,
.carousel menu b:after {
    content: "";
    position: absolute;
    -moz-backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    width: 8px;
    height: 8px
}

.carousel menu b:before {
    -moz-transform: translate(-50%, -50%) scale(1);
    -ms-transform: translate(-50%, -50%) scale(1);
    -webkit-transform: translate(-50%, -50%) scale(1);
    transform: translate(-50%, -50%) scale(1);
    background-color: #777;
    -moz-transition-delay: 0.1s;
    -o-transition-delay: 0.1s;
    -webkit-transition-delay: 0.1s;
    transition-delay: 0.1s;
    opacity: 0.3
}

.carousel menu b:after {
    -moz-transform: translate(-50%, -50%) scale(0);
    -ms-transform: translate(-50%, -50%) scale(0);
    -webkit-transform: translate(-50%, -50%) scale(0);
    transform: translate(-50%, -50%) scale(0);
    -moz-transition-delay: 0.2s;
    -o-transition-delay: 0.2s;
    -webkit-transition-delay: 0.2s;
    transition-delay: 0.2s;
    background-color: #00aeef;
    opacity: 0
}

.carousel menu b.active:after {
    -moz-transform: translate(-50%, -50%) scale(1);
    -ms-transform: translate(-50%, -50%) scale(1);
    -webkit-transform: translate(-50%, -50%) scale(1);
    transform: translate(-50%, -50%) scale(1);
    opacity: 1
}

.carousel menu b.active:before {
    -moz-transform: translate(-50%, -50%) scale(0);
    -ms-transform: translate(-50%, -50%) scale(0);
    -webkit-transform: translate(-50%, -50%) scale(0);
    transform: translate(-50%, -50%) scale(0);
    opacity: 0
}

.carousel.no-arrows .left,
.carousel.no-arrows .right,
.carousel.no-arrows menu {
    display: none
}

@media screen and (max-width: 800px) {
    main {
        margin-top: 60px
    }
}

header {
    position: fixed;
    pointer-events: none;
    height: 105px;
    z-index: 98;
    top: 0px;
    left: 0px;
    right: 0px
}

header #logo-flat,
header #logo-png {
    left: 50%;
    margin-left: -72px
}

@media screen and (max-width: 800px) {

    header #logo-flat,
    header #logo-png {
        margin-left: 0
    }
}

header #logo-flat {
    display: none !important
}

header #logo-png .white,
header #logo-png .gradient {
    width: 100%;
    height: 100%;
    position: absolute;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat
}

header #logo-png .white {
    opacity: 1
}

header #logo-png .gradient {
    opacity: 0
}

header #nav-control,
header #logo-flat,
header #logo-png,
header #language,
header .share,
header nav {
    pointer-events: auto
}

header.collapsed {
    background-color: #fff;
    pointer-events: auto;
    top: -20px
}

header.collapsed #nav-control {
    margin-top: -18px;
    height: 60px
}

@media screen and (max-width: 800px) {
    header.collapsed #nav-control {
        height: 55px;
        margin-top: -16px
    }
}

header.collapsed #logo-flat,
header.collapsed #logo-png {
    margin-top: -20px
}

header.collapsed #logo-flat .bottom,
header.collapsed #logo-png .bottom {
    fill: #000
}

header.collapsed #language {
    color: #232323;
    top: 40px
}

header.collapsed #language+i {
    border-top-color: #232323;
    top: 44px
}

header.collapsed .share {
    top: 36px;
    right: 40px
}

header.collapsed #logo-png .white {
    opacity: 0
}

header.collapsed #logo-png .gradient {
    opacity: 1
}

header.dark #logo-flat .bottom,
header.dark #logo-png .bottom {
    fill: #000
}

header.dark #language {
    color: #232323
}

header.dark #language+i {
    border-top-color: #232323
}

header.dark .share * {
    border-color: #232323 !important;
    fill: #232323 !important
}

@media screen and (max-width: 800px) {
    header {
        background-color: #fff;
        pointer-events: auto;
        top: -20px
    }

    header #nav-control {
        margin-top: -18px;
        height: 60px
    }
}

@media screen and (max-width: 800px) and (max-width: 800px) {
    header #nav-control {
        height: 55px;
        margin-top: -16px
    }
}

@media screen and (max-width: 800px) {

    header #logo-flat,
    header #logo-png {
        margin-top: -20px
    }

    header #language {
        top: 40px
    }

    header #language+i {
        top: 44px
    }

    header .share {
        display: none;
        top: 36px;
        right: 40px
    }

    header .share * {
        border-color: #999 !important;
        fill: #999 !important
    }
}

header .share {
    border-color: #999 !important;
    position: absolute !important;
    right: 40px;
    top: 40px
}

header .share:hover {
    background-color: #999 !important
}

header .share * {
    border-color: #999 !important;
    color: #999 !important;
    fill: #999 !important
}

header .share .social-buttons {
    margin-top: 0 !important;
    margin-left: 0 !important
}

#language,
#region,
.site-wrapper[data-page="geometrywars"] .platforms #retailer {
    -webkit-appearance: none;
    -moz-appearance: menulist-text;
    display: inline-block;
    text-transform: uppercase;
    color: #fff;
    outline: 3px solid transparent;
    border: none;
    border-radius: 0;
    padding: 12px 20px;
    position: absolute;
    right: 225px;
    top: 45px;
    box-shadow: none;
    text-align: left;
    letter-spacing: 3px;
    padding-right: 35px;
    cursor: pointer;
    font-family: "latoblack", sans-serif;
    font-size: 16px;
    background-color: transparent;
    outline-offset: 0 !important;
    z-index: 100
}

@media screen and (max-width: 800px) {

    #language,
    #region,
    .site-wrapper[data-page="geometrywars"] .platforms #retailer {
        color: #232323;
        right: 14px
    }
}

#language+i,
#region+i,
.site-wrapper[data-page="geometrywars"] .platforms #retailer+i {
    -moz-transform: translate(-50%, -50%) rotate(0deg);
    -ms-transform: translate(-50%, -50%) rotate(0deg);
    -webkit-transform: translate(-50%, -50%) rotate(0deg);
    transform: translate(-50%, -50%) rotate(0deg);
    position: absolute;
    border-top: 8px solid #fff;
    border-right: 6px solid transparent;
    border-left: 6px solid transparent;
    top: 47px;
    margin-top: 20px;
    right: 230px;
    pointer-events: none;
    z-index: 100
}

@media screen and (max-width: 800px) {

    #language+i,
    #region+i,
    .site-wrapper[data-page="geometrywars"] .platforms #retailer+i {
        border-top-color: #232323;
        right: 20px
    }
}

#language:hover+i,
#region:hover+i,
.site-wrapper[data-page="geometrywars"] .platforms #retailer:hover+i {
    -moz-transform: translate(-50%, -50%) rotate(90deg);
    -ms-transform: translate(-50%, -50%) rotate(90deg);
    -webkit-transform: translate(-50%, -50%) rotate(90deg);
    transform: translate(-50%, -50%) rotate(90deg)
}

#language::-ms-expand,
#region::-ms-expand,
.site-wrapper[data-page="geometrywars"] .platforms #retailer::-ms-expand {
    display: none
}

#logo-flat,
#logo-png {
    -moz-transition: all 0.25s ease-in-out;
    -o-transition: all 0.25s ease-in-out;
    -webkit-transition: all 0.25s ease-in-out;
    transition: all 0.25s ease-in-out;
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
    display: inline-block;
    width: 145px;
    height: 58px;
    position: absolute;
    font-size: 32px;
    color: #000;
    font-weight: 900;
    font-family: sans-serif;
    top: 53px;
    left: 140px;
    z-index: 100
}

#logo-flat.blue-black .top,
#logo-png.blue-black .top {
    fill: #00aeef
}

#logo-flat.blue-black .bottom,
#logo-png.blue-black .bottom {
    fill: #000
}

#logo-flat .top,
#logo-flat .bottom,
#logo-png .top,
#logo-png .bottom {
    position: absolute
}

#logo-flat .top,
#logo-png .top {
    fill: #00aeef;
    width: 52px;
    height: 30px;
    left: 45px;
    top: 1px
}

#logo-flat .bottom,
#logo-png .bottom {
    fill: #fff;
    width: 150px;
    height: 36px;
    top: 25px;
    left: -10px
}

@media screen and (max-width: 800px) {

    #logo-flat .bottom,
    #logo-png .bottom {
        fill: #000
    }
}

@media screen and (max-width: 800px) {

    #logo-flat,
    #logo-png {
        left: 50%;
        -moz-transform: translate(-50%, 0) scale(0.75);
        -ms-transform: translate(-50%, 0) scale(0.75);
        -webkit-transform: translate(-50%, 0) scale(0.75);
        transform: translate(-50%, 0) scale(0.75)
    }
}

#nav-control {
    -moz-transition-duration: 0.2s;
    -o-transition-duration: 0.2s;
    -webkit-transition-duration: 0.2s;
    transition-duration: 0.2s;
    -moz-transition-delay: 0s;
    -o-transition-delay: 0s;
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    position: absolute;
    top: 50px;
    left: 50px;
    width: 65px;
    height: 65px;
    background-color: #00aeef;
    border-radius: 6px;
    cursor: pointer;
    z-index: 100
}

@media screen and (max-width: 800px) {
    #nav-control {
        width: 55px;
        height: 55px;
        left: 20px
    }
}

#nav-control:before,
#nav-control:after {
    -moz-transition-duration: 0.2s;
    -o-transition-duration: 0.2s;
    -webkit-transition-duration: 0.2s;
    transition-duration: 0.2s;
    -moz-transition-delay: 0s;
    -o-transition-delay: 0s;
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
    -moz-backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    content: "";
    width: 30px;
    height: 2px;
    background-color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -15px;
    margin-top: 0
}

@media screen and (max-width: 800px) {

    #nav-control:before,
    #nav-control:after {
        width: 26px;
        margin-left: -13px
    }
}

#nav-control:before {
    box-shadow: 0 10px 0 #fff
}

@media screen and (max-width: 800px) {
    #nav-control:before {
        box-shadow: 0 8px 0 #fff
    }
}

#nav-control:after {
    -moz-transform: translate(0, -10px);
    -ms-transform: translate(0, -10px);
    -webkit-transform: translate(0, -10px);
    transform: translate(0, -10px)
}

@media screen and (max-width: 800px) {
    #nav-control:after {
        -moz-transform: translate(0, -8px);
        -ms-transform: translate(0, -8px);
        -webkit-transform: translate(0, -8px);
        transform: translate(0, -8px)
    }
}

nav {
    -moz-transform: translate(0, -100%);
    -ms-transform: translate(0, -100%);
    -webkit-transform: translate(0, -100%);
    transform: translate(0, -100%);
    -moz-transition: all 0s cubic-bezier(0.46, 0.01, 0.14, 1.35) 0.25s, opacity 0.25s ease-in-out;
    -o-transition: all 0s cubic-bezier(0.46, 0.01, 0.14, 1.35) 0.25s, opacity 0.25s ease-in-out;
    -webkit-transition: all 0s cubic-bezier(0.46, 0.01, 0.14, 1.35), opacity 0.25s ease-in-out;
    -webkit-transition-delay: 0.25s, 0s;
    transition: all 0s cubic-bezier(0.46, 0.01, 0.14, 1.35) 0.25s, opacity 0.25s ease-in-out;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    background-color: #00aeef;
    color: #fff;
    z-index: 99;
    box-sizing: border-box;
    border: 20px solid #fff;
    padding-top: 20px;
    display: none
}

@media screen and (max-width: 1025px) {
    nav {
        border: 10px solid #fff;

    }
}

nav a {
    display: inline-block;
    padding: 10px 0px;
    margin: 18px 0 0 60px;
    line-height: 40px;
    font-size: 42px;
    letter-spacing: 3px;
    color: #fff;
    font-family: "latoblack", sans-serif;
    text-transform: uppercase;
    text-decoration: none;
    position: relative;
    -moz-backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -moz-transform-origin: center center;
    -ms-transform-origin: center center;
    -webkit-transform-origin: center center;
    transform-origin: center center;
    opacity: 0;
    z-index: 1
}

@media screen and (max-width: 800px) {
    nav a {
        font-size: 30px;
        line-height: 30px
    }
}

nav a:first-of-type {
    margin-top: 150px
}

@media screen and (max-width: 800px) {
    nav a:first-of-type {
        margin-top: 90px
    }
}

nav a:before {
    content: "";
    -moz-backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -moz-transition-duration: 0.35s;
    -o-transition-duration: 0.35s;
    -webkit-transition-duration: 0.35s;
    transition-duration: 0.35s;
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #fff;
    bottom: 2px;
    z-index: -1
}

nav a+div {
    background-position: center center;
    display: block;
    font-size: 0;
    line-height: 0;
    position: absolute;
    opacity: 0;
    z-index: -1
}

nav a+div:before,
nav a+div:after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    top: 0
}

nav a+div:after {
    opacity: 0.2;
    background-image: inherit;
    background-position: center center;
    background-size: cover
}

nav a+div:before {
    background-color: #00aeef;
    opacity: 1
}

nav a:hover {
    color: #00aeef
}

nav a:hover:before {
    padding: 0px 15px;
    margin-bottom: -3px;
    margin-left: -15px;
    height: 100%
}

nav a:hover+div {
    opacity: 1;
    position: absolute;
    bottom: 0px;
    right: 0px;
    left: 0px;
    top: 0px
}

@media screen and (max-width: 800px) {
    nav a {
        display: block;
        font-size: 36;
        padding: 15px 15px;
        margin: -20px 0 0 0
    }
}

header.open.collapsed {
    background-color: #fff;
    top: 0px
}

header.open.collapsed #nav-control {
    margin-top: 0;
    height: 65px
}

@media screen and (max-width: 800px) {
    header.open.collapsed #nav-control {
        height: 55px
    }
}

header.open.collapsed #logo-flat,
header.open.collapsed #logo-png {
    margin-top: 0px
}

header.open.collapsed #language {
    top: 60px
}

header.open.collapsed #language+i {
    top: 64px
}

header.open.collapsed .share {
    top: 56px
}

@media screen and (max-width: 800px) {
    header.open {
        background-color: #fff
    }

    header.open #nav-control {
        margin-top: 0;
        height: 65px
    }
}

@media screen and (max-width: 800px) and (max-width: 800px) {
    header.open #nav-control {
        height: 55px
    }
}

@media screen and (max-width: 800px) {

    header.open #logo-flat,
    header.open #logo-png {
        margin-top: 0px
    }

    header.open #language {
        top: 60px
    }

    header.open #language+i {
        top: 64px
    }

    header.open .share {
        top: 56px
    }
}

header.open #language {
    color: #fff
}

header.open #language+i {
    border-top-color: #fff
}

header.open .share a {
    border-color: #fff !important
}

header.open .share svg path {
    fill: #fff !important
}

header.open nav {
    -moz-transition: all 0s ease 0s, opacity 0.25s ease-in-out;
    -o-transition: all 0s ease 0s, opacity 0.25s ease-in-out;
    -webkit-transition: all 0s ease, opacity 0.25s ease-in-out;
    -webkit-transition-delay: 0s, 0s;
    transition: all 0s ease 0s, opacity 0.25s ease-in-out;
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    opacity: 1;
    display: block;
    overflow-y: scroll;
}

header.open nav .geometrywars {
    font-size: 2.2em
}

@media screen and (max-width: 940px) {
    header.open nav .geometrywars {
        font-size: 2em
    }
}

@media screen and (max-width: 800px) {
    header.open nav .geometrywars {
        font-size: 1.2em
    }
}

header.open nav a {
    display: inline-block
}

@media screen and (max-width: 800px) {
    header.open nav a {
        display: block
    }
}

header.open nav a:nth-of-type(1) {
    -moz-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    opacity: 1
}

header.open nav a:nth-of-type(2) {
    -moz-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    opacity: 1
}

header.open nav a:nth-of-type(3) {
    -moz-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    opacity: 1
}

header.open nav a:nth-of-type(4) {
    -moz-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    opacity: 1
}

header.open nav a:nth-of-type(5) {
    -moz-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    opacity: 1
}

header.open nav a:nth-of-type(6) {
    -moz-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    opacity: 1
}

header.open nav a:nth-of-type(7) {
    -moz-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    opacity: 1
}

header.open nav a:nth-of-type(8) {
    -moz-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    opacity: 1
}

header.open nav a:nth-of-type(9) {
    -moz-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    opacity: 1
}

header.open nav a:nth-of-type(10) {
    -moz-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    opacity: 1
}

header.open nav+#nav-control {
    background-color: #000
}

header.open nav+#nav-control:before,
header.open nav+#nav-control:after {
    background-color: #fff
}

header.open nav+#nav-control:before {
    box-shadow: 0 0 0 #fff;
    -moz-transform: rotate(225deg);
    -ms-transform: rotate(225deg);
    -webkit-transform: rotate(225deg);
    transform: rotate(225deg)
}

header.open nav+#nav-control:after {
    -moz-transform: rotate(315deg);
    -ms-transform: rotate(315deg);
    -webkit-transform: rotate(315deg);
    transform: rotate(315deg)
}

header.open nav~#logo-png {
    display: none !important
}

header.open nav~#logo-flat {
    opacity: 1 !important;
    display: inline-block !important
}

header.open nav~#logo-flat .top,
header.open nav~#logo-flat .bottom {
    fill: #fff
}

header.open nav~main {
    pointer-events: none
}

.no-scroll {
    overflow: hidden
}

.no-scroll body,
.no-scroll .site-wrapper {
    overflow: hidden
}

html {
    min-height: 100%
}

html.open {
    overflow: hidden
}

.site-wrapper {
    position: relative;
    overflow: hidden !important
}

body {
    box-sizing: border-box;
    border: 20px solid #fff
}

@media screen and (max-width: 800px) {
    body {
        border: 10px solid #fff
    }
}

.modal-open iframe {
    display: none !important
}

.youtube iframe {
    width: 100%;
    height: 100%
}

main {
    position: relative;
    text-align: center
}

main h1 {
    font-family: "latoblack", sans-serif;
    font-size: 28px;
    line-height: 32px
}

main h2 {
    font-family: "latoblack", sans-serif;
    font-size: 21px;
    line-height: 24px
}

main p {
    font-family: "latoregular", sans-serif;
    font-size: 22px;
    line-height: 30px
}

main .image-div {
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out
}

main .image-div img {
    position: absolute;
    opacity: 0
}

main .pagehead,
main .videos,
main .screenshots,
main .features,
main .developers,
main .platforms,
main .explore,
main .accolades,
main .purchase-options,
main .collection-promo,
main .media,
main .sections,
main .about {
    position: relative;
    display: block;
    box-sizing: border-box;
    width: 100%;
    overflow: hidden
}

main .pagehead h2,
main .videos h2,
main .screenshots h2,
main .features h2,
main .developers h2,
main .platforms h2,
main .explore h2,
main .accolades h2,
main .purchase-options h2,
main .collection-promo h2,
main .media h2,
main .sections h2,
main .about h2 {
    position: relative;
    display: inline-block;
    font-size: 26px;
    line-height: 26px;
    text-transform: uppercase;
    color: #00aeef;
    letter-spacing: 6px;
    padding: 6px 0;
    margin-bottom: 60px
}

@media screen and (max-width: 800px) {

    main .pagehead h2,
    main .videos h2,
    main .screenshots h2,
    main .features h2,
    main .developers h2,
    main .platforms h2,
    main .explore h2,
    main .accolades h2,
    main .purchase-options h2,
    main .collection-promo h2,
    main .media h2,
    main .sections h2,
    main .about h2 {
        font-size: 18px;
        letter-spacing: 5px;
        line-height: 24px
    }
}

main .pagehead h2:before,
main .pagehead h2:after,
main .videos h2:before,
main .videos h2:after,
main .screenshots h2:before,
main .screenshots h2:after,
main .features h2:before,
main .features h2:after,
main .developers h2:before,
main .developers h2:after,
main .platforms h2:before,
main .platforms h2:after,
main .explore h2:before,
main .explore h2:after,
main .accolades h2:before,
main .accolades h2:after,
main .purchase-options h2:before,
main .purchase-options h2:after,
main .collection-promo h2:before,
main .collection-promo h2:after,
main .media h2:before,
main .media h2:after,
main .sections h2:before,
main .sections h2:after,
main .about h2:before,
main .about h2:after {
    content: ""
}

main .pagehead h2:before,
main .videos h2:before,
main .screenshots h2:before,
main .features h2:before,
main .developers h2:before,
main .platforms h2:before,
main .explore h2:before,
main .accolades h2:before,
main .purchase-options h2:before,
main .collection-promo h2:before,
main .media h2:before,
main .sections h2:before,
main .about h2:before {
    position: absolute;
    width: 100%;
    height: 2px;
    background-color: #00aeef;
    bottom: 0;
    left: 0
}

main .pagehead h2:after,
main .videos h2:after,
main .screenshots h2:after,
main .features h2:after,
main .developers h2:after,
main .platforms h2:after,
main .explore h2:after,
main .accolades h2:after,
main .purchase-options h2:after,
main .collection-promo h2:after,
main .media h2:after,
main .sections h2:after,
main .about h2:after {
    background: repeating-linear-gradient(0deg, #00aeef, #00aeef 20%, transparent 20%, transparent 100%) top left;
    background-size: 8px 8px;
    width: 2px;
    -moz-transform: translate(0, 50px);
    -ms-transform: translate(0, 50px);
    -webkit-transform: translate(0, 50px);
    transform: translate(0, 50px);
    height: 42px;
    position: absolute;
    left: 50%
}

main .pagehead.dark,
main .videos.dark,
main .screenshots.dark,
main .features.dark,
main .developers.dark,
main .platforms.dark,
main .explore.dark,
main .accolades.dark,
main .purchase-options.dark,
main .collection-promo.dark,
main .media.dark,
main .sections.dark,
main .about.dark {
    background-color: #232323
}

main .pagehead.dark p,
main .pagehead.dark h3,
main .videos.dark p,
main .videos.dark h3,
main .screenshots.dark p,
main .screenshots.dark h3,
main .features.dark p,
main .features.dark h3,
main .developers.dark p,
main .developers.dark h3,
main .platforms.dark p,
main .platforms.dark h3,
main .explore.dark p,
main .explore.dark h3,
main .accolades.dark p,
main .accolades.dark h3,
main .purchase-options.dark p,
main .purchase-options.dark h3,
main .collection-promo.dark p,
main .collection-promo.dark h3,
main .media.dark p,
main .media.dark h3,
main .sections.dark p,
main .sections.dark h3,
main .about.dark p,
main .about.dark h3 {
    color: #fff
}

main .pagehead.dark+.dark,
main .videos.dark+.dark,
main .screenshots.dark+.dark,
main .features.dark+.dark,
main .developers.dark+.dark,
main .platforms.dark+.dark,
main .explore.dark+.dark,
main .accolades.dark+.dark,
main .purchase-options.dark+.dark,
main .collection-promo.dark+.dark,
main .media.dark+.dark,
main .sections.dark+.dark,
main .about.dark+.dark {
    padding-top: 60px
}

@media screen and (max-width: 800px) {

    main .pagehead.dark+.dark,
    main .videos.dark+.dark,
    main .screenshots.dark+.dark,
    main .features.dark+.dark,
    main .developers.dark+.dark,
    main .platforms.dark+.dark,
    main .explore.dark+.dark,
    main .accolades.dark+.dark,
    main .purchase-options.dark+.dark,
    main .collection-promo.dark+.dark,
    main .media.dark+.dark,
    main .sections.dark+.dark,
    main .about.dark+.dark {
        padding-top: 0
    }
}

main .pagehead.dark+.dark:before,
main .videos.dark+.dark:before,
main .screenshots.dark+.dark:before,
main .features.dark+.dark:before,
main .developers.dark+.dark:before,
main .platforms.dark+.dark:before,
main .explore.dark+.dark:before,
main .accolades.dark+.dark:before,
main .purchase-options.dark+.dark:before,
main .collection-promo.dark+.dark:before,
main .media.dark+.dark:before,
main .sections.dark+.dark:before,
main .about.dark+.dark:before {
    content: "";
    background: repeating-linear-gradient(90deg, #eee, #eee 20%, transparent 20%, transparent 100%) top left;
    background-size: 8px 8px;
    height: 2px;
    -moz-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    width: 80%;
    margin-top: -60px;
    max-width: 1170px;
    position: absolute;
    left: 50%
}

@media screen and (max-width: 800px) {

    main .pagehead.dark+.dark:before,
    main .videos.dark+.dark:before,
    main .screenshots.dark+.dark:before,
    main .features.dark+.dark:before,
    main .developers.dark+.dark:before,
    main .platforms.dark+.dark:before,
    main .explore.dark+.dark:before,
    main .accolades.dark+.dark:before,
    main .purchase-options.dark+.dark:before,
    main .collection-promo.dark+.dark:before,
    main .media.dark+.dark:before,
    main .sections.dark+.dark:before,
    main .about.dark+.dark:before {
        display: none
    }
}

main .pagehead.light,
main .videos.light,
main .screenshots.light,
main .features.light,
main .developers.light,
main .platforms.light,
main .explore.light,
main .accolades.light,
main .purchase-options.light,
main .collection-promo.light,
main .media.light,
main .sections.light,
main .about.light {
    background-color: #eee
}

main .pagehead.light p,
main .pagehead.light h3,
main .videos.light p,
main .videos.light h3,
main .screenshots.light p,
main .screenshots.light h3,
main .features.light p,
main .features.light h3,
main .developers.light p,
main .developers.light h3,
main .platforms.light p,
main .platforms.light h3,
main .explore.light p,
main .explore.light h3,
main .accolades.light p,
main .accolades.light h3,
main .purchase-options.light p,
main .purchase-options.light h3,
main .collection-promo.light p,
main .collection-promo.light h3,
main .media.light p,
main .media.light h3,
main .sections.light p,
main .sections.light h3,
main .about.light p,
main .about.light h3 {
    color: #000
}

main .pagehead.light+.light,
main .videos.light+.light,
main .screenshots.light+.light,
main .features.light+.light,
main .developers.light+.light,
main .platforms.light+.light,
main .explore.light+.light,
main .accolades.light+.light,
main .purchase-options.light+.light,
main .collection-promo.light+.light,
main .media.light+.light,
main .sections.light+.light,
main .about.light+.light {
    padding-top: 60px
}

@media screen and (max-width: 800px) {

    main .pagehead.light+.light,
    main .videos.light+.light,
    main .screenshots.light+.light,
    main .features.light+.light,
    main .developers.light+.light,
    main .platforms.light+.light,
    main .explore.light+.light,
    main .accolades.light+.light,
    main .purchase-options.light+.light,
    main .collection-promo.light+.light,
    main .media.light+.light,
    main .sections.light+.light,
    main .about.light+.light {
        padding-top: 0
    }
}

main .pagehead.light+.light:before,
main .videos.light+.light:before,
main .screenshots.light+.light:before,
main .features.light+.light:before,
main .developers.light+.light:before,
main .platforms.light+.light:before,
main .explore.light+.light:before,
main .accolades.light+.light:before,
main .purchase-options.light+.light:before,
main .collection-promo.light+.light:before,
main .media.light+.light:before,
main .sections.light+.light:before,
main .about.light+.light:before {
    content: "";
    background: repeating-linear-gradient(90deg, #00aeef, #00aeef 20%, transparent 20%, transparent 100%) top left;
    background-size: 8px 8px;
    height: 2px;
    -moz-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    width: 80%;
    margin-top: -60px;
    max-width: 1170px;
    position: absolute;
    left: 50%
}

@media screen and (max-width: 800px) {

    main .pagehead.light+.light:before,
    main .videos.light+.light:before,
    main .screenshots.light+.light:before,
    main .features.light+.light:before,
    main .developers.light+.light:before,
    main .platforms.light+.light:before,
    main .explore.light+.light:before,
    main .accolades.light+.light:before,
    main .purchase-options.light+.light:before,
    main .collection-promo.light+.light:before,
    main .media.light+.light:before,
    main .sections.light+.light:before,
    main .about.light+.light:before {
        display: none
    }
}

main .pagehead.color,
main .videos.color,
main .screenshots.color,
main .features.color,
main .developers.color,
main .platforms.color,
main .explore.color,
main .accolades.color,
main .purchase-options.color,
main .collection-promo.color,
main .media.color,
main .sections.color,
main .about.color {
    background-color: #00aeef;
    color: #fff
}

main .pagehead.color *,
main .videos.color *,
main .screenshots.color *,
main .features.color *,
main .developers.color *,
main .platforms.color *,
main .explore.color *,
main .accolades.color *,
main .purchase-options.color *,
main .collection-promo.color *,
main .media.color *,
main .sections.color *,
main .about.color * {
    color: #fff
}

main .promo {
    display: block;
    position: relative;
    min-height: 350px;
    width: 100%;
    text-align: center;
    background-size: cover;
    background-position: center center
}

main .promo.main {
    min-height: 700px
}

@media screen and (max-width: 800px) {
    main .promo.main {
        min-height: 500px
    }
}

main .promo.main .content {
    position: absolute;
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%
}

main .promo .content {
    position: relative;
    max-width: 600px;
    box-sizing: border-box;
    display: inline-block;
    padding: 120px 30px;
    z-index: 10
}

main .promo .content h1 {
    margin-bottom: 30px;
    background-size: contain;
    background-position: left bottom;
    background-repeat: no-repeat;
    height: 180px;
    width: 100%
}

main .promo .content h1+p,
main .promo .content h1+a {
    margin-top: 30px
}

main .promo .content p+a {
    margin-top: 30px
}

main .promo .content a {
    color: #fff;
    border: 3px solid #fff;
    outline: none;
    padding: 12px 20px;
    cursor: pointer;
    font-family: "latoblack", sans-serif;
    font-size: 20px;
    text-decoration: none;
    margin-top: 50px;
    position: relative;
    display: inline-block;
    text-transform: uppercase;
    margin-right: 20px
}

main .promo .content a:hover {
    color: #000;
    background-color: #fff
}

main .promo .content a[data-dest=""] {
    display: none
}

@media screen and (max-width: 800px) {
    main .promo .content a {
        margin-right: 0
    }
}

main .promo .content span {
    font-size: 20px;
    padding-top: 20px;
    font-family: "latoblack", sans-serif;
    text-transform: uppercase;
    line-height: 30px;
    display: inline-block
}

@media screen and (max-width: 800px) {
    main .promo .content span {
        display: block;
        padding-left: 0;
        padding-top: 20px
    }
}

main .pagehead {
    text-align: center;
    position: relative
}

main .pagehead .logo {
    position: absolute;
    width: 100%;
    top: 250px;
    height: 140px;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat
}

@media screen and (max-width: 800px) {
    main .pagehead .logo {
        top: 120px;
        height: 120px;
        width: 90%;
        left: 5%
    }
}

main .pagehead .logo.has-video {
    top: 150px
}

@media screen and (max-width: 800px) {
    main .pagehead .logo.has-video {
        top: 30px
    }
}

main .pagehead .collapse-nav {
    position: absolute;
    margin-top: -450px
}

main .pagehead .background {
    height: 635px;
    width: 100%;
    background-size: cover;
    background-position: center center;
    position: relative
}

main .pagehead .background:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(180deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.2) 60%, transparent 100%) top left;
    background-size: 100% 100%;
    top: 0;
    left: 0
}

@media screen and (max-width: 800px) {
    main .pagehead .background {
        height: 350px
    }
}

main .pagehead .youtube {
    background-color: #fff;
    box-shadow: 0 0 0 10px #fff;
    position: relative;
    width: 738px;
    height: 415px;
    left: 50%;
    margin-left: -375px;
    margin-top: -207px
}

@media screen and (max-width: 800px) {
    main .pagehead .youtube {
        width: 88%;
        left: 6%;
        margin-left: 0;
        height: 320px;
        margin-top: -120px
    }
}

@media screen and (max-width: 533.33333px) {
    main .pagehead .youtube {
        height: 280px;
        margin-top: -140px
    }
}

@media screen and (max-width: 457.14286px) {
    main .pagehead .youtube {
        height: 200px;
        margin-top: -100px
    }
}

@media screen and (max-width: 400px) {
    main .pagehead .youtube {
        height: 160px;
        margin-top: -80px
    }
}

main .pagehead .content {
    padding: 90px 0 0px 0;
    text-align: center;
    background-color: #eee
}

@media screen and (max-width: 800px) {
    main .pagehead .content {
        padding: 40px 0 0 0
    }
}

main .pagehead .content h1 {
    background-color: #00aeef;
    box-shadow: -18px 0 0 4px #00aeef, 18px 0 0 4px #00aeef;
    display: inline;
    text-transform: uppercase;
    color: #fff;
    letter-spacing: 8px;
    margin: 0 0 80px 0;
    font-size: 32px;
    line-height: 48px
}

@media screen and (max-width: 800px) {
    main .pagehead .content h1 {
        margin: 0 10px 50px 10px;
        box-shadow: -3px 0 0 6px #00aeef, 3px 0 0 6px #00aeef;
        font-size: 18px;
        letter-spacing: 5px;
        line-height: 32px
    }
}

main .pagehead .content ul {
    margin: 60px 0 10px 0
}

main .pagehead .content ul:empty {
    display: none
}

main .pagehead .content ul li {
    display: block;
    text-align: center;
    color: #00aeef;
    font-size: 25px;
    line-height: 32px;
    letter-spacing: 3px;
    font-family: "latoregular", sans-serif
}

main .pagehead .content ul li b {
    font-family: "latoblack", sans-serif
}

@media screen and (max-width: 800px) {
    main .pagehead .content ul li {
        font-size: 18px;
        line-height: 26px;
        margin-bottom: 20px;
        letter-spacing: 2px;
        padding: 0 12%
    }

    main .pagehead .content ul li b {
        display: block
    }

    main .pagehead .content ul li span {
        display: inline-block
    }
}

main .pagehead .content p {
    display: block;
    padding: 50px 20px 40px 20px;
    box-sizing: border-box;
    position: relative;
    text-align: center;
    font-size: 17px;
    letter-spacing: 1px;
    white-space: pre-wrap;
    -moz-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    margin-top: 0px;
    width: 100%;
    max-width: 800px;
    left: 50%
}

@media screen and (max-width: 800px) {
    main .pagehead .content p {
        padding: 30px 15px 30px 15px;
        font-size: 15px;
        letter-spacing: 0;
        line-height: 28px;
        text-align: left
    }
}

main .pagehead .follow-game {
    margin-bottom: 80px
}

@media screen and (max-width: 800px) {
    main .pagehead .follow-game {
        margin-bottom: 40px
    }
}

main .features {
    padding: 90px 0
}

main .features:before {
    margin-top: -90px
}

@media screen and (max-width: 800px) {
    main .features {
        padding: 20px 0
    }
}

main .features ul {
    position: relative;
    width: 100%;
    left: 0;
    height: 360px;
    margin-bottom: 60px;
    counter-reset: total-features;
    counter-reset: features;
    overflow: hidden
}

@media screen and (max-width: 800px) {
    main .features ul {
        height: auto
    }
}

main .features ul b {
    counter-increment: total-features
}

main .features ul .button {
    position: absolute;
    margin-top: -25px;
    top: 100%;
    left: 50%
}

main .features ul .button.left {
    margin-left: -25px
}

main .features ul .button.right {
    margin-left: 25px
}

@media screen and (max-width: 800px) {
    main .features ul .button {
        display: none
    }
}

main .features ul menu {
    display: none;
    position: absolute
}

@media screen and (max-width: 800px) {
    main .features ul menu {
        display: block;
        top: 358px
    }
}

@media screen and (max-width: 533.33333px) {
    main .features ul menu {
        top: 208px
    }
}

main .features ul li {
    position: absolute;
    -moz-transform: translate(-100%, 0);
    -ms-transform: translate(-100%, 0);
    -webkit-transform: translate(-100%, 0);
    transform: translate(-100%, 0);
    width: 100%;
    left: 0;
    top: 40px;
    opacity: 0
}

@media screen and (max-width: 800px) {
    main .features ul li {
        top: 0
    }
}

main .features ul li.active {
    -moz-transform: translate(0%, 0);
    -ms-transform: translate(0%, 0);
    -webkit-transform: translate(0%, 0);
    transform: translate(0%, 0);
    opacity: 1
}

@media screen and (max-width: 800px) {
    main .features ul li.active {
        position: relative
    }
}

main .features ul li.active~li {
    -moz-transform: translate(100%, 0);
    -ms-transform: translate(100%, 0);
    -webkit-transform: translate(100%, 0);
    transform: translate(100%, 0);
    opacity: 0
}

main .features ul li .image-div,
main .features ul li .copy {
    top: -300px;
    -moz-transform: translate(0, 100%);
    -ms-transform: translate(0, 100%);
    -webkit-transform: translate(0, 100%);
    transform: translate(0, 100%);
    background-position: center center;
    background-size: cover
}

@media screen and (max-width: 800px) {

    main .features ul li .image-div,
    main .features ul li .copy {
        -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
        margin: 0;
        top: 0
    }
}

main .features ul li .image-div {
    display: inline-block;
    position: relative;
    height: 255px;
    width: 450px;
    margin-right: 20px
}

@media screen and (max-width: 1150px) {
    main .features ul li .image-div {
        width: 425px
    }
}

@media screen and (max-width: 800px) {
    main .features ul li .image-div {
        display: block;
        width: 94%;
        left: 3%;
        height: 325px;
        margin: 0
    }
}

@media screen and (max-width: 533.33333px) {
    main .features ul li .image-div {
        height: 175px
    }
}

main .features ul li .copy {
    position: relative;
    display: inline-block;
    padding-right: 104px;
    width: 360px;
    text-align: left
}

@media screen and (max-width: 1150px) {
    main .features ul li .copy {
        padding-right: 0;
        margin-left: -10px;
        width: 300px
    }
}

@media screen and (max-width: 800px) {
    main .features ul li .copy {
        width: 100%;
        margin: 75px 0 0 0;
        padding: 5px
    }
}

main .features ul li .copy h3 {
    font-size: 17px;
    font-family: "latoblack", sans-serif;
    text-transform: uppercase;
    color: #000;
    letter-spacing: 4px;
    box-sizing: border-box;
    padding: 0 0 20px 10px;
    margin-top: -14px;
    line-height: 24px
}

@media screen and (max-width: 800px) {
    main .features ul li .copy h3 {
        font-size: 14px;
        padding: 0 15px 20px 15px;
        letter-spacing: 3px;
        margin-top: 0
    }
}

main .features ul li .copy p {
    font-size: 17px;
    line-height: 30px;
    letter-spacing: 1px;
    box-sizing: border-box;
    padding: 0 0 10px 10px
}

@media screen and (max-width: 800px) {
    main .features ul li .copy p {
        font-size: 15px;
        letter-spacing: 0;
        line-height: 21px;
        padding: 0 15px
    }
}

main .features ul li .copy .counter {
    font-size: 17px;
    font-family: "latoregular", sans-serif;
    margin-bottom: 30px;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 0 0 10px 10px;
    color: #00aeef;
    display: none
}

@media screen and (max-width: 800px) {
    main .features ul li .copy .counter {
        display: none
    }
}

main .features ul li .copy i {
    text-transform: none
}

main .features ul li .copy i:before {
    counter-increment: features;
    content: counter(features) " "
}

main .features ul li .copy i:after {
    content: " "counter(total-features)
}

main .accolades {
    padding: 90px 0 40px 0
}

main .accolades:before {
    margin-top: -90px
}

@media screen and (max-width: 800px) {
    main .accolades {
        padding: 20px 0
    }
}

main .accolades ul {
    position: relative;
    width: 100%;
    left: 0;
    height: 360px;
    margin-top: -40px;
    margin-bottom: 60px;
    counter-reset: total-features;
    counter-reset: features
}

@media screen and (max-width: 800px) {
    main .accolades ul {
        height: auto;
        margin-top: 0px
    }
}

main .accolades ul .button {
    position: absolute;
    margin-top: -25px;
    top: 100%;
    left: 50%
}

main .accolades ul .button.left {
    margin-left: -25px
}

main .accolades ul .button.right {
    margin-left: 25px
}

@media screen and (max-width: 800px) {
    main .accolades ul .button {
        display: none
    }
}

main .accolades ul menu {
    display: none;
    position: relative
}

@media screen and (max-width: 800px) {
    main .accolades ul menu {
        display: block;
        top: 30px
    }
}

@media screen and (max-width: 533.33333px) {
    main .accolades ul menu {
        top: 30px
    }
}

main .accolades ul li {
    position: absolute;
    -moz-transform: translate(-100%, 0);
    -ms-transform: translate(-100%, 0);
    -webkit-transform: translate(-100%, 0);
    transform: translate(-100%, 0);
    width: 100%;
    left: 0;
    top: 0;
    bottom: 0;
    opacity: 0
}

@media screen and (max-width: 800px) {
    main .accolades ul li {
        top: 0
    }
}

main .accolades ul li.active {
    -moz-transform: translate(0%, 0);
    -ms-transform: translate(0%, 0);
    -webkit-transform: translate(0%, 0);
    transform: translate(0%, 0);
    opacity: 1
}

@media screen and (-ms-high-contrast: active),
(-ms-high-contrast: none) {
    main .accolades ul li.active {
        transform: translate(50%, 0)
    }
}

@media screen and (max-width: 800px) {
    main .accolades ul li.active {
        position: relative
    }
}

main .accolades ul li.active~li {
    -moz-transform: translate(100%, 0);
    -ms-transform: translate(100%, 0);
    -webkit-transform: translate(100%, 0);
    transform: translate(100%, 0);
    opacity: 0
}

main .accolades ul li .copy {
    position: absolute;
    top: 50%;
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    display: inline-block;
    width: 80%;
    text-align: center
}

@media screen and (max-width: 1150px) {
    main .accolades ul li .copy {
        padding-right: 0;
        margin-left: -10px
    }
}

@media screen and (max-width: 800px) {
    main .accolades ul li .copy {
        width: 100%;
        margin: 0;
        padding: 5px;
        position: relative;
        -moz-transform: translate(0%, 0%);
        -ms-transform: translate(0%, 0%);
        -webkit-transform: translate(0%, 0%);
        transform: translate(0%, 0%);
        top: 0
    }
}

main .accolades ul li .copy h3 {
    font-size: 46px;
    font-family: "latoblack", sans-serif;
    text-transform: uppercase;
    color: #000;
    letter-spacing: 6px;
    box-sizing: border-box;
    padding: 0 0 20px 10px;
    margin-top: -14px;
    line-height: 56px
}

@media screen and (max-width: 800px) {
    main .accolades ul li .copy h3 {
        font-size: 20px;
        line-height: 26px;
        padding: 0 15px 20px 15px;
        letter-spacing: 3px;
        margin-top: 0
    }
}

main .accolades ul li .copy p {
    font-size: 16px;
    line-height: 30px;
    letter-spacing: 4px;
    box-sizing: border-box;
    padding: 0 0 10px 10px;
    text-transform: uppercase
}

@media screen and (max-width: 800px) {
    main .accolades ul li .copy p {
        font-size: 15px;
        letter-spacing: 0;
        line-height: 21px;
        padding: 0 15px
    }
}

main .screenshots,
main .media,
main .section-features {
    height: 800px
}

@media screen and (max-width: 800px) {

    main .screenshots,
    main .media,
    main .section-features {
        height: 700px
    }
}

@media screen and (max-width: 533.33333px) {

    main .screenshots,
    main .media,
    main .section-features {
        height: 550px
    }
}

main .screenshots h2,
main .media h2,
main .section-features h2 {
    margin-top: 100px
}

@media screen and (max-width: 800px) {

    main .screenshots h2,
    main .media h2,
    main .section-features h2 {
        margin-top: 40px
    }
}

main .screenshots ul,
main .media ul,
main .section-features ul {
    position: absolute;
    background-color: inherit;
    width: 100%;
    height: 545px;
    top: 260px;
    left: 0
}

@media screen and (max-width: 800px) {

    main .screenshots ul,
    main .media ul,
    main .section-features ul {
        top: 136px;
        height: 420px
    }
}

@media screen and (max-width: 533.33333px) {

    main .screenshots ul,
    main .media ul,
    main .section-features ul {
        top: 136px;
        height: 300px
    }
}

main .screenshots ul .button,
main .media ul .button,
main .section-features ul .button {
    position: absolute;
    margin-top: -80px;
    z-index: 5;
    top: 50%;
    left: 50%
}

main .screenshots ul .button.left,
main .media ul .button.left,
main .section-features ul .button.left {
    margin-left: -375px
}

main .screenshots ul .button.right,
main .media ul .button.right,
main .section-features ul .button.right {
    margin-left: 375px
}

@media screen and (max-width: 800px) {

    main .screenshots ul .button,
    main .media ul .button,
    main .section-features ul .button {
        display: none
    }
}

main .screenshots ul menu,
main .media ul menu,
main .section-features ul menu {
    display: none;
    top: 400px;
    z-index: 10
}

@media screen and (max-width: 800px) {

    main .screenshots ul menu,
    main .media ul menu,
    main .section-features ul menu {
        display: block
    }
}

@media screen and (max-width: 533.33333px) {

    main .screenshots ul menu,
    main .media ul menu,
    main .section-features ul menu {
        top: 225px
    }
}

main .screenshots ul li,
main .media ul li,
main .section-features ul li {
    position: absolute;
    width: 640px;
    height: 100%;
    top: 0;
    left: 50%;
    margin-left: -320px;
    -moz-transform: translate(-745px, 0);
    -ms-transform: translate(-745px, 0);
    -webkit-transform: translate(-745px, 0);
    transform: translate(-745px, 0);
    z-index: 1;
    background-color: inherit;
    box-shadow: 0 0 0 0 #00aeef
}

main .screenshots ul li .share,
main .media ul li .share,
main .section-features ul li .share {
    top: auto;
    bottom: 30px;
    margin-left: -87px;
    position: absolute;
    left: 50%;
    opacity: 0
}

@media screen and (max-width: 800px) {

    main .screenshots ul li .share,
    main .media ul li .share,
    main .section-features ul li .share {
        display: block;
        bottom: -30px;
        left: 5%;
        margin-left: 0;
        box-sizing: border-box;
        width: 90%
    }
}

@media screen and (max-width: 800px) {

    main .screenshots ul li,
    main .media ul li,
    main .section-features ul li {
        width: 100%;
        left: 0;
        margin-left: 0;
        -moz-transform: translate(-100%, 1em);
        -ms-transform: translate(-100%, 1em);
        -webkit-transform: translate(-100%, 1em);
        transform: translate(-100%, 1em)
    }
}

main .screenshots ul li.active,
main .media ul li.active,
main .section-features ul li.active {
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    z-index: 3
}

@media screen and (max-width: 800px) {

    main .screenshots ul li.active,
    main .media ul li.active,
    main .section-features ul li.active {
        -moz-transform: translate(0, 1em);
        -ms-transform: translate(0, 1em);
        -webkit-transform: translate(0, 1em);
        transform: translate(0, 1em)
    }
}

main .screenshots ul li.active .image-div,
main .media ul li.active .image-div,
main .section-features ul li.active .image-div {
    box-shadow: 0 0 0 10px #00aeef
}

main .screenshots ul li.active .image-div:before,
main .media ul li.active .image-div:before,
main .section-features ul li.active .image-div:before {
    opacity: 0
}

@media screen and (max-width: 800px) {

    main .screenshots ul li.active .image-div,
    main .media ul li.active .image-div,
    main .section-features ul li.active .image-div {
        box-shadow: 0 0 0 4px #00aeef
    }
}

main .screenshots ul li.active .share,
main .media ul li.active .share,
main .section-features ul li.active .share {
    opacity: 1
}

main .screenshots ul li.active h3,
main .media ul li.active h3,
main .section-features ul li.active h3 {
    opacity: 1;
    margin-top: -20px
}

main .screenshots ul li.active h3+.share,
main .media ul li.active h3+.share,
main .section-features ul li.active h3+.share {
    margin-bottom: -40px
}

main .screenshots ul li.active+li,
main .media ul li.active+li,
main .section-features ul li.active+li {
    z-index: 2 !important
}

main .screenshots ul li.active~li,
main .media ul li.active~li,
main .section-features ul li.active~li {
    -moz-transform: translate(745px, 0);
    -ms-transform: translate(745px, 0);
    -webkit-transform: translate(745px, 0);
    transform: translate(745px, 0);
    z-index: 1
}

@media screen and (max-width: 800px) {

    main .screenshots ul li.active~li,
    main .media ul li.active~li,
    main .section-features ul li.active~li {
        -moz-transform: translate(100%, 0);
        -ms-transform: translate(100%, 0);
        -webkit-transform: translate(100%, 0);
        transform: translate(100%, 0)
    }
}

main .screenshots ul li .image-div,
main .media ul li .image-div,
main .section-features ul li .image-div {
    width: 100%;
    height: 360px;
    background-size: cover;
    background-position: center center;
    position: relative;
    background-color: inherit
}

@media screen and (max-width: 800px) {

    main .screenshots ul li .image-div,
    main .media ul li .image-div,
    main .section-features ul li .image-div {
        width: 90%;
        height: 350px;
        left: 5%
    }
}

@media screen and (max-width: 533.33333px) {

    main .screenshots ul li .image-div,
    main .media ul li .image-div,
    main .section-features ul li .image-div {
        height: 175px
    }
}

main .screenshots ul li .image-div:before,
main .media ul li .image-div:before,
main .section-features ul li .image-div:before {
    content: "";
    background-color: inherit;
    position: absolute;
    opacity: 0.75;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0
}

main .screenshots ul li h3,
main .media ul li h3,
main .section-features ul li h3 {
    position: absolute;
    top: 445px;
    left: 0;
    width: 100%;
    font-family: "latoregular", sans-serif;
    font-size: 17px;
    line-height: 24px;
    letter-spacing: 1px;
    box-sizing: border-box;
    padding: 10px;
    -moz-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    opacity: 0
}

@media screen and (max-width: 800px) {

    main .screenshots ul li h3,
    main .media ul li h3,
    main .section-features ul li h3 {
        font-size: 15px;
        letter-spacing: 0;
        line-height: 21px;
        padding: 0 15px
    }
}

@media screen and (max-width: 533.33333px) {

    main .screenshots ul li h3,
    main .media ul li h3,
    main .section-features ul li h3 {
        top: 275px
    }
}

main .videos,
main .media,
main .section-features {
    height: 800px
}

@media screen and (max-width: 800px) {

    main .videos,
    main .media,
    main .section-features {
        height: 650px
    }
}

@media screen and (max-width: 533.33333px) {

    main .videos,
    main .media,
    main .section-features {
        height: 500px
    }
}

main .videos h2,
main .media h2,
main .section-features h2 {
    margin-top: 100px
}

@media screen and (max-width: 800px) {

    main .videos h2,
    main .media h2,
    main .section-features h2 {
        margin-top: 40px
    }
}

main .videos.media h2,
main .media.media h2,
main .section-features.media h2 {
    margin-top: 50px
}

main .videos ul,
main .media ul,
main .section-features ul {
    position: absolute;
    background-color: inherit;
    width: 100%;
    height: 545px;
    top: 260px;
    left: 0
}

@media screen and (max-width: 800px) {

    main .videos ul,
    main .media ul,
    main .section-features ul {
        top: 136px;
        height: 420px
    }
}

@media screen and (max-width: 533.33333px) {

    main .videos ul,
    main .media ul,
    main .section-features ul {
        top: 136px;
        height: 300px
    }
}

main .videos ul .button,
main .media ul .button,
main .section-features ul .button {
    position: absolute;
    margin-top: -80px;
    z-index: 5;
    top: 50%;
    left: 50%
}

main .videos ul .button.left,
main .media ul .button.left,
main .section-features ul .button.left {
    margin-left: -375px
}

main .videos ul .button.right,
main .media ul .button.right,
main .section-features ul .button.right {
    margin-left: 375px
}

@media screen and (max-width: 800px) {

    main .videos ul .button,
    main .media ul .button,
    main .section-features ul .button {
        display: none
    }
}

main .videos ul .share,
main .media ul .share,
main .section-features ul .share {
    opacity: 0
}

main .videos ul menu,
main .media ul menu,
main .section-features ul menu {
    display: none;
    top: 400px;
    z-index: 10
}

@media screen and (max-width: 800px) {

    main .videos ul menu,
    main .media ul menu,
    main .section-features ul menu {
        display: block
    }
}

@media screen and (max-width: 533.33333px) {

    main .videos ul menu,
    main .media ul menu,
    main .section-features ul menu {
        top: 225px
    }
}

main .videos ul li,
main .media ul li,
main .section-features ul li {
    position: absolute;
    width: 640px;
    height: 100%;
    top: 0;
    left: 50%;
    margin-left: -320px;
    -moz-transform: translate(-745px, 0);
    -ms-transform: translate(-745px, 0);
    -webkit-transform: translate(-745px, 0);
    transform: translate(-745px, 0);
    z-index: 1;
    background-color: inherit;
    box-shadow: 0 0 0 0 #00aeef
}

@media screen and (max-width: 800px) {

    main .videos ul li,
    main .media ul li,
    main .section-features ul li {
        width: 100%;
        left: 0;
        margin-left: 0;
        -moz-transform: translate(-100%, 1em);
        -ms-transform: translate(-100%, 1em);
        -webkit-transform: translate(-100%, 1em);
        transform: translate(-100%, 1em)
    }
}

main .videos ul li.active,
main .media ul li.active,
main .section-features ul li.active {
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    z-index: 3
}

@media screen and (max-width: 800px) {

    main .videos ul li.active,
    main .media ul li.active,
    main .section-features ul li.active {
        -moz-transform: translate(0, 1em);
        -ms-transform: translate(0, 1em);
        -webkit-transform: translate(0, 1em);
        transform: translate(0, 1em)
    }
}

main .videos ul li.active .share,
main .media ul li.active .share,
main .section-features ul li.active .share {
    opacity: 1
}

main .videos ul li.active .youtube,
main .media ul li.active .youtube,
main .section-features ul li.active .youtube {
    box-shadow: 0 0 0 10px #00aeef
}

main .videos ul li.active .youtube:before,
main .media ul li.active .youtube:before,
main .section-features ul li.active .youtube:before {
    opacity: 0
}

@media screen and (max-width: 800px) {

    main .videos ul li.active .youtube,
    main .media ul li.active .youtube,
    main .section-features ul li.active .youtube {
        box-shadow: 0 0 0 4px #00aeef
    }
}

main .videos ul li.active h3,
main .media ul li.active h3,
main .section-features ul li.active h3 {
    opacity: 1
}

main .videos ul li.active+li,
main .media ul li.active+li,
main .section-features ul li.active+li {
    z-index: 2 !important
}

main .videos ul li.active~li,
main .media ul li.active~li,
main .section-features ul li.active~li {
    -moz-transform: translate(745px, 0);
    -ms-transform: translate(745px, 0);
    -webkit-transform: translate(745px, 0);
    transform: translate(745px, 0);
    z-index: 1
}

@media screen and (max-width: 800px) {

    main .videos ul li.active~li,
    main .media ul li.active~li,
    main .section-features ul li.active~li {
        -moz-transform: translate(100%, 0);
        -ms-transform: translate(100%, 0);
        -webkit-transform: translate(100%, 0);
        transform: translate(100%, 0)
    }
}

main .videos ul li .youtube,
main .media ul li .youtube,
main .section-features ul li .youtube {
    width: 100%;
    height: 360px;
    background-size: cover;
    background-position: center center;
    position: relative;
    background-color: inherit
}

main .videos ul li .youtube iframe,
main .media ul li .youtube iframe,
main .section-features ul li .youtube iframe {
    width: 100%;
    height: 100%
}

@media screen and (max-width: 800px) {

    main .videos ul li .youtube,
    main .media ul li .youtube,
    main .section-features ul li .youtube {
        width: 90%;
        height: 350px;
        left: 5%
    }
}

@media screen and (max-width: 533.33333px) {

    main .videos ul li .youtube,
    main .media ul li .youtube,
    main .section-features ul li .youtube {
        height: 175px
    }
}

main .videos ul li h3,
main .media ul li h3,
main .section-features ul li h3 {
    position: absolute;
    top: 445px;
    left: 0;
    width: 100%;
    font-family: "latoregular", sans-serif;
    font-size: 17px;
    line-height: 24px;
    letter-spacing: 1px;
    box-sizing: border-box;
    padding: 10px;
    -moz-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    opacity: 0
}

@media screen and (max-width: 800px) {

    main .videos ul li h3,
    main .media ul li h3,
    main .section-features ul li h3 {
        font-size: 15px;
        letter-spacing: 0;
        line-height: 21px;
        padding: 0 15px
    }
}

@media screen and (max-width: 533.33333px) {

    main .videos ul li h3,
    main .media ul li h3,
    main .section-features ul li h3 {
        top: 275px
    }
}

main .developers {
    padding: 80px 0;
    text-align: center
}

main .developers .content {
    position: relative;
    -moz-transform: translate(0, -100%);
    -ms-transform: translate(0, -100%);
    -webkit-transform: translate(0, -100%);
    transform: translate(0, -100%);
    width: 100%
}

@media screen and (max-width: 800px) {
    main .developers .content {
        display: block;
        -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0)
    }
}

main .developers .content .left,
main .developers .content .right {
    display: inline-block;
    box-sizing: border-box;
    position: relative;
    -moz-transform: translate(0, 100%);
    -ms-transform: translate(0, 100%);
    -webkit-transform: translate(0, 100%);
    transform: translate(0, 100%);
    top: 0;
    width: 400px;
    height: auto;
    padding: 20px
}

@media screen and (max-width: 800px) {

    main .developers .content .left,
    main .developers .content .right {
        width: 100%;
        display: block;
        -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0)
    }
}

main .developers .content .left {
    text-align: left;
    margin-top: auto
}

@media screen and (max-width: 800px) {
    main .developers .content .left {
        text-align: center;
        margin-top: -60px
    }
}

main .developers .content .left .image-div {
    height: 70px;
    margin-bottom: 40px;
    background-size: contain;
    background-position: left center;
    background-repeat: no-repeat
}

@media screen and (max-width: 800px) {
    main .developers .content .left .image-div {
        width: 100%;
        height: 40px;
        background-position: center center
    }
}

main .developers .content .left .button {
    display: inline-block;
    padding: 20px 35px;
    border-width: 2px;
    border-style: solid;
    text-decoration: none
}

@media screen and (max-width: 800px) {
    main .developers .content .left .button {
        box-sizing: border-box;
        width: 100%
    }
}

main .developers .content .left .follow {
    display: block;
    text-align: center;
    padding-right: 40px;
    font-size: 14px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    text-decoration: none;
    font-family: "latoblack", sans-serif;
    color: #999
}

@media screen and (max-width: 800px) {
    main .developers .content .left .follow {
        padding-right: 0
    }
}

main .developers .content .left .follow svg {
    width: 40px;
    height: 40px;
    border: 2px solid #999;
    border-radius: 50%;
    position: relative;
    -moz-transform: translate(0, 15px);
    -ms-transform: translate(0, 15px);
    -webkit-transform: translate(0, 15px);
    transform: translate(0, 15px)
}

main .developers .content .left .follow svg * {
    -moz-transform: scale(0.9, 0.9);
    -ms-transform: scale(0.9, 0.9);
    -webkit-transform: scale(0.9, 0.9);
    transform: scale(0.9, 0.9);
    -moz-transform-origin: center center;
    -ms-transform-origin: center center;
    -webkit-transform-origin: center center;
    transform-origin: center center;
    fill: #999
}

main .developers .content .right {
    text-align: left
}

main .developers .content .right p {
    font-size: 17px;
    line-height: 30px;
    letter-spacing: 1px;
    box-sizing: border-box
}

@media screen and (max-width: 800px) {
    main .developers .content .right p {
        font-size: 15px;
        letter-spacing: 0;
        line-height: 21px
    }
}

main .platforms h2 {
    margin-top: 80px;
    margin-bottom: 30px
}

main .platforms h2:before,
main .platforms h2:after {
    display: none
}

main .platforms ul {
    display: block;
    box-sizing: border-box;
    width: 100%;
    position: relative;
    padding: 0 10px;
    text-align: center;
    font-size: 0;
    line-height: 0;
    margin: 0 0 -10px 0
}

main .platforms ul li {
    display: inline-block;
    padding: 0 10px;
    margin: 10px 0
}

main .platforms ul li[data-brand="sony"]+li[data-brand="sony"] {
    margin-left: -35px
}

@media screen and (max-width: 400px) {
    main .platforms ul li {
        border: 0px;
        display: block;
        margin-left: 0;
        margin: 25px 0
    }
}

main .platforms ul li a {
    height: 30px;
    padding: 0 20px;
    position: relative;
    display: inline-block;
    background-image: none !important
}

@media screen and (max-width: 400px) {
    main .platforms ul li a {
        height: 35px;
        padding: 0 10px
    }
}

main .platforms ul li a img {
    position: relative;
    height: 100% !important;
    width: auto !important;
    display: inline-block !important;
    opacity: 1 !important;
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    text-align: left
}

main .explore {
    padding: 90px 10px
}

main .explore .button {
    display: inline-block;
    position: relative;
    padding: 20px 40px;
    font-family: "latoblack", sans-serif;
    font-size: 19px;
    letter-spacing: 4px;
    color: #00aeef;
    border: 2px solid #00aeef;
    border-radius: 4px;
    text-decoration: none
}

@media screen and (max-width: 800px) {
    main .explore .button {
        width: 90%;
        box-sizing: border-box;
        max-width: 500px;
        padding: 20px 20px;
        font-size: 15px
    }
}

main .explore .button:hover {
    color: #fff;
    background-color: #00aeef
}

.site-wrapper[data-page="home"] #logo-flat,
.site-wrapper[data-page="home"] #logo-png {
    left: 53px;
    margin-left: 0
}

@media screen and (max-width: 800px) {

    .site-wrapper[data-page="home"] #logo-flat,
    .site-wrapper[data-page="home"] #logo-png {
        left: 50%;
        margin-left: 0
    }
}

.site-wrapper[data-page="home"] nav a.home {
    color: #00aeef
}

.site-wrapper[data-page="home"] nav a.home:before {
    padding: 0px 15px;
    margin-bottom: -3px;
    margin-left: -15px;
    height: 100%
}

.site-wrapper[data-page="home"] nav a.home+div {
    z-index: -2;
    opacity: 1;
    position: fixed;
    bottom: 0px;
    right: 0px;
    left: 0px;
    top: 0px
}

.site-wrapper[data-page="home"] main {
    margin-top: 0;
    background-color: #eee;
    text-align: left
}

.site-wrapper[data-page="home"] .head {
    height: 780px;
    background-color: #eee;
    position: relative;
    width: 100%
}

@media screen and (max-width: 1036px) and (min-width: 801px) {
    .site-wrapper[data-page="home"] .head {
        height: 780px !important;
    }
}

@media screen and (max-width: 800px) {
    .site-wrapper[data-page="home"] .head {
        height: auto;
        padding: 30px 0
    }
}

.site-wrapper[data-page="home"] .head .logo {
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-size: 700px auto;
    background-position: center center;
    background-repeat: no-repeat;
    background-color: #eee
}

@media screen and (max-width: 800px) {
    .site-wrapper[data-page="home"] .head .logo {
        opacity: 0 !important;
        display: block;
        position: relative;
        height: 90px;
        background-size: contain;
        top: auto;
        right: auto;
        bottom: auto;
        left: auto
    }
}

.site-wrapper[data-page="home"] .head .youtube {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 4
}

@media screen and (max-width: 800px) {
    .site-wrapper[data-page="home"] .head .youtube {
        position: relative;
        width: 90%;
        height: 350px;
        left: 5%
    }
}

@media screen and (max-width: 533.33333px) {
    .site-wrapper[data-page="home"] .head .youtube {
        position: relative;
        height: 175px
    }
}

.site-wrapper[data-page="home"] .head .share {
    display: none;
    z-index: 3
}

@media screen and (max-width: 800px) {
    .site-wrapper[data-page="home"] .head .share {
        box-sizing: border-box;
        display: block;
        position: relative;
        left: 5%;
        width: 90%;
        font-size: 18px;
        margin-top: 20px
    }
}

.site-wrapper[data-page="home"] .head .popup-button {
    z-index: 3;
    -moz-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    display: inline-block;
    position: absolute;
    bottom: 100px;
    left: 50%
}

@media screen and (max-width: 800px) {
    .site-wrapper[data-page="home"] .head .popup-button {
        position: relative;
        color: #000;
        -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
        border-color: #000;
        display: block;
        left: 5%;
        width: 90%;
        font-size: 18px;
        bottom: auto;
        margin-top: 10px;
        opacity: 1 !important;

    }

    .site-wrapper[data-page="home"] .head .popup-button:hover {
        border-color: #00aeef;
        color: #fff
    }
}

.site-wrapper[data-page="home"] .head.video-playing .logo,
.site-wrapper[data-page="home"] .head.video-playing .popup-button {
    opacity: 0;
    display: none;
}

@media screen and (max-width: 800px) {
    .site-wrapper[data-page="home"] .head .popup-button {
        display: block !important;
    }
}



@media screen and (max-width: 800px) {
    .site-wrapper[data-page="home"] hr {
        display: none
    }
}

.site-wrapper[data-page="home"] .about {
    padding: 100px 0;
    background-color: #eee
}

@media screen and (max-width: 800px) {
    .site-wrapper[data-page="home"] .about {
        padding: 30px 0
    }
}

.site-wrapper[data-page="home"] .about h2 {
    font-size: 32px;
    text-transform: uppercase;
    letter-spacing: 8px;
    border-bottom: 2px solid #000;
    display: inline-block;
    padding-bottom: 12px;
    overflow: visible;
    position: relative;
    margin-bottom: 60px;
    -moz-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    left: 50%
}

@media screen and (max-width: 800px) {
    .site-wrapper[data-page="home"] .about h2 {
        font-size: 18px;
        border-bottom: 1px solid #000;
        padding-bottom: 0px
    }
}

.site-wrapper[data-page="home"] .about h2:after {
    content: "";
    background: repeating-linear-gradient(0deg, #232323, #232323 20%, transparent 20%, transparent 100%) top left;
    background-size: 8px 8px;
    width: 2px;
    left: 50%;
    position: absolute;
    display: inline-block;
    height: 40px;
    top: -10px;
    opacity: 0
}

@media screen and (max-width: 800px) {
    .site-wrapper[data-page="home"] .about h2:after {
        opacity: 0.5
    }
}

.site-wrapper[data-page="home"] .about p {
    width: 780px;
    position: relative;
    margin-left: -390px;
    left: 50%;
    font-size: 15px;
    letter-spacing: 0.05em;
    text-align: center;
    line-height: 30px
}

@media screen and (max-width: 800px) {
    .site-wrapper[data-page="home"] .about p {
        width: 86%;
        left: 7%;
        margin-left: 0
    }
}

.site-wrapper[data-page="home"] .geometrywars .content .media,
.site-wrapper[data-page="home"] .kingsquest .content .media {
    height: 454px;
    width: 454px;
    max-height: 454px
}

@media screen and (max-width: 400px) {

    .site-wrapper[data-page="home"] .geometrywars .content .media,
    .site-wrapper[data-page="home"] .kingsquest .content .media {
        height: 70vw
    }
}

.site-wrapper[data-page="home"] .geometrywars .content .media {
    height: 210px
}

.site-wrapper[data-page="home"] .game-promo {
    min-height: 550px;
    position: relative;
    background-color: #000;
    position: relative;
    margin-bottom: 115px
}

.site-wrapper[data-page="home"] .game-promo .social-buttons div {
    margin-top: 17px
}

.site-wrapper[data-page="home"] .game-promo:last-of-type {
    margin-bottom: 0
}

.site-wrapper[data-page="home"] .game-promo:after {
    content: "";
    background: repeating-linear-gradient(0deg, #232323, #232323 20%, transparent 20%, transparent 100%) top left;
    background-size: 8px 8px;
    width: 2px;
    height: 40px;
    position: absolute;
    left: 50%;
    bottom: 0;
    margin-bottom: -75px;
    opacity: 0.5
}

.site-wrapper[data-page="home"] .game-promo .background {
    position: absolute;
    overflow: hidden;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0
}

.site-wrapper[data-page="home"] .game-promo .background i {
    position: absolute;
    background-size: cover;
    background-position: center center;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0
}

@media screen and (max-width: 1210px) {
    .site-wrapper[data-page="home"] .game-promo .background i {
        opacity: 0.66;
        width: 120%;
        height: 120%;
        left: -10%;
        top: -10%
    }
}

.site-wrapper[data-page="home"] .game-promo .background.bkg-top i {
    background-position: top center
}

.site-wrapper[data-page="home"] .game-promo.shiftlings .background {
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1)
}

.site-wrapper[data-page="home"] .game-promo.shiftlings .background i {
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    filter: FlipH;
    -ms-filter: "FlipH"
}

.site-wrapper[data-page="home"] .game-promo .content {
    background-color: rgba(0, 0, 0, 0.9);
    position: relative;
    top: 0;
    min-height: 550px;
    padding-bottom: 30px;
    box-sizing: border-box;
    width: 570px;
    text-align: left;
    z-index: 2
}

@media screen and (max-width: 1210px) {
    .site-wrapper[data-page="home"] .game-promo .content {
        text-align: center
    }
}

@media screen and (max-width: 533.33333px) {
    .site-wrapper[data-page="home"] .game-promo .content {
        text-align: left
    }
}

.site-wrapper[data-page="home"] .game-promo .content .game-logo {
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    position: relative;
    width: 90%;
    left: 5%;
    height: 90px;
    padding: 40px 0
}

.site-wrapper[data-page="home"] .game-promo .content .game-logo:after {
    content: "";
    background: repeating-linear-gradient(90deg, #fff, #fff 20%, transparent 20%, transparent 100%) top left;
    background-size: 8px 8px;
    height: 2px;
    opacity: 0.75;
    position: absolute;
    bottom: 0px;
    left: 0;
    width: 100%
}

@media screen and (max-width: 1210px) {
    .site-wrapper[data-page="home"] .game-promo .content .game-logo:after {
        display: none
    }
}

.site-wrapper[data-page="home"] .game-promo .content .media {
    position: absolute;
    max-width: 600px;
    max-height: 338px;
    top: 50%;
    border: 4px solid #fff;
    box-sizing: border-box;
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.site-wrapper[data-page="home"] .game-promo .content .media.youtube {
    width: 500px;
    height: 283px
}

.site-wrapper[data-page="home"] .game-promo .content .media.youtube+.image-div {
    display: none
}

@media screen and (max-width: 1210px) {
    .site-wrapper[data-page="home"] .game-promo .content .media {
        left: 50%;
        -moz-transform: translate(-50%, 0);
        -ms-transform: translate(-50%, 0);
        -webkit-transform: translate(-50%, 0);
        transform: translate(-50%, 0);
        position: relative;
        display: block;
        max-width: 50%;
        margin: 30px 0
    }
}

@media screen and (max-width: 780px) {
    .site-wrapper[data-page="home"] .game-promo .content .media {
        max-width: 60%;
        max-height: 300px
    }
}

.site-wrapper[data-page="home"] .game-promo .content .release-mobile,
.site-wrapper[data-page="home"] .game-promo .content .release-desktop {
    color: #00aeef;
    font-size: 18px;
    letter-spacing: 4px;
    text-transform: uppercase;
    font-family: "latoblack", sans-serif
}

.site-wrapper[data-page="home"] .game-promo .content .release-mobile {
    display: none
}

@media screen and (max-width: 1210px) {
    .site-wrapper[data-page="home"] .game-promo .content .release-mobile {
        display: block;
        padding: 0 5%;
        margin: 30px 0
    }
}

.site-wrapper[data-page="home"] .game-promo .content .release-desktop {
    display: inline-block;
    position: absolute;
    line-height: 24px;
    padding-left: 5%;
    margin-top: 60px;
    -moz-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%)
}

@media screen and (max-width: 1210px) {
    .site-wrapper[data-page="home"] .game-promo .content .release-desktop {
        display: none
    }
}

.site-wrapper[data-page="home"] .game-promo .content .caption {
    color: #fff;
    display: block;
    font-size: 15px;
    line-height: 30px;
    letter-spacing: 0.05em;
    text-align: left;
    position: relative;
    width: 90%;
    margin-left: 5%;
    padding-top: 20px
}

@media screen and (max-width: 1210px) {
    .site-wrapper[data-page="home"] .game-promo .content .caption {
        text-align: center;
        width: 100%;
        box-sizing: border-box;
        padding: 0 90px;
        margin-left: 0
    }
}

@media screen and (max-width: 533.33333px) {
    .site-wrapper[data-page="home"] .game-promo .content .caption {
        text-align: left;
        padding: 0 5%
    }
}

.site-wrapper[data-page="home"] .game-promo .content .caption .italic {
    font-weight: 900
}

.site-wrapper[data-page="home"] .game-promo .content .page-link {
    border: 2px solid #fff;
    color: #fff;
    text-decoration: none;
    margin-left: 5%;
    margin-top: 30px;
    outline: none;
    padding: 20px 40px;
    cursor: pointer;
    font-family: "latoblack", sans-serif;
    border-radius: 4px;
    font-size: 15px;
    letter-spacing: 2px;
    text-decoration: none;
    display: inline-block;
    text-transform: uppercase;
    text-align: center;
    box-sizing: border-box
}

@media screen and (max-width: 1210px) {
    .site-wrapper[data-page="home"] .game-promo .content .page-link {
        margin-left: 0
    }
}

@media screen and (max-width: 533.33333px) {
    .site-wrapper[data-page="home"] .game-promo .content .page-link {
        width: 90%;
        margin-left: 5%;
        padding-left: 0;
        padding-right: 0
    }
}

.site-wrapper[data-page="home"] .game-promo .content .page-link:hover {
    background-color: #00aeef;
    border-color: #00aeef
}

.site-wrapper[data-page="home"] .game-promo .content .page-link+.share {
    display: none
}

.site-wrapper[data-page="home"] .game-promo .content .share {
    margin-left: 5%;
    margin-top: 30px;
    box-sizing: border-box
}

@media screen and (max-width: 1210px) {
    .site-wrapper[data-page="home"] .game-promo .content .share {
        margin-left: 0
    }
}

@media screen and (max-width: 533.33333px) {
    .site-wrapper[data-page="home"] .game-promo .content .share {
        width: 90%;
        margin-left: 5%;
        padding-left: 0;
        padding-right: 0
    }
}

.site-wrapper[data-page="home"] .game-promo .content .share:hover {
    border-color: #00aeef
}

.site-wrapper[data-page="home"] .game-promo .content:before,
.site-wrapper[data-page="home"] .game-promo .content:after {
    content: "";
    position: absolute;
    width: 100%;
    left: 0;
    height: 12px;
    background-color: #00aeef
}

.site-wrapper[data-page="home"] .game-promo .content:before {
    -moz-transform: translate(0, -100%);
    -ms-transform: translate(0, -100%);
    -webkit-transform: translate(0, -100%);
    transform: translate(0, -100%);
    top: 0
}

.site-wrapper[data-page="home"] .game-promo .content:after {
    -moz-transform: translate(0, 100%);
    -ms-transform: translate(0, 100%);
    -webkit-transform: translate(0, 100%);
    transform: translate(0, 100%);
    bottom: 0
}

@media screen and (max-width: 1210px) {
    .site-wrapper[data-page="home"] .game-promo .content:after {
        height: 0
    }
}

.site-wrapper[data-page="home"] .game-promo:nth-of-type(odd) .content {
    left: 50%;
    right: auto;
    margin-left: 15px
}

.site-wrapper[data-page="home"] .game-promo:nth-of-type(odd) .content .media {
    left: -320px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center
}

@media screen and (max-width: 1210px) {
    .site-wrapper[data-page="home"] .game-promo:nth-of-type(odd) .content .media {
        left: 50%
    }
}

.site-wrapper[data-page="home"] .game-promo:nth-of-type(even) .content {
    left: 50%;
    margin-left: -585px
}

.site-wrapper[data-page="home"] .game-promo:nth-of-type(even) .content .media {
    left: 870px
}

@media screen and (max-width: 1210px) {
    .site-wrapper[data-page="home"] .game-promo:nth-of-type(even) .content .media {
        left: 50%
    }
}

@media screen and (max-width: 1210px) {

    .site-wrapper[data-page="home"] .game-promo:nth-of-type(even) .content,
    .site-wrapper[data-page="home"] .game-promo:nth-of-type(odd) .content {
        width: auto;
        left: 0;
        right: 0;
        background-color: rgba(0, 0, 0, 0.1);
        margin-right: auto;
        margin-left: auto
    }
}

@media screen and (max-width: 535px) {

    .site-wrapper[data-page="home"] .game-promo:nth-of-type(even) .content .media,
    .site-wrapper[data-page="home"] .game-promo:nth-of-type(odd) .content .media {
        max-width: 75%
    }
}

.site-wrapper[data-page="home"] .more-soon {
    position: relative;
    margin: 0 0 100px 0;
    font-size: 32px;
    letter-spacing: 8px;
    font-family: "latoblack", sans-serif;
    color: #fff;
    background-color: #00aeef;
    padding: 10px 30px;
    display: inline-block;
    text-transform: uppercase;
    -moz-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    text-align: center;
    left: 50%
}

@media screen and (max-width: 800px) {
    .site-wrapper[data-page="home"] .more-soon {
        display: block;
        margin: 0;
        padding: 30px;
        font-size: 18px;
        letter-spacing: 4px;
        line-height: 30px;
        margin-top: -116px;
        border-bottom: 60px solid #eee
    }
}

.site-wrapper[data-page="promo"] {
    min-height: 100%;
    overflow: hidden
}

.site-wrapper[data-page="promo"] select,
.site-wrapper[data-page="promo"] header,
.site-wrapper[data-page="promo"] footer {
    display: none
}

.site-wrapper[data-page="promo"] select+i,
.site-wrapper[data-page="promo"] header+i,
.site-wrapper[data-page="promo"] footer+i {
    display: none
}

.site-wrapper[data-page="promo"] .mobile-follow {
    display: none !important
}

@media screen and (max-width: 1024px),
(max-height: 600px) {
    .site-wrapper[data-page="promo"] {
        box-sizing: border-box;
        width: 100%;
        height: 100%;
        overflow: scroll;
        background-color: #eee
    }

    .site-wrapper[data-page="promo"] body {
        border: 10px solid #00aeef;
        min-height: 100%
    }

    .site-wrapper[data-page="promo"] footer {
        display: block
    }
}

.site-wrapper[data-page="promo"] .slide {
    -moz-transform: translate(0, -100%);
    -ms-transform: translate(0, -100%);
    -webkit-transform: translate(0, -100%);
    transform: translate(0, -100%);
    border: 20px solid #fff;
    background-color: #eee;
    box-sizing: border-box;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.site-wrapper[data-page="promo"] .slide:nth-of-type(1) .logo-mobile {
    display: none;
    position: absolute;
    width: 440px;
    height: 230px;
    top: -45px;
    left: 50%;
    -moz-transform: translate(-50%, -50%) scale(0.35);
    -ms-transform: translate(-50%, -50%) scale(0.35);
    -webkit-transform: translate(-50%, -50%) scale(0.35);
    transform: translate(-50%, -50%) scale(0.35);
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat
}

.site-wrapper[data-page="promo"] .slide:nth-of-type(1) .logo-mobile svg {
    position: absolute;
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%
}

.site-wrapper[data-page="promo"] .slide:nth-of-type(1) .logo-mobile .top {
    margin-top: -80px
}

.site-wrapper[data-page="promo"] .slide:nth-of-type(1) .logo-mobile .top * {
    fill: #00aeef
}

.site-wrapper[data-page="promo"] .slide:nth-of-type(1) .logo-mobile .bottom {
    margin-left: -20px;
    margin-top: 5px
}

.site-wrapper[data-page="promo"] .slide:nth-of-type(1) .logo-mobile .bottom * {
    fill: #000
}

@media screen and (max-width: 1024px),
(max-height: 600px) {
    .site-wrapper[data-page="promo"] .slide:nth-of-type(1) .logo-mobile {
        display: block
    }
}

.site-wrapper[data-page="promo"] .slide:nth-of-type(1) iframe,
.site-wrapper[data-page="promo"] .slide:nth-of-type(1) .close,
.site-wrapper[data-page="promo"] .slide:nth-of-type(1) .video-player {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

@media screen and (max-width: 1024px),
(max-height: 600px) {

    .site-wrapper[data-page="promo"] .slide:nth-of-type(1) iframe,
    .site-wrapper[data-page="promo"] .slide:nth-of-type(1) .close,
    .site-wrapper[data-page="promo"] .slide:nth-of-type(1) .video-player {
        left: 5%;
        width: 90%
    }
}

.site-wrapper[data-page="promo"] .slide:nth-of-type(1) iframe,
.site-wrapper[data-page="promo"] .slide:nth-of-type(1) .video-player {
    z-index: 1
}

.site-wrapper[data-page="promo"] .slide:nth-of-type(1) .replay {
    display: none
}

.site-wrapper[data-page="promo"] .slide:nth-of-type(1) .replay svg {
    -moz-transition: all 0s linear;
    -o-transition: all 0s linear;
    -webkit-transition: all 0s linear;
    transition: all 0s linear;
    -moz-transform: translate(0, 3px) rotate(0deg);
    -ms-transform: translate(0, 3px) rotate(0deg);
    -webkit-transform: translate(0, 3px) rotate(0deg);
    transform: translate(0, 3px) rotate(0deg)
}

.site-wrapper[data-page="promo"] .slide:nth-of-type(1) .replay * {
    fill: #fff;
    color: #fff
}

.site-wrapper[data-page="promo"] .slide:nth-of-type(1) .replay:hover svg {
    -moz-transform: translate(0, 3px) rotate(-360deg);
    -ms-transform: translate(0, 3px) rotate(-360deg);
    -webkit-transform: translate(0, 3px) rotate(-360deg);
    transform: translate(0, 3px) rotate(-360deg)
}

.site-wrapper[data-page="promo"] .slide:nth-of-type(1) .close {
    z-index: 2
}

.site-wrapper[data-page="promo"] .slide:nth-of-type(1) .close i {
    position: absolute;
    top: 32px;
    left: 32px;
    background-color: rgba(0, 0, 0, 0.8);
    width: 65px;
    height: 65px;
    display: inline-block;
    border-radius: 4px;
    cursor: pointer
}

.site-wrapper[data-page="promo"] .slide:nth-of-type(1) .close i:before,
.site-wrapper[data-page="promo"] .slide:nth-of-type(1) .close i:after {
    content: "";
    width: 32px;
    height: 2px;
    background-color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -1px;
    margin-left: -16px
}

.site-wrapper[data-page="promo"] .slide:nth-of-type(1) .close i:before {
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg)
}

.site-wrapper[data-page="promo"] .slide:nth-of-type(1) .close i:after {
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg)
}

.site-wrapper[data-page="promo"] .slide:nth-of-type(2) {
    border-color: #00aeef
}

.site-wrapper[data-page="promo"] .slide:nth-of-type(2) .gamescom-logo {
    position: absolute;
    bottom: 30px;
    left: 30px;
    width: 300px;
    height: 23px;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat
}

@media screen and (max-width: 1024px),
(max-height: 600px) {
    .site-wrapper[data-page="promo"] .slide:nth-of-type(2) .gamescom-logo {
        display: block;
        position: relative;
        left: 50%;
        -moz-transform: translate(-50%, 0);
        -ms-transform: translate(-50%, 0);
        -webkit-transform: translate(-50%, 0);
        transform: translate(-50%, 0);
        width: 80%;
        bottom: auto;
        margin: 30px 0
    }
}

.site-wrapper[data-page="promo"] .slide:nth-of-type(2) .legal-desktop {
    display: inline-block;
    position: absolute;
    -moz-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    font-family: "latoregular", sans-serif;
    color: #bebebe;
    font-size: 14px;
    bottom: 30px;
    left: 50%
}

@media screen and (max-width: 1024px),
(max-height: 600px) {
    .site-wrapper[data-page="promo"] .slide:nth-of-type(2) .legal-desktop {
        display: none
    }
}

.site-wrapper[data-page="promo"] .slide:nth-of-type(2) .follow-us {
    display: none
}

@media screen and (max-width: 1024px),
(max-height: 600px) {
    .site-wrapper[data-page="promo"] .slide:nth-of-type(2) .button {
        display: none
    }
}

.site-wrapper[data-page="promo"] .slide:nth-of-type(2) .button .social-buttons {
    position: absolute
}

.site-wrapper[data-page="promo"] .slide:nth-of-type(2) .button.popup-button {
    margin-bottom: 30px;
    -moz-backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

.site-wrapper[data-page="promo"] .slide:nth-of-type(2) .button.mobile {
    display: none
}

.site-wrapper[data-page="promo"] .slide:nth-of-type(2) .button.mobile.share {
    display: inline-block;
    position: absolute;
    right: 30px;
    bottom: 30px
}

@media screen and (max-width: 1024px),
(max-height: 600px) {
    .site-wrapper[data-page="promo"] .slide:nth-of-type(2) .button.mobile {
        margin: 0 5%;
        margin-top: 20px;
        width: 90%;
        max-width: 400px;
        display: inline-block;
        position: relative;
        box-sizing: border-box
    }

    .site-wrapper[data-page="promo"] .slide:nth-of-type(2) .button.mobile.share {
        display: inline-block;
        position: relative;
        bottom: auto;
        right: auto
    }
}

.site-wrapper[data-page="promo"] .slide:nth-of-type(2) .content {
    position: absolute;
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
    top: 50%;
    left: 50%
}

@media screen and (max-width: 1024px),
(max-height: 600px) {
    .site-wrapper[data-page="promo"] .slide:nth-of-type(2) .content {
        position: relative;
        -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
        left: auto;
        top: auto
    }
}

.site-wrapper[data-page="promo"] .slide:nth-of-type(2) .content h1 {
    text-align: center;
    padding-bottom: 5px;
    border-bottom: 2px solid #000;
    display: inline;
    text-transform: uppercase;
    font-size: 44px;
    line-height: 70px;
    letter-spacing: 8px;
    margin-bottom: 30px
}

@media screen and (max-width: 1024px),
(max-height: 600px) {
    .site-wrapper[data-page="promo"] .slide:nth-of-type(2) .content h1 {
        border: none;
        font-size: 14px;
        line-height: 21px;
        letter-spacing: 2px;
        padding: 30px;
        display: block
    }
}

.site-wrapper[data-page="promo"] .slide:nth-of-type(2) .content .logo {
    -moz-transform: translate(-50%, 0) scale(1.3);
    -ms-transform: translate(-50%, 0) scale(1.3);
    -webkit-transform: translate(-50%, 0) scale(1.3);
    transform: translate(-50%, 0) scale(1.3);
    -moz-backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    left: 50%;
    position: relative;
    width: 550px;
    height: 320px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center
}

@media screen and (max-width: 1024px),
(max-height: 600px) {
    .site-wrapper[data-page="promo"] .slide:nth-of-type(2) .content .logo {
        display: none
    }
}

.site-wrapper[data-page="promo"] .slide:nth-of-type(2) .actions {
    text-align: center;
    position: relative;
    left: 50%;
    -moz-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    text-align: center;
    margin-top: 30px;
    white-space: nowrap
}

.site-wrapper[data-page="promo"] .slide:nth-of-type(2) .actions .replay {
    display: none
}

.site-wrapper[data-page="promo"] .slide:nth-of-type(2) .actions .button {
    text-align: center;
    position: relative;
    margin-left: 20px
}

.site-wrapper[data-page="promo"] .slide:nth-of-type(2) .actions .button.share {
    display: none
}

.site-wrapper[data-page="promo"] .slide:nth-of-type(2) .actions .button:first-of-type {
    margin-left: 0
}

.site-wrapper[data-page="promo"] .slide:nth-of-type(2) .actions .button .social-buttons {
    text-align: center;
    position: absolute
}

.site-wrapper[data-page="promo"] .slide.active {
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0)
}

.site-wrapper[data-page="promo"] .slide.active~.slide {
    -moz-transform: translate(0, 100%);
    -ms-transform: translate(0, 100%);
    -webkit-transform: translate(0, 100%);
    transform: translate(0, 100%)
}

@media screen and (max-width: 1024px),
(max-height: 600px) {
    .site-wrapper[data-page="promo"] .slide {
        -moz-transform: translate(0, 0) !important;
        -ms-transform: translate(0, 0) !important;
        -webkit-transform: translate(0, 0) !important;
        transform: translate(0, 0) !important;
        display: block;
        position: relative;
        border: none
    }

    .site-wrapper[data-page="promo"] .slide.active {
        -moz-transform: translate(0, 0) !important;
        -ms-transform: translate(0, 0) !important;
        -webkit-transform: translate(0, 0) !important;
        transform: translate(0, 0) !important
    }

    .site-wrapper[data-page="promo"] .slide:nth-of-type(1) {
        height: 600px;
        margin-top: 130px
    }
}

@media screen and (max-width: 1024px) and (max-width: 800px),
screen and (max-height: 600px) and (max-width: 800px) {
    .site-wrapper[data-page="promo"] .slide:nth-of-type(1) {
        height: 400px
    }
}

@media screen and (max-width: 1024px) and (max-width: 500px),
screen and (max-height: 600px) and (max-width: 500px) {
    .site-wrapper[data-page="promo"] .slide:nth-of-type(1) {
        height: 300px
    }
}

@media screen and (max-width: 1024px) and (max-width: 350px),
screen and (max-height: 600px) and (max-width: 350px) {
    .site-wrapper[data-page="promo"] .slide:nth-of-type(1) {
        height: 200px
    }
}

@media screen and (max-width: 1024px),
(max-height: 600px) {
    .site-wrapper[data-page="promo"] .slide:nth-of-type(1) .close {
        display: none
    }

    .site-wrapper[data-page="promo"] .slide:nth-of-type(2) {
        min-height: 200px
    }
}

.site-wrapper[data-page="geometrywars"] header #nav-control {
    background-color: #4ad6f3
}

.site-wrapper[data-page="geometrywars"] header.open #nav-control {
    background-color: #000
}

.site-wrapper[data-page="geometrywars"] nav {
    background-color: #4ad6f3
}

.site-wrapper[data-page="geometrywars"] nav a:hover {
    color: #4ad6f3
}

.site-wrapper[data-page="geometrywars"] nav a.geometrywars {
    color: #4ad6f3
}

.site-wrapper[data-page="geometrywars"] nav a.geometrywars:before {
    padding: 0px 15px;
    margin-bottom: -3px;
    margin-left: -15px;
    height: 100%
}

.site-wrapper[data-page="geometrywars"] nav a.geometrywars+div {
    z-index: -2;
    opacity: 1;
    position: fixed;
    bottom: 0px;
    right: 0px;
    left: 0px;
    top: 0px
}

.site-wrapper[data-page="geometrywars"] small {
    display: inline-block;
    font-size: 12px;
    line-height: 14px;
    color: #666
}

.site-wrapper[data-page="geometrywars"] small .image-div:before {
    background-color: #4ad6f3
}

.site-wrapper[data-page="geometrywars"] .preloader .top,
.site-wrapper[data-page="geometrywars"] .preloader .right,
.site-wrapper[data-page="geometrywars"] .preloader .bottom,
.site-wrapper[data-page="geometrywars"] .preloader .left {
    background-color: #4ad6f3
}

.site-wrapper[data-page="geometrywars"] .carousel .button {
    border-color: #4ad6f3
}

.site-wrapper[data-page="geometrywars"] .carousel .button.left:before {
    border-right-color: #4ad6f3
}

.site-wrapper[data-page="geometrywars"] .carousel .button.right:before {
    border-left-color: #4ad6f3
}

.site-wrapper[data-page="geometrywars"] .carousel menu b:after {
    background-color: #4ad6f3
}

.site-wrapper[data-page="geometrywars"] .pagehead h2,
.site-wrapper[data-page="geometrywars"] .videos h2,
.site-wrapper[data-page="geometrywars"] .screenshots h2,
.site-wrapper[data-page="geometrywars"] .features h2,
.site-wrapper[data-page="geometrywars"] .developers h2,
.site-wrapper[data-page="geometrywars"] .platforms h2,
.site-wrapper[data-page="geometrywars"] .explore h2,
.site-wrapper[data-page="geometrywars"] .accolades h2 {
    color: #4ad6f3
}

.site-wrapper[data-page="geometrywars"] .pagehead h2:before,
.site-wrapper[data-page="geometrywars"] .videos h2:before,
.site-wrapper[data-page="geometrywars"] .screenshots h2:before,
.site-wrapper[data-page="geometrywars"] .features h2:before,
.site-wrapper[data-page="geometrywars"] .developers h2:before,
.site-wrapper[data-page="geometrywars"] .platforms h2:before,
.site-wrapper[data-page="geometrywars"] .explore h2:before,
.site-wrapper[data-page="geometrywars"] .accolades h2:before {
    background-color: #4ad6f3
}

.site-wrapper[data-page="geometrywars"] .pagehead h2:after,
.site-wrapper[data-page="geometrywars"] .videos h2:after,
.site-wrapper[data-page="geometrywars"] .screenshots h2:after,
.site-wrapper[data-page="geometrywars"] .features h2:after,
.site-wrapper[data-page="geometrywars"] .developers h2:after,
.site-wrapper[data-page="geometrywars"] .platforms h2:after,
.site-wrapper[data-page="geometrywars"] .explore h2:after,
.site-wrapper[data-page="geometrywars"] .accolades h2:after {
    background: repeating-linear-gradient(0deg, #4ad6f3, #4ad6f3 20%, transparent 20%, transparent 100%) top left;
    background-size: 8px 8px;
    width: 2px
}

.site-wrapper[data-page="geometrywars"] .pagehead.light+.light:before,
.site-wrapper[data-page="geometrywars"] .videos.light+.light:before,
.site-wrapper[data-page="geometrywars"] .screenshots.light+.light:before,
.site-wrapper[data-page="geometrywars"] .features.light+.light:before,
.site-wrapper[data-page="geometrywars"] .developers.light+.light:before,
.site-wrapper[data-page="geometrywars"] .platforms.light+.light:before,
.site-wrapper[data-page="geometrywars"] .explore.light+.light:before,
.site-wrapper[data-page="geometrywars"] .accolades.light+.light:before {
    background: repeating-linear-gradient(90deg, #4ad6f3, #4ad6f3 20%, transparent 20%, transparent 100%) top left;
    background-size: 8px 8px;
    height: 2px
}

.site-wrapper[data-page="geometrywars"] .pagehead.color+.color:before,
.site-wrapper[data-page="geometrywars"] .pagehead.dark+.dark:before,
.site-wrapper[data-page="geometrywars"] .videos.color+.color:before,
.site-wrapper[data-page="geometrywars"] .videos.dark+.dark:before,
.site-wrapper[data-page="geometrywars"] .screenshots.color+.color:before,
.site-wrapper[data-page="geometrywars"] .screenshots.dark+.dark:before,
.site-wrapper[data-page="geometrywars"] .features.color+.color:before,
.site-wrapper[data-page="geometrywars"] .features.dark+.dark:before,
.site-wrapper[data-page="geometrywars"] .developers.color+.color:before,
.site-wrapper[data-page="geometrywars"] .developers.dark+.dark:before,
.site-wrapper[data-page="geometrywars"] .platforms.color+.color:before,
.site-wrapper[data-page="geometrywars"] .platforms.dark+.dark:before,
.site-wrapper[data-page="geometrywars"] .explore.color+.color:before,
.site-wrapper[data-page="geometrywars"] .explore.dark+.dark:before,
.site-wrapper[data-page="geometrywars"] .accolades.color+.color:before,
.site-wrapper[data-page="geometrywars"] .accolades.dark+.dark:before {
    background: repeating-linear-gradient(90deg, #fff, #fff 20%, transparent 20%, transparent 100%) top left;
    background-size: 8px 8px;
    height: 2px
}

.site-wrapper[data-page="geometrywars"] .pagehead.color,
.site-wrapper[data-page="geometrywars"] .videos.color,
.site-wrapper[data-page="geometrywars"] .screenshots.color,
.site-wrapper[data-page="geometrywars"] .features.color,
.site-wrapper[data-page="geometrywars"] .developers.color,
.site-wrapper[data-page="geometrywars"] .platforms.color,
.site-wrapper[data-page="geometrywars"] .explore.color,
.site-wrapper[data-page="geometrywars"] .accolades.color {
    color: #fff;
    background-color: #4ad6f3
}

.site-wrapper[data-page="geometrywars"] .pagehead.color h2,
.site-wrapper[data-page="geometrywars"] .videos.color h2,
.site-wrapper[data-page="geometrywars"] .screenshots.color h2,
.site-wrapper[data-page="geometrywars"] .features.color h2,
.site-wrapper[data-page="geometrywars"] .developers.color h2,
.site-wrapper[data-page="geometrywars"] .platforms.color h2,
.site-wrapper[data-page="geometrywars"] .explore.color h2,
.site-wrapper[data-page="geometrywars"] .accolades.color h2 {
    color: #fff
}

.site-wrapper[data-page="geometrywars"] .pagehead.color h2:before,
.site-wrapper[data-page="geometrywars"] .videos.color h2:before,
.site-wrapper[data-page="geometrywars"] .screenshots.color h2:before,
.site-wrapper[data-page="geometrywars"] .features.color h2:before,
.site-wrapper[data-page="geometrywars"] .developers.color h2:before,
.site-wrapper[data-page="geometrywars"] .platforms.color h2:before,
.site-wrapper[data-page="geometrywars"] .explore.color h2:before,
.site-wrapper[data-page="geometrywars"] .accolades.color h2:before {
    background-color: #fff
}

.site-wrapper[data-page="geometrywars"] .pagehead.color h2:after,
.site-wrapper[data-page="geometrywars"] .videos.color h2:after,
.site-wrapper[data-page="geometrywars"] .screenshots.color h2:after,
.site-wrapper[data-page="geometrywars"] .features.color h2:after,
.site-wrapper[data-page="geometrywars"] .developers.color h2:after,
.site-wrapper[data-page="geometrywars"] .platforms.color h2:after,
.site-wrapper[data-page="geometrywars"] .explore.color h2:after,
.site-wrapper[data-page="geometrywars"] .accolades.color h2:after {
    background: repeating-linear-gradient(0deg, #fff, #fff 20%, transparent 20%, transparent 100%) top left;
    background-size: 8px 8px;
    width: 2px
}

.site-wrapper[data-page="geometrywars"] .pagehead.color *,
.site-wrapper[data-page="geometrywars"] .videos.color *,
.site-wrapper[data-page="geometrywars"] .screenshots.color *,
.site-wrapper[data-page="geometrywars"] .features.color *,
.site-wrapper[data-page="geometrywars"] .developers.color *,
.site-wrapper[data-page="geometrywars"] .platforms.color *,
.site-wrapper[data-page="geometrywars"] .explore.color *,
.site-wrapper[data-page="geometrywars"] .accolades.color * {
    color: #fff
}

.site-wrapper[data-page="geometrywars"] .pagehead.color .carousel .button,
.site-wrapper[data-page="geometrywars"] .videos.color .carousel .button,
.site-wrapper[data-page="geometrywars"] .screenshots.color .carousel .button,
.site-wrapper[data-page="geometrywars"] .features.color .carousel .button,
.site-wrapper[data-page="geometrywars"] .developers.color .carousel .button,
.site-wrapper[data-page="geometrywars"] .platforms.color .carousel .button,
.site-wrapper[data-page="geometrywars"] .explore.color .carousel .button,
.site-wrapper[data-page="geometrywars"] .accolades.color .carousel .button {
    border-color: #fff
}

.site-wrapper[data-page="geometrywars"] .pagehead.color .carousel .button.left:before,
.site-wrapper[data-page="geometrywars"] .videos.color .carousel .button.left:before,
.site-wrapper[data-page="geometrywars"] .screenshots.color .carousel .button.left:before,
.site-wrapper[data-page="geometrywars"] .features.color .carousel .button.left:before,
.site-wrapper[data-page="geometrywars"] .developers.color .carousel .button.left:before,
.site-wrapper[data-page="geometrywars"] .platforms.color .carousel .button.left:before,
.site-wrapper[data-page="geometrywars"] .explore.color .carousel .button.left:before,
.site-wrapper[data-page="geometrywars"] .accolades.color .carousel .button.left:before {
    border-right-color: #fff
}

.site-wrapper[data-page="geometrywars"] .pagehead.color .carousel .button.right:before,
.site-wrapper[data-page="geometrywars"] .videos.color .carousel .button.right:before,
.site-wrapper[data-page="geometrywars"] .screenshots.color .carousel .button.right:before,
.site-wrapper[data-page="geometrywars"] .features.color .carousel .button.right:before,
.site-wrapper[data-page="geometrywars"] .developers.color .carousel .button.right:before,
.site-wrapper[data-page="geometrywars"] .platforms.color .carousel .button.right:before,
.site-wrapper[data-page="geometrywars"] .explore.color .carousel .button.right:before,
.site-wrapper[data-page="geometrywars"] .accolades.color .carousel .button.right:before {
    border-left-color: #fff
}

.site-wrapper[data-page="geometrywars"] .pagehead.color .carousel menu b:after,
.site-wrapper[data-page="geometrywars"] .videos.color .carousel menu b:after,
.site-wrapper[data-page="geometrywars"] .screenshots.color .carousel menu b:after,
.site-wrapper[data-page="geometrywars"] .features.color .carousel menu b:after,
.site-wrapper[data-page="geometrywars"] .developers.color .carousel menu b:after,
.site-wrapper[data-page="geometrywars"] .platforms.color .carousel menu b:after,
.site-wrapper[data-page="geometrywars"] .explore.color .carousel menu b:after,
.site-wrapper[data-page="geometrywars"] .accolades.color .carousel menu b:after {
    background-color: #fff
}

.site-wrapper[data-page="geometrywars"] .pagehead.dark p,
.site-wrapper[data-page="geometrywars"] .pagehead.dark h3,
.site-wrapper[data-page="geometrywars"] .videos.dark p,
.site-wrapper[data-page="geometrywars"] .videos.dark h3,
.site-wrapper[data-page="geometrywars"] .screenshots.dark p,
.site-wrapper[data-page="geometrywars"] .screenshots.dark h3,
.site-wrapper[data-page="geometrywars"] .features.dark p,
.site-wrapper[data-page="geometrywars"] .features.dark h3,
.site-wrapper[data-page="geometrywars"] .developers.dark p,
.site-wrapper[data-page="geometrywars"] .developers.dark h3,
.site-wrapper[data-page="geometrywars"] .platforms.dark p,
.site-wrapper[data-page="geometrywars"] .platforms.dark h3,
.site-wrapper[data-page="geometrywars"] .explore.dark p,
.site-wrapper[data-page="geometrywars"] .explore.dark h3,
.site-wrapper[data-page="geometrywars"] .accolades.dark p,
.site-wrapper[data-page="geometrywars"] .accolades.dark h3 {
    color: #fff
}

.site-wrapper[data-page="geometrywars"] .pagehead.light p,
.site-wrapper[data-page="geometrywars"] .pagehead.light h3,
.site-wrapper[data-page="geometrywars"] .videos.light p,
.site-wrapper[data-page="geometrywars"] .videos.light h3,
.site-wrapper[data-page="geometrywars"] .screenshots.light p,
.site-wrapper[data-page="geometrywars"] .screenshots.light h3,
.site-wrapper[data-page="geometrywars"] .features.light p,
.site-wrapper[data-page="geometrywars"] .features.light h3,
.site-wrapper[data-page="geometrywars"] .developers.light p,
.site-wrapper[data-page="geometrywars"] .developers.light h3,
.site-wrapper[data-page="geometrywars"] .platforms.light p,
.site-wrapper[data-page="geometrywars"] .platforms.light h3,
.site-wrapper[data-page="geometrywars"] .explore.light p,
.site-wrapper[data-page="geometrywars"] .explore.light h3,
.site-wrapper[data-page="geometrywars"] .accolades.light p,
.site-wrapper[data-page="geometrywars"] .accolades.light h3 {
    color: #000
}

.site-wrapper[data-page="geometrywars"] .pagehead .logo {
    height: 185px
}

.site-wrapper[data-page="geometrywars"] .pagehead .background {
    background-color: #4ad6f3;
    background-position: top center
}

.site-wrapper[data-page="geometrywars"] .pagehead .content {
    padding-top: 40px
}

.site-wrapper[data-page="geometrywars"] .pagehead .content h1 {
    background-color: #4ad6f3;
    box-shadow: -18px 0 0 9px #4ad6f3, 18px 0 0 9px #4ad6f3
}

.site-wrapper[data-page="geometrywars"] .pagehead .content h1:first-child {
    margin-bottom: 10px
}

@media screen and (max-width: 800px) {
    .site-wrapper[data-page="geometrywars"] .pagehead .content h1 {
        box-shadow: -3px 0 0 6px #4ad6f3, 3px 0 0 6px #4ad6f3;
        font-size: 20px;
        line-height: 30px
    }
}

.site-wrapper[data-page="geometrywars"] .pagehead .content h3 {
    color: #999;
    font-family: "latoblack", sans-serif;
    font-size: 17px;
    text-transform: uppercase;
    letter-spacing: 4px;
    line-height: 24px;
    margin-bottom: 20px
}

.site-wrapper[data-page="geometrywars"] .pagehead .content li {
    color: #4ad6f3
}

.site-wrapper[data-page="geometrywars"] .pagehead .content .google-promo-image {
    display: block;
    margin-top: 40px;
    width: 400px;
    height: auto;
    margin-left: auto;
    margin-right: auto
}

@media screen and (max-width: 400px) {
    .site-wrapper[data-page="geometrywars"] .pagehead .content .google-promo-image {
        width: 100%
    }
}

.site-wrapper[data-page="geometrywars"] .pagehead .content .google-promo-text {
    font-weight: bold;
    padding-top: 20px;
    padding-bottom: 0
}

.site-wrapper[data-page="geometrywars"] .pagehead .content p.overview-text {
    padding-top: 30px
}

.site-wrapper[data-page="geometrywars"] .pagehead .content .header-video-buttons {
    margin-bottom: 40px
}

.site-wrapper[data-page="geometrywars"] .pagehead .content .header-video-buttons .header-video-button {
    -moz-transition: background 0.2s ease-in-out, color 0.2s ease-in-out;
    -o-transition: background 0.2s ease-in-out, color 0.2s ease-in-out;
    -webkit-transition: background 0.2s ease-in-out, color 0.2s ease-in-out;
    transition: background 0.2s ease-in-out, color 0.2s ease-in-out;
    z-index: 5;
    width: 225px;
    border-color: #999;
    color: #999;
    font-size: 16px;
    margin: 0 5px;
    text-decoration: none
}

@media screen and (max-width: 800px) {
    .site-wrapper[data-page="geometrywars"] .pagehead .content .header-video-buttons .header-video-button {
        width: 90vw;
        padding: 20px 0px;
        margin-left: auto;
        margin-right: auto
    }
}

.site-wrapper[data-page="geometrywars"] .pagehead .content .header-video-buttons .header-video-button:hover,
.site-wrapper[data-page="geometrywars"] .pagehead .content .header-video-buttons .header-video-button:active,
.site-wrapper[data-page="geometrywars"] .pagehead .content .header-video-buttons .header-video-button.active {
    border-color: #fff;
    background-color: #999;
    color: #fff
}

.site-wrapper[data-page="geometrywars"] .pagehead .content .header-video-buttons .header-video-button:first-child {
    margin-right: 15px
}

@media screen and (max-width: 800px) {
    .site-wrapper[data-page="geometrywars"] .pagehead .content .header-video-buttons .header-video-button:first-child {
        margin-right: 0
    }
}

.site-wrapper[data-page="geometrywars"] .developers .left .image-div {
    margin-top: 45px
}

.site-wrapper[data-page="geometrywars"] .developers .left .button {
    color: #4ad6f3;
    border-color: #4ad6f3;
    margin-left: 2px;
    padding-left: 38px;
    padding-right: 38px
}

.site-wrapper[data-page="geometrywars"] .developers .left .button:hover {
    color: #fff;
    background-color: #4ad6f3
}

.site-wrapper[data-page="geometrywars"] .developers .left .follow {
    padding-right: 60px
}

@media screen and (max-width: 800px) {
    .site-wrapper[data-page="geometrywars"] .developers .left .follow {
        padding-right: 0
    }
}

.site-wrapper[data-page="geometrywars"] .features .copy .counter {
    color: #4ad6f3
}

.site-wrapper[data-page="geometrywars"] .screenshots ul li .image-div {
    box-shadow: 0 0 0 0 #4ad6f3
}

.site-wrapper[data-page="geometrywars"] .screenshots ul li.active .image-div {
    box-shadow: 0 0 0 10px #4ad6f3
}

@media screen and (max-width: 800px) {
    .site-wrapper[data-page="geometrywars"] .screenshots ul li.active .image-div {
        box-shadow: 0 0 0 4px #4ad6f3
    }
}

.site-wrapper[data-page="geometrywars"] .screenshots .share {
    border-color: #777;
    bottom: 70px
}

@media screen and (max-width: 800px) {
    .site-wrapper[data-page="geometrywars"] .screenshots .share {
        bottom: -50px
    }
}

@media screen and (max-width: 533.33333px) {
    .site-wrapper[data-page="geometrywars"] .screenshots .share {
        bottom: -10px
    }
}

.site-wrapper[data-page="geometrywars"] .screenshots .share:hover {
    background-color: #777
}

.site-wrapper[data-page="geometrywars"] .screenshots .share .base {
    color: #777
}

.site-wrapper[data-page="geometrywars"] .screenshots .share .base * {
    fill: #777
}

.site-wrapper[data-page="geometrywars"] .videos ul li .youtube {
    box-shadow: 0 0 0 0 #4ad6f3
}

.site-wrapper[data-page="geometrywars"] .videos ul li.active .youtube {
    box-shadow: 0 0 0 10px #4ad6f3
}

@media screen and (max-width: 800px) {
    .site-wrapper[data-page="geometrywars"] .videos ul li.active .youtube {
        box-shadow: 0 0 0 4px #4ad6f3
    }
}

.site-wrapper[data-page="geometrywars"] .explore .button {
    color: #4ad6f3;
    border-color: #4ad6f3
}

.site-wrapper[data-page="geometrywars"] .explore .button:hover {
    color: #fff;
    background-color: #4ad6f3
}

.site-wrapper[data-page="geometrywars"] .platforms {
    padding-bottom: 72px
}

.site-wrapper[data-page="geometrywars"] .platforms .appstore,
.site-wrapper[data-page="geometrywars"] .platforms .amazon,
.site-wrapper[data-page="geometrywars"] .platforms .google,
.site-wrapper[data-page="geometrywars"] .platforms .nvidia,
.site-wrapper[data-page="geometrywars"] .platforms .ps3 {
    display: none !important;
}

@media screen and (max-width: 800px) {
    .site-wrapper[data-page="geometrywars"] .platforms {
        padding: 0 0 60px
    }
}

.site-wrapper[data-page="geometrywars"] .platforms h3 {
    display: inline-block;
    margin-top: 90px !important;
    font-family: "latoblack", sans-serif;
    font-size: 20px;
    text-transform: uppercase;
    color: #000;
    line-height: 26px;
    margin-top: 45px;
    letter-spacing: 3px
}

@media screen and (max-width: 800px) {
    .site-wrapper[data-page="geometrywars"] .platforms h3 {
        font-size: 16px;
        line-height: 18px;
        margin-top: 60px !important
    }
}

.site-wrapper[data-page="geometrywars"] .platforms select::-ms-expand {
    display: none
}

.site-wrapper[data-page="geometrywars"] .platforms #region,
.site-wrapper[data-page="geometrywars"] .platforms #retailer {
    position: relative;
    top: 0;
    right: 0;
    height: 55px;
    display: inline-block;
    text-align: center;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    border: 2px solid #fff;
    margin-left: 15px;
    background: #4ad6f3;
    z-index: 1
}

@media screen and (max-width: 800px) {

    .site-wrapper[data-page="geometrywars"] .platforms #region,
    .site-wrapper[data-page="geometrywars"] .platforms #retailer {
        color: #fff !important;
        margin-top: 25px
    }
}

.site-wrapper[data-page="geometrywars"] .platforms #region+i,
.site-wrapper[data-page="geometrywars"] .platforms #retailer+i {
    position: relative;
    top: 4px;
    right: 25px;
    display: inline-block
}

@media screen and (max-width: 800px) {

    .site-wrapper[data-page="geometrywars"] .platforms #region+i,
    .site-wrapper[data-page="geometrywars"] .platforms #retailer+i {
        border-top-color: #fff !important
    }
}

.site-wrapper[data-page="geometrywars"] .platforms h2 {
    margin-top: 60px !important;
    width: 100%
}

@media screen and (max-width: 800px) {
    .site-wrapper[data-page="geometrywars"] .platforms h2 {
        margin: 40px 0 10px !important;
        max-width: 90%
    }
}

.site-wrapper[data-page="geometrywars"] .platforms .logos {
    display: none
}

.site-wrapper[data-page="geometrywars"] .platforms .logos.selected {
    max-width: 1350px;
    display: block;
    margin: 0 auto
}

.site-wrapper[data-page="geometrywars"] .platforms .retailer {
    position: relative;
    height: 55px;
    width: 232px;
    display: inline-block;
    text-align: center;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    border: 2px solid #fff;
    margin: 7px 15px;
    vertical-align: top
}

.site-wrapper[data-page="geometrywars"] .platforms .retailer:hover {
    background: rgba(255, 255, 255, 0.2)
}

.site-wrapper[data-page="geometrywars"] .platforms .retailer img {
    position: relative;
    top: 50%;
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    opacity: 1
}

.site-wrapper[data-page="geometrywars"] .platforms ul {
    width: 100%;
    max-width: 1000px;
    margin: 60px auto 0
}

.site-wrapper[data-page="geometrywars"] .platforms li {
    width: 25%;
    display: inline-block;
    vertical-align: top;
    text-align: left;
    margin: 0;
    padding: 0 10% 0 10px;
    position: relative
}

@media screen and (max-width: 800px) {
    .site-wrapper[data-page="geometrywars"] .platforms li {
        width: 100%;
        text-align: center;
        margin-bottom: 15px
    }
}

.site-wrapper[data-page="geometrywars"] .platforms li:after {
    content: "";
    position: absolute;
    top: 0;
    right: 16%;
    background-image: url(../images/platforms/square-pattern.png);
    width: 2px;
    height: 40px
}

@media screen and (max-width: 800px) {
    .site-wrapper[data-page="geometrywars"] .platforms li:after {
        display: none
    }
}

.site-wrapper[data-page="geometrywars"] .platforms li:last-child {
    padding: 0 0 0 10px
}

.site-wrapper[data-page="geometrywars"] .platforms li:last-child:after {
    display: none
}

.site-wrapper[data-page="geometrywars"] .platforms li h4 {
    font-family: "latoblack", sans-serif;
    font-size: 18px;
    padding-bottom: 20px;
    letter-spacing: 1px;
    line-height: 20px
}

@media screen and (max-width: 800px) {
    .site-wrapper[data-page="geometrywars"] .platforms li h4 {
        max-width: 100%;
        text-align: center
    }
}

.site-wrapper[data-page="geometrywars"] .platforms li p {
    font-size: 18px;
    line-height: 24px;
    margin: 0 0 15px 0;
    position: relative
}

@media screen and (max-width: 800px) {
    .site-wrapper[data-page="geometrywars"] .platforms li p {
        max-width: 100%;
        text-align: center
    }
}

.site-wrapper[data-page="geometrywars"] .platforms li p:before {
    content: "";
    position: absolute;
    top: 9px;
    left: -12px;
    background: #fff;
    width: 5px;
    height: 2px
}

@media screen and (max-width: 800px) {
    .site-wrapper[data-page="geometrywars"] .platforms li p:before {
        display: none
    }
}

.site-wrapper[data-page="geometrywars"] .platforms li .note {
    font-size: 14px;
    font-style: italic;
    font-family: "latoregular", sans-serif;
    display: inline-block;
    margin-bottom: 15px;
    line-height: 18px;
    max-width: 75%
}

.site-wrapper[data-page="geometrywars"] .platforms .futureDlc {
    display: inline-block;
    padding-top: 75px;
    font-size: 18px;
    font-family: "latoregular", sans-serif
}

.site-wrapper[data-page="geometrywars"] .platforms .clearFix {
    clear: both
}

.site-wrapper[data-page="geometrywars"] .rating-container {
    background: #4ad6f3
}

.site-wrapper[data-page="geometrywars"] .rating {
    -moz-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    font-family: "latoregular", sans-serif;
    font-size: 12px;
    line-height: 16px;
    padding-top: 50px;
    display: block;
    padding-left: 231px;
    position: relative;
    box-sizing: border-box;
    padding-bottom: 80px;
    box-sizing: border-box;
    max-width: 900px;
    text-align: left;
    left: 50%;
    color: #fff
}

@media screen and (max-width: 1000px) {
    .site-wrapper[data-page="geometrywars"] .rating {
        padding: 50px 15px 80px
    }
}

.site-wrapper[data-page="geometrywars"] .rating .rating-icon {
    width: 201px;
    height: 97px;
    position: absolute;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    left: 0
}

@media screen and (max-width: 1000px) {
    .site-wrapper[data-page="geometrywars"] .rating .rating-icon {
        display: block;
        position: relative;
        margin: 0 0 30px 0;
        left: 50%;
        -moz-transform: translate(-50%, 0);
        -ms-transform: translate(-50%, 0);
        -webkit-transform: translate(-50%, 0);
        transform: translate(-50%, 0)
    }
}

.site-wrapper[data-page="kingsquest"] .collapsed .language {
    top: 36px
}

.site-wrapper[data-page="kingsquest"] header {
    pointer-events: visible
}

.site-wrapper[data-page="kingsquest"] header #nav-control {
    background-color: #df751a
}

.site-wrapper[data-page="kingsquest"] header.open #nav-control {
    background-color: #000
}

.site-wrapper[data-page="kingsquest"] header nav {
    background-color: #df751a
}

.site-wrapper[data-page="kingsquest"] header nav a:hover {
    color: #df751a
}

.site-wrapper[data-page="kingsquest"] header nav .image-div:before {
    background-color: #df751a
}

.site-wrapper[data-page="kingsquest"] header .language {
    font-family: sans-serif;
    font-weight: bold;
    padding: 0 0 0 20px;
    position: absolute;
    border-color: #999;
    top: 40px;
    right: 225px;
    width: 173px;
    height: 51px;
    text-transform: uppercase;
    text-align: center;
    background-color: transparent;
    color: #999;
    letter-spacing: 4px;
    font-size: 16px;
    outline: none;
    display: none !important
}

@media screen and (max-width: 780px) {
    .site-wrapper[data-page="kingsquest"] header .language {
        right: 15px
    }
}

@media screen and (max-width: 500px) {
    .site-wrapper[data-page="kingsquest"] header .language {
        font-size: 14px;
        width: 120px
    }
}

.site-wrapper[data-page="kingsquest"] header nav a.kingsquest {
    color: #df751a
}

.site-wrapper[data-page="kingsquest"] header nav a.kingsquest:before {
    padding: 0px 15px;
    margin-bottom: -3px;
    margin-left: -15px;
    height: 100%
}

.site-wrapper[data-page="kingsquest"] header nav a.kingsquest+div {
    z-index: -2;
    opacity: 1;
    position: fixed;
    bottom: 0px;
    right: 0px;
    left: 0px;
    top: 0px
}

.site-wrapper[data-page="kingsquest"] .content h1 {
    background-color: #df751a;
    box-shadow: -18px 0 0 9px #df751a, 18px 0 0 9px #df751a
}

.site-wrapper[data-page="kingsquest"] .content .left .image-div {
    height: 240px;
    background-position: 45px center
}

.site-wrapper[data-page="kingsquest"] .pagehead,
.site-wrapper[data-page="kingsquest"] .videos,
.site-wrapper[data-page="kingsquest"] .screenshots,
.site-wrapper[data-page="kingsquest"] .features,
.site-wrapper[data-page="kingsquest"] .developers,
.site-wrapper[data-page="kingsquest"] .platforms,
.site-wrapper[data-page="kingsquest"] .explore,
.site-wrapper[data-page="kingsquest"] .purchase-options,
.site-wrapper[data-page="kingsquest"] .collection-promo,
.site-wrapper[data-page="kingsquest"] .media,
.site-wrapper[data-page="kingsquest"] .sections,
.site-wrapper[data-page="kingsquest"] .about {
    position: relative;
    z-index: 3
}

.site-wrapper[data-page="kingsquest"] .pagehead h2,
.site-wrapper[data-page="kingsquest"] .videos h2,
.site-wrapper[data-page="kingsquest"] .screenshots h2,
.site-wrapper[data-page="kingsquest"] .features h2,
.site-wrapper[data-page="kingsquest"] .developers h2,
.site-wrapper[data-page="kingsquest"] .platforms h2,
.site-wrapper[data-page="kingsquest"] .explore h2,
.site-wrapper[data-page="kingsquest"] .purchase-options h2,
.site-wrapper[data-page="kingsquest"] .collection-promo h2,
.site-wrapper[data-page="kingsquest"] .media h2,
.site-wrapper[data-page="kingsquest"] .sections h2,
.site-wrapper[data-page="kingsquest"] .about h2 {
    color: #df751a
}

.site-wrapper[data-page="kingsquest"] .pagehead h2:before,
.site-wrapper[data-page="kingsquest"] .videos h2:before,
.site-wrapper[data-page="kingsquest"] .screenshots h2:before,
.site-wrapper[data-page="kingsquest"] .features h2:before,
.site-wrapper[data-page="kingsquest"] .developers h2:before,
.site-wrapper[data-page="kingsquest"] .platforms h2:before,
.site-wrapper[data-page="kingsquest"] .explore h2:before,
.site-wrapper[data-page="kingsquest"] .purchase-options h2:before,
.site-wrapper[data-page="kingsquest"] .collection-promo h2:before,
.site-wrapper[data-page="kingsquest"] .media h2:before,
.site-wrapper[data-page="kingsquest"] .sections h2:before,
.site-wrapper[data-page="kingsquest"] .about h2:before {
    background-color: #df751a
}

.site-wrapper[data-page="kingsquest"] .pagehead h2:after,
.site-wrapper[data-page="kingsquest"] .videos h2:after,
.site-wrapper[data-page="kingsquest"] .screenshots h2:after,
.site-wrapper[data-page="kingsquest"] .features h2:after,
.site-wrapper[data-page="kingsquest"] .developers h2:after,
.site-wrapper[data-page="kingsquest"] .platforms h2:after,
.site-wrapper[data-page="kingsquest"] .explore h2:after,
.site-wrapper[data-page="kingsquest"] .purchase-options h2:after,
.site-wrapper[data-page="kingsquest"] .collection-promo h2:after,
.site-wrapper[data-page="kingsquest"] .media h2:after,
.site-wrapper[data-page="kingsquest"] .sections h2:after,
.site-wrapper[data-page="kingsquest"] .about h2:after {
    background: repeating-linear-gradient(0deg, #df751a, #df751a 20%, transparent 20%, transparent 100%) top left;
    background-size: 8px 8px;
    width: 2px
}

.site-wrapper[data-page="kingsquest"] .pagehead.light+.light:before,
.site-wrapper[data-page="kingsquest"] .videos.light+.light:before,
.site-wrapper[data-page="kingsquest"] .screenshots.light+.light:before,
.site-wrapper[data-page="kingsquest"] .features.light+.light:before,
.site-wrapper[data-page="kingsquest"] .developers.light+.light:before,
.site-wrapper[data-page="kingsquest"] .platforms.light+.light:before,
.site-wrapper[data-page="kingsquest"] .explore.light+.light:before,
.site-wrapper[data-page="kingsquest"] .purchase-options.light+.light:before,
.site-wrapper[data-page="kingsquest"] .collection-promo.light+.light:before,
.site-wrapper[data-page="kingsquest"] .media.light+.light:before,
.site-wrapper[data-page="kingsquest"] .sections.light+.light:before,
.site-wrapper[data-page="kingsquest"] .about.light+.light:before {
    background: repeating-linear-gradient(90deg, #999, #999 20%, transparent 20%, transparent 100%) top left;
    background-size: 8px 8px;
    height: 2px
}

.site-wrapper[data-page="kingsquest"] .developers {
    padding: 80px 0 20px
}

@media screen and (max-width: 800px) {
    .site-wrapper[data-page="kingsquest"] .developers h2:after {
        display: none
    }
}

@media screen and (max-width: 800px) {
    .site-wrapper[data-page="kingsquest"] .developers .left .image-div {
        background-position: center center
    }
}

.site-wrapper[data-page="kingsquest"] .developers .left .button {
    color: #df751a;
    border-color: #df751a;
    margin-left: 2px;
    padding-left: 38px;
    padding-right: 38px
}

.site-wrapper[data-page="kingsquest"] .developers .left .button:hover {
    color: #fff;
    background-color: #df751a
}

.site-wrapper[data-page="kingsquest"] .developers .left .follow {
    padding-right: 60px
}

@media screen and (max-width: 800px) {
    .site-wrapper[data-page="kingsquest"] .developers .left .follow {
        padding-right: 0
    }
}

.site-wrapper[data-page="kingsquest"] .platforms {
    background-color: #df751a
}

.site-wrapper[data-page="kingsquest"] .platforms h2 {
    color: #fff
}

.site-wrapper[data-page="kingsquest"] .explore .button {
    color: #df751a;
    border-color: #df751a
}

.site-wrapper[data-page="kingsquest"] .explore .button:hover {
    color: #fff;
    background-color: #df751a
}

.site-wrapper[data-page="kingsquest"] .screenshots,
.site-wrapper[data-page="kingsquest"] .media,
.site-wrapper[data-page="kingsquest"] .section-features {
    padding-top: 0 !important;
    height: 750px
}

@media screen and (max-width: 800px) {

    .site-wrapper[data-page="kingsquest"] .screenshots,
    .site-wrapper[data-page="kingsquest"] .media,
    .site-wrapper[data-page="kingsquest"] .section-features {
        height: 750px
    }
}

@media screen and (max-width: 535px) {

    .site-wrapper[data-page="kingsquest"] .screenshots,
    .site-wrapper[data-page="kingsquest"] .media,
    .site-wrapper[data-page="kingsquest"] .section-features {
        height: 600px
    }
}

.site-wrapper[data-page="kingsquest"] .screenshots ul li .share,
.site-wrapper[data-page="kingsquest"] .media ul li .share,
.site-wrapper[data-page="kingsquest"] .section-features ul li .share {
    margin-bottom: 0
}

.site-wrapper[data-page="kingsquest"] .screenshots ul li .image-div,
.site-wrapper[data-page="kingsquest"] .media ul li .image-div,
.site-wrapper[data-page="kingsquest"] .section-features ul li .image-div {
    box-shadow: 0 0 0 10px #df751a
}

.site-wrapper[data-page="kingsquest"] .screenshots ul li .button,
.site-wrapper[data-page="kingsquest"] .media ul li .button,
.site-wrapper[data-page="kingsquest"] .section-features ul li .button {
    border-color: #999;
    border: 1px solid #999
}

.site-wrapper[data-page="kingsquest"] .screenshots ul li .button .base,
.site-wrapper[data-page="kingsquest"] .media ul li .button .base,
.site-wrapper[data-page="kingsquest"] .section-features ul li .button .base {
    color: #999
}

.site-wrapper[data-page="kingsquest"] .screenshots ul li .button .base .share-icon,
.site-wrapper[data-page="kingsquest"] .media ul li .button .base .share-icon,
.site-wrapper[data-page="kingsquest"] .section-features ul li .button .base .share-icon {
    fill: #999;
    border-color: #999;
    color: #999
}

.site-wrapper[data-page="kingsquest"] .screenshots ul li .button:hover,
.site-wrapper[data-page="kingsquest"] .media ul li .button:hover,
.site-wrapper[data-page="kingsquest"] .section-features ul li .button:hover {
    color: #999;
    background-color: #999
}

.site-wrapper[data-page="kingsquest"] .screenshots ul li .title,
.site-wrapper[data-page="kingsquest"] .media ul li .title,
.site-wrapper[data-page="kingsquest"] .section-features ul li .title {
    margin-top: 0;
    font-size: 22px;
    font-weight: bold;
    top: 425px
}

@media screen and (max-width: 800px) {

    .site-wrapper[data-page="kingsquest"] .screenshots ul li .title,
    .site-wrapper[data-page="kingsquest"] .media ul li .title,
    .site-wrapper[data-page="kingsquest"] .section-features ul li .title {
        top: 435px
    }
}

@media screen and (max-width: 533.33333px) {

    .site-wrapper[data-page="kingsquest"] .screenshots ul li .title,
    .site-wrapper[data-page="kingsquest"] .media ul li .title,
    .site-wrapper[data-page="kingsquest"] .section-features ul li .title {
        top: 265px
    }
}

.site-wrapper[data-page="kingsquest"] .screenshots ul li .caption,
.site-wrapper[data-page="kingsquest"] .media ul li .caption,
.site-wrapper[data-page="kingsquest"] .section-features ul li .caption {
    margin-top: 0;
    top: 470px
}

@media screen and (max-width: 800px) {

    .site-wrapper[data-page="kingsquest"] .screenshots ul li .caption,
    .site-wrapper[data-page="kingsquest"] .media ul li .caption,
    .site-wrapper[data-page="kingsquest"] .section-features ul li .caption {
        top: 475px
    }
}

@media screen and (max-width: 533.33333px) {

    .site-wrapper[data-page="kingsquest"] .screenshots ul li .caption,
    .site-wrapper[data-page="kingsquest"] .media ul li .caption,
    .site-wrapper[data-page="kingsquest"] .section-features ul li .caption {
        top: 325px
    }
}

.site-wrapper[data-page="kingsquest"] .media:before {
    margin: 0 !important
}

.site-wrapper[data-page="kingsquest"] .media .carousel {
    top: 200px
}

.site-wrapper[data-page="kingsquest"] .carousel .button {
    border-color: #df751a
}

.site-wrapper[data-page="kingsquest"] .carousel .button.left:before {
    border-right-color: #df751a
}

.site-wrapper[data-page="kingsquest"] .carousel .button.right:before {
    border-left-color: #df751a
}

.site-wrapper[data-page="kingsquest"] .carousel menu b:after {
    background-color: #df751a
}

.site-wrapper[data-page="kingsquest"] .videos .youtube,
.site-wrapper[data-page="kingsquest"] .media .youtube,
.site-wrapper[data-page="kingsquest"] .section-features .youtube {
    box-shadow: 0 0 0 10px #df751a
}

.site-wrapper[data-page="kingsquest"] .rating-container {
    background: #df751a
}

.site-wrapper[data-page="kingsquest"] .rating {
    -moz-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    font-family: "latoregular", sans-serif;
    font-size: 12px;
    line-height: 16px;
    padding-top: 50px;
    display: block;
    padding-left: 231px;
    position: relative;
    box-sizing: border-box;
    padding-bottom: 80px;
    box-sizing: border-box;
    max-width: 900px;
    text-align: left;
    left: 50%;
    color: #fff
}

.site-wrapper[data-page="kingsquest"] .rating a {
    color: #fff
}

@media screen and (max-width: 1000px) {
    .site-wrapper[data-page="kingsquest"] .rating {
        padding: 50px 15px 80px
    }
}

.site-wrapper[data-page="kingsquest"] .rating .rating-icon {
    width: 201px;
    height: 97px;
    position: absolute;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    left: 0
}

@media screen and (max-width: 1000px) {
    .site-wrapper[data-page="kingsquest"] .rating .rating-icon {
        display: block;
        position: relative;
        margin: 0 0 30px 0;
        left: 50%;
        -moz-transform: translate(-50%, 0);
        -ms-transform: translate(-50%, 0);
        -webkit-transform: translate(-50%, 0);
        transform: translate(-50%, 0)
    }
}

.site-wrapper[data-page="kingsquest"] .collection-promo {
    display: block;
    background-color: #df751a;
    position: relative;
    text-align: center;
    padding: 70px 25px 10px 25px
}

@media screen and (max-width: 940px) {
    .site-wrapper[data-page="kingsquest"] .collection-promo {
        padding: 70px 15px 30px 15px
    }
}

@media screen and (max-width: 800px) {
    .site-wrapper[data-page="kingsquest"] .collection-promo {
        padding: 30px 15px
    }
}

.site-wrapper[data-page="kingsquest"] .collection-promo h2 {
    color: #fff;
    margin-bottom: 15px
}

.site-wrapper[data-page="kingsquest"] .collection-promo h2:before,
.site-wrapper[data-page="kingsquest"] .collection-promo h2:after {
    display: none
}

.site-wrapper[data-page="kingsquest"] .collection-promo .content {
    display: inline-block;
    position: relative;
    max-width: 940px;
    width: 100%;
    white-space: nowrap;
    color: #fff
}

.site-wrapper[data-page="kingsquest"] .collection-promo .content .copy,
.site-wrapper[data-page="kingsquest"] .collection-promo .content .image-div {
    vertical-align: middle;
    display: inline-block
}

.site-wrapper[data-page="kingsquest"] .collection-promo .content .image-div {
    background-size: cover;
    margin: 24px;
    height: 218px;
    width: 388px
}

.site-wrapper[data-page="kingsquest"] .collection-promo .content .copy {
    width: 50%;
    text-align: left
}

.site-wrapper[data-page="kingsquest"] .collection-promo .content .copy h3 {
    font-family: "latoregular", sans-serif;
    font-size: 16px
}

.site-wrapper[data-page="kingsquest"] .collection-promo .content .copy .button {
    pointer-events: visible
}

.site-wrapper[data-page="kingsquest"] .collection-promo .content .copy .button:hover {
    background-color: #fff;
    color: #df751a
}

.site-wrapper[data-page="kingsquest"] .collection-promo .content .tabs-anchor {
    font-family: "latoblack", sans-serif;
    font-size: 15px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-bottom: 10px;
    margin-top: 30px
}

.site-wrapper[data-page="kingsquest"] .collection-promo .content ul li {
    font-family: "latoregular", sans-serif;
    font-size: 15px;
    letter-spacing: 0.05em;
    line-height: 19px;
    position: relative;
    margin-top: 9px;
    padding-left: 15px
}

.site-wrapper[data-page="kingsquest"] .collection-promo .content ul li:last-of-type {
    margin-bottom: 9px
}

.site-wrapper[data-page="kingsquest"] .collection-promo .content ul li:before {
    content: "";
    position: absolute;
    background-color: #fff;
    left: 0;
    top: 7px;
    border-radius: 50%;
    width: 5px;
    height: 5px
}

.site-wrapper[data-page="kingsquest"] .collection-promo .content .button {
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    font-family: "latoblack", sans-serif;
    font-size: 12px;
    letter-spacing: 0.2em;
    margin-top: 10px
}

.site-wrapper[data-page="kingsquest"] .collection-promo .content .button:hover {
    background-color: #df751a;
    color: #fff
}

@media screen and (max-width: 940px) {
    .site-wrapper[data-page="kingsquest"] .collection-promo .content {
        white-space: normal;
        text-align: center
    }

    .site-wrapper[data-page="kingsquest"] .collection-promo .content .image-div {
        height: 47vw;
        width: 80vw;
        margin: 0 auto 20px auto
    }

    .site-wrapper[data-page="kingsquest"] .collection-promo .content .copy {
        width: auto;
        text-align: center;
        margin-bottom: 30px
    }

    .site-wrapper[data-page="kingsquest"] .collection-promo .content .copy ul {
        margin: 15px;
        text-align: left
    }

    .site-wrapper[data-page="kingsquest"] .collection-promo .content .tabs-anchor {
        margin-top: 0;
        margin-bottom: 0
    }
}

.site-wrapper[data-page="kingsquest"] .order {
    position: relative;
    z-index: 3;
    background-color: #df751a;
    color: #fff;
    padding-bottom: 40px
}

.site-wrapper[data-page="kingsquest"] .order h2 {
    position: relative;
    display: inline-block;
    font-size: 26px;
    line-height: 26px;
    text-transform: uppercase;
    letter-spacing: 6px;
    padding: 6px;
    margin: 45px 0
}

@media screen and (max-width: 800px) {
    .site-wrapper[data-page="kingsquest"] .order h2 {
        font-size: 18px;
        letter-spacing: 5px;
        line-height: 24px
    }
}

.site-wrapper[data-page="kingsquest"] .order .options,
.site-wrapper[data-page="kingsquest"] .order .selects {
    display: block
}

.site-wrapper[data-page="kingsquest"] .order .selects {
    display: none;
}

.site-wrapper[data-page="kingsquest"] .order .selects li {
    display: block
}

.site-wrapper[data-page="kingsquest"] .order .selects label,
.site-wrapper[data-page="kingsquest"] .order .selects select {
    display: inline-block;
    margin: 10px 24px;
    text-transform: uppercase;
    font-family: "latoblack", sans-serif;
    font-size: 12px;
    letter-spacing: 0.2em;
    color: #fff
}

.site-wrapper[data-page="kingsquest"] .order .selects label {
    text-align: left;
    width: 200px
}

.site-wrapper[data-page="kingsquest"] .order .selects label:last-child {
    position: relative;
    left: -206px
}

@media screen and (max-width: 680px) {
    .site-wrapper[data-page="kingsquest"] .order .selects label:last-child {
        left: 0
    }
}

.site-wrapper[data-page="kingsquest"] .order .selects select {
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    outline: none;
    border: none;
    appearance: none;
    background: none;
    box-shadow: none;
    border-radius: 0;
    width: 360px;
    max-width: 80%;
    padding: 14px 18px;
    border: 1px solid #fff;
    border-radius: 4px;
    position: relative;
    cursor: pointer;
    z-index: 2
}

.site-wrapper[data-page="kingsquest"] .order .selects select::-ms-expand {
    display: none
}

.site-wrapper[data-page="kingsquest"] .order .selects select+i {
    position: absolute;
    border-top: 6px solid #fff;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    -moz-transform: translate(-50px, 28px);
    -ms-transform: translate(-50px, 28px);
    -webkit-transform: translate(-50px, 28px);
    transform: translate(-50px, 28px);
    z-index: 1
}

.site-wrapper[data-page="kingsquest"] .order .selects select option {
    background: #ccc !important
}

@media screen and (max-width: 360px) {
    .site-wrapper[data-page="kingsquest"] .order .selects .package {
        font-size: 10px
    }
}

.site-wrapper[data-page="kingsquest"] .order .options {
    margin: 0 auto
}

@media screen and (max-width: 700px) {
    .site-wrapper[data-page="kingsquest"] .order .options {
        width: 70vw
    }
}

@media screen and (max-width: 480px) {
    .site-wrapper[data-page="kingsquest"] .order .options {
        width: 90vw
    }
}

.site-wrapper[data-page="kingsquest"] .order .options .retailer {
    -moz-transition: background 0.2s ease-in-out, color 0.2s ease-in-out;
    -o-transition: background 0.2s ease-in-out, color 0.2s ease-in-out;
    -webkit-transition: background 0.2s ease-in-out, color 0.2s ease-in-out;
    transition: background 0.2s ease-in-out, color 0.2s ease-in-out;
    display: inline-block;
    border: 1px solid #fff;
    border-radius: 4px;
    width: 138px;
    height: 75px;
    margin: 13px;
    display: none
}

.site-wrapper[data-page="kingsquest"] .order .options .retailer.hidden {
    display: none
}

.site-wrapper[data-page="kingsquest"] .order .options .retailer:hover {
    background-color: #999
}

.site-wrapper[data-page="kingsquest"] .order .options .retailer img {
    height: 100%;
    width: 100%
}

.site-wrapper[data-page="kingsquest"] .order .coming-soon {
    display: none;
    font-size: 22px
}

.site-wrapper[data-page="kingsquest"] .order .soon-active {
    display: block
}

.site-wrapper[data-page="kingsquest"] .order .order-footer {
    margin-top: 20px
}

.site-wrapper[data-page="kingsquest"] .order .order-footer .image-div {
    background-size: contain;
    background-repeat: no-repeat;
    position: relative;
    display: inline-block;
    width: 223px;
    height: 107px;
    top: -15px
}

.site-wrapper[data-page="kingsquest"] .order .order-footer .legal {
    display: inline-block;
    position: relative;
    padding: 20px 0 0 20px
}

.site-wrapper[data-page="kingsquest"] .order .order-footer .legal p {
    line-height: normal;
    font-size: 12px;
    box-sizing: border-box;
    max-width: 450px;
    text-align: left
}

.site-wrapper[data-page="kingsquest"] .order .order-footer .legal p strong {
    font-weight: 900;
    font-weight: bold
}

.site-wrapper[data-page="kingsquest"] .chapters {
    position: relative;
    overflow: hidden;
    z-index: 1
}

.site-wrapper[data-page="kingsquest"] .chapters .tooltip {
    position: relative;
    cursor: pointer
}

.site-wrapper[data-page="kingsquest"] .chapters .tooltip:before,
.site-wrapper[data-page="kingsquest"] .chapters .tooltip:after {
    -moz-transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
    -o-transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
    -webkit-transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
    transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
    position: absolute;
    opacity: 1;
    visibility: visible
}

@media screen and (max-width: 600px) {

    .site-wrapper[data-page="kingsquest"] .chapters .tooltip:before,
    .site-wrapper[data-page="kingsquest"] .chapters .tooltip:after {
        visibility: hidden;
        opacity: 0
    }
}

.site-wrapper[data-page="kingsquest"] .chapters .tooltip:hover:before,
.site-wrapper[data-page="kingsquest"] .chapters .tooltip:hover:after {
    visibility: visible;
    opacity: 1
}

.site-wrapper[data-page="kingsquest"] .chapters .tooltip:before {
    content: "";
    z-index: 1001;
    border: 6px solid transparent;
    background: transparent
}

.site-wrapper[data-page="kingsquest"] .chapters .tooltip:after {
    content: attr(data-tooltip);
    padding: 8px;
    width: 140px;
    text-align: center;
    margin: 0 auto;
    color: #eee;
    font-size: 9px;
    z-index: 1000;
    top: 22px;
    left: 50%;
    right: 0;
    margin-left: -70px;
    box-sizing: border-box
}

@media screen and (max-width: 600px) {
    .site-wrapper[data-page="kingsquest"] .chapters .tooltip:after {
        font-size: 14px;
        top: 48px;
        font-size: 12px;
        background: #999;
        color: #fff
    }
}

@media screen and (max-width: 600px) {
    .site-wrapper[data-page="kingsquest"] .chapters .tooltip:nth-last-child(-n+1):after {
        left: auto;
        margin-left: 0px
    }
}

.site-wrapper[data-page="kingsquest"] .chapters .tabs-fixed {
    position: fixed
}

.site-wrapper[data-page="kingsquest"] .chapters .tabs {
    white-space: nowrap;
    z-index: 2;
    font-size: 0;
    top: 85px;
    right: 20px;
    left: 20px
}

.site-wrapper[data-page="kingsquest"] .chapters .tabs .temp-disable:hover,
.site-wrapper[data-page="kingsquest"] .chapters .tabs .temp-disable:active,
.site-wrapper[data-page="kingsquest"] .chapters .tabs .temp-disable:focus {
    background-color: #ccc;
    cursor: default
}

@media screen and (max-width: 800px) {
    .site-wrapper[data-page="kingsquest"] .chapters .tabs {
        right: 10px;
        left: 10px
    }
}

.site-wrapper[data-page="kingsquest"] .chapters .tabs label {
    display: none;
    text-transform: uppercase;
    background-color: #ccc;
    color: #fff;
    padding: 18px 0 15px 0;
    font-family: "latoblack", sans-serif;
    font-size: 12px;
    letter-spacing: 0.2em;
    border-bottom: 1px solid #fff
}

@media screen and (max-width: 600px) {
    .site-wrapper[data-page="kingsquest"] .chapters .tabs label {
        display: none
    }
}

.site-wrapper[data-page="kingsquest"] .chapters .tabs button {
    border: none;
    border-radius: 0;
    box-shadow: -1px 0 0 0 #fff;
    background-color: #ccc;
    color: #fff;
    display: inline-block;
    height: 46px;
    width: 16.7%;
    text-transform: uppercase;
    font-family: "latoblack", sans-serif;
    font-size: 12px;
    letter-spacing: 0.2em;
    cursor: pointer;
    position: relative;
    text-align: center;
    outline: none
}

.site-wrapper[data-page="kingsquest"] .chapters .tabs button:disabled {
    pointer-events: none
}

.site-wrapper[data-page="kingsquest"] .chapters .tabs button:focus {
    background-color: #666
}

.site-wrapper[data-page="kingsquest"] .chapters .tabs button span.hide-desktop {
    display: none
}

@media screen and (max-width: 600px) {
    .site-wrapper[data-page="kingsquest"] .chapters .tabs button span {
        display: none
    }

    .site-wrapper[data-page="kingsquest"] .chapters .tabs button span.hide-desktop {
        display: block
    }
}

.site-wrapper[data-page="kingsquest"] .chapters .tabs button.active {
    background-color: #df751a
}

.site-wrapper[data-page="kingsquest"] .chapters .tabs button.active:before {
    content: "";
    position: absolute;
    border-top: 9px solid #df751a;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    margin-left: -9px;
    left: 50%;
    top: 100%
}

.site-wrapper[data-page="kingsquest"] .chapters .sections {
    position: relative;
    z-index: 1
}

.site-wrapper[data-page="kingsquest"] .chapters .sections .section {
    background-color: #eee;
    display: none
}

.site-wrapper[data-page="kingsquest"] .chapters .sections .section.active {
    display: block
}

.site-wrapper[data-page="kingsquest"] .chapters .sections .section.offset {
    position: relative;
    top: 46px;
    padding-bottom: 46px
}

.site-wrapper[data-page="kingsquest"] .chapters .sections .section p {
    display: block;
    padding: 50px 20px 40px 20px;
    box-sizing: border-box;
    position: relative;
    text-align: center;
    font-size: 17px;
    letter-spacing: 1px;
    white-space: pre-wrap;
    -moz-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    margin-top: 0px;
    width: 100%;
    max-width: 800px;
    left: 50%
}

@media screen and (max-width: 800px) {
    .site-wrapper[data-page="kingsquest"] .chapters .sections .section p {
        padding: 30px 15px 30px 15px;
        font-size: 15px;
        letter-spacing: 0;
        line-height: 28px;
        text-align: left
    }
}

.site-wrapper[data-page="kingsquest"] .chapters .sections .section .cover {
    position: relative;
    height: 600px
}

.site-wrapper[data-page="kingsquest"] .chapters .sections .section .cover .banner {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    background-color: transparent;
    position: relative;
    height: 300px;
    width: 600px;
    top: 20px;
    margin: 0 auto
}

@media screen and (max-width: 625px) {
    .site-wrapper[data-page="kingsquest"] .chapters .sections .section .cover .banner {
        width: 90%
    }
}

.site-wrapper[data-page="kingsquest"] .chapters .sections .section .cover h2 {
    white-space: normal;
    color: #fff;
    margin-top: 20px
}

.site-wrapper[data-page="kingsquest"] .chapters .sections .section .cover h2:before,
.site-wrapper[data-page="kingsquest"] .chapters .sections .section .cover h2:after {
    display: none
}

.site-wrapper[data-page="kingsquest"] .chapters .sections .section .cover h2+h2 {
    color: #fff;
    background-color: none;
    -moz-transform: translate(-50%, 50%);
    -ms-transform: translate(-50%, 50%);
    -webkit-transform: translate(-50%, 50%);
    transform: translate(-50%, 50%);
    padding: 10px 30px;
    margin-top: 45px
}

.site-wrapper[data-page="kingsquest"] .chapters .sections .section .cover .background {
    background-size: cover;
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    top: 0
}

.site-wrapper[data-page="kingsquest"] .chapters .sections .section .section-features {
    position: relative;
    height: 370px
}

.site-wrapper[data-page="kingsquest"] .chapters .sections .section .section-features .carousel {
    top: -140px
}

.site-wrapper[data-page="kingsquest"] .chapters .sections .section .section-features .media-container {
    position: relative;
    top: 280px
}

@media screen and (max-width: 535px) {
    .site-wrapper[data-page="kingsquest"] .chapters .sections .section .section-features .media-container {
        top: 160px
    }
}

.site-wrapper[data-page="kingsquest"] .chapters .sections .section .section-features .media-container .button {
    -moz-transition: background 0.2s ease-in-out, color 0.2s ease-in-out;
    -o-transition: background 0.2s ease-in-out, color 0.2s ease-in-out;
    -webkit-transition: background 0.2s ease-in-out, color 0.2s ease-in-out;
    transition: background 0.2s ease-in-out, color 0.2s ease-in-out;
    z-index: 5;
    width: 225px;
    border-color: #999;
    color: #999;
    font-size: 16px;
    margin: 0 5px
}

@media screen and (max-width: 800px) {
    .site-wrapper[data-page="kingsquest"] .chapters .sections .section .section-features .media-container .button {
        width: 90vw;
        padding: 20px 0px;
        margin-left: auto;
        margin-right: auto
    }
}

.site-wrapper[data-page="kingsquest"] .chapters .sections .section .section-features .media-container .button:hover,
.site-wrapper[data-page="kingsquest"] .chapters .sections .section .section-features .media-container .button:active {
    border-color: #fff;
    background-color: #999;
    color: #fff
}

.site-wrapper[data-page="kingsquest"] .chapters .sections .section .section-features .media-container .active-button {
    border-color: #fff;
    background-color: #999;
    color: #fff
}

.site-wrapper[data-page="kingsquest"] .chapters .sections .section .section-features .media-container .hidden {
    display: none
}

.site-wrapper[data-page="kingsquest"] .chapters .sections .section .about {
    margin-top: 60px
}

@media screen and (max-width: 800px) {
    .site-wrapper[data-page="kingsquest"] .chapters .sections .section .about {
        margin-top: 120px
    }
}

@media screen and (max-width: 535px) {
    .site-wrapper[data-page="kingsquest"] .chapters .sections .section .about {
        margin-top: 40px
    }
}

.site-wrapper[data-page="kingsquest"] .chapters .sections .purchase-options {
    padding-bottom: 60px
}

.site-wrapper[data-page="kingsquest"] .chapters .sections .purchase-options h4 {
    font-family: "latoregular", sans-serif;
    font-weight: 900;
    font-size: 14px
}

.site-wrapper[data-page="kingsquest"] .chapters .sections .purchase-options .options {
    font-size: 0
}

.site-wrapper[data-page="kingsquest"] .chapters .sections .purchase-options .options li {
    vertical-align: top;
    display: inline-block;
    box-sizing: border-box;
    max-width: 400px;
    padding: 13px;
    width: 33%
}

@media screen and (max-width: 1100px) {
    .site-wrapper[data-page="kingsquest"] .chapters .sections .purchase-options .options li {
        text-align: center;
        display: block;
        padding-bottom: 45featurepx;
        max-width: 100%;
        width: 100%
    }
}

.site-wrapper[data-page="kingsquest"] .chapters .sections .purchase-options .options li .button {
    -moz-transition: background 0.2s ease-in-out, color 0.2s ease-in-out;
    -o-transition: background 0.2s ease-in-out, color 0.2s ease-in-out;
    -webkit-transition: background 0.2s ease-in-out, color 0.2s ease-in-out;
    transition: background 0.2s ease-in-out, color 0.2s ease-in-out;
    opacity: 0.5;
    font-size: 16px;
    padding-right: 0;
    padding-left: 0;
    max-width: 600px;
    width: 100%;
    margin-top: 2px
}

.site-wrapper[data-page="kingsquest"] .chapters .sections .purchase-options .options li .button:hover {
    background-color: #232323;
    color: #fff;
    border-color: #fff
}

.site-wrapper[data-page="kingsquest"] .chapters .sections .purchase-options .options li .optionDisabled {
    pointer-events: none;
    color: #989898;
    border-color: #989898
}

.site-wrapper[data-page="kingsquest"] .chapters .sections .purchase-options .options li .optionActive {
    color: #df751a;
    border-color: #df751a;
    border-width: 2px;
    opacity: 1;
    font-size: 15px
}

.site-wrapper[data-page="kingsquest"] .chapters .sections .purchase-options .options li .optionActive:hover {
    background-color: #df751a;
    color: #fff;
    border-color: #df751a
}

.site-wrapper[data-page="kingsquest"] .chapters .sections .purchase-options .options li .points {
    width: 100%;
    max-width: 600px;
    display: inline-block;
    text-align: center;
    list-style-type: none
}

.site-wrapper[data-page="kingsquest"] .chapters .sections .purchase-options .options li .points li {
    position: relative;
    display: block;
    list-style-type: none;
    padding-bottom: 0;
    padding-left: 21px;
    font-family: "latoregular", sans-serif;
    width: 100%;
    color: #232323;
    font-size: 15px;
    letter-spacing: 0.05em;
    line-height: 19px;
    text-align: center
}

.site-wrapper[data-page="kingsquest"] .chapters .sections .purchase-options .options li .points li:before {
    position: absolute;
    background-color: #232323;
    left: 7px;
    top: 18px;
    border-radius: 50%;
    width: 5px;
    height: 5px
}

.site-wrapper[data-page="shiftlings"] header #nav-control {
    background-color: #fcbe01
}

.site-wrapper[data-page="shiftlings"] header.open #nav-control {
    background-color: #000
}

.site-wrapper[data-page="shiftlings"] header nav {
    background-color: #fcbe01
}

.site-wrapper[data-page="shiftlings"] header nav a:hover {
    color: #fcbe01
}

.site-wrapper[data-page="shiftlings"] header nav .image-div:before {
    background-color: #fcbe01
}

.site-wrapper[data-page="shiftlings"] header nav a.shiftlings {
    color: #fcbe01
}

.site-wrapper[data-page="shiftlings"] header nav a.shiftlings:before {
    padding: 0px 15px;
    margin-bottom: -3px;
    margin-left: -15px;
    height: 100%
}

.site-wrapper[data-page="shiftlings"] header nav a.shiftlings+div {
    z-index: -2;
    opacity: 1;
    position: fixed;
    bottom: 0px;
    right: 0px;
    left: 0px;
    top: 0px
}

.site-wrapper[data-page="shiftlings"] .carousel .button {
    border-color: #fcbe01
}

.site-wrapper[data-page="shiftlings"] .carousel .button.left:before {
    border-right-color: #fcbe01
}

.site-wrapper[data-page="shiftlings"] .carousel .button.right:before {
    border-left-color: #fcbe01
}

.site-wrapper[data-page="shiftlings"] .carousel menu b:after {
    background-color: #fcbe01
}

.site-wrapper[data-page="shiftlings"] .content h1 {
    background-color: #fcbe01;
    box-shadow: -18px 0 0 9px #fcbe01, 18px 0 0 9px #fcbe01
}

.site-wrapper[data-page="shiftlings"] .content .left .image-div {
    height: 240px;
    background-position: 45px center
}

.site-wrapper[data-page="shiftlings"] .pagehead h2,
.site-wrapper[data-page="shiftlings"] .videos h2,
.site-wrapper[data-page="shiftlings"] .screenshots h2,
.site-wrapper[data-page="shiftlings"] .features h2,
.site-wrapper[data-page="shiftlings"] .developers h2,
.site-wrapper[data-page="shiftlings"] .platforms h2,
.site-wrapper[data-page="shiftlings"] .explore h2 {
    color: #fcbe01
}

.site-wrapper[data-page="shiftlings"] .pagehead h2:before,
.site-wrapper[data-page="shiftlings"] .videos h2:before,
.site-wrapper[data-page="shiftlings"] .screenshots h2:before,
.site-wrapper[data-page="shiftlings"] .features h2:before,
.site-wrapper[data-page="shiftlings"] .developers h2:before,
.site-wrapper[data-page="shiftlings"] .platforms h2:before,
.site-wrapper[data-page="shiftlings"] .explore h2:before {
    background-color: #fcbe01
}

.site-wrapper[data-page="shiftlings"] .pagehead h2:after,
.site-wrapper[data-page="shiftlings"] .videos h2:after,
.site-wrapper[data-page="shiftlings"] .screenshots h2:after,
.site-wrapper[data-page="shiftlings"] .features h2:after,
.site-wrapper[data-page="shiftlings"] .developers h2:after,
.site-wrapper[data-page="shiftlings"] .platforms h2:after,
.site-wrapper[data-page="shiftlings"] .explore h2:after {
    background: repeating-linear-gradient(0deg, #fcbe01, #fcbe01 20%, transparent 20%, transparent 100%) top left;
    background-size: 8px 8px;
    width: 2px
}

.site-wrapper[data-page="shiftlings"] .pagehead.light+.light:before,
.site-wrapper[data-page="shiftlings"] .videos.light+.light:before,
.site-wrapper[data-page="shiftlings"] .screenshots.light+.light:before,
.site-wrapper[data-page="shiftlings"] .features.light+.light:before,
.site-wrapper[data-page="shiftlings"] .developers.light+.light:before,
.site-wrapper[data-page="shiftlings"] .platforms.light+.light:before,
.site-wrapper[data-page="shiftlings"] .explore.light+.light:before {
    background: repeating-linear-gradient(90deg, #999, #999 20%, transparent 20%, transparent 100%) top left;
    background-size: 8px 8px;
    height: 2px
}

.site-wrapper[data-page="shiftlings"] .platforms {
    display: none;
    background-color: #fcbe01;
    padding-bottom: 72px
}

@media screen and (max-width: 800px) {
    .site-wrapper[data-page="shiftlings"] .platforms {
        padding: 0 0 60px
    }
}

.site-wrapper[data-page="shiftlings"] .platforms .available {
    display: block;
    height: 25px;
    line-height: 25px;
    margin-top: 50px;
    margin-bottom: 30px;
    margin-left: auto;
    margin-right: auto;
    width: 90%
}

.site-wrapper[data-page="shiftlings"] .platforms .available h3 {
    display: inline-block;
    margin-right: 30px;
    vertical-align: top
}

@media screen and (max-width: 800px) {
    .site-wrapper[data-page="shiftlings"] .platforms .available h3 {
        display: block;
        margin-right: 0;
        margin-bottom: 10px
    }
}

.site-wrapper[data-page="shiftlings"] .platforms .available .image {
    display: inline-block;
    vertical-align: top;
    height: 25px
}

.site-wrapper[data-page="shiftlings"] .platforms .available .image img {
    height: 25px;
    width: auto
}

@media screen and (max-width: 800px) {
    .site-wrapper[data-page="shiftlings"] .platforms .available .image img {
        width: 100%;
        height: auto
    }
}

.site-wrapper[data-page="shiftlings"] .platforms .buy h2 {
    margin-top: 30px !important
}

@media screen and (max-width: 800px) {
    .site-wrapper[data-page="shiftlings"] .platforms .buy h2 {
        margin: 20px 0 10px !important;
        max-width: 90%
    }
}

.site-wrapper[data-page="shiftlings"] .platforms .buy h3 {
    margin-bottom: 20px;
    display: inline-block
}

.site-wrapper[data-page="shiftlings"] .platforms h2 {
    color: #FFF;
    width: 100%
}

.site-wrapper[data-page="shiftlings"] .platforms h3 {
    font-family: "latoblack", sans-serif;
    font-size: 20px;
    text-transform: uppercase;
    color: #FFF;
    line-height: 26px;
    letter-spacing: 3px
}

@media screen and (max-width: 800px) {
    .site-wrapper[data-page="shiftlings"] .platforms h3 {
        font-size: 16px;
        line-height: 18px
    }
}

.site-wrapper[data-page="shiftlings"] .platforms #region,
.site-wrapper[data-page="shiftlings"] .site-wrapper[data-page="geometrywars"] .platforms #retailer,
.site-wrapper[data-page="geometrywars"] .site-wrapper[data-page="shiftlings"] .platforms #retailer {
    position: relative;
    top: 0;
    right: 0;
    height: 55px;
    display: inline-block;
    text-align: center;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    border: 2px solid #fff;
    margin-left: 15px;
    background: #fecc32;
    z-index: 1;
    margin-top: 10px;
    margin-bottom: 20px
}

@media screen and (max-width: 800px) {

    .site-wrapper[data-page="shiftlings"] .platforms #region,
    .site-wrapper[data-page="shiftlings"] .site-wrapper[data-page="geometrywars"] .platforms #retailer,
    .site-wrapper[data-page="geometrywars"] .site-wrapper[data-page="shiftlings"] .platforms #retailer {
        color: #fff !important
    }
}

.site-wrapper[data-page="shiftlings"] .platforms #region+i,
.site-wrapper[data-page="shiftlings"] .site-wrapper[data-page="geometrywars"] .platforms #retailer+i,
.site-wrapper[data-page="geometrywars"] .site-wrapper[data-page="shiftlings"] .platforms #retailer+i {
    position: relative;
    top: 4px;
    right: 25px;
    display: inline-block
}

@media screen and (max-width: 800px) {

    .site-wrapper[data-page="shiftlings"] .platforms #region+i,
    .site-wrapper[data-page="shiftlings"] .site-wrapper[data-page="geometrywars"] .platforms #retailer+i,
    .site-wrapper[data-page="geometrywars"] .site-wrapper[data-page="shiftlings"] .platforms #retailer+i {
        border-top-color: #fff !important
    }
}

.site-wrapper[data-page="shiftlings"] .platforms .logos {
    display: none
}

.site-wrapper[data-page="shiftlings"] .platforms .logos.selected {
    display: block
}

.site-wrapper[data-page="shiftlings"] .platforms .retailer {
    position: relative;
    height: 55px;
    width: 232px;
    display: inline-block;
    text-align: center;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    border: 2px solid #fff;
    margin: 7px 15px;
    vertical-align: top
}

.site-wrapper[data-page="shiftlings"] .platforms .retailer:hover {
    background: rgba(255, 255, 255, 0.2)
}

.site-wrapper[data-page="shiftlings"] .platforms .retailer img {
    position: relative;
    top: 50%;
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    opacity: 1;
    height: 30px;
    width: auto
}

.site-wrapper[data-page="shiftlings"] .platforms ul {
    width: 100%;
    max-width: 1000px;
    margin: 30px auto 0
}

.site-wrapper[data-page="shiftlings"] .platforms li {
    display: inline-block;
    vertical-align: top;
    text-align: left;
    margin: 0;
    padding: 0 10px 0 10px;
    position: relative
}

@media screen and (max-width: 800px) {
    .site-wrapper[data-page="shiftlings"] .platforms li {
        width: 100%;
        text-align: center;
        margin-bottom: 15px
    }
}

.site-wrapper[data-page="shiftlings"] .platforms li:last-child {
    padding: 0 0 0 10px
}

.site-wrapper[data-page="shiftlings"] .platforms li:last-child:after {
    display: none
}

.site-wrapper[data-page="shiftlings"] .platforms li h4 {
    font-family: "latoblack", sans-serif;
    font-size: 18px;
    padding-bottom: 20px;
    letter-spacing: 1px;
    line-height: 20px
}

@media screen and (max-width: 800px) {
    .site-wrapper[data-page="shiftlings"] .platforms li h4 {
        max-width: 100%;
        text-align: center
    }
}

.site-wrapper[data-page="shiftlings"] .platforms li p {
    font-size: 18px;
    line-height: 24px;
    margin: 0 0 15px 0;
    position: relative
}

@media screen and (max-width: 800px) {
    .site-wrapper[data-page="shiftlings"] .platforms li p {
        max-width: 100%;
        text-align: center
    }
}

.site-wrapper[data-page="shiftlings"] .platforms li p:before {
    content: "";
    position: absolute;
    top: 9px;
    left: -12px;
    background: #fff;
    width: 5px;
    height: 2px
}

@media screen and (max-width: 800px) {
    .site-wrapper[data-page="shiftlings"] .platforms li p:before {
        display: none
    }
}

.site-wrapper[data-page="shiftlings"] .platforms li .note {
    font-size: 14px;
    font-style: italic;
    font-family: "latoregular", sans-serif;
    display: inline-block;
    margin-bottom: 15px;
    line-height: 18px;
    max-width: 75%
}

.site-wrapper[data-page="shiftlings"] .platforms .futureDlc {
    display: inline-block;
    padding-top: 54px;
    font-size: 16px;
    font-family: "latoregular", sans-serif
}

.site-wrapper[data-page="shiftlings"] .platforms .clearFix {
    clear: both
}

.site-wrapper[data-page="shiftlings"] .features .counter {
    position: relative !important;
    display: block;
    color: #fcbe01;
    margin-bottom: 10px
}

.site-wrapper[data-page="shiftlings"] .explore .button {
    color: #fcbe01;
    border-color: #fcbe01
}

.site-wrapper[data-page="shiftlings"] .explore .button:hover {
    color: #fff;
    background-color: #fcbe01
}

.site-wrapper[data-page="shiftlings"] .screenshots {
    height: 840px
}

@media screen and (max-width: 800px) {
    .site-wrapper[data-page="shiftlings"] .screenshots {
        height: 550px
    }
}

.site-wrapper[data-page="shiftlings"] .screenshots ul li .share {
    margin-bottom: 0
}

.site-wrapper[data-page="shiftlings"] .screenshots ul li .image-div {
    box-shadow: 0 0 0 10px #fcbe01
}

.site-wrapper[data-page="shiftlings"] .screenshots ul li .button {
    border-color: #999;
    border: 1px solid #999
}

.site-wrapper[data-page="shiftlings"] .screenshots ul li .button .base {
    color: #999
}

.site-wrapper[data-page="shiftlings"] .screenshots ul li .button .base .share-icon {
    fill: #999;
    border-color: #999;
    color: #999
}

.site-wrapper[data-page="shiftlings"] .screenshots ul li .button:hover {
    color: #999;
    background-color: #999
}

.site-wrapper[data-page="shiftlings"] .videos .youtube {
    box-shadow: 0 0 0 10px #fcbe01
}

.site-wrapper[data-page="shiftlings"] .developers .left {
    text-align: center
}

.site-wrapper[data-page="shiftlings"] .developers .left .button {
    color: #fcbe01;
    border-color: #fcbe01
}

.site-wrapper[data-page="shiftlings"] .developers .left .button:hover {
    color: #fff;
    background-color: #fcbe01
}

.site-wrapper[data-page="shiftlings"] .developers .left .image-div {
    width: 100%;
    height: 74px;
    background-position: center center
}

@media screen and (max-width: 800px) {
    .site-wrapper[data-page="shiftlings"] .developers .left .image-div {
        margin-top: 40px;
        height: 50px
    }
}

.site-wrapper[data-page="shiftlings"] .developers .left .follow {
    width: 100%
}

@media screen and (max-width: 800px) {
    .site-wrapper[data-page="shiftlings"] .developers .right {
        text-align: center
    }
}

.site-wrapper[data-page="shiftlings"] .explore .button {
    color: #fcbe01;
    border-color: #fcbe01
}

.site-wrapper[data-page="shiftlings"] .explore .button:hover {
    color: #fff;
    background-color: #fcbe01
}

.site-wrapper[data-page="shiftlings"] .rating-container {
    background: #fcbe01
}

.site-wrapper[data-page="shiftlings"] .rating {
    -moz-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    font-family: "latoregular", sans-serif;
    font-size: 12px;
    line-height: 16px;
    display: block;
    padding-left: 231px;
    position: relative;
    box-sizing: border-box;
    padding-bottom: 100px;
    box-sizing: border-box;
    max-width: 900px;
    text-align: left;
    left: 50%;
    color: #fff
}

.site-wrapper[data-page="shiftlings"] .rating a {
    color: #fff
}

@media screen and (max-width: 1000px) {
    .site-wrapper[data-page="shiftlings"] .rating {
        padding: 50px 15px 80px
    }
}

.site-wrapper[data-page="shiftlings"] .rating .rating-icon {
    width: 201px;
    height: 77px;
    position: absolute;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    left: 0
}

@media screen and (max-width: 1000px) {
    .site-wrapper[data-page="shiftlings"] .rating .rating-icon {
        display: block;
        position: relative;
        margin: 0 0 30px 0;
        left: 50%;
        -moz-transform: translate(-50%, 0);
        -ms-transform: translate(-50%, 0);
        -webkit-transform: translate(-50%, 0);
        transform: translate(-50%, 0)
    }
}

.site-wrapper[data-page="velocity2x"] header #nav-control {
    background-color: #3EC9D6
}

.site-wrapper[data-page="velocity2x"] header.open #nav-control {
    background-color: #000
}

.site-wrapper[data-page="velocity2x"] nav {
    background-color: #3EC9D6
}

.site-wrapper[data-page="velocity2x"] nav a:hover {
    color: #3EC9D6
}

.site-wrapper[data-page="velocity2x"] nav a.velocity2x {
    color: #3EC9D6
}

.site-wrapper[data-page="velocity2x"] nav a.velocity2x:before {
    padding: 0px 15px;
    margin-bottom: -3px;
    margin-left: -15px;
    height: 100%
}

.site-wrapper[data-page="velocity2x"] nav a.velocity2x+div {
    z-index: -2;
    opacity: 1;
    position: fixed;
    bottom: 0px;
    right: 0px;
    left: 0px;
    top: 0px
}

.site-wrapper[data-page="velocity2x"] nav .image-div:before {
    background-color: #3EC9D6
}

.site-wrapper[data-page="velocity2x"] .preloader .top,
.site-wrapper[data-page="velocity2x"] .preloader .right,
.site-wrapper[data-page="velocity2x"] .preloader .bottom,
.site-wrapper[data-page="velocity2x"] .preloader .left {
    background-color: #3EC9D6
}

.site-wrapper[data-page="velocity2x"] .carousel .button {
    border-color: #3EC9D6
}

.site-wrapper[data-page="velocity2x"] .carousel .button.left:before {
    border-right-color: #3EC9D6
}

.site-wrapper[data-page="velocity2x"] .carousel .button.right:before {
    border-left-color: #3EC9D6
}

.site-wrapper[data-page="velocity2x"] .carousel menu b:after {
    background-color: #3EC9D6
}

.site-wrapper[data-page="velocity2x"] .pagehead h2,
.site-wrapper[data-page="velocity2x"] .videos h2,
.site-wrapper[data-page="velocity2x"] .screenshots h2,
.site-wrapper[data-page="velocity2x"] .features h2,
.site-wrapper[data-page="velocity2x"] .developers h2,
.site-wrapper[data-page="velocity2x"] .platforms h2,
.site-wrapper[data-page="velocity2x"] .explore h2 {
    color: #3EC9D6;
    margin-bottom: 80px
}

.site-wrapper[data-page="velocity2x"] .pagehead h2:before,
.site-wrapper[data-page="velocity2x"] .videos h2:before,
.site-wrapper[data-page="velocity2x"] .screenshots h2:before,
.site-wrapper[data-page="velocity2x"] .features h2:before,
.site-wrapper[data-page="velocity2x"] .developers h2:before,
.site-wrapper[data-page="velocity2x"] .platforms h2:before,
.site-wrapper[data-page="velocity2x"] .explore h2:before {
    background-color: #3EC9D6
}

.site-wrapper[data-page="velocity2x"] .pagehead h2:after,
.site-wrapper[data-page="velocity2x"] .videos h2:after,
.site-wrapper[data-page="velocity2x"] .screenshots h2:after,
.site-wrapper[data-page="velocity2x"] .features h2:after,
.site-wrapper[data-page="velocity2x"] .developers h2:after,
.site-wrapper[data-page="velocity2x"] .platforms h2:after,
.site-wrapper[data-page="velocity2x"] .explore h2:after {
    background: repeating-linear-gradient(0deg, #3EC9D6, #3EC9D6 20%, transparent 20%, transparent 100%) top left;
    background-size: 8px 8px;
    width: 2px
}

.site-wrapper[data-page="velocity2x"] .pagehead.light+.light:before,
.site-wrapper[data-page="velocity2x"] .videos.light+.light:before,
.site-wrapper[data-page="velocity2x"] .screenshots.light+.light:before,
.site-wrapper[data-page="velocity2x"] .features.light+.light:before,
.site-wrapper[data-page="velocity2x"] .developers.light+.light:before,
.site-wrapper[data-page="velocity2x"] .platforms.light+.light:before,
.site-wrapper[data-page="velocity2x"] .explore.light+.light:before {
    background: repeating-linear-gradient(90deg, #3EC9D6, #3EC9D6 20%, transparent 20%, transparent 100%) top left;
    background-size: 8px 8px;
    height: 2px
}

.site-wrapper[data-page="velocity2x"] .pagehead.color+.color:before,
.site-wrapper[data-page="velocity2x"] .pagehead.dark+.dark:before,
.site-wrapper[data-page="velocity2x"] .videos.color+.color:before,
.site-wrapper[data-page="velocity2x"] .videos.dark+.dark:before,
.site-wrapper[data-page="velocity2x"] .screenshots.color+.color:before,
.site-wrapper[data-page="velocity2x"] .screenshots.dark+.dark:before,
.site-wrapper[data-page="velocity2x"] .features.color+.color:before,
.site-wrapper[data-page="velocity2x"] .features.dark+.dark:before,
.site-wrapper[data-page="velocity2x"] .developers.color+.color:before,
.site-wrapper[data-page="velocity2x"] .developers.dark+.dark:before,
.site-wrapper[data-page="velocity2x"] .platforms.color+.color:before,
.site-wrapper[data-page="velocity2x"] .platforms.dark+.dark:before,
.site-wrapper[data-page="velocity2x"] .explore.color+.color:before,
.site-wrapper[data-page="velocity2x"] .explore.dark+.dark:before {
    background: repeating-linear-gradient(90deg, #fff, #fff 20%, transparent 20%, transparent 100%) top left;
    background-size: 8px 8px;
    height: 2px
}

.site-wrapper[data-page="velocity2x"] .pagehead.color,
.site-wrapper[data-page="velocity2x"] .videos.color,
.site-wrapper[data-page="velocity2x"] .screenshots.color,
.site-wrapper[data-page="velocity2x"] .features.color,
.site-wrapper[data-page="velocity2x"] .developers.color,
.site-wrapper[data-page="velocity2x"] .platforms.color,
.site-wrapper[data-page="velocity2x"] .explore.color {
    color: #fff;
    background-color: #3EC9D6
}

.site-wrapper[data-page="velocity2x"] .pagehead.color h2,
.site-wrapper[data-page="velocity2x"] .videos.color h2,
.site-wrapper[data-page="velocity2x"] .screenshots.color h2,
.site-wrapper[data-page="velocity2x"] .features.color h2,
.site-wrapper[data-page="velocity2x"] .developers.color h2,
.site-wrapper[data-page="velocity2x"] .platforms.color h2,
.site-wrapper[data-page="velocity2x"] .explore.color h2 {
    color: #fff
}

.site-wrapper[data-page="velocity2x"] .pagehead.color h2:before,
.site-wrapper[data-page="velocity2x"] .videos.color h2:before,
.site-wrapper[data-page="velocity2x"] .screenshots.color h2:before,
.site-wrapper[data-page="velocity2x"] .features.color h2:before,
.site-wrapper[data-page="velocity2x"] .developers.color h2:before,
.site-wrapper[data-page="velocity2x"] .platforms.color h2:before,
.site-wrapper[data-page="velocity2x"] .explore.color h2:before {
    background-color: #fff
}

.site-wrapper[data-page="velocity2x"] .pagehead.color h2:after,
.site-wrapper[data-page="velocity2x"] .videos.color h2:after,
.site-wrapper[data-page="velocity2x"] .screenshots.color h2:after,
.site-wrapper[data-page="velocity2x"] .features.color h2:after,
.site-wrapper[data-page="velocity2x"] .developers.color h2:after,
.site-wrapper[data-page="velocity2x"] .platforms.color h2:after,
.site-wrapper[data-page="velocity2x"] .explore.color h2:after {
    background: repeating-linear-gradient(0deg, #fff, #fff 20%, transparent 20%, transparent 100%) top left;
    background-size: 8px 8px;
    width: 2px
}

.site-wrapper[data-page="velocity2x"] .pagehead.color *,
.site-wrapper[data-page="velocity2x"] .videos.color *,
.site-wrapper[data-page="velocity2x"] .screenshots.color *,
.site-wrapper[data-page="velocity2x"] .features.color *,
.site-wrapper[data-page="velocity2x"] .developers.color *,
.site-wrapper[data-page="velocity2x"] .platforms.color *,
.site-wrapper[data-page="velocity2x"] .explore.color * {
    color: #fff
}

.site-wrapper[data-page="velocity2x"] .pagehead.color .carousel .button,
.site-wrapper[data-page="velocity2x"] .videos.color .carousel .button,
.site-wrapper[data-page="velocity2x"] .screenshots.color .carousel .button,
.site-wrapper[data-page="velocity2x"] .features.color .carousel .button,
.site-wrapper[data-page="velocity2x"] .developers.color .carousel .button,
.site-wrapper[data-page="velocity2x"] .platforms.color .carousel .button,
.site-wrapper[data-page="velocity2x"] .explore.color .carousel .button {
    border-color: #fff
}

.site-wrapper[data-page="velocity2x"] .pagehead.color .carousel .button.left:before,
.site-wrapper[data-page="velocity2x"] .videos.color .carousel .button.left:before,
.site-wrapper[data-page="velocity2x"] .screenshots.color .carousel .button.left:before,
.site-wrapper[data-page="velocity2x"] .features.color .carousel .button.left:before,
.site-wrapper[data-page="velocity2x"] .developers.color .carousel .button.left:before,
.site-wrapper[data-page="velocity2x"] .platforms.color .carousel .button.left:before,
.site-wrapper[data-page="velocity2x"] .explore.color .carousel .button.left:before {
    border-right-color: #fff
}

.site-wrapper[data-page="velocity2x"] .pagehead.color .carousel .button.right:before,
.site-wrapper[data-page="velocity2x"] .videos.color .carousel .button.right:before,
.site-wrapper[data-page="velocity2x"] .screenshots.color .carousel .button.right:before,
.site-wrapper[data-page="velocity2x"] .features.color .carousel .button.right:before,
.site-wrapper[data-page="velocity2x"] .developers.color .carousel .button.right:before,
.site-wrapper[data-page="velocity2x"] .platforms.color .carousel .button.right:before,
.site-wrapper[data-page="velocity2x"] .explore.color .carousel .button.right:before {
    border-left-color: #fff
}

.site-wrapper[data-page="velocity2x"] .pagehead.color .carousel menu b:after,
.site-wrapper[data-page="velocity2x"] .videos.color .carousel menu b:after,
.site-wrapper[data-page="velocity2x"] .screenshots.color .carousel menu b:after,
.site-wrapper[data-page="velocity2x"] .features.color .carousel menu b:after,
.site-wrapper[data-page="velocity2x"] .developers.color .carousel menu b:after,
.site-wrapper[data-page="velocity2x"] .platforms.color .carousel menu b:after,
.site-wrapper[data-page="velocity2x"] .explore.color .carousel menu b:after {
    background-color: #fff
}

.site-wrapper[data-page="velocity2x"] .pagehead.dark p,
.site-wrapper[data-page="velocity2x"] .pagehead.dark h3,
.site-wrapper[data-page="velocity2x"] .videos.dark p,
.site-wrapper[data-page="velocity2x"] .videos.dark h3,
.site-wrapper[data-page="velocity2x"] .screenshots.dark p,
.site-wrapper[data-page="velocity2x"] .screenshots.dark h3,
.site-wrapper[data-page="velocity2x"] .features.dark p,
.site-wrapper[data-page="velocity2x"] .features.dark h3,
.site-wrapper[data-page="velocity2x"] .developers.dark p,
.site-wrapper[data-page="velocity2x"] .developers.dark h3,
.site-wrapper[data-page="velocity2x"] .platforms.dark p,
.site-wrapper[data-page="velocity2x"] .platforms.dark h3,
.site-wrapper[data-page="velocity2x"] .explore.dark p,
.site-wrapper[data-page="velocity2x"] .explore.dark h3 {
    color: #fff
}

.site-wrapper[data-page="velocity2x"] .pagehead.light p,
.site-wrapper[data-page="velocity2x"] .pagehead.light h3,
.site-wrapper[data-page="velocity2x"] .videos.light p,
.site-wrapper[data-page="velocity2x"] .videos.light h3,
.site-wrapper[data-page="velocity2x"] .screenshots.light p,
.site-wrapper[data-page="velocity2x"] .screenshots.light h3,
.site-wrapper[data-page="velocity2x"] .features.light p,
.site-wrapper[data-page="velocity2x"] .features.light h3,
.site-wrapper[data-page="velocity2x"] .developers.light p,
.site-wrapper[data-page="velocity2x"] .developers.light h3,
.site-wrapper[data-page="velocity2x"] .platforms.light p,
.site-wrapper[data-page="velocity2x"] .platforms.light h3,
.site-wrapper[data-page="velocity2x"] .explore.light p,
.site-wrapper[data-page="velocity2x"] .explore.light h3 {
    color: #000
}

.site-wrapper[data-page="velocity2x"] .pagehead .logo {
    top: 115px;
    height: 200px
}

@media screen and (max-width: 800px) {
    .site-wrapper[data-page="velocity2x"] .pagehead .logo {
        top: 0px
    }
}

.site-wrapper[data-page="velocity2x"] .pagehead .background {
    background-color: #3EC9D6
}

@media screen and (max-width: 800px) {
    .site-wrapper[data-page="velocity2x"] .pagehead .background {
        background-position: -10px
    }
}

.site-wrapper[data-page="velocity2x"] .pagehead .content h1 {
    background-color: #3EC9D6;
    box-shadow: -18px 0 0 9px #3EC9D6, 18px 0 0 9px #3EC9D6
}

.site-wrapper[data-page="velocity2x"] .pagehead .content h1:first-child {
    margin-bottom: 10px
}

@media screen and (max-width: 800px) {
    .site-wrapper[data-page="velocity2x"] .pagehead .content h1 {
        box-shadow: -3px 0 0 6px #3EC9D6, 3px 0 0 6px #3EC9D6;
        font-size: 20px;
        line-height: 30px
    }
}

.site-wrapper[data-page="velocity2x"] .pagehead .content h3 {
    color: #999;
    font-family: "latoblack", sans-serif;
    font-size: 17px;
    text-transform: uppercase;
    letter-spacing: 4px;
    line-height: 24px;
    margin-bottom: 20px
}

.site-wrapper[data-page="velocity2x"] .pagehead .content li {
    color: #3EC9D6
}

.site-wrapper[data-page="velocity2x"] .order {
    position: relative;
    z-index: 3;
    background-color: #3EC9D6;
    color: #fff;
    padding-bottom: 40px
}

.site-wrapper[data-page="velocity2x"] .order h2 {
    position: relative;
    display: inline-block;
    font-size: 26px;
    line-height: 26px;
    text-transform: uppercase;
    letter-spacing: 6px;
    padding: 6px;
    margin: 45px 0
}

@media screen and (max-width: 800px) {
    .site-wrapper[data-page="velocity2x"] .order h2 {
        font-size: 18px;
        letter-spacing: 5px;
        line-height: 24px
    }
}

.site-wrapper[data-page="velocity2x"] .order .options,
.site-wrapper[data-page="velocity2x"] .order .selects {
    display: block
}

.site-wrapper[data-page="velocity2x"] .order .selects li {
    display: block
}

.site-wrapper[data-page="velocity2x"] .order .selects label,
.site-wrapper[data-page="velocity2x"] .order .selects select {
    display: inline-block;
    margin: 10px 24px;
    text-transform: uppercase;
    font-family: "latoblack", sans-serif;
    font-size: 12px;
    letter-spacing: 0.2em;
    color: #fff
}

.site-wrapper[data-page="velocity2x"] .order .selects label {
    text-align: left;
    width: 200px
}

.site-wrapper[data-page="velocity2x"] .order .selects label:last-child {
    position: relative;
    left: -206px
}

@media screen and (max-width: 680px) {
    .site-wrapper[data-page="velocity2x"] .order .selects label:last-child {
        left: 0
    }
}

.site-wrapper[data-page="velocity2x"] .order .selects select {
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    outline: none;
    border: none;
    appearance: none;
    background: none;
    box-shadow: none;
    border-radius: 0;
    width: 360px;
    max-width: 80%;
    padding: 14px 18px;
    border: 1px solid #fff;
    border-radius: 4px;
    position: relative;
    cursor: pointer;
    z-index: 2
}

.site-wrapper[data-page="velocity2x"] .order .selects .platform option[value="ps4"],
.site-wrapper[data-page="velocity2x"] .order .selects .platform option[value="ps-vita"] {
    /*display: none;*/
}

.site-wrapper[data-page="velocity2x"] .order .selects select::-ms-expand {
    display: none
}

.site-wrapper[data-page="velocity2x"] .order .selects select+i {
    position: absolute;
    border-top: 6px solid #fff;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    -moz-transform: translate(-50px, 28px);
    -ms-transform: translate(-50px, 28px);
    -webkit-transform: translate(-50px, 28px);
    transform: translate(-50px, 28px);
    z-index: 1
}

.site-wrapper[data-page="velocity2x"] .order .selects select option {
    background: #ccc !important
}

@media screen and (max-width: 360px) {
    .site-wrapper[data-page="velocity2x"] .order .selects .package {
        font-size: 10px
    }
}

.site-wrapper[data-page="velocity2x"] .order .options {
    margin: 15px auto -15px
}

@media screen and (max-width: 700px) {
    .site-wrapper[data-page="velocity2x"] .order .options {
        width: 70vw
    }
}

@media screen and (max-width: 480px) {
    .site-wrapper[data-page="velocity2x"] .order .options {
        width: 90vw
    }
}

.site-wrapper[data-page="velocity2x"] .order .options .retailer {
    -moz-transition: background 0.2s ease-in-out, color 0.2s ease-in-out;
    -o-transition: background 0.2s ease-in-out, color 0.2s ease-in-out;
    -webkit-transition: background 0.2s ease-in-out, color 0.2s ease-in-out;
    transition: background 0.2s ease-in-out, color 0.2s ease-in-out;
    display: inline-block;
    border: 1px solid #fff;
    border-radius: 4px;
    width: 138px;
    height: 75px;
    margin: 13px;
    display: none
}

.site-wrapper[data-page="velocity2x"] .order .options .retailer.hidden {
    display: none
}

.site-wrapper[data-page="velocity2x"] .order .options .retailer:hover {
    background-color: grey
}

.site-wrapper[data-page="velocity2x"] .order .options .retailer img {
    height: 100%;
    width: 100%
}

.site-wrapper[data-page="velocity2x"] .order .options .retailer.platform-ps-vita img, .site-wrapper[data-page="velocity2x"] .order .options .retailer.platform-ps4 img {
    max-height: 40px;
}


.site-wrapper[data-page="velocity2x"] .developers .left .image-div {
    margin-top: 45px;
    height: 125px
}

.site-wrapper[data-page="velocity2x"] .developers .left .button {
    color: #3EC9D6;
    border-color: #3EC9D6;
    margin-left: 2px;
    padding-left: 38px;
    padding-right: 38px
}

.site-wrapper[data-page="velocity2x"] .developers .left .button:hover {
    color: #fff;
    background-color: #3EC9D6
}

.site-wrapper[data-page="velocity2x"] .developers .left .follow {
    padding-right: 60px
}

@media screen and (max-width: 800px) {
    .site-wrapper[data-page="velocity2x"] .developers .left .follow {
        padding-right: 0
    }
}

.site-wrapper[data-page="velocity2x"] .features .copy .counter {
    color: #3EC9D6
}

.site-wrapper[data-page="velocity2x"] .screenshots ul li .image-div {
    box-shadow: 0 0 0 0 #3EC9D6
}

.site-wrapper[data-page="velocity2x"] .screenshots ul li.active .image-div {
    box-shadow: 0 0 0 10px #3EC9D6
}

@media screen and (max-width: 800px) {
    .site-wrapper[data-page="velocity2x"] .screenshots ul li.active .image-div {
        box-shadow: 0 0 0 4px #3EC9D6
    }
}

.site-wrapper[data-page="velocity2x"] .screenshots ul li .youtube {
    box-shadow: 0 0 0 0 #3EC9D6;
    width: 100%;
    height: 360px;
    background-size: cover;
    background-position: center center;
    position: relative;
    background-color: inherit
}

@media screen and (max-width: 800px) {
    .site-wrapper[data-page="velocity2x"] .screenshots ul li .youtube {
        height: 350px;
        width: 90%;
        left: 5%
    }
}

@media screen and (max-width: 533.33px) {
    .site-wrapper[data-page="velocity2x"] .screenshots ul li .youtube {
        height: 175px
    }
}

.site-wrapper[data-page="velocity2x"] .screenshots ul li.active .youtube {
    box-shadow: 0 0 0 10px #3EC9D6
}

@media screen and (max-width: 800px) {
    .site-wrapper[data-page="velocity2x"] .screenshots ul li.active .youtube {
        box-shadow: 0 0 0 4px #3EC9D6
    }
}

.site-wrapper[data-page="velocity2x"] .screenshots .share {
    border-color: #777;
    bottom: 70px
}

@media screen and (max-width: 800px) {
    .site-wrapper[data-page="velocity2x"] .screenshots .share {
        bottom: -50px
    }
}

@media screen and (max-width: 533.33333px) {
    .site-wrapper[data-page="velocity2x"] .screenshots .share {
        bottom: -10px
    }
}

.site-wrapper[data-page="velocity2x"] .screenshots .share:hover {
    background-color: #777
}

.site-wrapper[data-page="velocity2x"] .screenshots .share .base {
    color: #777
}

.site-wrapper[data-page="velocity2x"] .screenshots .share .base * {
    fill: #777
}

.site-wrapper[data-page="velocity2x"] .explore .button {
    color: #3EC9D6;
    border-color: #3EC9D6
}

.site-wrapper[data-page="velocity2x"] .explore .button:hover {
    color: #fff;
    background-color: #3EC9D6
}

@media screen and (max-width: 800px) {
    .site-wrapper[data-page="velocity2x"] .platforms {
        padding: 0 0 60px
    }
}

.site-wrapper[data-page="velocity2x"] .platforms h3 {
    display: inline-block;
    margin-top: 90px !important;
    font-family: "latoblack", sans-serif;
    font-size: 20px;
    text-transform: uppercase;
    color: #000;
    line-height: 26px;
    margin-top: 45px;
    letter-spacing: 3px
}

@media screen and (max-width: 800px) {
    .site-wrapper[data-page="velocity2x"] .platforms h3 {
        font-size: 16px;
        line-height: 18px;
        margin-top: 60px !important
    }
}

.site-wrapper[data-page="velocity2x"] .platforms #region,
.site-wrapper[data-page="velocity2x"] .site-wrapper[data-page="geometrywars"] .platforms #retailer,
.site-wrapper[data-page="geometrywars"] .site-wrapper[data-page="velocity2x"] .platforms #retailer {
    position: relative;
    top: 0;
    right: 0;
    height: 55px;
    width: 232px;
    display: inline-block;
    text-align: center;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    border: 2px solid #fff;
    margin-left: 15px;
    background: #4ad6f3;
    z-index: 1
}

@media screen and (max-width: 800px) {

    .site-wrapper[data-page="velocity2x"] .platforms #region,
    .site-wrapper[data-page="velocity2x"] .site-wrapper[data-page="geometrywars"] .platforms #retailer,
    .site-wrapper[data-page="geometrywars"] .site-wrapper[data-page="velocity2x"] .platforms #retailer {
        color: #fff !important;
        margin-top: 25px
    }
}

.site-wrapper[data-page="velocity2x"] .platforms #region+i,
.site-wrapper[data-page="velocity2x"] .site-wrapper[data-page="geometrywars"] .platforms #retailer+i,
.site-wrapper[data-page="geometrywars"] .site-wrapper[data-page="velocity2x"] .platforms #retailer+i {
    position: relative;
    top: 4px;
    right: 25px;
    display: inline-block
}

@media screen and (max-width: 800px) {

    .site-wrapper[data-page="velocity2x"] .platforms #region+i,
    .site-wrapper[data-page="velocity2x"] .site-wrapper[data-page="geometrywars"] .platforms #retailer+i,
    .site-wrapper[data-page="geometrywars"] .site-wrapper[data-page="velocity2x"] .platforms #retailer+i {
        border-top-color: #fff !important
    }
}

.site-wrapper[data-page="velocity2x"] .platforms h2 {
    margin-top: 60px !important;
    width: 100%
}

@media screen and (max-width: 800px) {
    .site-wrapper[data-page="velocity2x"] .platforms h2 {
        margin: 40px 0 10px !important;
        max-width: 90%
    }
}

.site-wrapper[data-page="velocity2x"] .platforms .logos {
    display: none
}

.site-wrapper[data-page="velocity2x"] .platforms .logos.selected {
    display: block
}

.site-wrapper[data-page="velocity2x"] .platforms .retailer {
    position: relative;
    height: 55px;
    width: 232px;
    display: inline-block;
    text-align: center;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    border: 2px solid #fff;
    margin: 7px 15px;
    vertical-align: top
}

.site-wrapper[data-page="velocity2x"] .platforms .retailer:hover {
    background: rgba(255, 255, 255, 0.2)
}

.site-wrapper[data-page="velocity2x"] .platforms .retailer img {
    position: relative;
    top: 50%;
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    opacity: 1
}

.site-wrapper[data-page="velocity2x"] .platforms ul {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto
}

.site-wrapper[data-page="velocity2x"] .platforms li {
    display: inline-block;
    vertical-align: top;
    text-align: center;
    margin: 0;
    padding: 0 10px 0 10px;
    position: relative
}

@media screen and (max-width: 800px) {
    .site-wrapper[data-page="velocity2x"] .platforms li {
        width: 100%;
        text-align: center;
        margin-bottom: 15px
    }
}

.site-wrapper[data-page="velocity2x"] .platforms li h4 {
    font-family: "latoblack", sans-serif;
    font-size: 18px;
    padding-bottom: 20px;
    letter-spacing: 1px;
    line-height: 20px
}

@media screen and (max-width: 800px) {
    .site-wrapper[data-page="velocity2x"] .platforms li h4 {
        max-width: 100%;
        text-align: center
    }
}

.site-wrapper[data-page="velocity2x"] .platforms li p {
    font-size: 18px;
    line-height: 24px;
    margin: 0 0 15px 0;
    position: relative
}

@media screen and (max-width: 800px) {
    .site-wrapper[data-page="velocity2x"] .platforms li p {
        max-width: 100%;
        text-align: center
    }
}

.site-wrapper[data-page="velocity2x"] .platforms li p:before {
    content: "";
    position: absolute;
    top: 9px;
    left: -12px;
    background: #fff;
    width: 5px;
    height: 2px
}

@media screen and (max-width: 800px) {
    .site-wrapper[data-page="velocity2x"] .platforms li p:before {
        display: none
    }
}

.site-wrapper[data-page="velocity2x"] .platforms li .note {
    font-size: 14px;
    font-style: italic;
    font-family: "latoregular", sans-serif;
    display: inline-block;
    margin-bottom: 15px;
    line-height: 18px;
    max-width: 75%
}

.site-wrapper[data-page="velocity2x"] .platforms .clearFix {
    clear: both
}

.site-wrapper[data-page="velocity2x"] .rating-container {
    background: #3EC9D6;
    padding: 30px 0;
}

.site-wrapper[data-page="velocity2x"] .rating {
    -moz-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    font-family: "latoregular", sans-serif;
    font-size: 12px;
    line-height: 16px;
    display: block;
    padding-left: 231px;
    position: relative;
    box-sizing: border-box;
    padding-bottom: 100px;
    box-sizing: border-box;
    max-width: 900px;
    text-align: left;
    left: 50%;
    color: #fff;
}

@media screen and (max-width: 1000px) {
    .site-wrapper[data-page="velocity2x"] .rating {
        padding: 50px 15px 80px;
    }
}

.site-wrapper[data-page="velocity2x"] .rating .rating-icon {
    width: 201px;
    height: 77px;
    position: absolute;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    left: 0;
}

@media screen and (max-width: 1000px) {
    .site-wrapper[data-page="velocity2x"] .rating .rating-icon {
        display: block;
        position: relative;
        margin: 0 0 30px 0;
        left: 50%;
        -moz-transform: translate(-50%, 0);
        -ms-transform: translate(-50%, 0);
        -webkit-transform: translate(-50%, 0);
        transform: translate(-50%, 0)
    }
}

/* css-cookies */
.atvi-cookie-disclaimer {
    display: none;
}

.atvi-cookie-disclaimer,
.atvi-privacy-policy-module {
    display: none !important;
    width: 100%;
    padding: 10px 0;
    background: rgba(0, 0, 0, 0.85);
    color: #FFF;
    text-align: center;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 9999;
    vertical-align: baseline;
    box-shadow: 0px 7px #000000;
    -webkit-transform: translate(0, 100%);
    -moz-transform: translate(0, 100%);
    -ms-transform: translate(0, 100%);
    -o-transform: translate(0, 100%);
    transform: translate(0, 100%);
    -webkit-transition: transform 1s;
    -ms-transition: transform 1s;
    -moz-transition: transform 1s;
    -o-transition: transform 1s;
    transition: transform 1s;
}

.atvi-cookie-disclaimer.show,
.atvi-privacy-policy-module.show {
    display: none !important;
    -webkit-transform: translate(0, 0%);
    -moz-transform: translate(0, 0%);
    -ms-transform: translate(0, 0%);
    -o-transform: translate(0, 0%);
    transform: translate(0, 0%);
}

.atvi-cookie-disclaimer .inner,
.atvi-privacy-policy-module .inner {
    margin-left: 3%;
    margin-right: 0;
    width: 97%;
}

.atvi-cookie-disclaimer .cookie-left,
.atvi-privacy-policy-module .cookie-left,
.atvi-cookie-disclaimer .content-left,
.atvi-privacy-policy-module .content-left {
    min-width: 96px;
    display: inline-block;
    font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: bold;
    padding-right: 15px;
    left: 0;
    position: relative;
    height: 100%;
    text-align: left;
    vertical-align: top;
    font-size: 18px;
    width: 13%;
    text-transform: uppercase;
}

.atvi-cookie-disclaimer .cookie-right,
.atvi-privacy-policy-module .cookie-right,
.atvi-cookie-disclaimer .content-right,
.atvi-privacy-policy-module .content-right {
    display: inline-block;
    text-align: left;
    color: #E5E5E5;
    font-size: 12.5px;
    width: 78%;
    margin-right: 5%;
}

.atvi-cookie-disclaimer .cookie-right p,
.atvi-privacy-policy-module .cookie-right p,
.atvi-cookie-disclaimer .content-right p,
.atvi-privacy-policy-module .content-right p {
    font-family: "Helvetica Neue", "HelveticaNeue", Helvetica, Arial, "Lucida Grande", sans-serif;
    color: #E5E5E5;
    font-size: 12.5px;
}

.atvi-cookie-disclaimer a,
.atvi-privacy-policy-module a {
    color: #FFF;
    text-decoration: underline;
}

.atvi-cookie-disclaimer .cookies-close,
.atvi-privacy-policy-module .cookies-close {
    cursor: pointer;
    text-decoration: none;
    color: #FFF;
    background: #666;
    display: inline-block;
    padding: 5px 15px;
    width: 5vw;
    right: 25px;
    top: 10px;
    font-size: 10px;
}

.atvi-cookie-disclaimer .close-cookies,
.atvi-privacy-policy-module .close-cookies,
.atvi-cookie-disclaimer .close-modal,
.atvi-privacy-policy-module .close-modal {
    display: inline-block;
    cursor: pointer;
    position: absolute;
    font-family: sans-serif;
    color: #E5E5E5;
    right: 3%;
    font-size: 35px;
    margin: auto;
    transform: translate(0, -50%) rotate(45deg);
    top: 50%;
    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.cq-wcm-edit .atvi-cookie-disclaimer {
    display: none;
}

.cookie-right button {
    display: none;
}

@media screen and (max-width: 900px) {

    .atvi-cookie-disclaimer,
    .atvi-privacy-policy-module {
        padding: 10px 0;
    }

    .atvi-cookie-disclaimer.show p,
    .atvi-privacy-policy-module.show p {
        padding: 0 15px;
        font-size: 13px;
    }

    .atvi-cookie-disclaimer a.cookies-close {
        padding: 0 10px;
    }
}

@media screen and (max-width: 625px) {

    .atvi-cookie-disclaimer .cookie-left,
    .atvi-privacy-policy-module .cookie-left,
    .atvi-cookie-disclaimer .content-left,
    .atvi-privacy-policy-module .content-left {
        top: 7px;
        width: 80%;
        margin-right: 15%;
        font-size: 16px;
    }

    .atvi-cookie-disclaimer .cookie-right,
    .atvi-privacy-policy-module .cookie-right,
    .atvi-cookie-disclaimer .content-right,
    .atvi-privacy-policy-module .content-right {
        width: 90%;
        font-size: 14px;
        padding: 20px 0 0 0;
    }

    .atvi-cookie-disclaimer.show p,
    .atvi-privacy-policy-module.show p {
        padding: 0;
        line-height: 1.2;
    }

    .atvi-cookie-disclaimer p,
    .atvi-privacy-policy-module p,
    .atvi-cookie-disclaimer a,
    .atvi-privacy-policy-module a {
        font-size: 14px;
    }

    .atvi-cookie-disclaimer .close-cookies,
    .atvi-privacy-policy-module .close-cookies,
    .atvi-cookie-disclaimer .close-modal,
    .atvi-privacy-policy-module .close-modal {
        top: 25px;
        right: 5%;
        font-size: 52px;
    }
}