@font-face {
    font-family: computer_pixel;
    src: url(../fonts/computer_pixel-7.ttf);
}

@font-face {
    font-family: bat_man;
    src: url(../fonts/batmfa__.ttf);
}

@font-face {
    font-family: dictator;
    src: url(../fonts/DICTATOR.ttf);
}

@font-face {
    font-family: akashi;
    src: url(../fonts/AKASHI.ttf);
}

@import url('https://fonts.googleapis.com/css?family=Maven+Pro');

:after, :before {
    box-sizing: inherit;
    vertical-align: inherit;
    white-space: inherit;
}

body{
    background-color: #000;
}


section{
    height: 100vh;
}

main{
    max-width: 1920px;
    position: relative;
    display: block;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
}

#intro, #franchise, #community{
    padding: 0 48px;
}

.hide{
    opacity: 0;
}

.visible{
    opacity: 1;
}

.max-width-wrapper{
    width: 100%;
    height: 100%;
    max-width: 1360px;
    margin-left: auto;
    margin-right: auto;
}

.section-title{
    position: relative;
    font-family: 'dictator', 'akashi', Arial, sans-serif;
    font-weight: 700;
    font-size: 3.5em;
    text-align: center;
    text-shadow: 0px 0px 20px rgba(55, 202, 170, 0.86);
}

#intro, #franchise{
    height: auto;
    background-color: #000;
}

#franchise{
    height: 768px;
}


#intro, #franchises, #community{
    border-bottom: 5px solid hsla(0,0%,80%,.5);
}


/*.franchise .section-title:before{
    content: "";
    position: absolute;
    background-image: url(../asset/text-frame_top.png);
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: auto 125px;
    width: 100%;
    height: 100px;
    top: calc(-100% - 20px);
    margin: auto;
    left: 0;
    right: 0;
}


.franchise .section-title:after{
    content: "";
    position: absolute;
    background-image: url(../asset/text-frame_bottom.png);
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: auto 125px;
    width: 100%;
    height: 100px;
    top: 25px;
    margin: auto;
    left: 0;
    right: 0;
}*/


/*Glitch*/
.glitch{
    position: relative;
}

@keyframes noise-anim {
  0% {
    clip: rect(8px, 9999px, 44px, 0);
  }
  5% {
    clip: rect(86px, 9999px, 38px, 0);
  }
  10% {
    clip: rect(22px, 9999px, 25px, 0);
  }
  15% {
    clip: rect(63px, 9999px, 86px, 0);
  }
  20% {
    clip: rect(25px, 9999px, 5px, 0);
  }
  25% {
    clip: rect(88px, 9999px, 7px, 0);
  }
  30% {
    clip: rect(52px, 9999px, 50px, 0);
  }
  35% {
    clip: rect(37px, 9999px, 37px, 0);
  }
  40% {
    clip: rect(27px, 9999px, 36px, 0);
  }
  45% {
    clip: rect(19px, 9999px, 99px, 0);
  }
  50% {
    clip: rect(20px, 9999px, 28px, 0);
  }
  55% {
    clip: rect(29px, 9999px, 3px, 0);
  }
  60% {
    clip: rect(55px, 9999px, 26px, 0);
  }
  65% {
    clip: rect(8px, 9999px, 89px, 0);
  }
  70% {
    clip: rect(99px, 9999px, 28px, 0);
  }
  75% {
    clip: rect(37px, 9999px, 74px, 0);
  }
  80% {
    clip: rect(34px, 9999px, 51px, 0);
  }
  85% {
    clip: rect(93px, 9999px, 7px, 0);
  }
  90% {
    clip: rect(73px, 9999px, 59px, 0);
  }
  95% {
    clip: rect(69px, 9999px, 42px, 0);
  }
  100% {
    clip: rect(34px, 9999px, 4px, 0);
  }
}

.glitch:after {
    content: attr(data-text);
    position: absolute;
    width: 100%;
    left: 4px;
    top: 1px;
    color: white;
    overflow: hidden;
    clip: rect(0, 900px, 0, 0);
    text-shadow: 0px 0px 20px rgba(55, 141, 202, 0.41);
    text-align: center;
    animation: noise-anim 2s infinite linear alternate-reverse;
}





/*NAV*/
.side-nav{
    position: fixed;
    right: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
    z-index: 999;
}

.nav-menu{
    
}

.nav-menu-item{
    display: block;
    position: relative;
    margin: 10px 0;
    background: #399;
    border-radius: 7px 0 0 7px;
    overflow: hidden;
    left: 100%;
    margin-left: -40px;
    transition: .3s;
}

.nav-menu-item-btn{
    padding: 5px;
}

.nav-menu-icon, .nav-menu-title{
    display: inline-block;
    position: relative;
    left: 0;
    vertical-align: middle;
    pointer-events: none;
}

.nav-menu-icon{
    filter: grayscale(.2);
}

.menu-icon{
    height: 30px;
    width: 30px;
    background-image: url(../asset/menu-icons.png);
    background-repeat: no-repeat;
    background-size: 399%;
    background-position: bottom left;
}

.nav-menu-title{
    color: #fff;
    font-size: .875em;
    padding: 5px 15px;
    padding-top: 10px;
    text-transform: uppercase;
    font-family: 'dictator', 'akashi', Arial, sans-serif;
}

.nav-menu-item:hover{
    margin-left: -100%;
}





/*hero*/
#hero{
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

.parallax-layer{
    width: 100%;
    max-width: 1920px;
    height: 100%;
    position: fixed;
    z-index: -1;
    background-size: auto;
    background-repeat: no-repeat;
    background-position: bottom center;
}

.parallax-bg{
    background-image: url(../asset/space_bg.jpg);
    background-size: cover;
    background-position: top right;

}

.parallax-stars{
    
}

.parallax-moon_big{
    background-image: url(../asset/Moon02_big.png);
    background-position: top left;
    margin-left: calc(22.5vw - 480px);
    margin-top: -45px;
}

.parallax-moon_small{
    background-image: url(../asset/Moon01_small.png);
    background-position: top left;
    margin-top: 5vw;
    margin-left: 30vw;
    /*-webkit-animation: moving_moon 20s linear both infinite;
    animation: moving_moon 20s linear both infinite;*/
}

.parallax-albuda{
    background-image: url(../asset/ALBUDA_half.png);
    background-position: bottom right;
    background-size: calc(1400px + 40vw);
    /*margin-top: 15vw;*/
}

.parallax-sakura{
    background-image: url(../asset/SAKURA.png);
    background-position: top right;
    background-size: 25%;
}


@keyframes moving_moon{
    0%{
        margin-left: 50%;
        margin-top: 10%;
    }
    
    100%{
        margin-left: -100%; 
        margin-top: 15%;
    }
}

@keyframes rotating_stars{
    0%{
        transform: rotate(0deg);
    }
    
    100%{
        transform: rotate(360deg);
    }
}


/*.landing:after{
    content: "";
    display: block;
    background: #3a4269;
    position: absolute;
    width: 60%;
    left: -10%;
    height: 50px;
    bottom: 0;
    transform: skew(45deg);
}*/


#landing-bg{
    width: 100%;
    height: 100%;
    /*background: url(http://empyriongame.com/wp-content/uploads/2015/12/Background_Empyrion_WebsiteBackgroundV2.jpg) center center no-repeat;*/
    z-index: -1;
}

.logo-container{
    max-width: 768px;
    min-width: 375px;
    width: 66.875%;
    height: 100%;
    position: absolute;
    margin: 0 auto;
    left: 0;
    right: 0;
    z-index: 10;
}

.logo-title{
    top: 50%;
    transform: translateY(-50%);
    position: relative;
}

.the-pit-logo{

}

.title{
    text-align: center;
}

.detail{
    width: 60%;
    margin: 0 auto;
    text-align: center;
}

.buy-btn{
    font-size: 50pt;
    padding: 50px 0;
    margin: 0 75px;
    width: 80%;
    left: -10%;
    position: relative;
    overflow: hidden;
    background: url(../asset/Featured_Image_Template.png);
    background-repeat: no-repeat;
    background-position: -750px -520px;
    background-size: 300%;
    font-family: 'computer_pixel';
    color: rgb(190, 219, 232);
    text-shadow: 0px 0px 6px rgba(255,255,255,.75)
}

/*scroll-down*/

.scroll-down{
    position: absolute;
    width: 100%;
    text-align: center;
    bottom: 50px;
}

.down-arrow{
    position: absolute;
    width: 30px;
    height: 10px;
    transform: scale3d(.5, .5, .5);
    margin: auto;
    left: 0;
    right: 0;
    opacity: 0;
    animation: scroll-down 3s ease-out infinite;
}

.down-arrow:first-child {
  animation: scroll-down 3s ease-out 1s infinite;
}

.down-arrow:nth-child(2) {
  animation: scroll-down 3s ease-out 2s infinite;
}

.down-arrow:before, .down-arrow:after{
    content: "";
    position: absolute;
    top: 0%;
    height: 100%;
    width: 51%;
    background-color: #fff;
}

.down-arrow:before{
    left: 0;
    transform: skew(0deg, 30deg);
}

.down-arrow:after{
    right: 0;
    transform: skew(0deg, -30deg);
}

.down-text{
    display: block;
    margin-top: 66px;
    font-size: 18px;
    white-space: nowrap;
    text-transform: uppercase;
    font-family: 'dictator', 'akashi', Arial, sans-serif;
    animation: text-pulse 3s linear alternate infinite;
    opacity: .5;
}

@keyframes scroll-down {
    25% {
      opacity: 1;
    
    }
    33% {
      opacity: 1;
      transform: translateY(27px);
    }
    67% {
      opacity: 1;
      transform: translateY(40px);
    }
    100% {
      opacity: 0;
      transform: translateY(55px) scale3d(0.5, 0.5, 0.5);
    }
}

@keyframes text-pulse{
    to{
        text-shadow: 0px 0px 15px #fff;
        opacity: 1;
    }
}







/*Char*/
.player-characters{
    
}

.char-content{
    padding: 100px 50px;
}

.char-right{
    width: 55%;
    float: right;
    right: 0;
    height: 500px;
    position: absolute;
}

.char-left{
    width: 45%;
    float: left;
    position: relative;
}

.char-preview{
    min-height: 575px;
    max-height: 750px;
}

.char-class{
    width: 100%;
    height: 100%;
}

.char-image{
    width: 100%;
    height: 100%;
}

.char-image img{
    height: auto;
    min-height: 100%;
}

.char-stat.mobile{
    position: absolute;
    height: 200px;
    width: 100%;
}

.char-data{
    
}




.char-list{
    
}

.char-table{
    padding: 50px;
    opacity: 1;
}

.char-item{
    position: relative;
    width: 100px;
    height: 150px;
    display: inline-block;
    transform: scale(1) skewX(-15deg);
    border: 1px solid #772dcc;
    overflow: hidden;
    transition: .35s;
}

.char-item:before{
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    box-shadow: 0 3px 30px rgba(51,187,255,.7) inset;
    opacity: 0;
}

.char-item:hover{
    z-index: 2;
    transform: scale(1.1) skewX(-15deg);
    box-shadow: 0 3px 30px rgba(51,187,255,.7);
}

.char-item:hover:before{
    opacity: 1;
}

.char-grid{
    width: 100%;
    height: 100%;
}

.char-grid img{
    position: absolute;
    transform: skewX(15deg);
    height: auto;
    width: 200%;
    z-index: -1;
}








/*B_G*/

.hive{
    background: url(../asset/hive2.png);
    background-repeat: no-repeat;
    background-position: top left;
    background-size: cover;
    width: 100%;
    height: 400px;
    position: absolute;
    pointer-events: none;
    opacity: .5;
    
}


.banner{
    width: 100%;
    height: 200px;
    position: absolute;
    top: 120px;
    left: 50px;
    text-transform: uppercase;
    text-align: left;
    z-index: 11;
}


.visuals{
    width: 100%;
    height: 100%;
    position: absolute;
    overflow: hidden;
}


.intro{
    background-color: #000;
    background-image: url(../asset/sci-fi-bg-02.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: bottom center;
}

/*.intro:after{
    content: "";
    display: block;
    background: #fff;
    position: absolute;
    width: 60%;
    right: -10%;
    height: 50px;
    bottom: 0;
    transform: skew(-45deg);
}*/



.intro p{
    font-weight: 400;
    font-size: 1.2em;
    text-align: justify;
    width: 85%;
    max-width: 500px;
    margin: 0 auto;
    text-shadow: 1px 2px 2px hsla(0,0%,100%,.8);
}

.intro .section-content .wrapper{
    margin: 0;
    margin-left: 10%;
    width: 50%;
    padding-top: 150px;
    padding-bottom: 225px;
    position: relative;
}


.video{
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    background: none;
    position: relative;
}

.intro .section-content .video .video-container{
    width: 90%;
    height: 75%;
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 21;
}

.video .frame{
    background-image: url(../asset/video_frame.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 22;
    pointer-events: none;
}

.video .thumbnail-img{
    width: 100%;
    height: auto;
    position: relative;
    opacity: 1;
}

.video .thumbnail-frame{
    width: 100%;
    height: auto;
    position: absolute;
    margin-top: -61%;
    pointer-events: none;
}

.play-video{
    background-image: url(../asset/play-btn.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 30% auto;
    width: 100%;
    height: 100%;
    position: absolute;
    margin-top: -61%;
}

.play-video:hover{
    background-color: hsla(0,0%,10%,.5);
    background-image: url(../asset/play-btn-active.png);
}

.hudson{
    position: absolute;
    bottom: 0;
    right: 0;
    width: 720px;
    height: 800px;
    background: url(../asset/marine_hudson.png);
    background-repeat: no-repeat;
    background-position: 50px 0;
    background-size: cover;
}



.franchise{
    background-image: url(../asset/fran768.jpg);
    background-repeat: no-repeat;
    background-position: top;
}


.franchise:before{
    content: "";
    position: absolute;
    background-image: url(../asset/section_frame.png);
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: auto 180px;
    width: 100%;
    height: 180px;
    margin: auto;
    left: 0;
    right: 0;
    top: -180px;
    pointer-events: none;
}

.landing:after, .franchise:after{
    content: "";
    position: absolute;
    width: 100%;
    height: 72px;
    background-image: url(../asset/section_frame_bottom.png);
    background-repeat: no-repeat;
    background-position: bottom center;
    margin: auto;
    left: 0;
    right: 0;
    bottom: 0;
}

.franchise .section-content .wrapper{
    width: 100%;
    padding: 100px 0;
    position: relative;
}

.franchise .section-title{
    margin-bottom: 150px;
}

.the-pit-item{
    display: inline-block; 
    width: 32.9%;
    height: 300px;
    position: relative;
    z-index: 1;
}

.the-pit-item.highlight{
    z-index: 2;
}

.f-btn{
    width: 100%;
    height: 100%;
    margin: 0 auto;
}

.f-btn>div{
    width: 100%;
    height: 100%;
}

.f-link{
    height: 160px;
    width: 100%;
    max-width: 300px;
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    position: absolute;
    color: #fff;
    background: cyan;
    font-size: 50pt;
    text-align: center;
    line-height: 0;
    transition: all .2s;
}

.f-btn .f-link{
    background: none;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center center;
}
/*
.released:before{
    content: "";
    position: absolute;
    z-index: -3;
    background-image: url(../asset/Golden_Beetle_aura_effect.gif);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    width: 100%;
    height: 100%;
}

*/

.click-me{
    position: absolute;
    bottom: 0;
    text-align: center;
    width: 100%;
    text-transform: uppercase;
    text-shadow: 0px 0px 20px rgba(55, 202, 170, 0.86);
    font-size: 1.8em;
    font-weight: 600;
}


@keyframes Glow {
  0% {
      background-position: 0% 50%;
      opacity: .5;
  }
  50% {
      background-position: 100% 50%;
      opacity: .75;
  }
  100% {
    background-position: 0% 50%;
      opacity: .5;
  }
}



.t-back{
    position: absolute;
    z-index: -1;
    opacity: 0;
    max-width: 400px;
    width: 100%;
    height: 120px;
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}


.f-link:hover{
    transform: scale(1.05);
}

.f-link:hover:after{
    opacity: 0 !important;
    animation: none;
}

.f-link:hover ~ .popup{
    opacity: 1;
}

.f-link:hover ~ .pop-top{
    top: 0; !important
}

.f-link:hover ~ .p-top{
    top: 0;
}

.f-link:hover ~ .p-left{
    left: -500px;
}

.f-link:hover ~ .p-right{
    right: -500px;
}









.the-pit-original .f-link{
    background-image: url(../asset/thepit_original_logo.png);
}

.the-pit-boardgame .f-link{
    background-image: url(../asset/boardgame_logo.png);
    height: 190px;
    top: 15px;
}

.the-pit-coming-soon .f-link{
    background-image: url(../asset/coming_soon_layer.png);
}

.f-btn .t-back{
    background: none;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center top;
    z-index: -1;
}

.the-pit-original .t-back{
    background-image: url(../asset/back_layer.png);
    top: 45px;
}

.the-pit-boardgame .t-back{
    background-image: url(../asset/coming_soon_back_layer.png);
}

.the-pit-coming-soon .t-back{
    background-image: url(../asset/coming_soon_back_layer.png);
}

.the-pit-boardgame .t-left, .the-pit-boardgame .t-right{
    position: absolute;
    display: block;
    height: 200px;
    width: 200px;
    background-repeat: no-repeat;
    background-size: 200px;
    top: 50px;
    z-index: -1;
    transform-origin: bottom center;
    opacity: 0;
}

.the-pit-boardgame .t-left{
    background-image: url(../asset/boardgame_left.png);
    background-position: bottom left;
    left: calc(50% - 256px);
    transform: rotate(45deg);
}

.the-pit-boardgame .t-right{
    background-image: url(../asset/boardgame_right.png);
    background-position: bottom right;
    right: calc(50% - 256px);
    transform: rotate(-45deg);
}



.bounce-left{
  animation: bounce_left 1000ms linear both;
}

/* Generated with Bounce.js. Edit at https://goo.gl/9XcuLy */

@keyframes bounce_left{ 
  /*0% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  33.23% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }*/
  33.22%{opacity: 0}
  33.23% { transform: matrix3d(0.707, 0.707, 0, 0, -0.707, 0.707, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); opacity: 1}
  33.23% { transform: matrix3d(0.919, 0.393, 0, 0, -0.393, 0.919, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); opacity: 1}
  39.34% { transform: matrix3d(0.996, 0.094, 0, 0, -0.094, 0.996, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); opacity: 1}
  42.34% { transform: matrix3d(0.998, -0.069, 0, 0, 0.069, 0.998, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); opacity: 1}
  45.28% { transform: matrix3d(0.994, -0.109, 0, 0, 0.109, 0.994, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); opacity: 1}
  52.69% { transform: matrix3d(1, -0.025, 0, 0, 0.025, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); opacity: 1}
  56.42% { transform: matrix3d(1, 0.005, 0, 0, -0.005, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); opacity: 1}
  60.09% { transform: matrix3d(1, 0.012, 0, 0, -0.012, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); opacity: 1}
  74.91% { transform: matrix3d(1, -0.001, 0, 0, 0.001, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); opacity: 1}
  89.79% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  100% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); opacity: 1} 
}



.bounce-right{
  animation: bounce_right 1000ms linear both;
}

/* Generated with Bounce.js. Edit at https://goo.gl/rSLjGm */

@keyframes bounce_right{ 
  /*0% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  33.23% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }*/
  33.22%{opacity: 0}
  33.33% { transform: matrix3d(0.707, -0.707, 0, 0, 0.707, 0.707, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); opacity: 1}
  36.34% { transform: matrix3d(0.919, -0.393, 0, 0, 0.393, 0.919, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); opacity: 1}
  39.34% { transform: matrix3d(0.996, -0.094, 0, 0, 0.094, 0.996, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); opacity: 1}
  42.34% { transform: matrix3d(0.998, 0.069, 0, 0, -0.069, 0.998, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); opacity: 1}
  45.28% { transform: matrix3d(0.994, 0.109, 0, 0, -0.109, 0.994, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); opacity: 1}
  52.69% { transform: matrix3d(1, 0.025, 0, 0, -0.025, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); opacity: 1}
  56.42% { transform: matrix3d(1, -0.005, 0, 0, 0.005, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); opacity: 1}
  60.09% { transform: matrix3d(1, -0.012, 0, 0, 0.012, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); opacity: 1}
  74.91% { transform: matrix3d(1, 0.001, 0, 0, -0.001, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); opacity: 1}
  89.79% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); opacity: 1}
  100% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); opacity: 1} 
}








.bounce-top {
  animation: bounce-150px 1000ms linear both;
}

/* Generated with Bounce.js. Edit at https://goo.gl/VGyn8V */

@keyframes bounce-150px { 
  0% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  3.4% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -47.336, 0, 1); }
  4.7% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -67.454, 0, 1);}
  6.81% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -98.885, 0, 1);}
  9.41% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -132.519, 0, 1); }
  10.21% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -141.231, 0, 1); }
  13.61% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -168.467, 0, 1); }
  14.11% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -171.136, 0, 1); }
  17.52% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -181.174, 0, 1); }
  18.72% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -181.816, 0, 1); }
  21.32% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -179.432, 0, 1); }
  24.32% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -172.582, 0, 1); }
  25.23% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -170.097, 0, 1); }
  29.03% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -159.442, 0, 1); }
  29.93% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -157.138, 0, 1); }
  35.54% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -146.914, 0, 1); }
  36.74% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -145.745, 0, 1); }
  41.04% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -144.123, 0, 1); }
  44.44% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -144.882, 0, 1); }
  52.15% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -148.681, 0, 1); }
  59.86% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -150.907, 0, 1); }
  63.26% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -151.086, 0, 1); }
  75.28% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -150.17, 0, 1); }
  85.49% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -149.799, 0, 1); }
  90.69% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -149.853, 0, 1); }
  100% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -150, 0, 1); } 
}







.animation-target {
  animation: animation 1000ms linear both;
}

/* Generated with Bounce.js. Edit at https://goo.gl/7W1egp */

@keyframes bounce-100px { 
  0% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  4.7% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -44.969, 0, 1); }
  9.41% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -88.346, 0, 1); }
  14.11% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -114.091, 0, 1); }
  18.72% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -121.211, 0, 1); }
  24.32% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -115.055, 0, 1); }
  29.93% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -104.759, 0, 1); }
  35.54% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -97.943, 0, 1); }
  41.04% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -96.082, 0, 1); }
  52.15% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -99.121, 0, 1); }
  63.26% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -100.724, 0, 1); }
  85.49% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -99.866, 0, 1); }
  100% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -100, 0, 1); } 
}















/*Community*/
.community{
    align-items: center;
    height: 250px;
    padding: 0 48px;
}

.comm-img{
    display: block;
    position: absolute;
    height: calc(100% + 100px);
    width: auto;
    bottom: 0;
    left: calc(50% - 412px);
}


.comm-content{
    float: right;
    width: 50%;
    text-align: center;
    line-height: 100px;
}


.social-header{
    color: #000;
    display: inline-block;
    font-weight: 700;
    font-size: 1.7em;
    font-family: 'akashi', Arial, sans-serif;
}

.social-buttons{
    align-items: center;
    justify-content: center;
    width: 100%;
}

.social-link-item{
    position: relative;
    display: inline-block;
}

.social-link{
    
}



.hexagon {
    position: relative;
    width: 70px; 
    height: 70px;
    margin: 0;
    background-image: url(../asset/the_pit_social_icons_frame.png);
    background-size: auto 70px;
    background-position: center;
    background-repeat: no-repeat;
}

.fb-link{
    background-position: 0px;
}

.twitter-link{
    background-position: -70px;
}

.forums-link{
    background-position: -140px;
}

.steam-link{
    background-position: -210px;
}

.twitch-link{
    background-position: -280px;
}

.instagram-link{
   background-position: -350px; 
}

.hexTop,
.hexBottom {
    position: absolute;
    z-index: 1;
    width: 42.43px;
    height: 42.43px;
    overflow: hidden;
    -webkit-transform: scaleY(0.5774) rotate(-45deg);
    -ms-transform: scaleY(0.5774) rotate(-45deg);
    transform: scaleY(0.5774) rotate(-45deg);
    background: inherit;
    left: 3.79px;
}

/*counter transform the bg image on the caps*/
.hexTop:after,
.hexBottom:after {
  content: "";
  position: absolute;
  width: 50.0000px;
  height: 28.86751345948129px;
  -webkit-transform:  rotate(45deg) scaleY(1.7321) translateY(-14.4338px);
  -ms-transform:      rotate(45deg) scaleY(1.7321) translateY(-14.4338px);
  transform:          rotate(45deg) scaleY(1.7321) translateY(-14.4338px);
  -webkit-transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  transform-origin: 0 0;
  background: inherit;
}

.hexTop {
  top: -21.2132px;
  border-top: solid 7.0711px #333333;
  border-right: solid 7.0711px #333333;
}

.hexTop:after {
  background-position: center top;
}

.hexBottom {
  bottom: -21.2132px;
  border-bottom: solid 7.0711px #333333;
  border-left: solid 7.0711px #333333;
}

.hexBottom:after {
  background-position: center bottom;
}

/*.hexagon:after {
  content: "";
  position: absolute;
  top: 2.8868px;
  left: 0;
  width: 50.0000px;
  height: 28.8675px;
  z-index: 2;
  background: inherit;
}*/





/*----footer----*/
footer{
    background: #000;
    text-align: center;
    padding: 48px;
}

footer .border{
    position: absolute;
    width: 100%;
    height: auto;
    bottom: 100%;
    left: 0;
    max-height: 75px;
}

/*footer:before{
    content: '';
    display: block;
    position: relative;
    background-image: url(../images/border-03.png);
    background-position: center;
    width: 100%;
    height: 50px; 
    top: -50px;
}*/

.footer-section{
    padding: 0;
}

.footer-logo{
    text-align: center;
    position: relative;
    display: inline;
}

.footer-logo{
    max-width: 244px;
    width: 40%;
    display: block;
    position: relative;
    margin-left: auto;
    margin-right: auto;
}

.footer-logo:first-child{
    width: 60%;
}

.footer .nav{
    display: block;
    position: relative;
    margin-left: auto;
    margin-right: auto;
}






/*MFP*/
.mfp-close{
    font-size: 48px;
}