article, body, dd, div, dl, dt, figure, h1, h2, h3, h4, h5, h6, img, li, p, pre, section, td, th, ul {
    padding: 0;
    margin: 0;
    list-style: none;
    border: none
}

html {
    scroll-behavior: smooth;
}


.cc-revoke, .cc-window {
    position: fixed;
    overflow: hidden;
    box-sizing: border-box;
    font-family: Open-Sans, sans-serif;
    font-size: 18px;
    line-height: 1.5em;
    display: flex;
    flex-wrap: nowrap;
    z-index: 9999
}

.cc-btn {
    font: 24px Rubik !important;
    line-height: 48px !important;
    font-weight: 300 !important;
    color: #232323 !important;
    text-transform: uppercase;
    padding: 0 !important;
    width: 130px;
    transition: background-color .2s ease-in, transform .2s ease-in;
    -moz-transition: background-color .2s ease-in, transform .2s ease-in;
    -ms-transition: background-color .2s ease-in, transform .2s ease-in;
    -webkit-transition: background-color .2s ease-in, transform .2s ease-in
}

.cc-btn:hover {
    -moz-transform: scale(.92) !important;
    -ms-transform: scale(.92) !important;
    -webkit-transform: scale(.92) !important;
    transform: scale(.92) !important;
    color: #fff !important;
    background-color: rgba(255, 255, 255, .25) !important
}

.cc-message {
    font-family: "Open Sans" !important
}

body, html {
    height: 100%;
    background-color: #262626
}

a {
    color: #fff;
    text-decoration: none;
    transition: color .1s ease-in;
    -moz-transition: color .1s ease-in;
    -webkit-transition: color .1s ease-in;
    -ms-transition: color .1s ease-in
}

a:hover {
    color: #fff !important
}

h1 {
    position: relative;
    left: 0;
    right: 0;
    color: #fff;
    text-transform: uppercase;
    text-align: center;
    font-family: Rubik;
    font-weight: 400;
    font-size: 70px;
    line-height: 70px;
    padding: 10px 10px 25px 10px;
    text-shadow: 0 4px 0 rgba(0, 0, 0, .2)
}

h2 {
    position: relative;
    left: 0;
    right: 0;
    color: #fff;
    text-align: center;
    font-family: Rubik;
    font-weight: 300;
    font-size: 28px;
    text-transform: uppercase;
    line-height: 28px;
    padding: 50px 20px 10px 20px
}

h3 {
    position: relative;
    left: 0;
    right: 0;
    color: #909090;
    text-align: left;
    font-family: Rubik;
    font-weight: 700;
    font-size: 20px;
    letter-spacing: 2px;
    text-transform: uppercase;
    line-height: 32px;
    padding: 50px 0 10px 0
}

h4 {
    position: relative;
    left: 0;
    right: 0;
    color: #ff7e00;
    text-align: left;
    font-family: Rubik;
    font-weight: 700;
    font-size: 32px;
    text-transform: uppercase;
    line-height: 32px;
    padding: 0
}

h5 {
    position: relative;
    left: 0;
    right: 0;
    color: #ccc;
    text-align: left;
    font-family: Rubik;
    font-weight: 300;
    font-size: 16px;
    text-transform: uppercase;
    line-height: 20px;
    padding: 0
}

#about h2, #casestudy h2, .games h2 {
    mix-blend-mode: overlay;
    color: rgba(0, 0, 0, .75);
    text-shadow: 0 1px 2px rgba(255, 255, 255, .6), 0 -1px 2px rgba(0, 0, 0, .25)
}

.contact h2, #jobs h2, #liveops h2 {
    padding-top: 80px;
    color: #787878
}

.contact h1, #jobs h1, #liveops h1 {
    color: #dcdcdc
}

p {
    color: #dcdcdc;
    font-family: "Open Sans";
    font-weight: 400;
    font-size: 18px;
    position: relative;
    text-align: center
}

ul {
    color: #dcdcdc;
    font-family: "Open Sans";
    font-weight: 400;
    font-size: 18px;
    line-height: 28px;
    position: relative;
    text-align: left
}

ul li {
    list-style-type: none;
    list-style-position: outside;
    list-style-image: none
}

#header {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    overflow: auto;
    z-index: 100;
    width: 100%;
    height: 60px;
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
    background-color: rgba(0, 0, 0, .5);
    overflow-y: hidden;
    border-bottom: 1px solid rgba(20, 20, 20, .5);
    transition: all .2s ease-in;
    -moz-transition: all .2s ease-in;
    -webkit-transition: all .2s ease-in;
    -ms-transition: all .2s ease-in
}

.focus_header {
    border-bottom: 1px solid #141414 !important;
    background-color: rgba(0, 0, 0, .8) !important
}

.header_height {
    height: 680px !important
}

#header .content-blur {
    background: #000;
    overflow: hidden
}

#header .blurredContent {
    opacity: .5;
    -webkit-filter: blur(15px);
    filter: blur(15px)
}

#header ul {
    position: relative;
    z-index: 80;
    float: right
}

#header ul li {
    display: inline-block;
    font-family: Rubik;
    font-weight: 300;
    text-transform: uppercase;
    font-size: 20px;
    float: left;
    margin-top: 15px
}

#header ul li a {
    padding: 20px;
    opacity: .25;
    transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -webkit-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out
}

#header ul li a:hover {
    opacity: .75
}

.logo {
    position: relative;
    top: -16px;
    left: -50px;
    display: inline-block;
    text-indent: -9999px;
    width: 240px;
    height: 94px;
    background: transparent url(../img/logo.png) no-repeat 0 0;
    transform: scale(.5);
    transition: transform .2s ease-in-out;
    -moz-transition: transform .2s ease-in-out;
    -webkit-transition: transform .2s ease-in-out;
    -ms-transition: transform .2s ease-in-out
}

.logo:hover {
    transform: scale(.48);
    background: transparent url(../img/logo.png) no-repeat 0 -188px
}

.logo:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: transparent url(../img/logo.png) no-repeat;
    background-position: 0 -188px;
    opacity: 0;
    transition: opacity .2s ease-in-out;
    -moz-transition: opacity .2s ease-in-out;
    -webkit-transition: opacity .2s ease-in-out;
    -ms-transition: opacity .2s ease-in-out
}

.logo:hover:after {
    opacity: 1
}

#header .nav {
    display: none;
    position: relative;
    text-indent: -9999px;
    width: 64px;
    height: 64px;
    right: 0;
    top: -2px;
    float: right;
    transform: scale(.4);
    background: transparent url(../img/icons.png) no-repeat -128px -80px
}

.nav_turn {
    background: transparent url(../img/icons.png) no-repeat 0 -80px !important;
    -webkit-animation-name: navRotation;
    -webkit-animation-duration: .2s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease-in-out
}

@-webkit-keyframes navRotation {
    0% {
        -webkit-transform: scale(.4) rotate(0)
    }
    10% {
        -webkit-transform: scale(.6) rotate(0)
    }
    100% {
        -webkit-transform: scale(.4) rotate(-90deg)
    }
}

#header a .back {
    position: relative;
    left: 0;
    top: -18px;
    width: 64px;
    height: 64px;
    float: left;
    margin-right: -10px;
    transform: scale(.4);
    background: transparent url(../img/icons.png) no-repeat -64px -80px;
    transition: all .1s ease-in-out;
    -moz-transition: all .1s ease-in-out;
    -webkit-transition: all .1s ease-in-out;
    -ms-transition: all .1s ease-in-out
}

#header a:hover .back {
    left: -10px
}

.show_navigation {
    display: block !important
}

.navigation {
    bottom: 0;
    left: 0;
    line-height: 20px;
    position: fixed;
    right: 0;
    top: 0;
    height: 60px
}

.sub_navigation {
    bottom: 0;
    left: 0;
    line-height: 20px;
    position: fixed;
    right: 0;
    top: 0;
    height: 60px
}

.anchor {
    display: block;
    position: relative;
    top: -60px
}

.currentAnchor {
    text-shadow: 0 0 10px rgba(255, 255, 255, .8);
    box-shadow: inset 0 6px 0 #ddd, inset 0 24px 6px -14px rgba(255, 255, 255, .25);
    opacity: 1 !important
}

#skrollr-body {
    float: left;
    width: 100%;
    height: 100%
}

#loader {
    position: fixed;
    opacity: 1;
    z-index: 10000;
    width: 100%;
    height: 100%;
    background: rgba(10, 10, 10, .9);
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
    visibility: visible;
    transform: none;
    transition: all .5s ease-in;
    -moz-transition: all .5s ease-in;
    -webkit-transition: all .5s ease-in;
    -ms-transition: all .5s ease-in
}

#loader .logo {
    position: fixed;
    top: 50%;
    bottom: 50%;
    left: 0;
    right: 0;
    margin: auto;
    display: inline-block;
    width: 240px;
    height: 94px;
    transform: scale(1);
    background: url(../img/logo.png) no-repeat 0 -94px;
    transition: transform .2s ease-in-out;
    -moz-transition: transform .2s ease-in-out;
    -webkit-transition: transform .2s ease-in-out;
    -ms-transition: transform .2s ease-in-out
}

.loaded {
    opacity: 0 !important;
    visibility: hidden !important
}

.pace {
    -webkit-pointer-events: none;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    z-index: 2000;
    position: fixed;
    top: 50%;
    bottom: 50%;
    left: 0;
    right: 0;
    margin: auto;
    display: inline-block;
    width: 240px;
    height: 94px;
    transform: scale(1);
    background: 0 0;
    overflow: hidden
}

.pace .pace-progress {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    opacity: 0;
    position: fixed;
    z-index: 2000;
    display: block;
    height: 100%;
    width: 100%;
    background: url(../img/logo.png) no-repeat 0 -188px
}

.pace.pace-inactive {
    display: none
}

.video_container {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    overflow: hidden
}

#video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%)
}

.gradient {
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: 20;
    background: -moz-linear-gradient(bottom, #000 0, rgba(0, 0, 0, 0) 50%);
    background: -webkit-linear-gradient(bottom, #000 0, rgba(0, 0, 0, 0) 50%);
    background: linear-gradient(to top, #000 0, rgba(0, 0, 0, 0) 50%)
}

.background-overlay {
    position: absolute;
    overflow: hidden;
    width: 100%;
    height: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-background-size: cover !important;
    -moz-background-size: cover !important;
    -o-background-size: cover !important;
    background-size: cover !important
}

.category-image {
    position: absolute;
    width: 100%;
    height: 100%;
    background-blend-mode: overlay;
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-background-size: cover !important;
    -moz-background-size: cover !important;
    -o-background-size: cover !important;
    background-size: cover !important;
}

#welcome {
    position: relative;
    height: 98vh;
    z-index: 25
}

.bottom-align {
    position: absolute;
    z-index: 25;
    bottom: 0;
    left: 0;
    right: 0;
    padding-bottom: 40px;
    opacity: 0
}

.button-align {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0
}

.button-align button {
    margin: 400px 32px 0 32px
}

#welcome h1 {
    position: absolute;
    bottom: 100px;
    vertical-align: bottom;
    font-size: 60px;
    line-height: 60px
}

.messages {
    display: inline-block;
    vertical-align: top;
    height: 70px;
    text-align: center;
    width: 100%;
    margin: auto
}

#welcome h3 {
    color: #34bbff;
    font-size: 28px;
    text-align: center;
    margin: 0 40px;
    padding: 0;
    animation-delay: .2s;
    vertical-align: top
}

#welcome .background-overlay {
    background: -moz-linear-gradient(bottom, #000 0, rgba(0, 0, 0, 0) 50%), url(../img/teaser.jpg);
    background: -webkit-linear-gradient(bottom, #000 0, rgba(0, 0, 0, 0) 50%), url(../img/teaser.jpg);
    background: linear-gradient(to top, #000 0, rgba(0, 0, 0, 0) 50%), url(../img/teaser.jpg)
}

.games {
    position: relative;
    height: 100%;
    min-height: 95vh;
    z-index: 50;
    -webkit-box-shadow: 0 0 25px 0 #000;
    -moz-box-shadow: 0 0 25px 0 #000;
    box-shadow: 0 0 25px 0 #000
}

.games p {
    font-size: 16px;
    text-align: left;
    padding: 10px;
    padding-top: 40px
}

.games h4 {
    margin-left: 120px;
    background: -moz-linear-gradient(left top, #ff5000 0, #ffb400 100%), url(../img/category.png);
    background: -webkit-linear-gradient(left top, #ff5000 0, #ffb400 100%), url(../img/category.png);
    background: linear-gradient(to bottom right, #ff5000 0, #ffb400 100%), url(../img/category.png);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.games h5 {
    margin-left: 120px
}

.games .category-image {
    background: -moz-linear-gradient(left top, rgba(255, 126, 0, .9) 0, rgba(255, 0, 0, .5) 100%), url(../img/category.png);
    background: -webkit-linear-gradient(left top, rgba(255, 126, 0, .9) 0, rgba(255, 0, 0, .5) 100%), url(../img/category.png);
    background: linear-gradient(to bottom right, rgba(255, 126, 0, .9) 0, rgba(255, 0, 0, .5) 100%), url(../img/category.png)
}

.visible {
    opacity: 1 !important
}

.grid {
    position: relative;
    z-index: 70;
    text-align: center;
    margin-bottom: 40px;
    vertical-align: top
}

.tooltip {
    position: relative;
    display: inline-block
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 140px;
    background-color: #000;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    top: -136%;
    right: -15%
}

.tooltip:hover .tooltiptext {
    visibility: visible
}

.gamescontent {
    width: 85vw;
    margin-bottom: 150px
}

.gamesgrid {
    display: grid;
    grid-template-columns:repeat(auto-fit, minmax(400px, 1fr));
    grid-gap: 20px;
    grid-template-rows: repeat(auto-fit, 420px);
    grid-auto-rows: 0fr;
    width: 100%
}

.grid div:nth-child(1) {
    animation-delay: .3s
}

.grid div:nth-child(2) {
    animation-delay: .4s
}

.grid div:nth-child(3) {
    animation-delay: .5s
}

.grid div:nth-child(4) {
    animation-delay: .6s
}

.grid div:nth-child(5) {
    animation-delay: .7s
}

.grid div:nth-child(6) {
    animation-delay: .8s
}

.grid div:nth-child(7) {
    animation-delay: .9s
}

.grid div:nth-child(8) {
    animation-delay: 1s
}

.gamesgrid div:nth-child(1) {
    animation-delay: .3s
}

.gamesgrid div:nth-child(2) {
    animation-delay: .4s
}

.gamesgrid div:nth-child(3) {
    animation-delay: .5s
}

.gamesgrid div:nth-child(4) {
    animation-delay: .6s
}

.gamesgrid div:nth-child(5) {
    animation-delay: .7s
}

.gamesgrid div:nth-child(6) {
    animation-delay: .8s
}

.gamesgrid div:nth-child(7) {
    animation-delay: .9s
}

.gamesgrid div:nth-child(8) {
    animation-delay: 1s
}

.games .gamesgrid .game {
    position: relative;
    z-index: 55;
    display: inline-block;
    text-align: left
}

.games .gamesgrid .game ul {
    text-align: center;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 80px
}

.games .gamesgrid .game .links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    width: 100%;
    padding: 20px 10px;
    flex-wrap: wrap;
}


.games .gamesgrid .game li {
    display: inline-block;
    width: 130px;
    margin: 5px
}

.games .gamesgrid div img {
    position: absolute;
    left: 20px;
    top: 20px;
    z-index: 40;
    width: 88px;
    height: 88px;
    border-radius: 20px;
    box-shadow: #000 0 0 4px;
    -moz-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
    transition: all .2s ease-in;
    -moz-transition: all .2s ease-in;
    -webkit-transition: all .2s ease-in;
    -ms-transition: all .2s ease-in
}

.games .gamesgrid div:hover img {
    -moz-transform: scale(1.05);
    -webkit-transform: scale(1.05);
    transform: scale(1.05)
}

.games .gamesgrid div .hover--item {
    background-color: rgba(255, 255, 255, .05);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-radius: 12px;
    min-height: 420px;
    height: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 10px;
    padding-top: 35px;
    transition: all .2s ease-in;
    -moz-transition: all .2s ease-in;
    -webkit-transition: all .2s ease-in;
    -ms-transition: all .2s ease-in
}

.games .gamesgrid div:hover .hover--item {
    background-color: rgba(0, 0, 0, .25)
}

.games .gamesgrid div .hover--item a {
    width: 130px;
    height: 40px;
    display: block;
    text-align: center
}

.games .gamesgrid div .hover--item .link {
    position: absolute;
    color: #fff;
    background-color: rgba(255, 255, 255, 0);
    top: 5px;
    right: 5px;
    width: 40px
}

.games .gamesgrid div .hover--item .itunes {
    background: center / contain url(../img/app-store-badge.svg) no-repeat;
    transform: scale(1)
}

.games .gamesgrid div .hover--item .itunes:hover {
    transform: scale(1.1)
}

.games .gamesgrid div .hover--item .googleplay {
    background: center / contain url(../img/google-play-badge.svg) no-repeat;
    transform: scale(1)
}

.games .gamesgrid div .hover--item .googleplay:hover {
    transform: scale(1.1)
}

.games .gamesgrid div .hover--item .egs {
    background: center / contain url(../img/epic-games-store-badge.png) no-repeat;
    transform: scale(1)
}

.games .gamesgrid div .hover--item .egs:hover {
    transform: scale(1.1)
}

.button {
    cursor: pointer;
    font: 18px Rubik;
    line-height: 40px;
    font-weight: 300;
    color: #232323;
    text-transform: uppercase;
    width: 130px;
    height: 40px;
    background-color: #fff;
    transition: background-color .2s ease-in, transform .2s ease-in;
    -moz-transition: background-color .2s ease-in, transform .2s ease-in;
    -ms-transition: background-color .2s ease-in, transform .2s ease-in;
    -webkit-transition: background-color .2s ease-in, transform .2s ease-in
}

.button:hover {
    -moz-transform: scale(.92);
    -ms-transform: scale(.92);
    -webkit-transform: scale(.92);
    transform: scale(.92);
    color: #fff;
    background-color: rgba(255, 255, 255, .25)
}

#liveops {
    position: relative;
    height: 100%;
    min-height: 95vh;
    z-index: 25
}

#liveops h3 {
    font-size: 20px;
    line-height: 24px;
    padding-top: 0;
    color: #00b50a;
    text-align: center
}

#liveops .title {
    font-size: 24px;
    margin: 0 40px
}

#liveops .background-overlay {
    background: url(../img/liveops.jpg)
}

#liveops .grid {
    position: relative;
    margin: auto;
    width: 100%;
    text-align: center;
    margin-bottom: 60px
}

#liveops .grid p {
    text-align: justify
}

#liveops .grid div {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: inline-block;
    padding: 0;
    margin: 40px 20px;
    width: 20vw;
    height: 100%;
    vertical-align: top;
    opacity: 0
}

#liveops .icon {
    animation-delay: 0 !important;
    display: block !important;
    margin: -20px auto 0 auto !important;
    width: 300px !important;
    height: 300px !important
}

#liveops .understandingPlayers {
    background: url(../img/secretSauce.png) no-repeat 0 0
}

#liveops .expertAnalysis {
    background: url(../img/secretSauce.png) no-repeat -300px 0
}

#liveops .flexibleDevelopment {
    background: url(../img/secretSauce.png) no-repeat -600px 0
}

#liveops .liveEvents {
    background: url(../img/secretSauce.png) no-repeat -900px 0
}

#about {
    position: relative;
    height: 100%;
    min-height: 95vh;
    z-index: 50;
    -webkit-box-shadow: 0 0 15px 0 rgba(0, 0, 0, .8);
    -moz-box-shadow: 0 0 15px 0 rgba(0, 0, 0, .8);
    box-shadow: 0 0 15px 0 rgba(0, 0, 0, .8)
}

.section_content {
    position: relative;
    height: 100%;
    min-height: 95vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column wrap
}

#about .category-image {
    background: -moz-linear-gradient(left top, rgba(0, 243, 255, .9) 0, rgba(0, 0, 255, .5) 100%), url(../img/category.png);
    background: -webkit-linear-gradient(left top, rgba(0, 243, 255, .9) 0, rgba(0, 0, 255, .5) 100%), url(../img/category.png);
    background: linear-gradient(to bottom right, rgba(0, 243, 255, .9) 0, rgba(0, 0, 255, .5) 100%), url(../img/category.png)
}

#about ul {
    column-count: 2;
    column-gap: 30px;
    width: 60vw;
    margin: 30px 0
}

#about ul li {
    color: #cdcdff;
    font-size: 20px;
    display: inline-block;
    text-align: left;
    width: 90%;
    padding: 25px;
    margin-left: 0;
    margin: 0 0 30px;
    vertical-align: top;
    background: rgba(255, 255, 255, .05);
    transition: all .2s ease-in;
    -moz-transition: all .2s ease-in;
    -ms-transition: all .2s ease-in;
    -webkit-transition: all .2s ease-in
}

#about ul li p {
    color: #cdcdff;
    padding-top: 10px;
    font-size: 20px;
    text-align: left
}

#about ul li:hover {
    background: rgba(255, 255, 255, .075)
}

#about .grid div img {
    display: block;
    position: relative;
    z-index: 40;
    max-width: 100%;
    margin: 20px auto
}

#about h3 {
    font-size: 32px;
    mix-blend-mode: normal !important;
    color: #0070ff;
    padding: 5px 0;
    background: -moz-linear-gradient(left top, #006eff 0, #00ffce 100%), url(../img/category.png);
    background: -webkit-linear-gradient(left top, #006eff 0, #00ffce 100%), url(../img/category.png);
    background: linear-gradient(to bottom right, #006eff 0, #00ffce 100%), url(../img/category.png);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

#about .grid p {
    font-size: 24px;
    mix-blend-mode: normal !important;
    color: #fff;
    text-shadow: 0 2px 8px rgba(0, 0, 0, .25);
    padding: 0
}

#about ul li:nth-child(1) {
    animation-delay: .3s
}

#about ul li:nth-child(2) {
    animation-delay: .4s
}

#about ul li:nth-child(3) {
    animation-delay: .5s
}

#about ul li:nth-child(4) {
    animation-delay: .6s
}

#about ul li:nth-child(5) {
    animation-delay: .7s
}

#jobs {
    position: relative;
    height: 100%;
    min-height: 110vh;
    z-index: 25
}

#jobs .workingfordeca {
    display: inline-block;
    background-color: rgba(255, 255, 255, .05);
    padding: 30px;
    vertical-align: top;
    grid-area: deca;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px)
}

#jobs .workingfordeca h2 {
    font-size: 24px;
    text-align: left;
    padding: 0 0 20px 0;
    color: #b4b4b4
}

#jobs .workingfordeca h3 {
    padding: 5px 0;
    color: #f50;
    font-size: 20px;
    line-height: 20px
}

#jobs .workingfordeca div {
    display: block;
    padding: 0 0 20px 0;
    opacity: 0
}

#jobs .workingfordeca div:nth-child(2) {
    animation-delay: 0s
}

#jobs .workingfordeca div:nth-child(3) {
    animation-delay: .2s
}

#jobs .workingfordeca div:nth-child(4) {
    animation-delay: .4s
}

#jobs .workingfordeca div:nth-child(5) {
    animation-delay: .6s
}

#jobs .workingfordeca div:nth-child(6) {
    animation-delay: .8s
}

#jobs .workingfordeca div:nth-child(7) {
    animation-delay: 1s
}

#jobs .positions {
    position: relative;
    text-align: center;
    margin-bottom: 150px;
    width: 85vw;
    vertical-align: top;
    display: grid;
    grid-template-columns:30% 70%;
    grid-template-rows:360px auto;
    grid-template-areas:"deca belief belief" "deca openposition openposition" "deca openposition openposition";
    grid-gap: 15px
}

#jobs .positions p {
    text-align: left
}

.positions li:nth-child(1) {
    animation-delay: 0s
}

.positions li:nth-child(2) {
    animation-delay: .2s
}

.positions li:nth-child(3) {
    animation-delay: .4s
}

.positions li:nth-child(4) {
    animation-delay: .6s
}

.positions li:nth-child(5) {
    animation-delay: .8s
}

.positions li:nth-child(6) {
    animation-delay: 1s
}

#jobs .working-beliefs {
    display: inline-block;
    padding: 30px;
    vertical-align: top;
    background-color: rgba(255, 255, 255, .05);
    grid-area: belief;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px)
}

#jobs .working-beliefs h2 {
    font-size: 24px;
    text-align: left;
    padding: 0 0 20px 0;
    color: #b4b4b4
}

#jobs .open-position {
    display: inline-block;
    padding: 30px;
    vertical-align: top;
    background-color: rgba(255, 255, 255, .05);
    grid-area: openposition;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px)
}

#jobs .working-beliefs ul li {
    padding-left: 25px;
    margin-left: 0;
    margin-bottom: 10px;
    background: transparent url(../img/icons.png) no-repeat -192px -80px
}

#jobs .open-position #bzOpeningsContainer ul li {
    padding-left: 0;
    margin-left: 0;
    margin-bottom: 20px;
    background: 0 0
}

#jobs .open-position h2 {
    font-size: 24px;
    text-align: left;
    padding: 0 0 20px 0;
    color: #b4b4b4
}

#jobs .open-position h3 {
    color: #f50;
    font-size: 32px;
    line-height: 32px;
    padding: 0;
    margin: 0;
    text-align: left
}

#jobs .open-position ul li ul li {
    font-size: 18px;
    line-height: 18px;
    color: #909090;
    display: inline-block;
    margin-right: 10px
}

#jobs .open-position p {
    text-align: justify
}

#bzOpeningsContainer {
    opacity: 0
}

#bzOpeningsContainer li h2 {
    font-size: 24px;
    line-height: 24px;
    font-weight: 900;
    color: #fefefe !important;
    text-align: left !important;
    padding: 0 !important;
    transition: all .2s ease-in;
    -moz-transition: all .2s ease-in;
    -ms-transition: all .2s ease-in;
    -webkit-transition: all .2s ease-in
}

#bzOpeningsContainer li:hover h2 {
    color: #f50 !important
}

.bzOpening {
    margin-bottom: 20px;
    transition: all .2s ease-in;
    -moz-transition: all .2s ease-in;
    -ms-transition: all .2s ease-in;
    -webkit-transition: all .2s ease-in
}

button {
    position: relative;
    z-index: 120;
    float: right;
    cursor: pointer;
    margin: auto;
    font: 24px Rubik;
    font-weight: 300;
    color: #232323;
    text-transform: uppercase;
    width: 120px;
    height: 50px;
    background-color: #fff;
    transition: all .2s ease-in;
    -moz-transition: all .2s ease-in;
    -ms-transition: all .2s ease-in;
    -webkit-transition: all .2s ease-in
}

button:hover {
    -moz-transform: scale(.92);
    -ms-transform: scale(.92);
    -webkit-transform: scale(.92);
    transform: scale(.92);
    color: #fff;
    background-color: rgba(255, 255, 255, .25)
}

#jobs .background-overlay {
    background: url(../img/jobs.jpg)
}

#casestudy {
    position: relative;
    height: 100%;
    min-height: 95vh;
    z-index: 50;
    -webkit-box-shadow: 0 0 15px 0 rgba(0, 0, 0, .8);
    -moz-box-shadow: 0 0 15px 0 rgba(0, 0, 0, .8);
    box-shadow: 0 0 15px 0 rgba(0, 0, 0, .8)
}

#casestudy p {
    color: #dbfbc7;
    font-size: 24px;
    padding: 20px 0
}

#casestudy p a {
    color: #86ff3b
}

#casestudy p a:hover {
    color: #fff
}

#casestudy .show_article p {
    margin: 0 0 25px 0
}

#casestudy .show_article h5:nth-child(1) {
    padding-top: 40px
}

#casestudy .show_article h5 {
    padding: 10px 0;
    font-size: 24px;
    color: #64ff00;
    background: -moz-linear-gradient(left top, #00b40a 0, #e6ff00 100%);
    background: -webkit-linear-gradient(left top, #00b40a 0, #e6ff00 100%);
    background: linear-gradient(to bottom right, #00b40a 0, #e6ff00 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

#casestudy .case {
    position: relative;
    width: 60vw;
    padding: 25px;
    margin-bottom: 50px;
    background: rgba(255, 255, 255, .05);
    transition: all .2s ease-in;
    -moz-transition: all .2s ease-in;
    -ms-transition: all .2s ease-in;
    -webkit-transition: all .2s ease-in
}

#casestudy .case:hover {
    background: rgba(255, 255, 255, .075) !important
}

#casestudy .case img {
    display: inline-block;
    width: 25%;
    margin-right: 20px
}

#casestudy .case .button {
    position: absolute;
    padding: 0;
    right: 0;
    bottom: 10px;
    height: 25px;
    width: 120px;
    line-height: 25px;
    font-size: 18px;
    text-align: center;
    float: right;
    display: block
}

#casestudy .case .case-content {
    display: inline-block;
    vertical-align: top;
    width: 70%
}

#casestudy .case h3 {
    color: #64ff00;
    font-size: 32px;
    line-height: 32px;
    padding: 0;
    margin: 0;
    text-align: left;
    background: -moz-linear-gradient(left top, #00b40a 0, #e6ff00 100%);
    background: -webkit-linear-gradient(left top, #00b40a 0, #e6ff00 100%);
    background: linear-gradient(to bottom right, #00b40a 0, #e6ff00 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

#casestudy .case p {
    font-size: 18px;
    text-align: justify;
    padding: 0
}

#casestudy .case_article {
    position: relative;
    width: 60vw;
    padding: 25px;
    margin-bottom: 50px;
    background: rgba(255, 255, 255, .05);
    transition: all .2s ease-in;
    -moz-transition: all .2s ease-in;
    -ms-transition: all .2s ease-in;
    -webkit-transition: all .2s ease-in
}

#casestudy .case_article .case-content {
    display: inline-block;
    vertical-align: top;
    width: 70%
}

#casestudy .case_article img {
    display: inline-block;
    width: 25%;
    margin-right: 20px
}

#casestudy .case_article h3 {
    color: #64ff00;
    font-size: 32px;
    line-height: 32px;
    padding: 0;
    margin: 0;
    text-align: left;
    background: -moz-linear-gradient(left top, #00b40a 0, #e6ff00 100%);
    background: -webkit-linear-gradient(left top, #00b40a 0, #e6ff00 100%);
    background: linear-gradient(to bottom right, #00b40a 0, #e6ff00 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

#casestudy .case_article p {
    font-size: 18px;
    text-align: justify;
    padding: 0
}

#casestudy .category-image {
    background: -moz-linear-gradient(left top, rgba(100, 255, 0, .9) 0, rgba(14, 182, 0, .5) 100%), url(../img/category.png);
    background: -webkit-linear-gradient(left top, rgba(100, 255, 0, .9) 0, rgba(14, 182, 0, .5) 100%), url(../img/category.png);
    background: linear-gradient(to bottom right, rgba(100, 255, 0, .9) 0, rgba(14, 182, 0, .5) 100%), url(../img/category.png)
}

.contact {
    position: relative;
    height: 110vh;
    z-index: 1;
}

.contact .background-overlay {
    height: 100%;
    background: url(../img/footer.jpg)
}

.contact p {
    font-size: 24px;
    margin: 0 20px
}

.contact a {
    color: #f50;
    font-size: 24px
}

.contact a:hover {
    color: #fff !important
}

footer {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 50px 0 0 0;
    z-index: 10;
    text-align: center;
    background-color: rgba(20, 20, 20, 1);
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
    color: white;
    font-weight: 700;
    letter-spacing: 0;
    gap: 50px;
}

footer .logo-footer {
    bottom: 200px;
    left: 0;
    right: 0;
    margin: auto;
    display: inline-block;
    width: 240px;
    height: 94px;
    transform: scale(1);
    background: url(../img/logo.png) no-repeat 0 0;
    transition: transform .2s ease-in-out;
    -moz-transition: transform .2s ease-in-out;
    -webkit-transition: transform .2s ease-in-out;
    -ms-transition: transform .2s ease-in-out
}

footer .logo-footer:hover {
    transform: scale(.98);
    background: transparent url(../img/logo.png) no-repeat 0 -188px
}

footer .partner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    font-family: "Open-Sans", sans-serif;
    font-size: 16px;
    text-transform: uppercase;
    padding: 0px 18px;
}

footer .embracer {
    width: 240px;
    height: 78px;
    transform-origin: center;
    transform: scale(1);
    background: url(../img/embracer.png) no-repeat 0 0;
    transition: transform .2s ease-in-out;
    -moz-transition: transform .2s ease-in-out;
    -webkit-transition: transform .2s ease-in-out;
    -ms-transition: transform .2s ease-in-out
}

footer .embracer:hover {
    transform: scale(.98);
    background: url(../img/embracer.png) no-repeat 0 -78px
}

footer .copy {
    display: flex;
    box-sizing: border-box;
    align-items: center;
    justify-content: space-between;
    text-align: center;
    background-color: #0a0a0a;
    vertical-align: bottom;
    font-family: "Open Sans", sans-serif;
    font-size: 12px;
    text-transform: uppercase;
    padding: 18px 24px;
    width: 100%;
}

footer .footer-links {
    display: flex;
    align-items: center;
    gap: 16px;
}

footer a:hover {
    color: #f50 !important
}

#tos {
    margin: auto;
    width: 80%
}

#tos h1 {
    margin-top: 120px;
    padding: 0
}

#tos h2 {
    margin: 0;
    padding: 0
}

#tos p {
    text-align: left;
    line-height: 32px;
    padding: 10px 0
}

#tos ul li {
    list-style: decimal;
    padding: 10px 0
}

#tos ul ul {
    margin-left: 50px;
    margin-right: 50px;
    padding: 10px 0
}

#tos b {
    color: #fff
}

#tos a {
    color: #ff7e00
}

#tos i {
    font-weight: 700
}

#privacy {
    margin: auto;
    width: 80%
}

#privacy table {
    width: 630px;
    border: none;
    margin: auto;
    border-spacing: 10px;
    border-collapse: separate
}

#privacy table td {
    padding: 10px;
    vertical-align: top
}

#privacy table td:nth-child(1) {
    width: 150px
}

#privacy table td:nth-child(2) {
    width: 480px
}

#privacy h1 {
    margin-top: 120px;
    padding: 0
}

#privacy h2 {
    margin: 0;
    padding: 0
}

#privacy p {
    text-align: left;
    line-height: 32px;
    padding: 10px 0
}

#privacy ul li {
    list-style: decimal;
    padding: 10px 0
}

#privacy ul ul {
    margin-left: 50px;
    margin-right: 50px;
    padding: 10px 0
}

#privacy b {
    color: #fff
}

#privacy a {
    color: #ff7e00
}

#privacy i {
    font-weight: 700
}

#privacy table {
    margin: auto;
    padding: 25px
}

@media only screen and (max-width: 320px) {
    * {
        margin: 0;
        border: 0;
        padding: 0
    }

    body {
        -webkit-text-size-adjust: none
    }

    h1 {
        font-size: 40px;
        line-height: 40px
    }

    #about, #casestudy, .games, #jobs, #liveops {
        height: 110%
    }

    #jobs .positions {
        grid-template-columns:100%;
        grid-template-rows:auto;
        grid-template-areas:"belief" "openposition" "deca "
    }

    #liveops .grid div {
        width: 80vw
    }

    #header .navigation ul {
        display: none;
        float: none;
        text-align: center
    }

    #header .navigation ul li {
        float: none;
        display: block;
        margin-top: 35px
    }

    #about ul li, #bzOpeningsContainer, #casestudy .case, .games .gamesgrid .game, #liveops .grid div, .positions h2, .positions li, .workingfordeca div {
        opacity: 1 !important
    }

    .gamesgrid {
        grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
        grid-auto-rows: 0fr;
    }

    .games .gamesgrid .game ul {
        height: 44px
    }

    .games .gamesgrid .game li {
        margin: 0
    }

    .games .gamesgrid div .hover--item {
        min-height: 360px
    }

    #casestudy .case {
        width: 80%
    }

    #casestudy .case img {
        width: 100%;
        padding-right: 0;
        padding-bottom: 20px
    }

    #casestudy .case .case-content {
        width: 100%
    }

    #casestudy .case_article {
        width: 80%
    }

    #casestudy .case_article img {
        width: 100%;
        padding-right: 0;
        padding-bottom: 20px
    }

    #casestudy .case_article .case-content {
        width: 100%
    }

    #about ul {
        width: 80vw;
        column-count: 1 !important;
        column-gap: 0 !important
    }

    video {
        display: none
    }

    #welcome h3 {
        font-size: 20px;
        line-height: 24px
    }

    #welcome h1 {
        bottom: 150px;
        font-size: 50px;
        line-height: 50px
    }

    .messages {
        height: 120px
    }

    .contact p {
        margin: 0 0 80px 0
    }

    footer .logo {
        bottom: 250px
    }

    footer .embracer {
        bottom: -50px
    }
}

@media only screen and (min-width: 321px) and (max-width: 767px) {
    * {
        margin: 0;
        border: 0;
        padding: 0
    }

    body {
        -webkit-text-size-adjust: none
    }

    h1 {
        font-size: 38px;
        line-height: 38px
    }

    #about, #casestudy, .games, #jobs, #liveops {
        height: 110%
    }

    #jobs .positions {
        grid-template-columns:100%;
        grid-template-rows:auto;
        grid-template-areas:"deca" "openposition" "belief"
    }

    #liveops .grid div {
        width: 80vw
    }

    #header .navigation ul {
        display: none;
        float: none;
        text-align: center
    }

    #header .navigation ul li {
        float: none;
        display: block;
        margin-top: 35px
    }

    #header ul li a {
        padding: 20px 40px 20px 40px
    }

    #header .nav {
        display: inline-block
    }

    #about ul li, #bzOpeningsContainer, #casestudy .case, .games .gamesgrid .game, #liveops .grid div, .positions h2, .positions li, .workingfordeca div {
        opacity: 1 !important
    }

    .gamesgrid {
        grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
        grid-auto-rows: 0fr;
    }

    .games .gamesgrid div .hover--item {
        min-height: 360px
    }

    #casestudy .case {
        width: 80%
    }

    #casestudy .case img {
        width: 100%;
        padding-right: 0;
        padding-bottom: 20px
    }

    #casestudy .case .case-content {
        width: 100%
    }

    #casestudy .case_article {
        width: 80%
    }

    #casestudy .case_article img {
        width: 100%;
        padding-right: 0;
        padding-bottom: 20px
    }

    #casestudy .case_article .case-content {
        width: 100%
    }

    #about ul {
        width: 80vw;
        column-count: 1 !important;
        column-gap: 0 !important
    }

    video {
        display: none
    }

    #welcome h3 {
        font-size: 20px;
        line-height: 24px
    }

    #welcome h1 {
        bottom: 150px;
        font-size: 55px;
        line-height: 55px
    }

    .messages {
        height: 120px
    }

    footer .logo {
        bottom: 250px
    }

    footer .embracer {
        bottom: -50px
    }
}

@media only screen and (min-width: 768px) and (max-width: 1023px) {
    * {
        margin: 0;
        border: 0;
        padding: 0
    }

    body {
        -webkit-text-size-adjust: none
    }

    h1 {
        font-size: 50px;
        line-height: 50px
    }

    #about, #casestudy, .games, #jobs, #liveops {
        height: 110%
    }

    #jobs .positions {
        grid-template-columns:100%;
        grid-template-rows:auto;
        grid-template-areas:"belief" "openposition" "deca"
    }

    #liveops .grid div {
        width: 80vw
    }

    #header .navigation ul {
        display: none;
        float: none;
        text-align: center
    }

    #header .navigation ul li {
        float: none;
        display: block;
        margin-top: 35px
    }

    #header ul li a {
        padding: 20px 40px 20px 40px
    }

    #header .nav {
        display: inline-block
    }

    #about ul li, #bzOpeningsContainer, #casestudy .case, .games .gamesgrid .game, #liveops .grid div, .positions h2, .positions li, .workingfordeca div {
        opacity: 1 !important
    }

    #casestudy .case {
        width: 80%
    }

    #casestudy .case img {
        width: 40%;
        padding-right: 0;
        padding-bottom: 20px
    }

    #casestudy .case .case-content {
        width: 55%
    }

    #casestudy .case_article {
        width: 80%
    }

    #casestudy .case_article img {
        width: 100%;
        padding-right: 0;
        padding-bottom: 20px
    }

    #casestudy .case_article .case-content {
        width: 100%
    }

    #about ul {
        width: 80vw;
        column-gap: 40px
    }

    #welcome h1 {
        bottom: 125px
    }

    .messages {
        height: 90px
    }
}

@media only screen and (min-width: 1024px) and (max-width: 1280px) {
    * {
        margin: 0;
        border: 0;
        padding: 0
    }

    body {
        -webkit-text-size-adjust: none
    }

    #jobs .positions {
        grid-template-rows:420px auto
    }

    #liveops .grid div {
        width: 40vw
    }

    #about ul li, #bzOpeningsContainer, #casestudy .case, .games .gamesgrid .game, #liveops .grid div, .positions h2, .positions li, .workingfordeca div {
        opacity: 1 !important
    }

    #about ul {
        width: 60vw;
        column-gap: 40px
    }

    .games h4 {
        font-size: 24px !important
    }
}

@media only screen and (min-width: 1281px) {
    * {
        margin: 0;
        border: 0;
        padding: 0
    }

    #about ul li, #bzOpeningsContainer, #casestudy .case, .games .gamesgrid .game, #liveops .grid div, .positions h2, .positions li, .workingfordeca div {
        opacity: 1 !important
    }

    body {
        -webkit-text-size-adjust: none
    }
}