@font-face{
    font-family:Engcomica;
    src:url(../fonts/Engcomica.otf) format('opentype')
}
@font-face{
    font-family:OpenSans;
    src:url(../fonts/OpenSans.ttf) format('truetype')
}
@font-face{
    font-family:Raleway;
    src:url(../fonts/Raleway.ttf) format('truetype')
}
button{
    cursor:pointer!important
}
.btn{
    font-family:aldrich!important;
    font-weight:300
}
div.mobile-spacing-1{
    margin:0 auto
}
div.container,div.mobile-spacing-2,div.mobile-spacing-3{
    margin:25px auto
}
.shadow-belakang{
    -webkit-box-shadow:0 0 21px -3px rgba(120,120,120,1);
    -moz-box-shadow:0 0 21px -3px rgba(120,120,120,1);
    box-shadow:0 0 21px -3px rgba(120,120,120,1)
}
.remove-border{
    border:0!important
}
.zoom-in{
    transform:scale(1);
    transition-duration:.3s
}
.zoom-in:hover{
    transform:scale(1.05);
    transition-duration:.2s
}
div.ribbon{
    background:red;
    font-family:Raleway;
    font-weight:Bolder;
    position:absolute;
    top:0;
    left:0;
    color:#fff;
    padding:10px 5px 0;
    box-shadow:0;
    border-bottom-right-radius:15px;
    border-top-left-radius: calc(.25rem - 1px);
}
.news-image,html{
    position:relative
}
html{
    min-height:100%
}
body{
    background-image:url(../img/main-bg2.png);
    background-position:center center;
    background-size:100%;
    background-attachment:fixed;
    overflow-y:scroll
}
.link-navigation-animations:hover,.link-navigation-games:hover,.link-navigation-home:hover,.link-navigation-live:hover,.link-navigation-news:hover,.link-navigation-publishing:hover,.link-navigation-store:hover,.link-navigation-videos:hover,.link-navigation-cards:hover{
    text-decoration:none;
    background-position:0 100%
}
div.container{
    height:auto;
    padding:0;
    animation:uptodown .5s;
    -moz-animation:uptodown .5s;
    -webkit-animation:uptodown .5s;
    -o-animation:uptodown .5s
}
div.card{
    background-color:transparent
}
@keyframes uptodown{
    from{
        bottom:-100px
    }
    to{
        bottom:0
    }
}
@-moz-keyframes uptodown{
    from{
        bottom:-100px
    }
    to{
        bottom:0
    }
}
@-webkit-keyframes uptodown{
    from{
        bottom:-100px
    }
    to{
        bottom:0
    }
}
@-o-keyframes uptodown{
    from{
        bottom:-100px
    }
    to{
        bottom:0
    }
}
@keyframes blink{
    0%{
        color:#fff
    }
    100%{
        color:#E91E63
    }
}
@-webkit-keyframes blink{
    0%{
        color:#fff
    }
    100%{
        color:#E91E63
    }
}
.blink{
    -webkit-animation:blink .8s linear infinite;
    -moz-animation:blink .8s linear infinite;
    animation:blink .8s linear infinite
}
nav.topbar{
    background-color:#2d2d2d;
    padding:0;
    margin:0
}
div.container-topbar{
    margin:0 auto;
    text-align:center;
    font-family:Raleway
}
.logo-monsta{
    width:100%;
    margin:3.5px
}
.link-top-bar,.link-top-bar:hover{
    margin:5px 20px;
    padding:8px;
    display:block
}
.link-top-bar{
    color:#fff;
    transition:all .3s
}
.link-top-bar:hover{
    color:#e8e8e8;
    border-radius:5px;
    text-decoration:none;
    background-color:#4c4c4c
}
.link-top-bar:focus{
    color:#fff;
    text-decoration:none
}
nav.navigation-menu{
    background-color:#424242;
    padding:0;
    margin:0
}
.nav-desktop,div.container-navigation-menu{
    margin:0 auto;
    text-align:center
}
.navmenu-span i.fa-bolt,.navmenu-span i.fa-book,.navmenu-span i.fa-gamepad,.navmenu-span i.fa-home,.navmenu-span i.fa-newspaper-o,.navmenu-span i.fa-shopping-cart,.navmenu-span i.fa-television,.navmenu-span i.fa-video-camera,.navmenu-span i.fa-star{
    font-size:20px;
    padding:10px
}
div.container-navigation-menu{
    font-family:Bungee;
    font-size:15px
}
span.navmenu-span{
    display:block;
    transform:skewX(20deg)
}
.link-navigation-animations,.link-navigation-games,.link-navigation-home,.link-navigation-live,.link-navigation-news,.link-navigation-publishing,.link-navigation-store,.link-navigation-videos,.link-navigation-cards{
    transform:skewX(-20deg);
    background-size:100% 200%;
    padding:8px;
    display:block;
    width:140px
}
.default-link:focus{
    text-decoration:none;
    color:#fff
}
.link-navigation-home{
    color:#fff;
    background-image:linear-gradient(to bottom,#424242 48%,#919191 48%);
    -webkit-transition:background-position 1s;
    -moz-transition:background-position 1s;
    transition:background-position 1s
}
.link-navigation-home:hover{
    color:#fff;
    padding:8px;
    display:block;
    width:140px;
    transition-duration:.3s
}
.navmenu-span i.fa-home{
    color:#919191;
    transition:1s
}
.link-navigation-home:hover .navmenu-span i.fa-home{
    color:#fff;
    transition-duration:.6s
}
.link-navigation-animations{
    color:#fff;
    background-image:linear-gradient(to bottom,#424242 48%,#e3350d 48%);
    -webkit-transition:background-position 1s;
    -moz-transition:background-position 1s;
    transition:background-position 1s
}
.link-navigation-animations:hover{
    color:#fff;
    padding:8px;
    display:block;
    background-color:#e3350d;
    width:140px;
    transition-duration:.3s
}
.navmenu-span i.fa-bolt{
    color:#e3350d;
    transition:1s
}
.link-navigation-animations:hover .navmenu-span i.fa-bolt{
    color:#fff;
    transition-duration:.6s
}
.link-navigation-videos{
    color:#fff;
    background-image:linear-gradient(to bottom,#424242 48%,#ee6b2f 48%);
    -webkit-transition:background-position 1s;
    -moz-transition:background-position 1s;
    transition:background-position 1s
}
.link-navigation-videos:hover{
    color:#fff;
    padding:8px;
    display:block;
    background-color:#ee6b2f;
    width:140px;
    transition-duration:.3s
}
.navmenu-span i.fa-video-camera{
    color:#ee6b2f;
    transition:1s
}
.link-navigation-videos:hover .navmenu-span i.fa-video-camera{
    color:#fff;
    transition-duration:.6s
}
.link-navigation-live{
    color:#fff;
    background-image:linear-gradient(to bottom,#424242 48%,#E91E63 48%);
    -webkit-transition:background-position 1s;
    -moz-transition:background-position 1s;
    transition:background-position 1s
}
.link-navigation-live:hover{
    color:#fff;
    padding:8px;
    display:block;
    background-color:#E91E63;
    width:140px;
    transition-duration:.3s
}
.navmenu-span i.fa-television{
    color:#fff;
    transition:1s
}
.link-navigation-live:hover .navmenu-span i.fa-television{
    color:#fff;
    transition-duration:.6s
}
.link-navigation-games{
    color:#fff;
    background-image:linear-gradient(to bottom,#424242 48%,#e6bc2f 48%);
    -webkit-transition:background-position 1s;
    -moz-transition:background-position 1s;
    transition:background-position 1s
}
.link-navigation-games:hover{
    color:#fff;
    padding:8px;
    display:block;
    background-color:#e6bc2f;
    width:140px;
    transition-duration:.3s
}
.navmenu-span i.fa-gamepad{
    color:#e6bc2f;
    transition:1s
}
.link-navigation-games:hover .navmenu-span i.fa-gamepad{
    color:#fff;
    transition-duration:.6s
}

.link-navigation-cards{
    color:#fff;
    background-image:linear-gradient(to bottom,#424242 48%,#48b0b3 48%);
    -webkit-transition:background-position 1s;
    -moz-transition:background-position 1s;
    transition:background-position 1s;
}
.link-navigation-cards:hover{
    color:#fff;
    padding:8px;
    display:block;
    background-color:#48b0b3;
    width:140px;
    transition-duration:.3s;
}
.navmenu-span i.fa-star{
    color:#48b0b3;
    transition:1s
}
.link-navigation-cards:hover .navmenu-span i.fa-star{
    color:#fff;
    transition-duration:.6s
}

.link-navigation-publishing{
    color:#fff;
    background-image:linear-gradient(to bottom,#424242 48%,#30a7d7 48%);
    -webkit-transition:background-position 1s;
    -moz-transition:background-position 1s;
    transition:background-position 1s
}
.link-navigation-publishing:hover{
    color:#fff;
    padding:8px;
    display:block;
    background-color:#30a7d7;
    width:140px;
    transition-duration:.3s
}
.navmenu-span i.fa-book{
    color:#30a7d7;
    transition:1s
}
.link-navigation-publishing:hover .navmenu-span i.fa-book{
    color:#fff;
    transition-duration:.6s
}
.link-navigation-news{
    color:#fff;
    background-image:linear-gradient(to bottom,#424242 48%,#4dad5b 48%);
    -webkit-transition:background-position 1s;
    -moz-transition:background-position 1s;
    transition:background-position 1s
}
.link-navigation-news:hover{
    color:#fff;
    padding:8px;
    display:block;
    background-color:#4dad5b;
    width:140px;
    transition-duration:.3s
}
.navmenu-span i.fa-newspaper-o{
    color:#4dad5b;
    transition:1s
}
.link-navigation-news:hover .navmenu-span i.fa-newspaper-o{
    color:#fff;
    transition-duration:.6s
}
.link-navigation-store{
    color:#fff;
    background-image:linear-gradient(to bottom,#424242 48%,#00bcd4 48%);
    -webkit-transition:background-position 1s;
    -moz-transition:background-position 1s;
    transition:background-position 1s
}
.link-navigation-store:hover{
    color:#fff;
    padding:8px;
    display:block;
    width:140px;
    transition-duration:.3s
}
.navmenu-span i.fa-shopping-cart{
    color:#00bcd4;
    transition:1s
}
.link-navigation-store:hover .navmenu-span i.fa-shopping-cart{
    color:#fff;
    transition-duration:.6s
}
div.comic-card{
    transition:.3s;
    width:100%;
    height:auto
}
div.comic-card:hover{
    transition-duration:.3s
}
div.comic-card li.list-group-item{
    width:100%;
    height:100px
}
div.comic-card h4.card-title{
    font-weight:700;
    font-family:Raleway;
    font-size:14px;
    width:100%;
    height:auto
}
div.comic-card h6.card-subtitle{
    font-size:13px;
    font-family:'Open Sans';
    background-color:orange;
    padding:3px 8px;
    color:#fff;
    border-radius:35px;
    margin:2px
}
div.comic-card img.card-img-top{
    margin:0 auto;
    padding:10px
}
div.comic-card li.card-description{
    width:100%;
    height:50px
}
div.comic-card h6.card-description-text{
    margin:0 auto;
    font-family:'Open Sans';
    font-size:13px
}
div.comic-card li.group-button{
    padding:8px
}
div.comic-card a.card-button{
    cursor:pointer;
    border-radius:35px;
    font-family:Raleway
}
div.publishing-slide img{
    height:100%;
    width:100%!important;
    border:5px solid #fff
}
.news-image,img.news-img-1,img.news-img-2{
    border-radius:6px 6px 0 0;
    width:100%
}
img.news-img-1{
    height:100%;
    object-fit:contain
}
img.news-img-2{
    height:100%;
    .position:relative;
    .left:-50px;
    .right:0;
    object-fit:contain
}
div.news-column{
    padding:8px;
    margin:0
}
.news-image{
    .height:200px;
    overflow:hidden;
    background-image:url(../img/blur-bg.jpg);
    background-size:cover
}
h4.news-date{
    position:absolute;
    bottom:-5px;
    left:0;
    width:100%
}
h4.news-date>span{
    font-family:Arial;
    font-size:50%;
    color:#fff;
    background-color:rgba(0,0,0,.5);
    padding:5px
}
footer.main-footer,nav.nav-bar-mobile{
    background-color:#2d2d2d
}
h4.news-title{
    color:#fff;
    margin:0;
    padding:15px;
    font-family:sans-serif;
    font-size:90%;
    .min-height:80px;
    height:auto
}
.animations-list .img-animations{
    transform:scale(1);
    transition:.3s;
    filter:brightness(100%);
    width:100%
}
.animations-list:hover .img-animations{
    transform:scale(1.1);
    transition:.3s;
    filter:brightness(90%)
}
.animations-list .seemore-typo{
    transition:.3s
}
.animations-list:hover .seemore-typo{
    transform:scale(1.1);
    transition:.3s
}
footer.main-footer{
    border-top:solid red 3px;
    padding:.5px
}
div.footer-container{
    margin-top:15px;
    text-align:center
}
div.footer-menu{
    margin-top:5px
}
div.footer-menu a{
    color:#fff
}

.footer-socmed i.fb-icon:hover {
    color:#3b5998;
    transform:scale(1.1)
}

.footer-socmed i.yt-icon:hover {
    color:red;
    transform:scale(1.1)
}

.footer-socmed i.tw-icon:hover {
    color:#55acee;
    transform:scale(1.1)
}

.footer-socmed i.ig-icon:hover {
    color:#bc2a8d;
    transform:scale(1.1)
}

i.rounded,i.rounded:hover{
    background-color:#fff;
    padding:10px;
    font-size:20px;
    text-align:center;
    border-radius:50px;
    width:40px;
    height:40px;
    margin:10px 3px;
    transition:all .1s
}
i.rounded{
    color:#333
}

div.copyright-container{
    margin-top:-10px;
    font-size:15px;
    color:#A5A5A5
}
ul.list-inline{
    padding-left:0;
    margin-left:-5px;
    list-style:none
}
ul.list-inline>li{
    display:inline-block;
    padding-right:5px;
    padding-left:5px
}
button.nav-bar-mobile-toggle{
    background-color:red;
    width:45px;
    height:40px;
    margin:9px auto;
    cursor:pointer
}
span.nav-bar-mobile-toggle-icon{
    position:absolute;
    top:5px;
    bottom:5px;
    left:0;
    right:0;
    width:100%;
    height:auto
}
#nextbtn,#prevbtn{
    top:-30%;
    border:0 solid #000;
    display:block!important
}
.nav-link{
    color:#fff;
    text-indent:15px
}
.slide-episode{
    height:210px
}
#nextbtn,#nextbtn-mini,#prevbtn,#prevbtn-mini{
    width:50px;
    height:100px;
    position:absolute;
    background:0 0;
    cursor:pointer
}
#prevbtn{
    left:-15px
}
#nextbtn{
    right:-15px
}
#nextbtn i,#nextbtn-mini i,#prevbtn i,#prevbtn-mini i{
    transform:scale(2,2);
    background-color:red;
    color:#fff;
    border-bottom:solid #3e3e3e 0;
    padding:5px 6px;
    border-radius:50%;
    transition-duration:.1s;
    font-size:8px
}
#nextbtn i:hover,#nextbtn-mini i:hover,#prevbtn i:hover,#prevbtn-mini i:hover{
    background-color:red;
    color:#fff;
    border-bottom:solid #3e3e3e 0;
    padding:5px 6px;
    border-radius:50%;
    transition:.1s;
    transform:scale(2.2)
}
#prevbtn-mini{
    top:-45%;
    left:0;
    display:block!important;
    border:0 solid #000
}
#nextbtn-mini{
    top:-45%;
    right:0;
    display:block!important;
    border:0 solid #000
}
.owl-next,.owl-prev{
    width:50px;
    height:100px;
    position:absolute;
    top:35%;
    display:block!important;
    border:0 solid #000
}
.owl-prev{
    left:-30px
}
.owl-next{
    right:-30px
}
.owl-next i,.owl-next i:hover,.owl-prev i,.owl-prev i:hover{
    border-bottom:solid #298eb7 3px;
    padding:15px 8px;
    border-radius:5px;
    color:#fff
}
.owl-next i,.owl-prev i{
    transform:scale(2,2);
    background-color:#30a7d7;
    transition-duration:.1s
}
.owl-next i:hover,.owl-prev i:hover{
    background-color:#40b8e8;
    transition:.1s;
    transform:scale(2.2)
}
.animations-caption,.games-caption{
    position:absolute;
    bottom:0;
    background-color:rgba(0,0,0,.6)
}
.bg-btn-seemore,.btn-seemore{
    width:100%;
    border-radius:10px
}
.link-seemore:hover .bg-btn-seemore{
    width:100%;
    height:auto;
    border-radius:10px;
    padding-bottom:8px;
    transform:scale(.95);
    filter:brightness(103%);
    transition:.1s
}
.bg-btn-seemore{
    height:auto;
    padding-bottom:8px;
    transition-duration:.1s;
    filter:brightness(100%)
}
.btn-seemore{
    color:#fff;
    font-family:engcomica;
    padding:5px;
    margin:0
}
.txt-seemore{
    text-align:center;
    padding:6px 0 5px;
    margin:0;
    color:#fff;
    font-family:Bungee;
    font-size:25px
}
.animations-caption>h4,.games-caption>h4{
    font-family:Aldrich;
    text-align:center;
    width:100%
}
.animations-caption{
    padding:0;
    margin:0;
    top:150px;
    height:auto;
    width:100%;
    border-radius:0 0 6px 6px
}
.animations-caption>h4{
    font-size:100%;
    height:100%;
    padding-top:17px;
    padding-bottom:17px
}
img.animations-img{
    border-radius:6px;
    width:100%;
    height:200px
}
.games-caption,div.animations-column{
    padding:0;
    margin:0;
    height:auto
}
.animations-column .card{
    border:0!important
}
.load,.test{
    transform:scale(.9);
    transition-duration:.3s
}
.test:hover{
    transform:scale(.95);
    transition:.2s
}
.games-caption{
    top:240px;
    width:100%;
    border-radius:0 0 6px 6px
}
.games-caption>h4{
    font-size:120%;
    height:100%;
    padding-top:17px;
    padding-bottom:17px
}
img.games-img{
    height:100%;
    border-radius:6px;
    width:100%
}
div.games-column{
    padding:0;
    margin:15px auto
}
h4.card-title{
    font-family:'Open Sans';
    font-size:20px
}
.games-column>.list-group>.list-group-item{
    font-family:arial
}
.home-games-img{
    width:100%;
    height:207.75px
}
@media (max-width:768px){
    div.container{
        padding:15px 30px 0!important;
        margin-top:55px
    }
    div.mobile-spacing-1,div.mobile-spacing-2{
        margin:10px auto
    }
    div.mobile-spacing-3{
        margin:175px auto
    }
    .slide-episode{
        height:100%
    }
    .home-games-img{
        width:100%;
        height:100%
    }
    #nextbtn,#prevbtn{
        width:50px;
        height:100px;
        position:absolute;
        top:50px;
        background:0 0;
        cursor:pointer
    }
    #prevbtn{
        left:0;
        display:block!important;
        border:0 solid #000
    }
    #nextbtn{
        right:0;
        display:block!important;
        border:0 solid #000
    }
    .owl-next,.owl-prev{
        width:50px;
        height:100px;
        position:absolute;
        top:10%;
        display:block!important;
        border:0 solid #000
    }
    .owl-prev{
        left:-25px
    }
    .owl-next{
        right:-25px
    }
}
@media (min-width:768px) and (max-width:991px){
    div.container{
        width:95%;
        padding:15px 0 0;
        margin-top:55px
    }
    div.mobile-spacing-1,div.mobile-spacing-2,div.mobile-spacing-3{
        margin:10px auto
    }
    .slide-episode{
        height:100%
    }
    .home-games-img{
        width:100%;
        height:100%
    }
    .owl-next,.owl-prev{
        width:50px;
        height:100px;
        position:absolute;
        top:20%;
        display:block!important;
        border:0 solid #000
    }
    .owl-prev{
        left:-30px
    }
    .owl-next{
        right:-30px
    }
}