body{
font-family: 'Roboto Condensed', sans-serif;
margin:0;
padding:0;
width:100%;
overflow:hidden;
color:#383838;
}

a{
text-decoration:none;
color:inherit;
}

#main{
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
overflow:hidden;
}

.home_back{
position:absolute;
right:0;
top:0;
 -webkit-transition: all 1s ease;
    transition: all 1s ease;

}

.game_back{
position:absolute;
right:0;
top:0;
 -webkit-transition: all 1s ease;
    transition: all 1s ease;

}

#side_menu{

position:absolute;
left:0;
top:0;
width:25%;
height:100%;
 -webkit-transition: all 1s ease;
    transition: all 1s ease;
}



.menu_num{
text-align:center;
font-weight:600;
float:left;
padding-top:2%;
height:100%;
width:14%;
color:#fff;
border-right:1px solid #fff;

}
.menu_cont{
float:left;
height:100%;
width:85%;
color:#fff;
position:relative;
}


.side_menu_item{
 -webkit-transition: all 1s ease;
    transition: all 1s ease;
display:inline-block;
clear:both;
height:20%;
position:absolute;
float:left;
color:#fff;
padding:0 2% 2% 2%;
cursor:pointer;
width:100%;
left:0;

}

.menu_img{
position:absolute;
top:0;
left:0;
height:90%;
border-right:5px solid #fff;
 -webkit-transition: all 1s ease;
    transition: all 1s ease;

}

.menu_arrow{
position:absolute;
top:0;
 -webkit-transition: all 1s ease;
    transition: all 1s ease;

text-align:center;
height:90%;
}

.menu_arrow img{
height:15%;
position:absolute;
left:20%;
top:50%;
transform: translate(0,-50%);
-webkit-transform: translate(0,-50%);
}

.menu_title{
text-align:left;
-webkit-transition: all .8s ease;
    transition: all .8s ease;
font-weight:600;
position:absolute;
top:0;
left:0;

color:#fff;
font-size:2vh;
padding:1% 2%;
border-top:2px dotted #fff;
border-bottom:2px dotted #fff;
border-left:2px dotted #fff;
background:linear-gradient(to right, #000, #000, transparent);
}



#top_menu{

position:absolute;
right:0;
top:2%;
width:50%;
 -webkit-transition: all 1s ease;
    transition: all 1s ease;

}

#top_menu_wrap{
display:inline-block;
float:right;

}

.top_menu_cont{
display:inline-block;
font-size:12px;
cursor: pointer;
font-weight:600;
text-align:center;
float:left;
height:100%;
padding:0 20px;
color:#fff;
position:relative;
}

#bottom_menu{
min-width:400px;
position:absolute;
width:30%;
 -webkit-transition: all 1s ease;
    transition: all 1s ease;
bottom:0;

color:#fff;
text-align:center;

}

#bottom_menu_top{

position:absolute;
bottom:0;
left:37.5%;
width:25%;
display:inline-block;
min-width:100px;
-webkit-transition: all .8s ease;
    transition: all .8s ease;
}

#bottom_menu i{
font-size:3vw;
font-weight:bold;
display:inline-block;
cursor:pointer;
 -webkit-transition: all .8s ease;
    transition: all .8s ease;
}

#bottom_menu_button{
box-sizing:border-box;
cursor:pointer;
width:100%;
display:inline-block;
border-radius:20px 20px 0 0;
border-top:1px solid #fff;
border-left:1px solid #fff;
border-right:1px solid #fff;
background:rgba(0,0,0,0.74);
 -webkit-transition: all .8s ease;
    transition: all .8s ease;
}

#logo{
width:80%;
margin-top:10%;
 -webkit-transition: all .8s ease;
    transition: all .8s ease;
}

#bottom_menu_wrap{
min-width:400px;
font-weight:600;
position:absolute;
width:100%;

left:0;
 -webkit-transition: all .8s ease;
    transition: all .8s ease;
}

#bottom_menu_title{
display:inline-block;
font-weight:bold;
font-size:16px;
padding-top:5px;
padding-bottom:5px;
 -webkit-transition: all .8s ease;
    transition: all .8s ease;
}


#bottom_menu_top:hover i{
opacity:0;

}

#bottom_menu_top:hover #bottom_menu_title{
opacity:0;


}


#bottom_menu_top:hover{

width:30%;
left:35%;

}

#bottom_menu_wrap:hover{
bottom:0;
}


.hover{
opacity:0;
}

.width_30{
width:30% !important;
left:35% !important;
}

#bot_l{
cursor:pointer;
min-width:140px;
box-sizing:border-box;

position:relative;
float:left;
width:35%;
height:100%;
border-radius:20px 0 0 0;
border-top:1px solid #fff;
border-left:1px solid #fff;
background:rgba(0,0,0,0.74);
}

#bot_r{
cursor:pointer;
box-sizing:border-box;

position:relative;
float:right;
width:35%;
min-width:140px;
height:100%;
border-radius:0 20px 0 0;
border-top:1px solid #fff;
border-right:1px solid #fff;
background:rgba(0,0,0,0.74);
}
#bot_c{
box-sizing:border-box;
background:rgba(0,0,0,0.74);
position:relative;
float:left;
width:30%;
height:100%;

}

.minimize{
height:2% !important;
padding-bottom:5%;
}

.minimize .menu_title{
border:none;
background:none;
font-size:1.5vh;
}

.minimize .menu_arrow{
opacity:0;
}

.minimize .menu_img{
opacity:0;

}

.expand{
height:55% !important;
padding-bottom:5%;
}

.expand .menu_arrow{
opacity:0;
}

.expand .menu_title{
border:none;
background:none;

}

.expand .menu_img{
background:rgba(255,255,255,0.6);

}

.expand .menu_imgimg{
opacity:0;

}

#fake_line{
position:absolute;

width:3.5%;
border-right: 1px solid #fff;
padding-left:0.5%;
left:0;
}


.dot {
display:none;
background: rgba(255,255,255,1);
box-shadow: 0 0 10px 2px rgba(255, 255, 255, 0.5) inset, 0 0 10px 2px rgba(255, 255, 255, 0.3);
position:absolute;
  width: 3px;
  height: 3px;
  border-radius: 100%;
 -webkit-animation: pulse 1s alternate infinite;
  animation: pulse 1s alternate infinite;
}

@-webkit-keyframes pulse {
  0% {
    background: rgba(255,255,255,0.1);
    box-shadow: inset 0px 0px 10px 2px rgba(255,255,255,0.5),
                      0px 0px 5px 2px rgba(255,255,255,0.3);
  }
  100% {
    background: rgba(255,255,255,1);
    box-shadow: inset 0px 0px 10px 2px rgba(255,255,255,0.5),
                      0px 0px 15px 2px rgba(255,255,255,1);
  }
}
@keyframes pulse {
  0% {
    background: rgba(255,255,255,0.1);
    box-shadow: inset 0px 0px 10px 2px rgba(255,255,255,0.5),
                      0px 0px 5px 2px rgba(255,255,255,0.3);
  }
  100% {
    background: rgba(255,255,255,1);
    box-shadow: inset 0px 0px 10px 2px rgba(255,255,255,0.5),
                      0px 0px 15px 2px rgba(255,255,255,1);
  }
}

.moto{
font-family: 'Orbitron', sans-serif;
transform:translate(-50%,-50%);
-webkit-transform:translate(-50%,-50%);
white-space:nowrap;
display:inline-block;
position:absolute;
opacity:0;
font-size:0;
color:#fff;
font-weight:700;
 -webkit-animation: moto 5s alternate 1;
  animation: moto 5s alternate 1;
}

@-webkit-keyframes moto {
  0% {
  opacity:0;
font-size:0;
  }
 90% {
font-size:10vw;
 opacity:0.7;
  }
  100% {
 opacity:0;
font-size:85vw;
  }
}
@keyframes moto {
   0% {
  opacity:0;
font-size:0;
  }
 90% {
font-size:10vw;
 opacity:0.7;
  }
  100% {
 opacity:0;
font-size:85vw;
  }
}

.sponsored{
position:absolute;
background:#000;
width:98%;
height:96%;

top:2%;
left:1%;
}

.sp_game{
position:relative;
float:left;
width:50%;
height:50%;
overflow:hidden;
}

.sp_img{
width:100%;
position:absolute;
top:0;
left:0;
}

.sp_overlay{
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
background:rgba(0,0,0,0.7);
display:none;
}

.sp_see_more{
width:20%;

text-align:center;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%);
-webkit-transform:translate(-50%, -50%);
color:#fff;

}

.menu_cta{
position:absolute;
top:100%;
right:0;
width:40%;
display:inline-block;
display:none;
}

.menu_cta img{
width:100%;
}

.zoomback{
animation: zoomback 4s 1 linear;
  animation-fill-mode: forwards;
animation-delay: 0.5s;
-webkit-animation: zoomback 4s 1 linear;
  -webkit-animation-fill-mode: forwards;
-webkit-animation-delay: 0.5s;
}

@-webkit-keyframes zoomback {
  0%{
    -webkit-transform:scale(1);
filter: blur(0);
-webkit-filter: blur(0);
  }
 20%{
    -webkit-transform:scale(1.1);
filter: blur(1px);
-webkit-filter: blur(1px);
  }
  100%{
    -webkit-transform:scale(10);
filter: blur(20px);
-webkit-filter: blur(20px);
  }
}

@keyframes zoomback {
  0%{
    transform:scale(1);
filter: blur(0);
-webkit-filter: blur(0);
  }
 20%{
    transform:scale(1.1);
filter: blur(1px);
-webkit-filter: blur(1px);
  }
  100%{
    transform:scale(10);
filter: blur(20px);
-webkit-filter: blur(20px);
  }
}

.unblur{
filter: blur(0);
-webkit-filter: blur(0) !important;
animation: unblur 1s 1 linear;
  animation-fill-mode: forwards;
  -webkit-animation: unblur 1s 1 linear;
  -webkit-animation-fill-mode: forwards;
}

@keyframes unblur {
  0%{

filter: blur(50px);
-webkit-filter: blur(50px);
  }

  100%{

filter: blur(0);
-webkit-filter: blur(0);
  }
}

@-webkit-keyframes unblur {
  0%{

filter: blur(50px);
-webkit-filter: blur(50px);
  }

  100%{

filter: blur(0);
-webkit-filter: blur(0);
  }
}

.blur{

animation: blur 3s 1 linear;
  animation-fill-mode: forwards;
  -webkit-animation: blur 3s 1 linear;
  -webkit-animation-fill-mode: forwards;
}

@keyframes blur {
  0%{

filter: blur(0);
-webkit-filter: blur(0);
  }

  100%{

filter: blur(5px);
-webkit-filter: blur(5px);
  }
}

@-webkit-keyframes blur {
  0%{

filter: blur(0);
-webkit-filter: blur(0);
  }

  100%{

filter: blur(5px);
-webkit-filter: blur(5px);
  }
}

#target{
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
display:none;
}

#t_hor{
width:100%;
height:1px;
position:absolute;
top:20%;
left:0;
background:#fff;
}

#t_ver{
width:1px;
height:100%;
position:absolute;
top:0;
left:35%;
background:#fff;
}
#out_sq{
width:70px;
height:70px;
position:absolute;
top:20%;
left:35%;

transform:translate(-50%, -50%);
-webkit-transform:translate(-50%, -50%);
}

#t_sq{
width:50px;
height:50px;
position:absolute;
top:9px;
left:9px;
border:1px solid #fff;

}


#t_c1{
width:20px;
height:20px;
position:absolute;
top:0px;
left:0px;
border-top:3px solid #fff;
border-left:3px solid #fff;

}

#t_c2{
width:20px;
height:20px;
position:absolute;
top:0px;
right:0px;
border-top:3px solid #fff;
border-right:3px solid #fff;

}

#t_c3{
width:20px;
height:20px;
position:absolute;
bottom:0px;
left:0px;
border-bottom:3px solid #fff;
border-left:3px solid #fff;

}

#t_c4{
width:20px;
height:20px;
position:absolute;
bottom:0px;
right:0px;
border-bottom:3px solid #fff;
border-right:3px solid #fff;

}

.t_start{
display:block !important;
}


.t_start #t_hor{
animation: hor_move 3s 1 linear;
  animation-fill-mode: forwards;
  -webkit-animation: hor_move 3s 1 linear;
  -webkit-animation-fill-mode: forwards;
}

@keyframes hor_move {
  0%{

top:20%;
  }
20%{

top:80%;
  }

25%{

top:80%;
  }
40%{

top:65%;
  }

45%{

top:65%;
  }
80%{

top:48%;
  }

  100%{

top:48%;
  }
}

@-webkit-keyframes hor_move {
  0%{

top:20%;
  }
20%{

top:80%;
  }

25%{

top:80%;
  }
40%{

top:65%;
  }

45%{

top:65%;
  }
80%{

top:48%;
  }

  100%{

top:48%;
  }
}

.t_start #t_ver{
animation: ver_move 3s 1 linear;
  animation-fill-mode: forwards;
  -webkit-animation: ver_move 3s 1 linear;
  -webkit-animation-fill-mode: forwards;
}

@keyframes ver_move {
  0%{

left:30%;
  }
20%{

left:90%;
  }

25%{

left:90%;
  }
40%{

left:40%;
  }
45%{

left:40%;
  }
80%{

left:48%;
  }

  100%{

left:48%;
  }
}

@-webkit-keyframes ver_move {
  0%{

left:30%;
  }
20%{

left:90%;
  }

25%{

left:90%;
  }
40%{

left:40%;
  }
45%{

left:40%;
  }
80%{

left:48%;
  }

  100%{

left:48%;
  }
}

.t_start #out_sq{
animation: sq_move 3s 1 linear;
  animation-fill-mode: forwards;
  
  -webkit-animation: sq_move 3s 1 linear;
  -webkit-animation-fill-mode: forwards;
}

@keyframes sq_move {
  0%{
top:20%;
left:30%;
  }
20%{
top:80%;
left:90%;
  }

25%{
top:80%;
left:90%;
  }
40%{
top:65%;
left:40%;
  }
45%{
top:65%;
left:40%;
  }
80%{
top:48%;
left:48%;
  }

  100%{
top:48%;
left:48%;
  }
}

@-webkit-keyframes sq_move {
  0%{
top:20%;
left:30%;
  }
20%{
top:80%;
left:90%;
  }

25%{
top:80%;
left:90%;
  }
40%{
top:65%;
left:40%;
  }
45%{
top:65%;
left:40%;
  }
80%{
top:48%;
left:48%;
  }

  100%{
top:48%;
left:48%;
  }
}


.t_start .t_c{
animation: c_move 3s 1 linear;
  animation-fill-mode: forwards;
  -webkit-animation: c_move 3s 1 linear;
  -webkit-animation-fill-mode: forwards;
}

@keyframes c_move {
  0%{
border-color:#fff;
  }
79%{
border-color:#fff;
  }
80%{
border-color:#c00;
  }

  100%{
border-color:#c00;
  }
}

@-webkit-keyframes c_move {
  0%{
border-color:#fff;
  }
79%{
border-color:#fff;
  }
80%{
border-color:#c00;
  }

  100%{
border-color:#c00;
  }
}

.t_start #t_sq{
animation: isq_move 3s 1 linear;
  animation-fill-mode: forwards;
  -webkit-animation: isq_move 3s 1 linear;
  -webkit-animation-fill-mode: forwards;
}

@keyframes isq_move {
  0%{
width:50px;
height:50px;
top:9px;
left:9px;
  }
79%{
width:50px;
height:50px;
top:9px;
left:9px;
opacity:1;
  }
85%{
width:30px;
height:30px;
top:19px;
left:19px;
opacity:0;
  }
90%{
width:30px;
height:30px;
top:19px;
left:19px;
opacity:1;
  }
93%{
width:30px;
height:30px;
top:19px;
left:19px;
opacity:0;
  }

96%{
width:30px;
height:30px;
top:19px;
left:19px;
opacity:1;
  }
99%{
width:30px;
height:30px;
top:19px;
left:19px;
opacity:0;
  }

  100%{
width:30px;
height:30px;
top:19px;
left:19px;
opacity:1;
  }
}

@-webkit-keyframes isq_move {
  0%{
width:50px;
height:50px;
top:9px;
left:9px;
  }
79%{
width:50px;
height:50px;
top:9px;
left:9px;
opacity:1;
  }
85%{
width:30px;
height:30px;
top:19px;
left:19px;
opacity:0;
  }
90%{
width:30px;
height:30px;
top:19px;
left:19px;
opacity:1;
  }
93%{
width:30px;
height:30px;
top:19px;
left:19px;
opacity:0;
  }

96%{
width:30px;
height:30px;
top:19px;
left:19px;
opacity:1;
  }
99%{
width:30px;
height:30px;
top:19px;
left:19px;
opacity:0;
  }

  100%{
width:30px;
height:30px;
top:19px;
left:19px;
opacity:1;
  }
}

.t_start_2{
display:block !important;
opacity:0;
animation: t_move_2 3s 1 linear;
  animation-fill-mode: forwards;
animation-delay:1s;
-webkit-animation: t_move_2 3s 1 linear;
  -webkit-animation-fill-mode: forwards;
-webkit-animation-delay:1s;
}

@keyframes t_move_2 {
  0%{

opacity:0;
  }
  1%{

opacity:1;
  }
  100%{
opacity:1;
  }
}

@-webkit-keyframes t_move_2 {
  0%{

opacity:0;
  }
  1%{

opacity:1;
  }
  100%{
opacity:1;
  }
}


.t_start_2 #t_hor{
animation: hor_move_2 3s 1 linear;
  animation-fill-mode: forwards;
animation-delay:1s;
-webkit-animation: hor_move_2 3s 1 linear;
  -webkit-animation-fill-mode: forwards;
-webkit-animation-delay:1s;
}

@keyframes hor_move_2 {
  0%{

top:20%;
  }
20%{

top:80%;
  }

25%{

top:80%;
  }
40%{

top:65%;
  }

45%{

top:65%;
  }
80%{

top:70%;
  }

  100%{

top:70%;
  }
}


@-webkit-keyframes hor_move_2 {
  0%{

top:20%;
  }
20%{

top:80%;
  }

25%{

top:80%;
  }
40%{

top:65%;
  }

45%{

top:65%;
  }
80%{

top:70%;
  }

  100%{

top:70%;
  }
}


.t_start_2 #t_ver{
animation: ver_move_2 3s 1 linear;
  animation-fill-mode: forwards;
animation-delay:1s;
-webkit-animation: ver_move_2 3s 1 linear;
  -webkit-animation-fill-mode: forwards;
-webkit-animation-delay:1s;
}

@keyframes ver_move_2 {
  0%{

left:30%;
  }
20%{

left:90%;
  }

25%{

left:90%;
  }
40%{

left:40%;
  }
45%{

left:40%;
  }
80%{

left:72%;
  }

  100%{

left:72%;
  }
}

@-webkit-keyframes ver_move_2 {
  0%{

left:30%;
  }
20%{

left:90%;
  }

25%{

left:90%;
  }
40%{

left:40%;
  }
45%{

left:40%;
  }
80%{

left:72%;
  }

  100%{

left:72%;
  }
}

.t_start_2 #out_sq{
animation: sq_move_2 3s 1 linear;
  animation-fill-mode: forwards;
animation-delay:1s;

-webkit-animation: sq_move_2 3s 1 linear;
  -webkit-animation-fill-mode: forwards;
-webkit-animation-delay:1s;
}

@keyframes sq_move_2 {
  0%{
top:20%;
left:30%;
  }
20%{
top:80%;
left:90%;
  }

25%{
top:80%;
left:90%;
  }
40%{
top:65%;
left:40%;
  }
45%{
top:65%;
left:40%;
  }
80%{
top:70%;
left:72%;
  }

  100%{
top:70%;
left:72%;
  }
}

@-webkit-keyframes sq_move_2 {
  0%{
top:20%;
left:30%;
  }
20%{
top:80%;
left:90%;
  }

25%{
top:80%;
left:90%;
  }
40%{
top:65%;
left:40%;
  }
45%{
top:65%;
left:40%;
  }
80%{
top:70%;
left:72%;
  }

  100%{
top:70%;
left:72%;
  }
}

.t_start_2 .t_c{
animation: c_move_2 3s 1 linear;
  animation-fill-mode: forwards;
animation-delay:1s;
-webkit-animation: c_move_2 3s 1 linear;
  -webkit-animation-fill-mode: forwards;
-webkit-animation-delay:1s;
}

@keyframes c_move_2 {
  0%{
border-color:#fff;
  }
79%{
border-color:#fff;
  }
80%{
border-color:#c00;
  }

  100%{
border-color:#c00;
  }
}
@-webkit-keyframes c_move_2 {
  0%{
border-color:#fff;
  }
79%{
border-color:#fff;
  }
80%{
border-color:#c00;
  }

  100%{
border-color:#c00;
  }
}

.t_start_2 #t_sq{
animation: isq_move_2 3s 1 linear;
  animation-fill-mode: forwards;
animation-delay:1s;
-webkit-animation: isq_move_2 3s 1 linear;
  -webkit-animation-fill-mode: forwards;
-webkit-animation-delay:1s;
}

@keyframes isq_move_2 {
  0%{
width:50px;
height:50px;
top:9px;
left:9px;
  }
79%{
width:50px;
height:50px;
top:9px;
left:9px;
opacity:1;
  }
85%{
width:30px;
height:30px;
top:19px;
left:19px;
opacity:0;
  }
90%{
width:30px;
height:30px;
top:19px;
left:19px;
opacity:1;
  }
93%{
width:30px;
height:30px;
top:19px;
left:19px;
opacity:0;
  }

96%{
width:30px;
height:30px;
top:19px;
left:19px;
opacity:1;
  }
99%{
width:30px;
height:30px;
top:19px;
left:19px;
opacity:0;
  }

  100%{
width:30px;
height:30px;
top:19px;
left:19px;
opacity:1;
  }
}

@-webkit-keyframes isq_move_2 {
  0%{
width:50px;
height:50px;
top:9px;
left:9px;
  }
79%{
width:50px;
height:50px;
top:9px;
left:9px;
opacity:1;
  }
85%{
width:30px;
height:30px;
top:19px;
left:19px;
opacity:0;
  }
90%{
width:30px;
height:30px;
top:19px;
left:19px;
opacity:1;
  }
93%{
width:30px;
height:30px;
top:19px;
left:19px;
opacity:0;
  }

96%{
width:30px;
height:30px;
top:19px;
left:19px;
opacity:1;
  }
99%{
width:30px;
height:30px;
top:19px;
left:19px;
opacity:0;
  }

  100%{
width:30px;
height:30px;
top:19px;
left:19px;
opacity:1;
  }
}

.zoombuilding{

-webkit-transition: all .8s ease;
    transition: all .8s ease;
transform-origin:72.5% 67.5%;
-webkit-transform-origin:72.5% 67.5%;


}

#play_back{

width:100%;

-webkit-transition: all 1.5s ease;
    transition: all 1.5s ease;
filter:blur(20px);
-webkit-filter:blur(20px);
}

#copyright{
position:absolute;
bottom:1%;
right:1%;
color:#fff;
font-size:12px;

}


#copyright a{
color:#fff;
-webkit-transition: all 0.8s ease;
    transition: all 0.8s ease;
}

#copyright a:hover{
color:#ff7e00;

}

#gamemain{
position:relative;
float:left;
width:100%;
display:inline-block;
overflow:hidden;
padding:0;
margin:0;
webkit-box-shadow: inset 0px 150px 140px 0px #000000,inset 0px -50px 140px 0px #000000;
    -moz-box-shadow: inset 0px 150px 140px 0px #000000,inset 0px -50px 140px 0px #000000;
    -o-box-shadow: inset 0px 150px 140px 0px #000000,inset 0px -50px 140px 0px #000000;
    box-shadow: inset 0px 150px 140px 0px #000000,inset 0px -50px 140px 0px #000000;

}

.game_back{
z-index: -1;
position:absolute;
right:0;
left:0;
 -webkit-transition: all 1s ease;
    transition: all 1s ease;

}

.player{
position:absolute;
width:640px;height:390px;
transform:translate(-50%,0);
-webkit-transform:translate(-50%,0);
top:0;
display:none;
box-shadow: 0 0 10px #888888;
}

#video_gallery{
position:absolute;
top:55%;
left:0;
width:100%;
height:50%;
transform:translate(0,-50%);
-webkit-transform:translate(0,-50%);
}

#arrow_left{
color:#fff;
position:absolute;
top:50%;
left:2%;
transform:translate(0,-50%);
-webkit-transform:translate(0,-50%);
cursor:pointer;
font-size:36px;
}

#arrow_right{
color:#fff;
position:absolute;
top:50%;
right:2%;
transform:translate(0,-50%);
-webkit-transform:translate(0,-50%);
cursor:pointer;
font-size:36px;
}

#game_logo{
text-align: center;
position:absolute;
top:10%;
left:50%;
transform:translate(-50%,0);
-webkit-transform:translate(-50%,0);
width:500px;
max-width:100%;

}

#game_logo img{
max-width: 100%;
max-height:190px;
}
#company_logo{
position:absolute;
right:2%;
top:2%;
width:14%;
max-width:100px;
}

#game_desc{
font-family: 'Jura', sans-serif;
position:absolute;
left:0;
bottom:0;
width:100%;
height:25%;
}

#company_logo img{
width:100%;
}

#menu_but{
position:absolute;
left:2%;
top:2%;
text-align:center;
cursor:pointer;
color:#fff;
font-size:40px;
width:50px;
line-height: 15px;
}

#game_text{
overflow:hidden;
position:absolute;
right:5%;
top:10%;
width:54%;
height:50%;
background:rgba(0,0,0,0.6);
border-radius:30px;
color:#fff;
padding:1% 25% 1% 3%;
}

#game_more{
width:100%;
display:inline-block;
padding:0;
margin:0;
float:left;
text-align:center;

}

#more_wrap{
font-family: 'Jura', sans-serif;
max-width:1200px;
width:100%;
box-shadow:#000 0 0 20px;
padding:0;
display:inline-block;
text-align:left;
background:#131313;
margin:0 auto;
}

#game_photos{
width:100%;
display:inline-block;
padding:0;

float:left;
border-bottom:1px solid #6a6a6a;

}

#game_more_preorder{
width:100%;
display:inline-block;
padding:0;

float:left;
border-bottom:1px solid #6a6a6a;
border-top:1px solid #6a6a6a;
}

#game_more_desc{
width:100%;
display:inline-block;
padding:0;
float:left;
border-bottom:1px solid #6a6a6a;
}

#game_more_preorder .more_expand img {
margin-right:10px;
margin-bottom:10px;
}


#game_hot{
width:100%;
display:inline-block;
padding:0;
float:left;
border-bottom:1px solid #6a6a6a;
}

#game_reviews{
width:100%;
display:inline-block;
padding:0;
float:left;
border-bottom:1px solid #6a6a6a;
}

.more_odd .more_title{
width:98%;
display:inline-block;
padding:0;
float:left;
height:50px;
text-align:left;
color:#fff;
font-size:30px;
padding-left:2%;
background:#131313;
}

.more_even .more_title{
width:98%;
display:inline-block;
padding:0;
float:right;
height:50px;
text-align:right;
color:#fff;
font-size:30px;
padding-right:2%;
background:#323232;
}

.more_wrap{
height:100%;

line-height:50px;
cursor:pointer;
}

.more_arrow{
color:#fe0000;
font-size:25px;
}

#game_footer{

position:relative;
width:100%;
display:inline-block;
padding:0;
margin:-4px 0 0 0;
float:left;
height:250px;
background:#131313;
}

.more_expand{
width:96%;
display:inline-block;
padding:0 2%;
float:left;

text-align:left;
color:#fff;
font-size:30px;
border-top:1px solid #6a6a6a;
background:#131313;
font-size:16px;
}

#menu_bar{
position:fixed;
top:-50px;
left:0;
width:100%;
height:50px;
background:#000;
-webkit-transition: all 0.8s ease;
    transition: all 0.8s ease;
}

#company_logo_bar{
position:absolute;
right:2%;
top:0;
height:50px;
}

#company_logo_bar img{
height:100%;
}

#menu_but_bar{
position:absolute;
left:2%;
top:7%;

cursor:pointer;
color:#fff;
font-size:30px;
}

#side_menu_bar{
position:fixed;
top:0;

max-width:380px;
width:100%;
height:100%;
background:rgba(0,0,0,0.7);
-webkit-transition: all 0.8s ease;
    transition: all 0.8s ease;
}

#side_menu_bar_wrap{
top:10%;
left:10%;
width:80%;
display:inline-block;
position:absolute;
}

.side_menu_bar_item{
position:relative;
width:100%;
float:left;
color:#fff;
font-size:30px;
font-weight:600;
margin-bottom:8%;
-webkit-transition: all 0.8s ease;
    transition: all 0.8s ease;
}

.side_menu_bar_item:hover{
color:#ee6e00;
}

#side_menu_bar_close{
color:#fff;
position:absolute;
right:4%;
top:1%;
cursor:pointer;
font-size:40px;
}

#game_symbol{
position:absolute;
right:12%;
width: 18%;
top: 25%;
    transform: translate(0,-25%);
-webkit-transform: translate(0,-25%);
max-width:200px;
height:50%;
}

#game_symbol img{
position:absolute;
left:0;
top:50%;
width:100%;
transform: translate(0,-50%);
-webkit-transform: translate(0,-50%);
}

.gallery_photo{
position:relative;
    height: 80px;
    overflow: hidden;
 line-height: 0;
display:inline-block;
margin-right:20px;
margin-bottom:20px;
width:150px;
border:2px solid #888;
border-radius:5px;
padding:0;
box-sizing:border-box;
}

.gallery_photo img{
width:100%;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
-webkit-transform:translate(-50%,-50%);
}

.gallery_packshot{
position:relative;
    height: 180px;
  
 line-height: 0;
display:inline-block;
margin-right:20px;
margin-bottom:20px;

border:2px solid #888;
border-radius:5px;
padding:0;
box-sizing:border-box;
}

.gallery_packshot img{
height:100%;
}

.press_release{
width:100%;
height:300px;
overflow:hidden;
position:relative;
background-position:center top;
margin-top:20px;
}

.press_release .item-panel{
background:rgba(4, 16, 22, 0.8);
position:absolute;
bottom:0;
width:82%;
left:0;
height:30%;
border-top: 3px solid #d71819;
    padding: 0 15% 2% 3%;
}



.press_release p a{
color:#fff;
-webkit-transition: all 0.8s ease;
    transition: all 0.8s ease;
}


.press_release p a:hover{
color:#d71819;
}

.press_back{
z-index: -1;
position:absolute;
right:0;
left:0;
 -webkit-transition: all 1s ease;
    transition: all 1s ease;

}
.press_back_press{
z-index: -1;
position:absolute;
right:0;
left:0;
top:0;
 -webkit-transition: all 1s ease;
    transition: all 1s ease;

}

#pressmain{
float:left;
width:100%;
display:inline-block;
overflow:hidden;
padding:0;
margin:0;
webkit-box-shadow: inset 0px 150px 140px 0px #000000,inset 0px -50px 140px 0px #000000;
    -moz-box-shadow: inset 0px 150px 140px 0px #000000,inset 0px -50px 140px 0px #000000;
    -o-box-shadow: inset 0px 150px 140px 0px #000000,inset 0px -50px 140px 0px #000000;
    box-shadow: inset 0px 150px 140px 0px #000000,inset 0px -50px 140px 0px #000000;

}

#pressmain .item-panel{
background:rgba(4, 16, 22, 0.8);
position:absolute;
bottom:50%;
width:82%;
left:0;
height:8%;
border-top: 3px solid #d71819;
    padding: 0 15% 2% 3%;
color:#fff;
}

.press_player{

width:480px;
height:270px;

box-shadow: 0 0 10px #888888;
margin-right:20px;
display:inline-block;
margin-top:20px;
}

#game_meta{
font-family: 'Jura', sans-serif;
position:absolute;
top:1%;
left:50%;
text-align:center;
font-size:15px;
transform: translate(-50%,0);
-webkit-transform: translate(-50%,0);
width:400px;
color:#fff;
}

#game_available{
position:relative;

display:inline-block;
width:30%;
vertical-align: top;
height:40px;
}

.game_available{
position:relative;

display:inline-block;
width:30%;
vertical-align: top;
height:40px;
}

#game_publisher{
position:relative;

display:inline-block;
width:30%;
vertical-align: middle;
height:40px;

}

#game_publisher img{
height: 30px;
}

#game_available img{
height:40%;
}

.game_available img{
height:40%;
}

#game_release{
position:relative;
display:inline-block;
width:30%;
vertical-align: middle;
}
.game_release{
position:relative;
display:inline-block;
width:30%;
vertical-align: middle;
}
#contact_wrapper{
position:absolute;
top:0;
left:50%;
    max-width: 1200px;
    width: 100%;
transform: translate(-50%,0);
-webkit-transform: translate(-50%,0);
height:100%;
}

#contact_form{
position:absolute;

left:0;
width:100%;
height:38%;
top:12%;
}

#contact_form h1{
color:#000;
font-weight:normal;
font-size:4vh;
}

#form_left,#form_right{
width:50%;
float:left;
}

#contact_form .element-name{
width:90%;
padding:0 5%;
display:inline-block;
}

#contact_form input,#contact_form textarea{
width:98%;
border:none;
background:#d7d7d7;
clear:both;float:left;
font-size:1.8vh;
padding:1%;
}

#contact_form label{
font-size:1.8vh;
}

#contact_form button{
background:#0b2621;
border:none;
border-radius:5px;
color:#f1a02b;
font-size:2vh;
float:right;
padding:1% 60px;
cursor:pointer;
}

.sweet-alert {
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
}

#contact_info{
position:absolute;
top:50%;
left:0;
width:100%;
height:50%;
}

#info_left{
width:40%;
float:left;
height:100%;
}
#info_right{
width:60%;
float:left;
height:100%;
}

#map{
position:absolute;
width:90%;
left:5%;
top:10%;
height:70%;
}

#monitors{
position:relative;
width:100%;
float:left;
display:inline-block;
}

#playroom_results{
position:relative;
width:100%;
float:left;
overflow:hidden;
text-align:center;
min-height:600px;
}

#playroom_filters{
position:relative;
width:95%;
display:inline-block;
height:35px;
border:5px solid #252525;
background: #111111;
}

.filter{
position:relative;
float:left;
width:25%;
height:100%;
text-align:left;

}

.filter_title{
font-weight:bold;
color:#fff;
height:100%;
line-height:35px;
float:left;
margin-left:10px;
}

#results_wrapper{
position:relative;
width:95%;
display:inline-block;
}

.res_game{
position:relative;
float:left;
width:20%;

margin:20px 2.3%;

}

.res_game:first-child{

}
.res_game:last-child{
margin-right:0;
}

.res_img{
width:100%;

}

.res_img_wrap{
width:100%;
float:left;

overflow:hidden;
}

.res_overlay{
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
background:rgba(0,0,0,0.7);
display:none;
}

.res_see_more{
line-height:10%;
text-align:center;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%);
-webkit-transform:translate(-50%, -50%);
color:#fff;
font-size:50px;
}

.res_title{
color:#fff;
font-size:20px;
    height: 95px;
    display: inline-block;
width: 100%;
overflow:hidden;
}

#monitor1{
position: absolute;
    left: 11.2%;
    top: 22%;
    width: 29%;
    height: 58%;
    perspective: 1000px;
}


#monitor1 .inner {
transform: rotateY(33deg);
width:100%;
height:100%;
}

#monitor2{
      position: absolute;
    right: 38.5%;
    top: 26%;
    width: 23.5%;
    height: 41%;
    overflow: hidden;
}


#monitor2 .inner {

width:100%;
height:100%;
}



#monitor3{
   position: absolute;
    right: 9.8%;
    top: 20.8%;
    width: 29.5%;
    height: 111%;
    perspective: 515px;
}


#monitor3 .inner {
    transform: rotateY(-15deg) rotateX(0deg) rotateZ(4deg);
width:100%;
height:100%;
}

.filter_options{
    position: absolute;
    top: 40px;
    color: #fff;
    display:none;
    background: #222;
    padding: 5px 20px;
    z-index: 2000;
}

.producer_item, .genre_item, .console_item{
cursor: pointer;
    margin: 5px 0;
}
.round-button {
    position: absolute;
    width: 8%;
    top: 55%;
    left: 8%;
}
.round-button-circle {
	width: 100%;
	height:0;
	padding-bottom: 100%;
    border-radius: 50%;
    overflow:hidden;
    background: #4679BD; 
    box-shadow: 0 0 3px gray;
    cursor: pointer;
}
.round-button-circle:hover {
	background:#30588e;
}
.round-button a {
    top: 36%;
	float:left;
	width:100%;
	line-height:1em;
	text-align:center;
	color:#e2eaf3;
    font-family:Verdana;
    font-size:1.2vw;
    font-weight:bold;
    text-decoration:none;
    left:inherit;
}
#btn{
    text-align:center;
    margin-top: 50%;
    font-size: 1vw;
    color: white;
    width: 100%;
    margin-left: 50%;
    transform: translate(-50%,-50%);
    -webkit-transform:translate(-50%,-50%);
}


.round-buttonContact {
    position: absolute;
    width: 8%;
    top: 35%;
    left: 78%;
}

.round-buttonContact a {
    top: 36%;
	float:left;
	width:100%;
	line-height:1em;
	text-align:center;
	color:#ddd;
    font-family:Verdana;
    font-size:1.2vw;
    font-weight:bold;
    text-decoration:none;
    left:inherit;
}
.round-button-circleContact {
	width: 100%;
	height:0;
	padding-bottom: 100%;
    border-radius: 50%;
    overflow:hidden;
    background:rgba(249,146,0,0.68);
    box-shadow: 0 0 3px gray;
    cursor: pointer;
}
.round-button-circleContact:hover {
	background:rgba(195, 116, 3, 0.9);
}


.round-buttonCompany {
    position: absolute;
    width: 8%;
    top: 55%;
    left: 48%;
}

.round-buttonCompany a {
    top: 36%;
	float:left;
	width:100%;
	line-height:1em;
	text-align:center;
	color:#ddd;
    font-family:Verdana;
    font-size:1.2vw;
    font-weight:bold;
    text-decoration:none;
    left:inherit;
}
.round-button-circleCompany {
	width: 100%;
	height:0;
	padding-bottom: 100%;
    border-radius: 50%;
    overflow:hidden;
    background:rgba(8,187,63,0.68);
    box-shadow: 0 0 3px gray;
    cursor: pointer;
}
.round-button-circleCompany:hover {
	background:rgba(5, 130, 43, 0.9);
}


#down_more{
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 0s;
-webkit-animation-fill-mode: forwards;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-play-state: running;

animation-duration: 1s;
animation-timing-function: linear;
animation-delay: 0s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;

-webkit-animation-name: down_more;
animation-name: down_more;
}

@-webkit-keyframes down_more
{
0% {bottom:30px;}
100% {bottom:10px;}
}
@keyframes down_more
{
0% {bottom:30px;}
100% {bottom:10px;}
}

#game_more_desc .more_expand img{
max-width:100%;
height:auto !important;
}
#game_more_desc a{
color:#fe0000;    
}

#game_more_preorder .more_expand img{
max-width:100%;
height:auto !important;
}



@media only screen and (max-width: 780px) {
 
#side_menu{
display:none;
}

#fake_line{
display:none;
}

#bottom_menu{

display:none;

}

}