:root {
    color-scheme: only light;
}

html{

    max-width: 1920px;
    overflow: auto;
}
@font-face {
    font-family: namaku;
    src: url(../fonts/Namaku.ttf?1);
}
img.logo{
    height:100px!important;
    width:auto;
}
.main-menu > ul > li > a {
    padding: 45px 0;
}
.main-menu li.active a, .th-mobile-menu li.active a{
    color:#FFB539
}
.header-default .main-menu{
    margin:0px;
}
.header-logo{
    margin-left:50px;
    margin-right:50px;
}
.main-menu-left{
    background-image: url(../img/menu-bar-left.png?v1), url(../img/menu-bar.png?v1);
    background-position: right 15px, right 15px;
    background-repeat: no-repeat, repeat-x;
    width:calc(50% - 220px);

}
.main-menu-right{
    background-image: url(../img/menu-bar-right.png?v1),url(../img/menu-bar.png?v1);
    background-position: left 15px, left 15px;
    background-repeat: no-repeat, repeat-x;
    width:calc(50% - 220px);
}

.main-menu a {
    font-size: 15px;
}

.under-logo-div{
    position: absolute;
    top: 116px;
    width:100%;
    text-align: center;
}
.under-logo{
    width:300px;
}

#main_banner_img{
    /*content:url('../img/banner.jpg?12');*/
    will-change: transform;
}

.hero-style2{
    padding:0px!important;

}

.wira-trio-div{
    background: linear-gradient(90deg, #FFE40F 0%, #FFB701 100%), #FFFFFF!important;
    position: relative;
    padding:45px 0px!important;
}
.wira-trio-title{
    width: 506px;
    height:72px;
    margin-left:-253px;
    position: absolute;
    top:-48px;
    left:50%;
    background-size: cover;
    background-image: url(../img/frame1.png);
    background-repeat: no-repeat;
    z-index: 9;
}
.wira-trio-content p{
    padding-left:300px;
    color: #0F1C23!important;
    margin: 0px;
}
.bee1{
    position: absolute;
    top: -122px;
    left: -136px;
    width: 341px;
    height: auto;
    z-index: 9;
}



#event_section{
    background-size: cover;
    background-image: url(../img/event-bg.jpg);
    background-repeat: no-repeat;
    height:1505px;
}

.upcoming-event-title{
    font-family: "namaku";
    text-transform: uppercase;
}

.game-card-details{
    background:#0B0E13;
    border: none!important;
    width:350px;
    height:300px;
}
.game-card .game-card-details .box-title {
    text-align: left;
}
.game-card-img{
    width:350px;
    height:280px;
}
#the_family_img{
    position:absolute;
    bottom:0px;
}

.the-advanture-div{
    background: linear-gradient(90deg, #FFE40F 0%, #FFB701 100%), #FFFFFF!important;
    position: relative;
    padding:45px 0px!important;
}
.the-advanture-title{
    width: 676px;
    height:72px;
    margin-left:-338px;
    position: absolute;
    top:-48px;
    left:50%;
    background-size: cover;
    background-image: url(../img/frame2.png);
    background-repeat: no-repeat;
    z-index: 9;
}


.the-advanture-content p{
    padding-right:300px;
    color: #0F1C23!important;
    margin: 0px;
}

.qps{
    position: absolute;
    top: -122px;
    right: -136px;
    width: 341px;
    height: auto;
    z-index: 9;
}


.slogan-div{
    background: linear-gradient(90deg, #FFE40F 0%, #FFB701 100%), #FFFFFF!important;
    position: relative;
    padding:70px 0px!important;
}
.slogan-title{
    width: 862px;
    height:72px;
    margin-left:-431px;
    position: absolute;
    top:-48px;
    left:50%;
    background-size: cover;
    background-image: url(../img/frame3.png);
    background-repeat: no-repeat;
    z-index: 9;
}
.slogan-sub-title{
    padding-left:183px;
    font-family: "namaku";
    text-transform: uppercase;
}
.slogan-content p{
    padding-left:183px;
    color: #0F1C23!important;
    margin: 0px;
}
.phoenix-device{
    position: absolute;
    top: -43px;
    left: -81px;
    width: 241px;
    height: auto;
    z-index: 9;
}

.team-container{
    padding-bottom:150px;
}

.team-card{
    background: url('../img/frame.png');
    background-position: left top;
    background-repeat: no-repeat;
    background-size: contain;
}

.swiper-slide{
    min-width:260px;
}

.team-card-content h3{
    font-family: "namaku";
    text-transform: uppercase;
}
.team-card .box-title a {
    color: #000;
}
.team-card .box-title{
    background: rgba(0,0,0,0);
}
.team-card .team-card-content {
    background: rgba(0,0,0,0);
    bottom:5px;
}

.footer-layout1{
    background:#131A25;
    overflow: visible;
    padding-top: 100px;
}
.footer-layout1 .logo-border{
    top:-110px;
    position: absolute;
    left: 0px;
}
.footer-layout1 .logo-border .col-auto{
    padding: 0px;
}

.footer-border-left{
    width:calc(50% - 210px);
}
.footer-border-left1{
    display: inline-block;
    background-image:  url(../img/solid-linebar.png?v1);
    background-position: right top;
    background-repeat: repeat-x;
    width:calc(100% - 34px);
    margin: 0;
    padding: 0;
    margin-right: -5px;
}
.footer-border-left2{
    display: inline-block;
    background-image: url(../img/solid-leftbar.png?v1);
    background-position: right top;
    background-repeat: no-repeat;
    width:30px;
    background-size: cover;
}

.footer-border-right{
    width:calc(50% - 210px);
}
.scroll-top:after {
    border:none;
    content:"";
}
.footer-border-right1{
    display: inline-block;
    background-image:  url(../img/solid-linebar.png?v1);
    background-position: left top;
    background-repeat: repeat-x;
    width:calc(100% - 34px);
    margin: 0;
    padding: 0;
    margin-left: -5px;
}
.footer-border-right2{
    display: inline-block;
    background-image: url(../img/solid-rightbar.png?v1);
    background-position: left top;
    background-repeat: no-repeat;
    width:30px;
    background-size: cover;
}


img.footer-logo{
    height:200px!important;
    width:auto;
}

.footer-logo-div{
    margin-left:50px;
    margin-right:50px;
}

div.th-social{
    margin-top:10px;
}

.copyright-wrap{
    background-color: #131A25;
    border-top:solid 1px #FFD00A;
    height: auto;
    margin-top:0;

}
.copyright-wrap .copyright-text {
    background-color: #131A25;
    top: 0px;
    margin: 0px;
    padding: 25px;
    padding-top: 5px;
}

.scroll-top{
    width:190px;
    height:auto;
    border:none;
}



.info-box.col-lg-6{
    padding:2px;
    padding: 2px;
    font-size: 13px;
    margin-bottom: 0;
    line-height: 18px;
}
.info-box.col-lg-6 a{
    color: #969EB2;
}

.th-widget-contact p{
    font-size: 13px;
    line-height: 24px;
}
.th-widget-contact.row{
    padding-left:10px;
}

.wira-modal .modal-dialog{
    margin: 0px;
}

.wira-modal .summary-div{
    text-align: center;
    padding: 30px 30px;
    margin-bottom:50px;
    background: linear-gradient(180deg, #036FDB 0%, #001C39 100%);
}


.wira-modal .summary-div .btn-close{
    background: #FFF;
    color: #000;
    line-height: 16px;
    font-size: 20px;
    font-weight: 500;
    padding: 5px;
    position: absolute;
    right: 30px;
    top: 30px;
    z-index: 7;
}
.wira-modal .wira-img{

}
.wira-modal .wira-name{
    text-align: center;
    font-size: 60px;
    line-height: 67px;
    font-family: "namaku";
    text-transform: uppercase;
    color:#FFF;
}
.wira-modal .wira-slogan{
    text-align: center;
    color:#FDDB11;
    font-size: 20px;
    line-height: 24px;
}
.wira-modal .wira-voice-cast{
    text-align: center;
    color:#FFF;
    font-size: 20px;
    line-height: 32px;
}
.wira-modal .wira-biodata-div{
}
.wira-modal .wira-biodata-div .label{
    text-align: left;
    font-size: 16px;
    color: #FFF;
}
.wira-modal .wira-biodata-div .label span{
    vertical-align: middle;
}
.wira-modal .wira-biodata-div .lvalue{
    text-align: left;
    font-size: 16px;
    line-height: 24px;
    color: #FFF;
    vertical-align: middle;
}
.wira-modal .characteristic-row{
    padding:5px 30px;
}
.wira-modal .characteristic-title{
    font-size:20px;
    line-height: 22px;
    font-weight: 400;
    text-transform: uppercase;
    color:#056FCF;
    font-family: "namaku"
}
.wira-modal .characteristic-detail{
}




/*The Movie*/
.about-title{
    font-family: "namaku";
    text-transform: uppercase;
}
.about-div{
    padding:50px 0;
    padding-bottom: 0px;
}
.about-title-div{
    position: relative;
    padding-top:150px;
}
.about-div p{
    color:#000;
}
.about-paragraph2{
    position: relative;
}

.about-paragraph2 p{
    bottom:180px;
    position: absolute;
}
.about-img2-div{
    position: relative;
    height: 505px;
}
.about-img2{
    max-width:90%;
    position: absolute;
    left: -72px;
    top: -70px;
}
.about-img1{
    max-width: 90%;
}
.about-badge{
    width: 180px;
    position: absolute;
    right: 0;
    top:40px;
}

.logline-div{
    background: linear-gradient(90deg, #FFE40F 0%, #FFB701 100%), #FFFFFF !important;
    z-index: 9;

    text-align: center;
}
.logline-div p{
    color: #0F1C23;
}
.logline-title{
    background:url(../img/logline-title.png);
    background-position: center center;
    background-repeat: no-repeat;
    position: absolute;
    top: -55px;
    left: 0;
    width: 100%;
    height: 86px;
}
.moral-item-img-div{
    text-align: center;
    margin-bottom:-50px;
}
.moral-item-details{
    padding: 10px;
    padding-top: 60px;
    background: #FFF;
    border-radius: 25px;
    margin-bottom: 30px;
    height: 200px;
    overflow: auto;
}
.box-title{
    width: 100%;
    text-align: center;
    font-size: 24px;
    font-weight: 600;
    line-height: 43px;
    margin-bottom: 0px;
}
.moral-content{
    padding: 15px;
    width: 100%;
    text-align: center;
    font-size: 14px;
    font-weight: 400;
    line-height: 25px;
    padding-top: 0px;
    padding-bottom: 0px;
}

.why-div{
    background: linear-gradient(90deg, #FFE40F 0%, #FFB701 100%), #FFFFFF !important;
    z-index: 1;
    padding-bottom: 150px;
    text-align: center;
}
.why-div p{
    color: #0F1C23;
}
.why-title{
    background:url(../img/why-title.png);
    background-position: center center;
    background-repeat: no-repeat;
    position: absolute;
    top: -55px;
    left: 0;
    width: 100%;
    height: 86px;
}

/*Heros*/
.family-title1{
    background:url(../img/family-title1.png);
    background-position: center center;
    background-repeat: no-repeat;
    width: 100%;
    height: 86px;
}
.family-title2{
    background:url(../img/family-title2.png);
    background-position: center center;
    background-repeat: no-repeat;
    width: 100%;
    height: 86px;
    margin-top:120px
}
.family-title3{
    background:url(../img/family-title3.png);
    background-position: center center;
    background-repeat: no-repeat;
    width: 100%;
    height: 86px;
    margin-top:120px
}
.heros-div{
    margin-top: 50px;
    clear: both;
}


.hero-card, a .hero-card{
    margin-left:20px;
    margin-right: 20px;
    min-width: 240px;
    margin-bottom:50px;
    width: 20%;
    max-width: 240px;
    height:368px;
    text-align: center;
    background: url('../img/frame.png');
    background-position: left top;
    background-repeat: no-repeat;
    background-size: contain;
}
.hero-card-empty{
    margin-left:20px;
    margin-right: 20px;
    min-width: 240px;
    margin-bottom: 50px;
    width: 20%;
    max-width: 240px;
    height: 368px;
    text-align: center;
}
.hero-card img{
    margin-top: 12px;
}
.hero-card-content h3{
    font-family: "namaku";
    text-transform: uppercase;
    font-size:18px;
    line-height: 48px;
}
.hero-card .box-title a {
    color: #000;
    background: rgba(0,0,0,0);
}



/*News & Events*/
.blog-single{
    background-color: #FFFEF6;
    border:solid 3px #FFB400;
}
.blog-title, .blog-title a{
    color:#000;
    font-size: 24px;
}
.blog-single-detail{
    border: none!important;
}
.fa-calendar{
    color:#000;
}
.blog-single .link-btn{
    color:#056FCF;
}

.blog-single-detail{
    border: none!important;
}

/*Contact*/
.contact-sec-1{
    background: url('../img/contact-us-bg2.png');
    background-size: cover;
    background-position: left top;
}
@media (max-width: 1920px) {
    .hero-card, a .hero-card{
        margin-left: auto;
        margin-right: auto;
    }
    .hero-card-empty{
        margin-left: auto;
        margin-right: auto;
    }
}
/* screen between 1199 - 1399 */
/*            xl  */
@media (max-width: 1399px) {
    .mobile-menu-button {
        height: 100%;
        position: absolute;
        right: 10px;
        top: 0;
        margin-top: 0;
        padding: 0;
    }

    /*The Movie*/
    .about-badge{
        width: 120px;
        top:90px;
    }

    .about-img2{
        top:-80px;
    }

    .btn-contact-us {
        min-width: 100px;
    }
}


/* screen between 767 - 1199 */
/* Large devices  lg */
@media (max-width: 1199px) {
    .wira-trio-content p {
        padding-left: 260px;
    }
    .the-advanture-content p {
        padding-right: 260px;
    }
    #event_section{
        height: 1300px!important;
    }

    /*The Movie*/
    .about-img2-div{
        height:auto;
    }
    .about-img2{
        position: relative;
    }
    .about-paragraph2 p{
        position: relative;
        bottom:0;
    }

    .about-img2{
        top:0px;
    }
}

@media(max-width:991px){
    .about-title-div{
        padding-top: 43px;
    }
    /*THE MOVIE*/
    .about-badge{
        width:0px;
    }
    .why-title {
        background: url(../img/why-title-m.png);
        background-position: center center;
        background-repeat: no-repeat;
        position: absolute;
        top: -55px;
        left: 0;
        width: 100%;
        height: 86px;
    }
}

/* screen between 575 - 767 */
/* Small devices  md */
@media (max-width: 767px) {
    .bee1 {
        position: relative;
        top: auto;
        bottom: auto;
        right: auto;
        left: 50%;
        transform: translateX(-50%);
    }
    .wira-trio-content p {
        padding-left: 0;
    }
    .qps {
        position: relative;
        top: auto;
        bottom: auto;
        right: auto;
        left: 50%;
        transform: translateX(-50%);
    }
    .the-advanture-content p {
        padding-right: 0;
    }
    .phoenix-device {
        position: relative;
        top: auto;
        bottom: auto;
        right: auto;
        left: 50%;
        transform: translateX(-50%);
    }
    .slogan-sub-title, .slogan-content p {
        padding-left: 0;
    }
    .slogan-title{
        width: 100%;
        height:72px;
        margin-left: 0;
        position: absolute;
        top:-48px;
        left:50%;
        background-size: 100% 100%;
        background-image: url(../img/frame3.png);
        background-repeat: no-repeat;
        z-index: 9;
        transform: translateX(-50%);
    }
    .the-advanture-title{
        width: 100%;
        height:72px;
        margin-left: 0;
        position: absolute;
        top:-48px;
        left:50%;
        background-size: 100% 100%;
        background-image: url(../img/frame2.png);
        background-repeat: no-repeat;
        z-index: 9;
        transform: translateX(-50%);
    }
    .wira-trio-title{
        width: 100%;
        height:72px;
        margin-left: 0;
        position: absolute;
        top:-48px;
        left:50%;
        background-size: 100% 100%;
        background-image: url(../img/frame1.png);
        background-repeat: no-repeat;
        z-index: 9;
        transform: translateX(-50%);
    }
    .game-card-img, .game-card-details{
        margin-left:auto;
        margin-right:auto;
    }
}


/* screen between 375 - 575 */
@media (max-width: 575px) {
    .team-card{
        margin:auto;
    }
    #main_banner_img{
        /*content:url('../img/banner-mobile.jpg');*/
        will-change: transform;
    }
    #event_section{
        height:1000px!important;
    }
    img.logo {
        height: 50px !important;
        width: auto;
    }
    .under-logo {
        width: 200px;
    }
    .under-logo-div {
        top: 72px;
    }

    .wira-trio-title {
        width: 208px;
        height: auto;
        top: -18px;
    }
    .the-advanture-title {
        width: 281px;
        height: auto;
        top: -18px;
    }
    .slogan-title {
        width: 376px;
        height: auto;
        top: -18px;
    }

    .scroll-top{
        width:100px;
        height:auto;
        right:7px;
        bottom:91px;
    }

    /*Heros*/
    .family-title1{
        background:url(../img/family-title1-m.png);
        background-position: center center;
        background-repeat: no-repeat;
        width: 100%;
        height: 86px;
    }
    .family-title2{
        background:url(../img/family-title2-m.png);
        background-position: center center;
        background-repeat: no-repeat;
        width: 100%;
        height: 86px;
        margin-top:120px
    }
    .family-title3{
        background:url(../img/family-title3-m.png);
        background-position: center center;
        background-repeat: no-repeat;
        width: 100%;
        height: 86px;
        margin-top:120px
    }

}

/* screen smaller than 375 */
@media (max-width: 375px) {
    /*THE MOVIE*/
    .about-badge{
        width:0px;
    }

}


.hide{
    display:none!important;
}