@media 
only screen and (max-width: 1200px) {
    body {
        zoom: 0.5;
    }
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Roboto', sans-serif;
    background: url('../img/background.png');    
}

body#home {
    background: #212059;
}

.wrapper {
    max-width: 1280px;
    margin: auto;
}

.parallax {position: absolute; color: white}

.parallax h2 {font-size: 64px;}
.parallax p {font-size: 20px;line-height: 32px;}

.main-container {
    margin-top: 100px;
    min-height: 80vh;
}

#menumob {display: none}

.header-container {
    height: 100px;
    background: #212059;
    position: fixed;
    backface-visibility: hidden;
    top: 0;
    width: 100%;
    transition: height 0.1s linear;
}

.header-container header {
    height: 60px;
    position: relative;
}

.header-container header a {
    opacity: 0.6;
    transition: all 0.1s linear;
    margin: 0 16px;
    height: 18px;
}

.header-container header a:hover {
    opacity: 1;
}

.header-container header a.header-icon {
    z-index: 200;
    position: relative;
}

.header-container header .left, header .right {
    position: absolute;
    width: 160px;
    height: 18px;
    top: 0;
    bottom: 0;
    margin: auto;
}

.header-container header .left {
    left: 0;
}

.header-container header .right {
    right: 0;
}

.header-container header .bar {
    display: inline-block;
    background: url(../img/bar.png) no-repeat center center;
    width: 1px;
    height: 18px;
}

#logo {
    width: 70px;
    height: 60px;
    background: url('../img/logo_hex.png') no-repeat center center;
    margin: auto;
    position: fixed;
    backface-visibility: hidden;
    left: -18px;
    right: 0;
    z-index: 999;
    transition: opacity 0.2s linear;
}

#logo:before {
    width: 242px;
    height: 56px;
    position: absolute;
    content: "";
    background: url('../img/logo_killer.png') no-repeat left;
    margin-left: -228px;
    transition: all 0.1s linear;
    opacity: 1;
}

#logo:after {
    width: 210px;
    height: 56px;
    position: absolute;
    content: "";
    background: url('../img/logo_queen.png') no-repeat right;
    margin-left: 64px;
    transition: all 0.1s linear;
    opacity: 1;
}

#logo:hover {opacity: 0.7}

nav {
    display: block;
    background: #5a5de2;
    height: 40px;
    position: absolute;
    left: 0;
    right: 0;
    top: 60px;
    transition: all 0.1s linear;
}

nav ul.wrapper {
    margin: auto;
    padding: 0;
    font-size: 0;
    width: 1080px;
}

nav li {
    display: inline-block;
    width: 177px;
    text-align: center;
    padding: 12px 0;
}

nav li:nth-of-type(4){
    padding: 0 0px 0 29px;
    width: 153px;
}

nav a {
    color: white;
    text-decoration: none;
    font-size: 14px;
    opacity: 0.5;
    text-transform: uppercase;
    transition: all 0.1s linear;
    letter-spacing: 1px;
}

nav a:hover, nav a.active {
    font-weight: bold;
    opacity: 1;
}

nav.sticky {
    height: 50px;
}

footer {
    min-height: 50px;
    background: #282965;
}

footer ul {
    margin: auto;
    padding: 0;
    width: 800px;
    text-align: center;
}

footer li {
    display: inline-block;
    text-align: center;
    padding: 18px 22px;
}

footer a {
    color: white;
    text-decoration: none;
}

footer a:hover {
    text-decoration: underline;
}

footer.f2 {
    min-height: auto;
    padding: 16px;
    background: #11122e;
    color: white;
    text-align: center;
}

.scrolled #menu {
    height: 60px;
    z-index: 900;
}

.scrolled #menu nav {
    background: transparent;
    top: 12px;
}

.scrolled #menu #logo:before, .scrolled #menu #logo:after {
    width: 0;
    opacity: 0;
}
.scrolled #menu #logo:before {
    margin: 0;
    opacity: 0;
}





#video {
    background: url(../img/VIDEO.jpg) no-repeat;
    height: 557px
}

#main {
    background: url(../img/backgroundHome.png) no-repeat top center;
    /*height: 4998px;*/
    height: 4795px;
    margin-top: -340px;
    padding-top: 220px;
    position: relative;
}

#scroll {
    background: url(../img/scroll.png) center no-repeat;
    height: 23px;
    margin: 24px 0 24px -16px;
}

.platform {
    position: absolute;
    z-index: 1;
}

#p1 {
    background: url(../img/p1.png) center no-repeat;
    width: 240px;
    height: 104px;
    left: 518px;
    top: 342px;
}

#p2 {
    background: url(../img/p2a.png) center no-repeat;
    width: 240px;
    height: 360px;
    left: 770px;
    top: 700px;
}
#p2.b {background: url(../img/p2b.png) center no-repeat;}

#p3 {
    background: url(../img/p3.png) center no-repeat;
    width: 240px;
    height: 144px;
    left: 518px;
    top: 1800px;
}

#p4 {
    background: url(../img/p4.png) center no-repeat;
    width: 240px;
    height: 104px;
    left: 228px;
    top: 3200px;
}

#p5 {
    background: url(../img/p1.png) center no-repeat;
    width: 240px;
    height: 104px;
    left: 518px;
    top: 5050px;
}

#p6 {
    background: url(../img/p4.png) center no-repeat;
    width: 240px;
    height: 104px;
    left: 770px;
    top: 6450px;
}

#p7 {
    background: url(../img/p1.png) center no-repeat;
    width: 240px;
    height: 104px;
    left: 228px;
    top: 7050px;
}

#p8 {
    background: url(../img/p4.png) center no-repeat;
    width: 240px;
    height: 104px;
    left: 520px;
    top: 8250px;
}

#gate {
    background: url(../img/maiden-anim-sheet.png) top left no-repeat;
    width: 288px;
    height: 288px;
    left: 498px;
    top: 8000px;
    z-index: 0;
}


#mainLeft {
    background: #2aa2dd;
}
#mainRight {
    background: #50c1f8;
}
#mainCenter {
    background: #3895f5;
}

#bearcontainer {
    position: absolute;
    left: 610px;
    top: 330px;
    z-index: 1;
    width: 120px;
    height: 120px;
    animation-fill-mode: forwards;
    margin-top: -70px;
}
#bearcontainer.soldier {
    left: 598px; top: 8250px;
    transition: all 1s ease-out;
}
#bear {
    background: url(../img/bear.png) no-repeat;
    width: 120px;
    height: 120px;
}

#bear.stand {background-position: -480px -360px}
#bear.standFood {background-position: -480px -600px}
#bear.jump {background-position: 0px 0px}
#bear.jumpFood {background-position: -360px -240px}
#bear.run {animation: run 0.57s steps(1) infinite}
#bear.runFood {animation: runFood 0.57s steps(1) infinite}
#bear.left {transform: scaleX(-1);}
#bear.soldier {
    background: url(../img/blue_soldier_d.png) no-repeat;
    width: 200px;
    height: 200px;
    margin: -80px -60px;
    animation: soldier 0.4s steps(1) infinite;
}

#game {
    position: absolute;
    width: 400px;
    left: 120px;
}

#arcades {
    position: absolute;
    width: 400px;
    left: 700px;
    top: 1200px;
}

#arcades .hexes {
    position: absolute;
    left: -650px;
    top: 0;
}

.hexes a {
    position: absolute;
    width: 249px;
    height: 216px;
    overflow: hidden;
}


.hexes a div h6 {
    font-size: 18px;
    position: absolute;
    text-align: center;
    width: 100%;
    top: 30px;
}

.hexes a div p {
    font-size: 18px;
    position: absolute;
    text-align: center;
    width: 100%;
    top: 100px;
    line-height: 20px;
}

.hexes a div {
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
}

.hexes a:hover div {
    opacity: 1;
}


.hexes a.rot {
    transition: transform 0.2s ease-in-out;
}

.hexes a.rot:hover {
    transform: rotateZ(60deg);
}

.hexes a.rot div {
    transform: rotateZ(-60deg);
    transform-origin: 50% 108px;
    opacity: 0;
}

.hexes a.rot:hover div {
    opacity: 1;
}


.hexes a.fade {
    transition: all 0.2s ease-in-out;
    background-size: 100%;
}

.hexes a.fade:hover {
    background-size: 120%;
}


#teams {
    position: absolute;
    width: 400px;
    left: 120px;
    top: 3200px;
}

#teams .hexes {
    position: absolute;
    left: 650px;
    top: 0;
}

#teams .hexes a:nth-child(1) {left: 200px; top: -140px;}
#teams .hexes a:nth-child(2) {top: -20px;}
#teams .hexes a:nth-child(3) {top: 210px;}
#teams .hexes a:nth-child(4) {left: 200px; top: 330px;}

#arcades .hexes a:nth-child(1) {top: -140px;}
#arcades .hexes a:nth-child(2) {left: 200px; top: -20px;}
#arcades .hexes a:nth-child(3) {top: 210px; left: 200px;}
#arcades .hexes a:nth-child(4) {top: 330px;}

#devs {
    position: absolute;
    width: 400px;
    left: 460px;
    z-index: 1;
    top: 4000px;
}

#devspic {
    position: absolute;
    width: 1280px;
    text-align: center;
    top: 4600px;
}



.q1, .q2, .q3 {
    pointer-events: none;
}

.q1 {
    position: absolute;
    width: 600px;
    left: 400px;
    top: 800px;
    text-align: center;
}

.q1 img, .q2 img {
    position: absolute;
    left: 55px;
}

.q2 {
    position: absolute;
    width: 600px;
    left: 400px;
    top: 2000px;
    text-align: center;
}

#prlx1 .q1 {
    top: 0
}

#prlx1 .q2 {
    top: 2700px;
    left: 480px;
}

.q3 {display: none;position: absolute;}


#prlx1 img {
    opacity: 0.8;
    position: absolute;
}

#prlx1 {z-index: 10}
#prlx2 {z-index: 7}
#prlx4 {z-index: 5}

#prlx1, #prlx2, #prlx4 {margin-top: -340px;}


.blog {
    color: #212059;
    margin: 130px 0 50px;
}
.blog h1, .blog h2, .blog h3 {
    color: #5a5de2;
}


@keyframes run {
   0%    {background-position: 0px 0;}
   12.5% {background-position: -120px 0;}
   25%   {background-position: -240px 0;}
   37.5% {background-position: -480px 0;}
   50%   {background-position: -360px 0;}
   62.5% {background-position: -480px 0;}
   75%   {background-position: -240px 0;}
   87.5% {background-position: -120px 0;}
}

@keyframes runFood {
   0%    {background-position: 0px -240px;}
   12.5% {background-position: -120px -240px;}
   25%   {background-position: -240px -240px;}
   37.5% {background-position: -480px -240px;}
   50%   {background-position: -360px -240px;}
   62.5% {background-position: -480px -240px;}
   75%   {background-position: -240px -240px;}
   87.5% {background-position: -120px -240px;}
}

@keyframes gate {
   0%     {background-position:  0px 0px}
   8.3%   {background-position: -288px 0px}
   16.6%  {background-position: -576px 0px}
   25%    {background-position: -864px 0px}
   33.3%  {background-position:  0px -288px}
   41.6%  {background-position: -288px -288px}
   50%    {background-position: -576px -288px}
   58.3%  {background-position: -864px -288px}
   66.6%  {background-position:  0px -576px}
   75%    {background-position: -288px -576px}
   83.3%  {background-position: -576px -576px}
   91.6%  {background-position: -864px -576px}
}

@keyframes soldier {
    0%  {background-position: 0px -800px;}
    20% {background-position: -800px -800px;}
    40% {background-position: -600px -800px;}
    60% {background-position: -400px -800px;}
    80% {background-position: -200px -800px;}
}

#bearcontainer.p1 {animation: p1 1.2s linear;animation-fill-mode: forwards;}
#bearcontainer.p2 {animation: p2 1.7s linear;animation-fill-mode: forwards;}
#bearcontainer.p3 {animation: p3 2.2s linear;animation-fill-mode: forwards;}
#bearcontainer.p4 {animation: p4 2.7s linear;animation-fill-mode: forwards;}
#bearcontainer.p5 {animation: p5 2.2s linear;animation-fill-mode: forwards;}
#bearcontainer.p6 {animation: p6 1.5s linear;animation-fill-mode: forwards;}
#bearcontainer.p7 {animation: p7 2.4s linear;animation-fill-mode: forwards;}
#gate.play {animation: gate 3s steps(1);}

/* 
run speed: 130px / 0.4s   old speed: 130px / 0.6s
jump speed: 70px / 0.2s
drop speed: 1200px / 2.5s 
*/

@keyframes p1 {
    0%  {left: 600px; top: 330px;}
    33% {left: 730px; top: 330px;}  /* 0.4 / 1.2 */
    50% {left: 750px; top: 260px;}  /* (0.4 + 0.2) / 1.2 */
    100%{left: 830px; top: 830px;}  /* etc... */
}

@keyframes p2 {
    0%   {left: 862px; top: 830px;}
    23%  {left: 740px; top: 830px;}
    35%  {left: 720px; top: 760px;}
    100% {left: 600px; top: 1770px;}
}

@keyframes p3 {
    0%   {left: 600px; top: 1770px;}
    18%  {left: 480px; top: 1770px;}
    27%  {left: 460px; top: 1700px;}
    100% {left: 320px; top: 3190px;}
}

@keyframes p4 {
    0%   {left: 320px; top: 3190px;}
    15%  {left: 440px; top: 3190px;}
    22%  {left: 460px; top: 3120px;}
    100% {left: 600px; top: 5033px;}
}

@keyframes p5 {
    0%   {left: 600px; top: 5033px;}
    18%  {left: 720px; top: 5033px;}
    27%  {left: 740px; top: 4963px;}
    100% {left: 830px; top: 6450px;}
}

@keyframes p6 {
    0%   {left: 830px; top: 6450px;}
    27%  {left: 710px; top: 6450px;}
    40%  {left: 640px; top: 6380px;}
    100% {left: 320px; top: 7050px;}
}

@keyframes p7 {
    0%   {left: 320px; top: 7050px;}
    18%  {left: 440px; top: 7050px;}
    27%  {left: 460px; top: 6980px;}
    100% {left: 584px; top: 8250px;}
}