.custom-class {
    display: none;
}


@font-face {
    font-family: 'kanitregular';
    src: url('/dist/fonts/kanit-regular-webfont.woff2') format('woff2'), url('/dist/fonts/kanit-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'kanitb';
    src: url('/dist/fonts/kanit-bold-webfont.woff2') format('woff2'), url('/dist/fonts/kanit-bold-webfont.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Klavika Rg';
    src: url('/dist/fonts/Klavika-Regular.woff2') format('woff2'), url('/dist/fonts/Klavika-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'kanitregular';
    src: url('/dist/fonts/kanit-regular-webfont.woff2') format('woff2'), url('/dist/fonts/kanit-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}




@font-face {
    font-family: 'rsubold';
    src: url(/dist/font/rsu_bold-webfont.eot);
    src: url(/dist/font/rsu_bold-webfont.eot?#iefix) format("embedded-opentype"), url(/dist/font/rsu_bold-webfont.woff) format("woff"), url(/dist/font/rsu_bold-webfont.ttf) format("truetype"), url(/dist/font/rsu_bold-webfont.svg#rsubold) format("svg");
    font-weight: 400;
    font-style: normal;
}


body {
    font-family: 'kanitregular',Tahoma,"Microsoft Sans Serif";
    overflow-x: hidden !important;
    color: #222222 !important;
    font-weight: 100;
    /*min-height: 100vh;*/
}


bdgradient-1 {
    border-width: 2px;
    border-style: solid;
    border-bottom-color: #95d9f4;
}


a {
    text-decoration: none;
    color: #0d6efd;
}

.fa {
    padding: 1.2rem;
}

/* Add a black background color to the top navigation */
.topnav {
    background-image: url(../image/home/navi_bar_bg.png);
    background-repeat: repeat;
    overflow: hidden;
    z-index: 10000;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    padding: 10px;
    transition: all 1s ease-out;
}


    /* Style the links inside the navigation bar */
    .topnav a {
        float: left;
        display: block;
        text-align: center;
        text-decoration: none;
        padding-right: 0rem !important;
        padding-left: 0rem !important;
        font-size: 18px;
    }

        .topnav a:nth-child(2), a:nth-child(3), a:nth-child(4), a:nth-child(5), a:nth-child(6) {
            float: right;
        }

        /* Change the color of links on hover */
        .topnav a:hover {
            color: #20b4ef;
        }

        /* Add an active class to highlight the current page */
        .topnav a.active {
            color: white;
        }

    /* Hide the link that should open and close the topnav on small screens */
    .topnav .icon {
        display: none;
    }






.navbar {
    background: #fff;
}


.navbar {
    z-index: 10000;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    padding: 0;
}

.navbar-brand {
    padding: 0px;
}

.nav-link {
    padding-right: 0rem !important;
    padding-left: 0rem !important;
    font-size: 18px;
}

.navbar-dark .navbar-nav .nav-link {
    color: #fff;
    padding: 0px;
}

.navbar-dark .navbar-nav .active > .nav-link {
    color: #b6ff00;
    background: #000;
    border-radius: 15px;
}


.navbar-dark .navbar-toggler {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.8);
}

.nav-link:hover {
    color: #95d9f4 !important;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(34, 130, 249, 0.8)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

.navbar-dark .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(34, 130, 249, 0.8)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

.flex-grow {
    flex: 1;
}


.center-block {
    display: block;
    margin-left: auto;
    margin-right: auto;
}



.bgline {
    background: url('https://static.nxthcdn.com/content/2023/10/18/125724_paper_bg_sec1.jpg');
    background-size: cover;
    background-repeat: repeat;
    box-shadow: 5px 10px #888888;
}

.boxdt {
    position: relative;
    z-index: 101;
    top: -26em;
}

.bgboxdt {
    background-color: #ebdad0;
    border: 1px solid #6d6d6d;
    border-radius: 10px;
}


.footerbg {
    background-color: #050714;
    background-size: cover;
    padding: 25px;
    background-repeat: no-repeat;
}

.bgboxdtout {
    background: url('../images/home/12941_Sec_02_BG.png');
    background-size: cover;
    background-repeat: no-repeat;
}

.boxletter {
    max-width: 90%;
    position: relative;
    top: 15em;
    z-index: 102;
}

.titelbtover {
    position: relative;
    z-index: 102;
    top: 3em;
}


.titelbtovera {
    position: relative;
    z-index: 102;
    top: 3em;
}

.img-fluidbt {
    max-width: 100%;
    height: auto;
}


.img-fluidbt2 {
    max-width: 100%;
    height: fit-content;
}


.fontrg {
    font-family: 'Klavika Bd','kanitregular';
}
/*Fixes container-fluid*/
.container-fluidfix {
    padding-left: 0rem;
    padding-right: 0rem;
    overflow: hidden;
}

.modal-dialog {
    font-size: 14px;
}
/* Fixes dropdown menus placed on the right side */
.ml-auto .dropdown-menu {
    left: auto !important;
    right: 0px;
}

.boxlogo {
    z-index: 2;
    position: relative;
    background: url(../image/home/BG_Gold_Frame.png);
}

.nxlogo {
    position: relative;
    z-index: 99;
    -moz-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    max-width: 100%;
    /*animation: d1 3s linear infinite;*/
}

    .nxlogo:hover {
        -webkit-transition: all .2s ease-out;
        transition: all .2s ease-out;
        filter: brightness(1.1);
    }

.titletextweb0 {
    animation: slideinwebenter2 1.5s ease-out forwards;
}

.boxgsec2 {
    background: url(../image/home/BG_Section-2.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    z-index: 114;
    position: relative;
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}



/*min-height:930px;*/

.boxgsec2-in {
    background: url(../image/home/BG_Section3.png);
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.boxgsec3 {
    background: url(../image/home/BG_Section3_102024.png);
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 114;
    position: relative;
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    /*min-height: 980px;*/
}

.boxgsec3g {
    background: url(../image/gachaevent/bg_gachaevent.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 114;
    position: relative;
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    /*min-height: 980px;*/
}

.boxgsec4 {
    background-color: #1d1d1d;
    z-index: 115;
    position: relative;
    background-repeat: no-repeat;
    /*background-image: url(../image/home/ribbon.png);*/
    background-position: top right;
    background-position-y: -28px;
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}


.boxgsec5 {
    background: url(../image/home/BG_Section5.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 114;
    position: relative;
    min-height: 1000px;
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.boxpointboss1 {
    height: 107px;
    background: url(../image/home/number/1.png), linear-gradient(107deg, #c4ad7e 0%, rgb(51 50 49) 65%);
    background-repeat: no-repeat;
    background-position: center right;
    background-position-x: 98%;
}

.boxpointboss2 {
    height: 107px;
    background: url(../image/home/number/2.png), linear-gradient(180deg, rgb(39 39 39) 0%, rgb(51 50 49) 22%);
    background-repeat: no-repeat;
    background-position: center right;
    background-position-x: 98%;
    margin-top: 2px;
}

.boxpointboss3 {
    height: 107px;
    background: url(../image/home/number/3.png), linear-gradient(180deg, rgb(39 39 39) 0%, rgb(51 50 49) 22%);
    background-repeat: no-repeat;
    background-position: center right;
    background-position-x: 98%;
    margin-top: 2px;
}

.boxpointboss4 {
    height: 107px;
    background: url(../image/home/number/4.png), linear-gradient(180deg, rgb(39 39 39) 0%, rgb(51 50 49) 22%);
    background-repeat: no-repeat;
    background-position: center right;
    background-position-x: 98%;
    margin-top: 2px;
}

.boxpointboss5 {
    height: 107px;
    background: url(../image/home/number/5.png), linear-gradient(180deg, rgb(39 39 39) 0%, rgb(51 50 49) 22%);
    background-repeat: no-repeat;
    background-position: center right;
    background-position-x: 98%;
    margin-top: 2px;
}



.boxpointboss6 {
    height: 107px;
    background: linear-gradient(180deg, rgb(39 39 39) 0%, rgb(51 50 49) 22%);
    background-repeat: no-repeat;
    background-position: center right;
    background-position-x: 98%;
    margin-top: 2px;
}

.boxpointboss1-no {
    height: 129px;
    background: url(../image/home/number/1.png), linear-gradient(107deg, #c4ad7e 0%, rgb(51 50 49) 65%);
    background-repeat: no-repeat;
    background-position: center right;
    background-position-x: 98%;
}

.boxpointboss2-no {
    height: 129px;
    background: url(../image/home/number/2.png), linear-gradient(180deg, rgb(39 39 39) 0%, rgb(51 50 49) 22%);
    background-repeat: no-repeat;
    background-position: center right;
    background-position-x: 98%;
    margin-top: 2px;
}

.boxpointboss3-no {
    height: 129px;
    background: url(../image/home/number/3.png), linear-gradient(180deg, rgb(39 39 39) 0%, rgb(51 50 49) 22%);
    background-repeat: no-repeat;
    background-position: center right;
    background-position-x: 98%;
    margin-top: 2px;
}

.boxpointboss4-no {
    height: 129px;
    background: url(../image/home/number/4.png), linear-gradient(180deg, rgb(39 39 39) 0%, rgb(51 50 49) 22%);
    background-repeat: no-repeat;
    background-position: center right;
    background-position-x: 98%;
    margin-top: 2px;
}

.boxpointboss5-no {
    height: 129px;
    background: url(../image/home/number/5.png), linear-gradient(180deg, rgb(39 39 39) 0%, rgb(51 50 49) 22%);
    background-repeat: no-repeat;
    background-position: center right;
    background-position-x: 98%;
    margin-top: 2px;
}




.boxbossevent {
    height: 645px;
    background: url('../image/home/Boss_Binah.png');
    background-repeat: no-repeat;
    background-size: cover;
}


.mov {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    min-width: 100%;
    z-index: 1;
    height: 100%;
    /*background: url(../image/home/BG_Section1.jpg);
    background-repeat: no-repeat;
    background-position: 0 -100px;*/
}

    .mov .bgmov {
        position: absolute;
        top: 50%;
        left: 50%;
        width: auto;
        height: auto;
        min-width: 100%;
        min-height: 100%;
        transform: translate(-50%, -50%);
    }






@keyframes addcard {
    from {
        opacity: 0;
    }

    50% {
        opacity: .5;
    }

    to {
        opacity: 1;
    }
}

.boxsection2 {
    background-image: url('../image/home/BG_Section-2.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top;
}

.boxsection2-in {
    background-image: url('../image/home/BG_Section2.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top;
}


.titletsllidup {
    position: relative;
    z-index: 100;
    animation: slideinup 1.5s ease-out forwards;
}

@keyframes slideinup {
    from {
        -moz-transform: scale(5);
        -webkit-transform: scale(5);
        transform: scale(5);
        width: 1000%;
        opacity: 0;
    }

    50% {
        -moz-transform: scale(2.5);
        -webkit-transform: scale(2.5);
        transform: scale(2.5);
        opacity: 0;
    }

    to {
        -moz-transform: scale(1);
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}


@keyframes hoversc1 {
    from {
        -moz-transform: scale(1);
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    50% {
        -moz-transform: scale(1.1);
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }

    to {
        -moz-transform: scale(1);
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

.titletextweb1 {
    animation: slideinwebenter1 1.2s ease-out forwards;
}

@keyframes slideinwebenter1 {
    from {
        -moz-transform: scale(1.5);
        -webkit-transform: scale(1.5);
        transform: scale(1.5);
        width: 300%;
        opacity: 0.0;
    }

    75% {
        -moz-transform: scale(1.3);
        -webkit-transform: scale(1.3);
        transform: scale(1.3);
        opacity: 0.0;
    }

    to {
        -moz-transform: scale(1);
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes slideinwebenter2 {
    from {
        -moz-transform: scale(1.5);
        -webkit-transform: scale(1.5);
        transform: scale(1.5);
        width: 300%;
        opacity: 0.0;
    }

    75% {
        -moz-transform: scale(1.3);
        -webkit-transform: scale(1.3);
        transform: scale(1.3);
        opacity: 0.0;
        width: 200%;
    }

    to {
        -moz-transform: scale(1);
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}



.tri-container {
    overflow: hidden;
    position: absolute;
    animation: 25s slide-uptr linear infinite;
}


@keyframes slide-uptr {
    from {
        margin-top: -700px;
        height: 100%;
        opacity: 1;
    }

    to {
        margin-top: 700px;
        height: 100%;
        opacity: 0.7;
    }
}




.fp-tableCell {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    height: 100%;
    z-index: 1000;
}

.fall-video-cover {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    background-size: cover;
}

.video-loader {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -15px;
    margin-left: -15px;
    width: 30px;
    height: 30px;
}






.boxenterevent {
    bottom: 0;
    -webkit-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    cursor: pointer;
}

    .boxenterevent:hover {
        -webkit-transition: all .2s ease-out;
        transition: all .2s ease-out;
        filter: brightness(1.1);
        bottom: 10px;
    }







.boxinfuitems {
    position: relative;
    bottom: 0;
    -webkit-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    cursor: pointer;
}

    .boxinfuitems:hover {
        position: relative;
        -webkit-transition: all .2s ease-out;
        transition: all .2s ease-out;
        filter: brightness(1.1);
        bottom: 10px;
    }




.boxeventmenu {
    position: relative;
    bottom: 0;
    -webkit-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    cursor: pointer;
}

    .boxeventmenu:hover {
        position: relative;
        -webkit-transition: all .2s ease-out;
        transition: all .2s ease-out;
        bottom: 5px;
    }





.boxeventmenupoint {
    position: relative;
    z-index: 1007;
    bottom: 0;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    cursor: pointer;
}

    .boxeventmenupoint:hover {
        position: relative;
        z-index: 1008;
        -webkit-transition: all .2s ease-out;
        transition: all .2s ease-out;
        bottom: 5px;
        z-index: 2000;
    }



.boxeventmenumis {
    position: relative;
    top: 0;
    -webkit-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    cursor: pointer;
}

    .boxeventmenumis:hover {
        position: relative;
        -webkit-transition: all .2s ease-out;
        transition: all .2s ease-out;
        top: 5px;
    }






.boxchartmenu {
    position: relative;
    bottom: 0;
    -webkit-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    cursor: pointer;
}

    .boxchartmenu:hover {
        position: relative;
        -webkit-transition: all .2s ease-out;
        transition: all .2s ease-out;
        bottom: 5px;
        border: solid .2em #ff99c4;
    }



.brightnessbt {
    animation: d2 2s infinite linear;
}



.py-100px {
    padding-top: 100px;
    padding-bottom: 100px;
}




.m-home-comet {
    position: absolute;
    animation: brightnessani 5s infinite linear;
}

.allstarlanding {
    overflow: hidden;
}

.tomsg {
    position: absolute;
    z-index: 1001;
    left: 42%;
    top: 10%;
    width: 40%;
    font-size: 1.5vw;
}


.textmsg {
    position: absolute;
    z-index: 1002;
    left: 18%;
    top: 24%;
    width: 65%;
    font-size: 1vw;
    word-wrap: break-word;
}

.frommsg {
    position: absolute;
    z-index: 1003;
    left: 45%;
    top: 80%;
    width: 40%;
    font-size: 1.2vw;
    font-style: italic;
}






.bgpapber {
    background-color: #fff0ce;
    background-image: url(../image/home/BG_Fullpaper.png);
    background-repeat: repeat;
    background-size: contain;
}

.boxhoshino {
    height: 563px;
    background-image: url(../image/home/Hoshino.png);
    background-repeat: no-repeat;
}



.boxinfubg {
    margin-top: -8em;
}

.boxinfu {
    margin-top: 10em;
}




/*benefit*/
.bgboxg {
}



.textacctop {
    vertical-align: bottom;
    color: #c76d2c;
}


.boxbenefitcha1 {
    display: block;
    float: left;
    background: url(../image/home/c1_1.png) no-repeat;
    min-height: 563px;
    position: relative;
    -webkit-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    cursor: pointer;
    z-index: 2001;
    overflow: hidden;
    background-position: 0 0;
    transform: scale(1);
}


.boxbenefitcha2 {
    display: block;
    float: left;
    background: url(../image/home/c2_1.png) no-repeat;
    min-height: 563px;
    position: relative;
    -webkit-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    cursor: pointer;
    z-index: 2001;
    overflow: hidden;
    background-position: 0 0;
    transform: scale(1);
}

.boxbenefitcha3 {
    display: block;
    float: left;
    background: url(../image/home/c3_1.png) no-repeat;
    min-height: 563px;
    position: relative;
    -webkit-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    cursor: pointer;
    z-index: 2001;
    overflow: hidden;
    background-position: 0 0;
    transform: scale(1);
}

.boxbenefitcha4 {
    display: block;
    float: left;
    background: url(../image/home/c4_1.png) no-repeat;
    min-height: 563px;
    position: relative;
    -webkit-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    cursor: pointer;
    z-index: 2001;
    overflow: hidden;
    background-position: 0 0;
    transform: scale(1);
}

.boxbenefitcha1:hover {
    position: relative;
    -webkit-transition: all .2s ease-out;
    transition: all .2s ease-out;
    overflow: hidden;
    z-index: 2002;
    /*background-position: 100px 0;*/
    transform: scale(1.1);
}

.boxbenefitcha2:hover {
    position: relative;
    -webkit-transition: all .2s ease-out;
    transition: all .2s ease-out;
    overflow: hidden;
    z-index: 2002;
    transform: scale(1.1);
}

.boxbenefitcha3:hover {
    position: relative;
    -webkit-transition: all .2s ease-out;
    transition: all .2s ease-out;
    overflow: hidden;
    z-index: 2002;
    transform: scale(1.1);
}

.boxbenefitcha4:hover {
    position: relative;
    -webkit-transition: all .2s ease-out;
    transition: all .2s ease-out;
    overflow: hidden;
    z-index: 2002;
    transform: scale(1.1);
}






@keyframes boxbenefitexp {
    from {
        -moz-transform: scale(1);
        -webkit-transform: scale(1);
        transform: scale(1);
        width: 30%;
    }

    to {
        -moz-transform: scale(1.2);
        -webkit-transform: scale(1.2);
        transform: scale(1);
        width: 33%;
    }
}



@keyframes boxpointbtani {
    from {
        -moz-transform: scale(1);
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    to {
        -moz-transform: scale(1.2);
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }
}



.boxbenefitcha1.active {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    /*background-position: 280px 0;*/
    background-image: linear-gradient(rgba(0, 0, 0, 0.527),rgba(0, 0, 0, 0.5)), url(../image/home/c1_1.png);
}

.boxbenefitcha2.active {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    /*background-position: 280px 0;*/
    background-image: linear-gradient(rgba(0, 0, 0, 0.527),rgba(0, 0, 0, 0.5)), url(../image/home/c2_1.png);
}

.boxbenefitcha3.active {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    /*background-position: 280px 0;*/
    background-image: linear-gradient(rgba(0, 0, 0, 0.527),rgba(0, 0, 0, 0.5)), url(../image/home/c3_1.png);
}

.boxbenefitcha4.active {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    /*background-position: -680px 0;*/
    background-image: linear-gradient(rgba(0, 0, 0, 0.527),rgba(0, 0, 0, 0.5)), url(../image/home/c4_1.png);
}



.boxbenefitcha1.off, .boxbenefitcha2.off, .boxbenefitcha3.off, .boxbenefitcha4.off, .boxbenefitcha5.off, .boxbenefitcha6.off {
    opacity: 0;
    -webkit-transform: scale(.5);
    transform: scale(.5);
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

.boxbenefitcha1-in, .boxbenefitcha2-in, .boxbenefitcha3-in, .boxbenefitcha4-in, .boxbenefitcha5-in, .boxbenefitcha6-in {
    display: none;
}



    .boxbenefitcha1-in.on {
        position: absolute;
        display: block;
        height: auto;
        z-index: 10000;
        top: 55%;
        background-image: linear-gradient(rgba(0, 0, 0, 0.527),rgba(0, 0, 0, 0.5));
        animation: careerOPA .3s ease-in;
    }


    .boxbenefitcha2-in.on {
        position: absolute;
        display: block;
        height: auto;
        z-index: 10000;
        top: 55%;
        background-image: linear-gradient(rgba(0, 0, 0, 0.527),rgba(0, 0, 0, 0.5));
        animation: careerOPA .3s ease-in;
    }


    .boxbenefitcha3-in.on {
        position: absolute;
        display: block;
        height: auto;
        z-index: 10000;
        top: 55%;
        background-image: linear-gradient(rgba(0, 0, 0, 0.527),rgba(0, 0, 0, 0.5));
        animation: careerOPA .3s ease-in;
    }

    .boxbenefitcha4-in.on {
        position: absolute;
        display: block;
        height: auto;
        z-index: 10000;
        top: 55%;
        background-image: linear-gradient(rgba(0, 0, 0, 0.527),rgba(0, 0, 0, 0.5));
        animation: careerOPA .3s ease-in;
    }


.imgboxbenefitcha-in {
}






.boxbenefitcha1-in.off, .boxbenefitcha2-in.off, .boxbenefitcha3-in.off, .boxbenefitcha4-in.off, .boxbenefitcha5-in.off, .boxbenefitcha6-in.off {
    opacity: 0;
    -webkit-transform: scale(.5);
    transform: scale(.5);
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

._close {
    cursor: pointer;
    font-size: 22px;
}

.gs1 {
    /*position: absolute; z-index:100002;
    top: 2%;
    left:87%;*/
}

@keyframes btzoom {
    0% {
    }

    100% {
    }
}


@keyframes careerOPA {
    0% {
        transform: translateX(-50%);
        opacity: 0.7;
    }

    100% {
        transform: translateX(0%);
        opacity: 1;
        top: 55%;
    }
}

@keyframes careerOPAL {
    0% {
        transform: translateX(50%);
        opacity: 0.7;
    }

    100% {
        transform: translateX(0%);
        opacity: 1;
        top: 55%;
    }
}

.box2inc {
    position: absolute;
    z-index: 100003;
    left: 43%;
    top: 2%;
}


.aronastamp {
    position: absolute;
    z-index: 100002;
    left: -4%;
    top: -5%;
}


#enterSection {
    z-index: 99999;
    letter-spacing: 0.2px;
}

    #enterSection .row {
        margin-bottom: 0.5em;
    }

#enterbtn {
    cursor: pointer;
}


.bgfor_modal {
    /*background-image: url('../image/home/bg_modal.png');
    background-repeat: repeat-y;
    background-size: cover;*/
    background-color: #324d6d;
    background-image: url('../image/home/goldline_decor.png');
    background-repeat: repeat-x;
}

.bgfor_modal102024 {
    
    background-color: #474849;
    background-image: url('../image/home/line.png');
    background-repeat: repeat-x;
}

.bgfor_modal102024_c {
    
    background-color: #324d6d;
    background-image: url('../image/home/line.png');
    background-repeat: repeat-x;
}

.bgfor_modaltr {
    background: url(../image/0_bg.png);
    background-repeat: repeat;
}

.modal-footer {
    border-top: 0px !important;
}

/*
            .modal-open {
            overflow-y: scroll !important;
        }
        */

.modal-footer {
    flex-direction: column;
    align-items: center;
}

.numberBadge {
    width: 26px;
    height: 26px;
    line-height: 20px;
    border-radius: 50%;
    text-align: center;
    border: 2px solid #666;
    display: inline-block;
}

.modal-header {
    border: none;
}


.btn-sound {
    float: right;
    position: fixed;
    bottom: 20px;
    display: block;
    width: 87px;
    z-index: 9999;
    height: 26px;
    right: 15px;
}

    .btn-sound a {
        display: block;
        width: 100%;
        height: 100%;
    }

    .btn-sound.on a {
        background: url(../image/home/menu_sound_on.png) no-repeat left top;
    }

        .btn-sound.on a:hover {
            background-position: left bottom;
        }

    .btn-sound a:hover {
        background-position: left bottom;
    }


    .btn-sound.off a {
        background: url(../image/home/menu_sound_off.png) no-repeat left top;
    }

        .btn-sound.off a:hover {
            background-position: left bottom;
        }


.character2 {
    /*width: 60%;*/
    position: absolute;
    z-index: 107;
    margin-top: 3em;
    /*margin-left: 12%;*/
    margin-left: 8%;
    overflow-x: hidden;
    overflow: hidden;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    animation: addcard .3s linear;
}

.characterhalo {
    /*width: 60%;*/
    position: absolute;
    z-index: 107;
    animation: brightnessanic_200 4s infinite linear;
    margin-top: 3em;
    /*margin-left: 12%;*/
    margin-left: 8%;
    overflow-x: hidden;
    overflow: hidden;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}




.rowsdownload {
    position: absolute;
    z-index: 9999;
    bottom: 3%;
    right: 6%;
    padding: 1em;
}

.rowdownloadbg {
    background: url(../image/bg_t.png);
    background-repeat: repeat;


}

.rowscroll {
    position: absolute;
    z-index: 9999;
    top: 92%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.rowbubble {
    position: absolute;
    z-index: 9999;
    top: 188px;
    left: 73%;
    opacity: 0.95;
    /*transform: translate(-50%, -50%);*/
}

.bubble {
    position: relative;
    line-height: 20px;
    width: 250px;
    background: #fff;
    border-radius: 30px;
    padding: 10px;
    text-align: center;
    color: #000;
}

.bubble-bottom-left:before {
    content: "";
    width: 0px;
    height: 0px;
    position: absolute;
    border-left: 24px solid #fff;
    border-right: 12px solid transparent;
    border-top: 12px solid #fff;
    border-bottom: 20px solid transparent;
    left: 32px;
    bottom: -24px;
}



.boxscroll {
    display: block;
    -webkit-transition: all .8s ease-in-out;
    transition: all .8s ease-in-out;
}

    .boxscroll.off {
        display: none;
        -webkit-transition: all .8s ease-in-out;
        transition: all .8s ease-in-out;
    }


.boxscroll-left {
    opacity: 1;
    right: 6%;
    -webkit-transition: all .8s ease;
    transition: all .8s ease;
}

    .boxscroll-left.off {
        opacity: 0;
        right: -20%;
        overflow: hidden;
        transition: all .75s ease;
    }




.boxchafea {
    display: none;
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

    .boxchafea.on {
        display: block;
        -webkit-transition: all 0.5s ease-in-out;
        transition: all 0.5s ease-in-out;
    }



.boxchafea2 {
    display: none;
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

    .boxchafea2.on {
        display: block;
        -webkit-transition: all 0.5s ease-in-out;
        transition: all 0.5s ease-in-out;
    }

.boxchafea3 {
    display: none;
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

    .boxchafea3.on {
        display: block;
        -webkit-transition: all 0.5s ease-in-out;
        transition: all 0.5s ease-in-out;
    }

.boxchafea4 {
    display: none;
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

    .boxchafea4.on {
        display: block;
        -webkit-transition: all 0.5s ease-in-out;
        transition: all 0.5s ease-in-out;
    }

.boxscrolltop {
    display: none;
    -webkit-transition: all 1.5s ease-in-out;
    transition: all 1.5s ease-in-out;
}

    .boxscrolltop.on {
        display: block;
        -webkit-transition: all 1.5s ease-in-out;
        transition: all 1.5s ease-in-out;
    }



#cardBg, #cardDeco, #cardChara, #cardSticker {
    position: absolute;
    width: 100%;
    height: 100%;
}

#cardBg {
    z-index: 10;
}

#cardDeco {
    z-index: 20;
}

#cardChara {
    z-index: 30;
}

#cardSticker {
    z-index: 40;
}



#cardContainer {
    display: inline-block;
    position: relative;
    width: 100%;
    text-align: left;
}

#cardHeight {
    margin-top: 52.33%;
}

#card {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: silver; /* show me! */
}


.boxrelationdata {
    background: url('../image/home/relation.png');
    background-repeat: no-repeat;
    position: absolute;
    z-index: 50;
    height: 100%;
    top: 11%;
    background-size: contain;
}

.boxinfocarddata {
    background: url('../image/home/card_info.png');
    background-size: cover;
    position: absolute;
    z-index: 50;
    height: 100%;
}


.textgold {
    color: #d2b992;
}


.bossimg {
    height: 645px;
}


.raidendimg {
    width: 100%;
    height: auto;
    text-align: right;
}


.sumpointtext {
    color: #ffffff;
    font-size: 2em;
}

.boxpana {
    position: relative;
    left: 90%;
    transform: translateX(-50%);
    z-index: 1001;
}





.fonthistoryitle {
    font-size: 1.5rem;
    margin-top: 0;
    margin-bottom: .5rem;
    font-weight: 500;
    line-height: 1.2;
}


.fonthistorylist {
    font-size: 1.25rem;
    margin-top: 0;
    margin-bottom: .5rem;
    font-weight: 500;
    line-height: 1.2;
}



.cdimg {
    top: -100%;
    left: 2%;
}


/*  animation: opening-cadena 1s ease forwards;*/
@media screen and (max-width: 390px) {


    .cdimg {
        top: 3%;
        width: 127%;
        left: -12%;
    }


    .fonthistoryitle {
        font-size: 1.25rem;
    }


    .fonthistorylist {
        font-size: 1rem;
    }



    .boxpana {
        left: 122%;
    }

    .sumpointtext {
        font-size: 1.5em;
    }

    .boxchartmenu.active {
        border: .3em solid #ff99c4 !important;
        -webkit-transition: all 0.3s ease-out;
        transition: all 0.3s ease-out;
    }

    .boxpointboss1-no, .boxpointboss2-no, .boxpointboss3-no, .boxpointboss4-no, .boxpointboss5-no {
        height: 107px;
    }

    .boxgsec3 {
        margin-top: -5rem !important;
    }

    .rowbubble {
        position: absolute;
        z-index: 9999;
        top: 9em;
        left: 53%;
        /*transform: translate(-50%, -50%);*/
    }

    .bubble {
        width: 160px;
    }


    h6 {
        font-size: 12px !important;
        line-height: 12px;
    }


    .nxlogo {
        top: -2em;
        max-width: 66%;
        position: relative;
    }


    .character2, .characterhalo {
        width: 170%;
        margin-top: 8em;
        left: -75%;
    }

    .charact {
        margin-top: 11em;
        max-width: 80%;
    }

    .background-imagess2 {
        min-height: 725px !important;
    }

    .boxgsec2 {
        min-height: 22em;
        top: -5em;
    }

    .boxgsec5 {
        min-height: 800px;
    }

    .mov .bgmov {
        top: 24%;
    }




    .topnav-right {
        float: unset;
    }


    .topnav a:not(:first-child) {
        display: none;
        transition: all 1s ease-out;
    }

    .topnav a.icon {
        float: right;
        display: block;
        transition: all 1s ease-out;
    }

    .topnav.responsive {
        position: fixed;
        transition: all 1s ease-out;
    }

        .topnav.responsive a.icon {
            transition: all 1s ease-out;
            position: absolute;
            right: 0;
            top: 0;
        }

        .topnav.responsive a {
            float: none;
            display: block;
            text-align: left;
            transition: all 0.3s;
        }

    .texta_l {
        text-align: right !important;
    }




    .img-fluidbt {
        max-width: 95%;
    }
}


@media screen and (min-width:392px) and (max-width:520px) {



    .cdimg {
        top: 3%;
        width: 127%;
        left: -12%;
    }

    .fonthistoryitle {
        font-size: 1.25rem;
    }


    .fonthistorylist {
        font-size: 1rem;
    }


    .boxpana {
        left: 122%;
    }

    .sumpointtext {
        font-size: 1.5em;
    }

    .boxchartmenu.active {
        border: .3em solid #ff99c4 !important;
        -webkit-transition: all 0.3s ease-out;
        transition: all 0.3s ease-out;
    }

    .boxpointboss1-no, .boxpointboss2-no, .boxpointboss3-no, .boxpointboss4-no, .boxpointboss5-no {
        height: 107px;
    }

    .boxgsec3 {
        margin-top: -5rem !important;
    }

    .rowbubble {
        position: absolute;
        z-index: 9999;
        top: 12em;
        left: 56%;
        /*transform: translate(-50%, -50%);*/
    }


    .bubble {
        width: 160px;
    }



    h6 {
        font-size: 12px !important;
        line-height: 12px;
    }


    .nxlogo {
        top: -2em;
        max-width: 66%;
        position: relative;
    }


    .character2, .characterhalo {
        width: 169%;
        margin-top: 8em;
        left: -75%;
    }

    .charact {
        margin-top: 11em;
        max-width: 80%;
    }

    .background-imagess2 {
        min-height: 725px !important;
    }

    .boxgsec2 {
        min-height: 22em;
        top: -5em;
    }

    .boxgsec5 {
        min-height: 800px;
    }

    .mov .bgmov {
        top: 24%;
    }




    .topnav-right {
        float: unset;
    }


    .topnav a:not(:first-child) {
        display: none;
        transition: all 1s ease-out;
    }

    .topnav a.icon {
        float: right;
        display: block;
        transition: all 1s ease-out;
    }

    .topnav.responsive {
        position: fixed;
        transition: all 1s ease-out;
    }

        .topnav.responsive a.icon {
            transition: all 1s ease-out;
            position: absolute;
            right: 0;
            top: 0;
        }

        .topnav.responsive a {
            float: none;
            display: block;
            text-align: left;
            transition: all 0.3s;
        }

    .texta_l {
        text-align: right !important;
    }




    .img-fluidbt {
        max-width: 95%;
    }
}




@media screen and (min-width:521px) and (max-width:599px) {



    .cdimg {
        top: 3%;
        width: 127%;
        left: -12%;
    }

    .fonthistoryitle {
        font-size: 1.25rem;
    }

    .fonthistorylist {
        font-size: 1rem;
    }



    .boxpana {
        left: 122%;
    }

    .sumpointtext {
        font-size: 1.5em;
    }


    .boxchartmenu.active {
        border: .3em solid #ff99c4 !important;
        -webkit-transition: all 0.3s ease-out;
        transition: all 0.3s ease-out;
    }

    .rowbubble {
        position: absolute;
        z-index: 9999;
        top: 225px;
        left: 56%;
        /*transform: translate(-50%, -50%);*/
    }


    .bubble {
        width: 160px;
    }

    h6 {
        font-size: 12px !important;
        line-height: 12px;
    }

    .nxlogo {
        top: -2em;
        max-width: 66%;
        position: relative;
    }


    .character2, .characterhalo {
        width: 180%;
        margin-top: 8em;
        left: -78%;
    }

    .charact {
        margin-top: 11em;
        max-width: 80%;
    }

    .background-imagess2 {
        min-height: 725px !important;
    }

    .boxgsec2 {
        min-height: 22em;
    }

    .boxgsec5 {
        min-height: 800px;
    }

    .mov .bgmov {
        top: 24%;
    }




    .topnav-right {
        float: unset;
    }


    .topnav a:not(:first-child) {
        display: none;
        transition: all 1s ease-out;
    }

    .topnav a.icon {
        float: right;
        display: block;
        transition: all 1s ease-out;
    }

    .topnav.responsive {
        position: fixed;
        transition: all 1s ease-out;
    }

        .topnav.responsive a.icon {
            transition: all 1s ease-out;
            position: absolute;
            right: 0;
            top: 0;
        }

        .topnav.responsive a {
            float: none;
            display: block;
            text-align: left;
            transition: all 0.3s;
        }



    .texta_l {
        text-align: right !important;
    }


    .img-fluidbt {
        max-width: 95%;
    }
}



@media screen and (min-width:600px) and (max-width:767px) {

    .cdimg {
        top: 3%;
        width: 127%;
        left: -12%;
    }

    .fonthistoryitle {
        font-size: 1.25rem;
    }

    .fonthistorylist {
        font-size: 1rem;
    }


    .boxpana {
        left: 122%;
    }

    .sumpointtext {
        font-size: 1.5em;
    }


    .boxchartmenu.active {
        border: .3em solid #ff99c4 !important;
        -webkit-transition: all 0.3s ease-out;
        transition: all 0.3s ease-out;
    }

    .rowbubble {
        position: absolute;
        z-index: 9999;
        top: 250px;
        left: 63%;
        /*transform: translate(-50%, -50%);*/
    }

    .bubble {
        width: 200px;
        padding: 15px;
    }

    h6 {
        font-size: 12px !important;
        line-height: 12px;
    }


    .nxlogo {
        top: -2em;
        max-width: 66%;
        position: relative;
    }


    .character2, .characterhalo {
        width: 140%;
        margin-top: 12em;
        left: -62%;
    }


    .charact {
        margin-top: 11em;
    }

    .background-imagess2 {
        min-height: 725px !important;
    }

    .boxgsec2 {
        min-height: 450px;
    }

    .boxgsec5 {
        min-height: 800px;
    }

    .mov .bgmov {
        top: 24%;
    }




    .topnav-right {
        float: unset;
    }


    .topnav a:not(:first-child) {
        display: none;
        transition: all 1s ease-out;
    }

    .topnav a.icon {
        float: right;
        display: block;
        transition: all 1s ease-out;
    }

    .topnav.responsive {
        position: fixed;
        transition: all 1s ease-out;
    }

        .topnav.responsive a.icon {
            transition: all 1s ease-out;
            position: absolute;
            right: 0;
            top: 0;
        }

        .topnav.responsive a {
            float: none;
            display: block;
            text-align: left;
            transition: all 0.3s;
        }


    .texta_l {
        text-align: right !important;
    }



    .img-fluidbt {
        max-width: 95%;
    }
}





@media screen and (min-width: 768px) and (max-width:850px) {



    .cdimg {
        top: 3%;
        width: 127%;
        left: -12%;
    }


    .fonthistoryitle {
        font-size: 1.25rem;
    }

    .fonthistorylist {
        font-size: 1rem;
    }


    .boxpana {
        left: 122%;
    }

    .sumpointtext {
        font-size: 1.5em;
    }


    .boxchartmenu.active {
        border: .3em solid #ff99c4 !important;
        -webkit-transition: all 0.3s ease-out;
        transition: all 0.3s ease-out;
    }


    .rowbubble {
        position: absolute;
        z-index: 9999;
        top: 290px;
        left: 71%;
        /*transform: translate(-50%, -50%);*/
    }

    .bubble {
        width: 200px;
    }

    h6 {
        font-size: 14px;
    }


    .nxlogo {
        top: -2em;
        max-width: 55%;
        position: relative;
    }

    .character2, .characterhalo {
        width: 128%;
        margin-top: 12em;
        left: -43%;
    }



    .charact {
        margin-top: 20em;
        max-width: 73%;
    }

    .background-imagess2 {
        min-height: 725px !important;
    }

    .boxgsec2 {
        min-height: 450px;
    }

    .boxgsec5 {
        min-height: 800px;
    }

    .mov .bgmov {
        top: 24%;
    }




    .topnav-right {
        float: unset;
    }


    .topnav a:not(:first-child) {
        display: none;
        transition: all 1s ease-out;
    }

    .topnav a.icon {
        float: right;
        display: block;
        transition: all 1s ease-out;
    }

    .topnav.responsive {
        position: fixed;
        transition: all 1s ease-out;
    }

        .topnav.responsive a.icon {
            transition: all 1s ease-out;
            position: absolute;
            right: 0;
            top: 0;
        }

        .topnav.responsive a {
            float: none;
            display: block;
            text-align: left;
            transition: all 0.3s;
        }


    .texta_l {
        text-align: right !important;
    }



    .img-fluidbt {
        max-width: 95%;
    }
}


@media screen and (min-width: 851px) and (max-width: 994px) {

    .cdimg {
        left: -20%;
        max-width: 111%;
        top: -69%;
    }


    .fonthistoryitle {
        font-size: 1.25rem;
    }

    .fonthistorylist {
        font-size: 1rem;
    }


    .boxpana {
        left: 122%;
    }

    .boxchartmenu.active {
        border: .3em solid #ff99c4 !important;
        -webkit-transition: all 0.3s ease-out;
        transition: all 0.3s ease-out;
    }

    .rowbubble {
        position: absolute;
        z-index: 9999;
        top: 19em;
        left: 65%;
        /*transform: translate(-50%, -50%);*/
    }

    .bubble {
        width: 200px;
    }

    h6 {
        font-size: 14px;
    }


    .nxlogo {
        top: -2em;
        max-width: 65%;
        position: relative;
    }


    .character2, .characterhalo {
        width: 100%;
        margin-top: 12em;
        left: -37%;
        overflow-x: hidden;
    }


    .charact {
        margin-top: 9em;
        max-width: 73%;
    }

    .background-imagess2 {
        min-height: 725px !important;
    }

    .boxgsec2 {
        min-height: 450px;
    }

    .boxgsec5 {
        min-height: 800px;
    }

    .mov .bgmov {
        top: 24%;
    }




    .topnav-right {
        float: unset;
    }


    .topnav a:not(:first-child) {
        display: none;
        transition: all 1s ease-out;
    }

    .topnav a.icon {
        float: right;
        display: block;
        transition: all 1s ease-out;
    }

    .topnav.responsive {
        position: fixed;
        transition: all 1s ease-out;
    }

        .topnav.responsive a.icon {
            transition: all 1s ease-out;
            position: absolute;
            right: 0;
            top: 0;
        }

        .topnav.responsive a {
            float: none;
            display: block;
            text-align: left;
            transition: all 0.3s;
        }



    .texta_l {
        text-align: right !important;
    }


    .img-fluidbt {
        max-width: 95%;
    }
}



@media screen and (min-width:995px) and (max-width:1279px) {



    .cdimg {
        left: -20%;
        max-width: 111%;
        top: -69%;
    }



    .fonthistoryitle {
        font-size: 1.25rem;
    }

    .fonthistorylist {
        font-size: 1rem;
    }

    .boxpana {
        left: 101%;
    }

    .boxchartmenu.active {
        border: .3em solid #ff99c4 !important;
        -webkit-transition: all 0.3s ease-out;
        transition: all 0.3s ease-out;
    }

    .rowbubble {
        position: absolute;
        z-index: 9999;
        top: 12em;
        left: 77%;
        /*transform: translate(-50%, -50%);*/
    }

    .bubble {
        width: 200px;
    }

    h6 {
        font-size: 14px;
    }


    .nxlogo {
        top: -2em;
        max-width: 140%;
        position: relative;
    }


    .character2, .characterhalo {
        width: 100%;
        left: -9%;
        overflow-x: hidden;
    }


    .charact {
        margin-top: 3em;
        max-width: 100%;
    }

    .background-imagess2 {
        min-height: 725px !important;
    }

    .boxgsec2 {
        min-height: 450px;
    }

    .boxgsec5 {
        min-height: 800px;
    }

    .mov .bgmov {
        top: 24%;
    }




    .topnav-right {
        float: unset;
    }


    .topnav a:not(:first-child) {
        display: none;
        transition: all 1s ease-out;
    }

    .topnav a.icon {
        float: right;
        display: block;
        transition: all 1s ease-out;
    }

    .topnav.responsive {
        position: fixed;
        transition: all 1s ease-out;
    }

        .topnav.responsive a.icon {
            transition: all 1s ease-out;
            position: absolute;
            right: 0;
            top: 0;
        }

        .topnav.responsive a {
            float: none;
            display: block;
            text-align: left;
            transition: all 0.3s;
        }


    .texta_l {
        text-align: right !important;
    }



    .img-fluidbt {
        max-width: 100%;
    }
}



@media screen and (min-width:1280px) and (max-width:1429px) {


    .cdimg {
        top: -58%;
        left: -23%;
        max-width: 85%;
    }

    .rowbubble {
        position: absolute;
        z-index: 9999;
        top: 225px;
        left: 76%;
        /*transform: translate(-50%, -50%);*/
    }

    .bubble {
        width: 200px;
    }

    h6 {
        font-size: 14px;
    }


    .nxlogo {
        top: -2em;
        max-width: 140%;
        position: relative;
    }


    .character2, .characterhalo {
        left: -15%;
    }


    .charact {
        margin-top: 3em;
        max-width: 145%;
    }

    .background-imagess2 {
        min-height: 725px !important;
    }

    .boxgsec2 {
        min-height: 450px;
    }

    .boxgsec5 {
        min-height: 800px;
    }

    .mov .bgmov {
        top: 24%;
    }




    .topnav-right {
        float: unset;
    }


    .topnav a:not(:first-child) {
        display: none;
        transition: all 1s ease-out;
    }

    .topnav a.icon {
        float: right;
        display: block;
        transition: all 1s ease-out;
    }

    .topnav.responsive {
        position: fixed;
        transition: all 1s ease-out;
    }

        .topnav.responsive a.icon {
            transition: all 1s ease-out;
            position: absolute;
            right: 0;
            top: 0;
        }

        .topnav.responsive a {
            float: none;
            display: block;
            text-align: left;
            transition: all 0.3s;
        }


    .texta_l {
        text-align: right !important;
    }



    .img-fluidbt {
        max-width: 100%;
    }
}



@media screen and (min-width:1280px) and (max-width:1600px) {

    .cdimg {
        top: -58%;
        left: -23%;
        max-width: 85%;
    }


    .rowbubble {
        position: absolute;
        z-index: 9999;
        top: 170px;
        left: 78%;
        /*transform: translate(-50%, -50%);*/
    }

    .bubble {
        width: 220px;
    }


    .nxlogo {
        top: -2em;
        max-width: 140%;
        position: relative;
    }


    .character2, .characterhalo {
        left: 6%;
    }


    .charact {
        margin-top: 3em;
        max-width: 115%;
    }

    .background-imagess2 {
        min-height: 725px !important;
    }

    .boxgsec2 {
        min-height: 450px;
    }

    .boxgsec5 {
        min-height: 800px;
    }

    .mov .bgmov {
        top: 24%;
    }


    .img-fluidbt {
        max-width: 100%;
    }
}


@media screen and (min-width:1601px) and (max-width:1919px) {


    .cdimg {
        top: -78%;
        left: 4%;
        max-width: 82%;
    }

    .rowbubble {
        position: absolute;
        z-index: 9999;
        top: 170px;
        left: 78%;
        /*transform: translate(-50%, -50%);*/
    }

    .bubble {
        width: 220px;
    }


    .nxlogo {
        top: -2em;
        max-width: 140%;
        position: relative;
    }


    .character2, .characterhalo {
        left: 5%;
    }


    .charact {
        margin-top: 3em;
        max-width: 135%;
    }

    .background-imagess2 {
        min-height: 725px !important;
    }

    .boxgsec2 {
        min-height: 450px;
    }

    .boxgsec5 {
        min-height: 800px;
    }

    .mov .bgmov {
        top: 24%;
    }


    .img-fluidbt {
        max-width: 100%;
    }
}




.text-header {
    font-size: 60px;
}

.text-q {
    font-size: 22px;
    font-weight: bold;
}

.flex-grow {
    flex: 1;
}



.video-loader {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -15px;
    margin-left: -15px;
    width: 30px;
    height: 30px;
}





.videowrapper {
    float: none;
    clear: both;
    width: 100%;
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 25px;
    height: 0;
}

    .videowrapper iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        margin-left: 5px;
        margin-right: 5px;
    }



@media screen and (max-device-width: 1000px) and (orientation:landscape) {
}


/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
    .index1 {
        font-size: 4em;
    }

    .index2 {
        font-size: 4em;
        padding-top: 0 !important;
    }

    .index3 {
        font-size: 4em;
        padding-top: 0 !important;
    }

    .mov {
        height: 700px;
    }

    .mainhome {
        height: 500px;
    }

    .footerhome {
        position: relative;
    }
}


/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
    /* Add your styles for devices with a maximum width of 768 */

}



.boxsection2 {
    background: #bee7ef url('../images/home/114426_BG_Partgg.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top;
}


.img-scroll {
    position: absolute;
    width: 100px;
    height: 100px;
    z-index: 110;
    margin: 0 auto;
    -ms-transform: rotate(90deg); /* IE 9 */
    -webkit-transform: rotate(90deg); /* Safari */
    -ms-animation: rotate(90deg);
    transform: rotate(90deg);
    top: -2em;
}





.m-home-bg__particleclass1 {
    position: absolute;
    overflow: hidden;
    animation: rotate-animation 40s infinite ease-in-out;
}

.photo-gallery {
    padding: 20px;
    margin-bottom: 340px;
}

    .photo-gallery p {
        color: #7d8285;
    }

    .photo-gallery h2 {
        font-weight: bold;
        margin-bottom: 40px;
        padding-top: 40px;
        color: inherit;
    }

@media (max-width:767px) {
    .photo-gallery h2 {
        margin-bottom: 25px;
        padding-top: 25px;
        font-size: 24px;
    }
}

.photo-gallery .intro {
    font-size: 16px;
    max-width: 500px;
    margin: 0 auto 40px;
}

    .photo-gallery .intro p {
        margin-bottom: 0;
    }

.photo-gallery .photos {
    padding-bottom: 20px;
}

.photo-gallery .item {
    padding-bottom: 1em;
}

.m-home-bg__particleclass3 {
    position: absolute;
    animation: d1 3s infinite linear;
}

.charact {
    animation: brightnessani4 4s infinite linear;
}

.bannerrebt_crate {
    animation: brightnessani4 3s infinite linear;
}

@keyframes brightness_recrate {
    0% {
        filter: brightness(1);
        transform: scale(1.02);
        -webkit-transform: scale(1.02);
    }

    50% {
        filter: brightness(1.2);
        transform: scale(1);
        -webkit-transform: scale(1);
    }

    to {
        filter: brightness(1);
        transform: scale(1.02);
        -webkit-transform: scale(1.02);
    }
}



@keyframes brightnessani4 {
    0% {
        filter: contrast(100%);
    }

    50% {
        filter: contrast(150%);
    }

    to {
        filter: contrast(100%);
    }
}



@keyframes brightnessanic_200 {
    0% {
        filter: contrast(70%);
        overflow: hidden;
        /*transform: rotate(1turn) translateX(0.2%) rotate(-1turn);*/
    }

    50% {
        filter: contrast(200%);
        overflow: hidden;
    }

    to {
        filter: contrast(70%);
        overflow: hidden;
        /*transform: rotate(0deg) translateX(0.2%) rotate(0deg);*/
    }
}

@keyframes brightnessani2 {
    0% {
        filter: brightness(1.5);
    }

    50% {
        filter: brightness(.7);
    }

    to {
        filter: brightness(1.5);
    }
}


@keyframes brightnessani {
    0% {
        transform: scale(1.1);
        -webkit-transform: scale(1.1);
        filter: brightness(3);
    }

    50% {
        transform: scale(1);
        -webkit-transform: scale(1);
        filter: brightness(1);
    }

    to {
        transform: scale(1.1);
        -webkit-transform: scale(1.1);
        filter: brightness(3);
    }
}



@keyframes brightboxrender {
    0% {
        position: absolute;
        transform: scale(1.1);
        -webkit-transform: scale(1.1);
    }

    50% {
        position: absolute;
        transform: scale(1);
        -webkit-transform: scale(1);
    }

    to {
        position: absolute;
        transform: scale(1.1);
        -webkit-transform: scale(1.1);
    }
}


@keyframes rotate-mail-sending {
    0% {
        transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
    }

    50% {
        transform: rotate(180deg);
        -webkit-transform: rotate(180deg);
    }

    100% {
        transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
    }
}


@keyframes brightnessanistart {
    0% {
        filter: brightness(0);
    }

    to {
        filter: brightness(1);
    }
}


@keyframes rotate-animation {
    0% {
        transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
    }

    50% {
        transform: rotate(180deg);
        -webkit-transform: rotate(180deg);
    }

    100% {
        transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
    }
}

@keyframes d1 {
    0% {
        opacity: 0.5;
    }

    50% {
        opacity: 1;
    }

    to {
        opacity: 0.5;
    }
}



@keyframes d2 {
    0% {
        filter: brightness(1);
    }

    50% {
        filter: brightness(2);
    }

    to {
        filter: brightness(1);
    }
}



.m-home-bg__particleskill1 {
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    position: absolute;
    animation: d3 6s infinite linear;
}

.m-home-bg__particleskill2 {
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    position: absolute;
    animation: d3 10s infinite linear;
}


@keyframes d3 {
    0% {
        transform: rotate(0deg) translateX(1%) rotate(0deg);
    }


    to {
        transform: rotate(1turn) translateX(1%) rotate(-1turn);
    }
}

.star-03, .star-03:before, .star-03:after {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: block;
    margin: 0;
    padding: 0;
    z-index: 103;
}


.star-03 {
    transform-style: preserve-3d;
}

    .star-03::before,
    .star-03::after {
        background: url(../images/home/bg_star.png) no-repeat 0 0;
        content: "";
        -webkit-animation: 10s warp linear infinite;
        animation: 10s warp linear infinite;
        visibility: visible;
        background-position: 50% 50%;
    }

    .star-03::before {
        background-position: 50% 45%;
        animation-delay: -12s;
    }

    .star-03::after {
        background-position: 55% 45%;
        animation-delay: -15s;
    }

@keyframes warp {
    0% {
        -webkit-transform: perspective(300px) translateZ(-300px);
        transform: perspective(300px) translateZ(-300px);
        opacity: 1;
    }

    100% {
        -webkit-transform: perspective(300px) translateZ(300px);
        transform: perspective(300px) translateZ(300px);
        opacity: 0.7;
    }
}

.flame_wrap {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
}

.flame {
    position: absolute;
    background: -webkit-radial-gradient(#f9d322, #e90231);
    background: radial-gradient(#f9d322, #e90231);
    box-shadow: 0 0 7px #e90231;
}

    .flame:nth-child(1) {
        width: 1px;
        height: 1px;
        -webkit-animation: anim 1s infinite linear 0.7s, anim-1 4s infinite ease-in 6s;
        animation: anim 1s infinite linear 0.7s, anim-1 4s infinite ease-in 6s;
        -webkit-transform: translate3d(3vw, 100vh, 0) rotate(90deg) rotateY(2deg) rotateX(15deg);
        transform: translate3d(3vw, 100vh, 0) rotate(90deg) rotateY(2deg) rotateX(15deg);
    }

@-webkit-keyframes anim-1 {
    100% {
        -webkit-transform: translate3d(74vw, 0vh, 0) scale(0.7) rotate(134deg) rotateY(52deg) rotateX(104deg) rotateZ(171deg);
        transform: translate3d(74vw, 0vh, 0) scale(0.7) rotate(134deg) rotateY(52deg) rotateX(104deg) rotateZ(171deg);
    }
}

@keyframes anim-1 {
    100% {
        -webkit-transform: translate3d(74vw, 0vh, 0) scale(0.7) rotate(134deg) rotateY(52deg) rotateX(104deg) rotateZ(171deg);
        transform: translate3d(74vw, 0vh, 0) scale(0.7) rotate(134deg) rotateY(52deg) rotateX(104deg) rotateZ(171deg);
    }
}

.flame:nth-child(2) {
    width: 12px;
    height: 2px;
    border-radius: 40%;
    -webkit-animation: anim 1s infinite linear 1s, anim-2 4s infinite ease-in 9s;
    animation: anim 1s infinite linear 1s, anim-2 4s infinite ease-in 9s;
    -webkit-transform: translate3d(96vw, 100vh, 0) rotate(60deg) rotateY(74deg) rotateX(138deg);
    transform: translate3d(96vw, 100vh, 0) rotate(60deg) rotateY(74deg) rotateX(138deg);
    -webkit-filter: blur(2px);
    filter: blur(2px);
}

@-webkit-keyframes anim-2 {
    100% {
        -webkit-transform: translate3d(75vw, 0vh, 0) scale(0.7) rotate(138deg) rotateY(161deg) rotateX(147deg) rotateZ(111deg);
        transform: translate3d(75vw, 0vh, 0) scale(0.7) rotate(138deg) rotateY(161deg) rotateX(147deg) rotateZ(111deg);
    }
}

@keyframes anim-2 {
    100% {
        -webkit-transform: translate3d(75vw, 0vh, 0) scale(0.7) rotate(138deg) rotateY(161deg) rotateX(147deg) rotateZ(111deg);
        transform: translate3d(75vw, 0vh, 0) scale(0.7) rotate(138deg) rotateY(161deg) rotateX(147deg) rotateZ(111deg);
    }
}

.flame:nth-child(3) {
    width: 2px;
    height: 4px;
    -webkit-animation: anim 1s infinite linear 0.8s, anim-3 3s infinite ease-in 4s;
    animation: anim 1s infinite linear 0.8s, anim-3 3s infinite ease-in 4s;
    -webkit-transform: translate3d(78vw, 100vh, 0) rotate(116deg) rotateY(11deg) rotateX(79deg);
    transform: translate3d(78vw, 100vh, 0) rotate(116deg) rotateY(11deg) rotateX(79deg);
}

@-webkit-keyframes anim-3 {
    100% {
        -webkit-transform: translate3d(6vw, 0vh, 0) scale(0.7) rotate(51deg) rotateY(92deg) rotateX(14deg) rotateZ(138deg);
        transform: translate3d(6vw, 0vh, 0) scale(0.7) rotate(51deg) rotateY(92deg) rotateX(14deg) rotateZ(138deg);
    }
}

@keyframes anim-3 {
    100% {
        -webkit-transform: translate3d(6vw, 0vh, 0) scale(0.7) rotate(51deg) rotateY(92deg) rotateX(14deg) rotateZ(138deg);
        transform: translate3d(6vw, 0vh, 0) scale(0.7) rotate(51deg) rotateY(92deg) rotateX(14deg) rotateZ(138deg);
    }
}

.flame:nth-child(4) {
    width: 5px;
    height: 4px;
    -webkit-animation: anim 1s infinite linear 0.6s, anim-4 4s infinite ease-in 7s;
    animation: anim 1s infinite linear 0.6s, anim-4 4s infinite ease-in 7s;
    -webkit-transform: translate3d(82vw, 100vh, 0) rotate(152deg) rotateY(137deg) rotateX(13deg);
    transform: translate3d(82vw, 100vh, 0) rotate(152deg) rotateY(137deg) rotateX(13deg);
}

@-webkit-keyframes anim-4 {
    100% {
        -webkit-transform: translate3d(46vw, 0vh, 0) scale(0.7) rotate(130deg) rotateY(88deg) rotateX(61deg) rotateZ(24deg);
        transform: translate3d(46vw, 0vh, 0) scale(0.7) rotate(130deg) rotateY(88deg) rotateX(61deg) rotateZ(24deg);
    }
}

@keyframes anim-4 {
    100% {
        -webkit-transform: translate3d(46vw, 0vh, 0) scale(0.7) rotate(130deg) rotateY(88deg) rotateX(61deg) rotateZ(24deg);
        transform: translate3d(46vw, 0vh, 0) scale(0.7) rotate(130deg) rotateY(88deg) rotateX(61deg) rotateZ(24deg);
    }
}

.flame:nth-child(5) {
    width: 1px;
    height: 8px;
    -webkit-animation: anim 1s infinite linear 0.8s, anim-5 3s infinite ease-in 4s;
    animation: anim 1s infinite linear 0.8s, anim-5 3s infinite ease-in 4s;
    -webkit-transform: translate3d(76vw, 100vh, 0) rotate(145deg) rotateY(125deg) rotateX(28deg);
    transform: translate3d(76vw, 100vh, 0) rotate(145deg) rotateY(125deg) rotateX(28deg);
}

@-webkit-keyframes anim-5 {
    100% {
        -webkit-transform: translate3d(41vw, 0vh, 0) scale(0.7) rotate(51deg) rotateY(32deg) rotateX(22deg) rotateZ(21deg);
        transform: translate3d(41vw, 0vh, 0) scale(0.7) rotate(51deg) rotateY(32deg) rotateX(22deg) rotateZ(21deg);
    }
}

@keyframes anim-5 {
    100% {
        -webkit-transform: translate3d(41vw, 0vh, 0) scale(0.7) rotate(51deg) rotateY(32deg) rotateX(22deg) rotateZ(21deg);
        transform: translate3d(41vw, 0vh, 0) scale(0.7) rotate(51deg) rotateY(32deg) rotateX(22deg) rotateZ(21deg);
    }
}

.flame:nth-child(6) {
    width: 7px;
    height: 3px;
    -webkit-animation: anim 1s infinite linear 0.8s, anim-6 2.3s infinite ease-in 1s;
    animation: anim 1s infinite linear 0.8s, anim-6 2.3s infinite ease-in 1s;
    -webkit-transform: translate3d(98vw, 100vh, 0) rotate(162deg) rotateY(115deg) rotateX(11deg);
    transform: translate3d(98vw, 100vh, 0) rotate(162deg) rotateY(115deg) rotateX(11deg);
}

@-webkit-keyframes anim-6 {
    100% {
        -webkit-transform: translate3d(75vw, 0vh, 0) scale(0.7) rotate(65deg) rotateY(99deg) rotateX(48deg) rotateZ(175deg);
        transform: translate3d(75vw, 0vh, 0) scale(0.7) rotate(65deg) rotateY(99deg) rotateX(48deg) rotateZ(175deg);
    }
}

@keyframes anim-6 {
    100% {
        -webkit-transform: translate3d(75vw, 0vh, 0) scale(0.7) rotate(65deg) rotateY(99deg) rotateX(48deg) rotateZ(175deg);
        transform: translate3d(75vw, 0vh, 0) scale(0.7) rotate(65deg) rotateY(99deg) rotateX(48deg) rotateZ(175deg);
    }
}

.flame:nth-child(7) {
    width: 6px;
    height: 2px;
    -webkit-animation: anim 1s infinite linear 0.9s, anim-7 2.3s infinite ease-in 5s;
    animation: anim 1s infinite linear 0.9s, anim-7 2.3s infinite ease-in 5s;
    -webkit-transform: translate3d(36vw, 100vh, 0) rotate(165deg) rotateY(132deg) rotateX(122deg);
    transform: translate3d(36vw, 100vh, 0) rotate(165deg) rotateY(132deg) rotateX(122deg);
}

@-webkit-keyframes anim-7 {
    100% {
        -webkit-transform: translate3d(69vw, 0vh, 0) scale(0.7) rotate(145deg) rotateY(176deg) rotateX(86deg) rotateZ(177deg);
        transform: translate3d(69vw, 0vh, 0) scale(0.7) rotate(145deg) rotateY(176deg) rotateX(86deg) rotateZ(177deg);
    }
}

@keyframes anim-7 {
    100% {
        -webkit-transform: translate3d(69vw, 0vh, 0) scale(0.7) rotate(145deg) rotateY(176deg) rotateX(86deg) rotateZ(177deg);
        transform: translate3d(69vw, 0vh, 0) scale(0.7) rotate(145deg) rotateY(176deg) rotateX(86deg) rotateZ(177deg);
    }
}

.flame:nth-child(8) {
    width: 4px;
    height: 11px;
    border-radius: 40%;
    -webkit-animation: anim 1s infinite linear 1s, anim-8 3s infinite ease-in 10s;
    animation: anim 1s infinite linear 1s, anim-8 3s infinite ease-in 10s;
    -webkit-transform: translate3d(78vw, 100vh, 0) rotate(27deg) rotateY(179deg) rotateX(31deg);
    transform: translate3d(78vw, 100vh, 0) rotate(27deg) rotateY(179deg) rotateX(31deg);
    -webkit-filter: blur(2px);
    filter: blur(2px);
}

@-webkit-keyframes anim-8 {
    100% {
        -webkit-transform: translate3d(69vw, 0vh, 0) scale(0.7) rotate(91deg) rotateY(98deg) rotateX(9deg) rotateZ(168deg);
        transform: translate3d(69vw, 0vh, 0) scale(0.7) rotate(91deg) rotateY(98deg) rotateX(9deg) rotateZ(168deg);
    }
}

@keyframes anim-8 {
    100% {
        -webkit-transform: translate3d(69vw, 0vh, 0) scale(0.7) rotate(91deg) rotateY(98deg) rotateX(9deg) rotateZ(168deg);
        transform: translate3d(69vw, 0vh, 0) scale(0.7) rotate(91deg) rotateY(98deg) rotateX(9deg) rotateZ(168deg);
    }
}

.flame:nth-child(9) {
    width: 9px;
    height: 5px;
    -webkit-animation: anim 1s infinite linear 0.6s, anim-9 2s infinite ease-in 2s;
    animation: anim 1s infinite linear 0.6s, anim-9 2s infinite ease-in 2s;
    -webkit-transform: translate3d(76vw, 100vh, 0) rotate(142deg) rotateY(134deg) rotateX(17deg);
    transform: translate3d(76vw, 100vh, 0) rotate(142deg) rotateY(134deg) rotateX(17deg);
}

@-webkit-keyframes anim-9 {
    100% {
        -webkit-transform: translate3d(100vw, 0vh, 0) scale(0.7) rotate(113deg) rotateY(59deg) rotateX(154deg) rotateZ(172deg);
        transform: translate3d(100vw, 0vh, 0) scale(0.7) rotate(113deg) rotateY(59deg) rotateX(154deg) rotateZ(172deg);
    }
}

@keyframes anim-9 {
    100% {
        -webkit-transform: translate3d(100vw, 0vh, 0) scale(0.7) rotate(113deg) rotateY(59deg) rotateX(154deg) rotateZ(172deg);
        transform: translate3d(100vw, 0vh, 0) scale(0.7) rotate(113deg) rotateY(59deg) rotateX(154deg) rotateZ(172deg);
    }
}

.flame:nth-child(10) {
    width: 4px;
    height: 2px;
    -webkit-animation: anim 1s infinite linear 0.9s, anim-10 2s infinite ease-in 6s;
    animation: anim 1s infinite linear 0.9s, anim-10 2s infinite ease-in 6s;
    -webkit-transform: translate3d(86vw, 100vh, 0) rotate(131deg) rotateY(173deg) rotateX(126deg);
    transform: translate3d(86vw, 100vh, 0) rotate(131deg) rotateY(173deg) rotateX(126deg);
}

@-webkit-keyframes anim-10 {
    100% {
        -webkit-transform: translate3d(70vw, 0vh, 0) scale(0.7) rotate(101deg) rotateY(20deg) rotateX(91deg) rotateZ(57deg);
        transform: translate3d(70vw, 0vh, 0) scale(0.7) rotate(101deg) rotateY(20deg) rotateX(91deg) rotateZ(57deg);
    }
}

@keyframes anim-10 {
    100% {
        -webkit-transform: translate3d(70vw, 0vh, 0) scale(0.7) rotate(101deg) rotateY(20deg) rotateX(91deg) rotateZ(57deg);
        transform: translate3d(70vw, 0vh, 0) scale(0.7) rotate(101deg) rotateY(20deg) rotateX(91deg) rotateZ(57deg);
    }
}

.flame:nth-child(11) {
    width: 1px;
    height: 10px;
    -webkit-animation: anim 1s infinite linear 0.4s, anim-11 2.3s infinite ease-in 2s;
    animation: anim 1s infinite linear 0.4s, anim-11 2.3s infinite ease-in 2s;
    -webkit-transform: translate3d(69vw, 100vh, 0) rotate(128deg) rotateY(80deg) rotateX(136deg);
    transform: translate3d(69vw, 100vh, 0) rotate(128deg) rotateY(80deg) rotateX(136deg);
}

@-webkit-keyframes anim-11 {
    100% {
        -webkit-transform: translate3d(98vw, 0vh, 0) scale(0.7) rotate(5deg) rotateY(12deg) rotateX(173deg) rotateZ(14deg);
        transform: translate3d(98vw, 0vh, 0) scale(0.7) rotate(5deg) rotateY(12deg) rotateX(173deg) rotateZ(14deg);
    }
}

@keyframes anim-11 {
    100% {
        -webkit-transform: translate3d(98vw, 0vh, 0) scale(0.7) rotate(5deg) rotateY(12deg) rotateX(173deg) rotateZ(14deg);
        transform: translate3d(98vw, 0vh, 0) scale(0.7) rotate(5deg) rotateY(12deg) rotateX(173deg) rotateZ(14deg);
    }
}

.flame:nth-child(12) {
    width: 3px;
    height: 9px;
    -webkit-animation: anim 1s infinite linear 0.8s, anim-12 4s infinite ease-in 3s;
    animation: anim 1s infinite linear 0.8s, anim-12 4s infinite ease-in 3s;
    -webkit-transform: translate3d(17vw, 100vh, 0) rotate(49deg) rotateY(116deg) rotateX(171deg);
    transform: translate3d(17vw, 100vh, 0) rotate(49deg) rotateY(116deg) rotateX(171deg);
}

@-webkit-keyframes anim-12 {
    100% {
        -webkit-transform: translate3d(11vw, 0vh, 0) scale(0.7) rotate(48deg) rotateY(39deg) rotateX(166deg) rotateZ(47deg);
        transform: translate3d(11vw, 0vh, 0) scale(0.7) rotate(48deg) rotateY(39deg) rotateX(166deg) rotateZ(47deg);
    }
}

@keyframes anim-12 {
    100% {
        -webkit-transform: translate3d(11vw, 0vh, 0) scale(0.7) rotate(48deg) rotateY(39deg) rotateX(166deg) rotateZ(47deg);
        transform: translate3d(11vw, 0vh, 0) scale(0.7) rotate(48deg) rotateY(39deg) rotateX(166deg) rotateZ(47deg);
    }
}

.flame:nth-child(13) {
    width: 10px;
    height: 2px;
    -webkit-animation: anim 1s infinite linear 0.1s, anim-13 3s infinite ease-in 1s;
    animation: anim 1s infinite linear 0.1s, anim-13 3s infinite ease-in 1s;
    -webkit-transform: translate3d(3vw, 100vh, 0) rotate(36deg) rotateY(10deg) rotateX(85deg);
    transform: translate3d(3vw, 100vh, 0) rotate(36deg) rotateY(10deg) rotateX(85deg);
}

@-webkit-keyframes anim-13 {
    100% {
        -webkit-transform: translate3d(74vw, 0vh, 0) scale(0.7) rotate(60deg) rotateY(47deg) rotateX(74deg) rotateZ(57deg);
        transform: translate3d(74vw, 0vh, 0) scale(0.7) rotate(60deg) rotateY(47deg) rotateX(74deg) rotateZ(57deg);
    }
}

@keyframes anim-13 {
    100% {
        -webkit-transform: translate3d(74vw, 0vh, 0) scale(0.7) rotate(60deg) rotateY(47deg) rotateX(74deg) rotateZ(57deg);
        transform: translate3d(74vw, 0vh, 0) scale(0.7) rotate(60deg) rotateY(47deg) rotateX(74deg) rotateZ(57deg);
    }
}

.flame:nth-child(14) {
    width: 11px;
    height: 7px;
    border-radius: 40%;
    -webkit-animation: anim 1s infinite linear 0.8s, anim-14 3s infinite ease-in 2s;
    animation: anim 1s infinite linear 0.8s, anim-14 3s infinite ease-in 2s;
    -webkit-transform: translate3d(30vw, 100vh, 0) rotate(73deg) rotateY(93deg) rotateX(159deg);
    transform: translate3d(30vw, 100vh, 0) rotate(73deg) rotateY(93deg) rotateX(159deg);
    -webkit-filter: blur(2px);
    filter: blur(2px);
}

@-webkit-keyframes anim-14 {
    100% {
        -webkit-transform: translate3d(100vw, 0vh, 0) scale(0.7) rotate(11deg) rotateY(104deg) rotateX(33deg) rotateZ(14deg);
        transform: translate3d(100vw, 0vh, 0) scale(0.7) rotate(11deg) rotateY(104deg) rotateX(33deg) rotateZ(14deg);
    }
}

@keyframes anim-14 {
    100% {
        -webkit-transform: translate3d(100vw, 0vh, 0) scale(0.7) rotate(11deg) rotateY(104deg) rotateX(33deg) rotateZ(14deg);
        transform: translate3d(100vw, 0vh, 0) scale(0.7) rotate(11deg) rotateY(104deg) rotateX(33deg) rotateZ(14deg);
    }
}

.flame:nth-child(15) {
    width: 10px;
    height: 11px;
    border-radius: 40%;
    -webkit-animation: anim 1s infinite linear 0.7s, anim-15 4s infinite ease-in 1s;
    animation: anim 1s infinite linear 0.7s, anim-15 4s infinite ease-in 1s;
    -webkit-transform: translate3d(36vw, 100vh, 0) rotate(91deg) rotateY(85deg) rotateX(121deg);
    transform: translate3d(36vw, 100vh, 0) rotate(91deg) rotateY(85deg) rotateX(121deg);
    -webkit-filter: blur(2px);
    filter: blur(2px);
}

@-webkit-keyframes anim-15 {
    100% {
        -webkit-transform: translate3d(79vw, 0vh, 0) scale(0.7) rotate(19deg) rotateY(170deg) rotateX(38deg) rotateZ(176deg);
        transform: translate3d(79vw, 0vh, 0) scale(0.7) rotate(19deg) rotateY(170deg) rotateX(38deg) rotateZ(176deg);
    }
}

@keyframes anim-15 {
    100% {
        -webkit-transform: translate3d(79vw, 0vh, 0) scale(0.7) rotate(19deg) rotateY(170deg) rotateX(38deg) rotateZ(176deg);
        transform: translate3d(79vw, 0vh, 0) scale(0.7) rotate(19deg) rotateY(170deg) rotateX(38deg) rotateZ(176deg);
    }
}

.flame:nth-child(16) {
    width: 1px;
    height: 5px;
    -webkit-animation: anim 1s infinite linear 0.8s, anim-16 2.3s infinite ease-in 8s;
    animation: anim 1s infinite linear 0.8s, anim-16 2.3s infinite ease-in 8s;
    -webkit-transform: translate3d(89vw, 100vh, 0) rotate(171deg) rotateY(10deg) rotateX(92deg);
    transform: translate3d(89vw, 100vh, 0) rotate(171deg) rotateY(10deg) rotateX(92deg);
}

@-webkit-keyframes anim-16 {
    100% {
        -webkit-transform: translate3d(72vw, 0vh, 0) scale(0.7) rotate(164deg) rotateY(67deg) rotateX(92deg) rotateZ(25deg);
        transform: translate3d(72vw, 0vh, 0) scale(0.7) rotate(164deg) rotateY(67deg) rotateX(92deg) rotateZ(25deg);
    }
}

@keyframes anim-16 {
    100% {
        -webkit-transform: translate3d(52vw, 0vh, 0) scale(0.7) rotate(164deg) rotateY(67deg) rotateX(92deg) rotateZ(25deg);
        transform: translate3d(52vw, 0vh, 0) scale(0.7) rotate(164deg) rotateY(67deg) rotateX(92deg) rotateZ(25deg);
    }
}

.flame:nth-child(17) {
    width: 8px;
    height: 10px;
    -webkit-animation: anim 1s infinite linear 0.4s, anim-17 3s infinite ease-in 7s;
    animation: anim 1s infinite linear 0.4s, anim-17 3s infinite ease-in 7s;
    -webkit-transform: translate3d(74vw, 100vh, 0) rotate(26deg) rotateY(108deg) rotateX(9deg);
    transform: translate3d(74vw, 100vh, 0) rotate(26deg) rotateY(108deg) rotateX(9deg);
}

@-webkit-keyframes anim-17 {
    100% {
        -webkit-transform: translate3d(44vw, 0vh, 0) scale(0.7) rotate(161deg) rotateY(153deg) rotateX(123deg) rotateZ(28deg);
        transform: translate3d(44vw, 0vh, 0) scale(0.7) rotate(161deg) rotateY(153deg) rotateX(123deg) rotateZ(28deg);
    }
}

@keyframes anim-17 {
    100% {
        -webkit-transform: translate3d(44vw, 0vh, 0) scale(0.7) rotate(161deg) rotateY(153deg) rotateX(123deg) rotateZ(28deg);
        transform: translate3d(44vw, 0vh, 0) scale(0.7) rotate(161deg) rotateY(153deg) rotateX(123deg) rotateZ(28deg);
    }
}

.flame:nth-child(18) {
    width: 6px;
    height: 7px;
    -webkit-animation: anim 1s infinite linear 1s, anim-18 2s infinite ease-in 8s;
    animation: anim 1s infinite linear 1s, anim-18 2s infinite ease-in 8s;
    -webkit-transform: translate3d(89vw, 100vh, 0) rotate(60deg) rotateY(86deg) rotateX(106deg);
    transform: translate3d(89vw, 100vh, 0) rotate(60deg) rotateY(86deg) rotateX(106deg);
}

@-webkit-keyframes anim-18 {
    100% {
        -webkit-transform: translate3d(94vw, 0vh, 0) scale(0.7) rotate(91deg) rotateY(17deg) rotateX(158deg) rotateZ(61deg);
        transform: translate3d(94vw, 0vh, 0) scale(0.7) rotate(91deg) rotateY(17deg) rotateX(158deg) rotateZ(61deg);
    }
}

@keyframes anim-18 {
    100% {
        -webkit-transform: translate3d(94vw, 0vh, 0) scale(0.7) rotate(91deg) rotateY(17deg) rotateX(158deg) rotateZ(61deg);
        transform: translate3d(94vw, 0vh, 0) scale(0.7) rotate(91deg) rotateY(17deg) rotateX(158deg) rotateZ(61deg);
    }
}

boxlogosys .flame:nth-child(19) {
    width: 10px;
    height: 11px;
    border-radius: 40%;
    -webkit-animation: anim 1s infinite linear 0.9s, anim-19 2s infinite ease-in 8s;
    animation: anim 1s infinite linear 0.9s, anim-19 2s infinite ease-in 8s;
    -webkit-transform: translate3d(3vw, 100vh, 0) rotate(1deg) rotateY(68deg) rotateX(100deg);
    transform: translate3d(3vw, 100vh, 0) rotate(1deg) rotateY(68deg) rotateX(100deg);
    -webkit-filter: blur(2px);
    filter: blur(2px);
}

@-webkit-keyframes anim-19 {
    100% {
        -webkit-transform: translate3d(76vw, 0vh, 0) scale(0.7) rotate(61deg) rotateY(151deg) rotateX(16deg) rotateZ(101deg);
        transform: translate3d(76vw, 0vh, 0) scale(0.7) rotate(61deg) rotateY(151deg) rotateX(16deg) rotateZ(101deg);
    }
}

@keyframes anim-19 {
    100% {
        -webkit-transform: translate3d(76vw, 0vh, 0) scale(0.7) rotate(61deg) rotateY(151deg) rotateX(16deg) rotateZ(101deg);
        transform: translate3d(76vw, 0vh, 0) scale(0.7) rotate(61deg) rotateY(151deg) rotateX(16deg) rotateZ(101deg);
    }
}

.flame:nth-child(20) {
    width: 6px;
    height: 3px;
    -webkit-animation: anim 1s infinite linear 0.6s, anim-20 3s infinite ease-in 4s;
    animation: anim 1s infinite linear 0.6s, anim-20 3s infinite ease-in 4s;
    -webkit-transform: translate3d(75vw, 100vh, 0) rotate(79deg) rotateY(88deg) rotateX(137deg);
    transform: translate3d(75vw, 100vh, 0) rotate(79deg) rotateY(88deg) rotateX(137deg);
}

@-webkit-keyframes anim-20 {
    100% {
        -webkit-transform: translate3d(69vw, 0vh, 0) scale(0.7) rotate(149deg) rotateY(87deg) rotateX(178deg) rotateZ(100deg);
        transform: translate3d(69vw, 0vh, 0) scale(0.7) rotate(149deg) rotateY(87deg) rotateX(178deg) rotateZ(100deg);
    }
}

@keyframes anim-20 {
    100% {
        -webkit-transform: translate3d(69vw, 0vh, 0) scale(0.7) rotate(149deg) rotateY(87deg) rotateX(178deg) rotateZ(100deg);
        transform: translate3d(69vw, 0vh, 0) scale(0.7) rotate(149deg) rotateY(87deg) rotateX(178deg) rotateZ(100deg);
    }
}



/*glow for webkit*/

@-webkit-keyframes neon1 {
    from {
        text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #FF1177, 0 0 70px #FF1177, 0 0 80px #FF1177, 0 0 100px #FF1177, 0 0 150px #FF1177;
    }

    to {
        text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FF1177, 0 0 35px #FF1177, 0 0 40px #FF1177, 0 0 50px #FF1177, 0 0 75px #FF1177;
    }
}

@-webkit-keyframes neon2 {
    from {
        text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #228DFF, 0 0 70px #228DFF, 0 0 80px #228DFF, 0 0 100px #228DFF, 0 0 150px #228DFF;
    }

    to {
        text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #228DFF, 0 0 35px #228DFF, 0 0 40px #228DFF, 0 0 50px #228DFF, 0 0 75px #228DFF;
    }
}

@-webkit-keyframes neon3 {
    from {
        text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #FFDD1B, 0 0 70px #FFDD1B, 0 0 80px #FFDD1B, 0 0 100px #FFDD1B, 0 0 150px #FFDD1B;
    }

    to {
        text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FFDD1B, 0 0 35px #FFDD1B, 0 0 40px #FFDD1B, 0 0 50px #FFDD1B, 0 0 75px #FFDD1B;
    }
}

@-webkit-keyframes neon4 {
    from {
        text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #B6FF00, 0 0 70px #B6FF00, 0 0 80px #B6FF00, 0 0 100px #B6FF00, 0 0 150px #B6FF00;
    }

    to {
        text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #B6FF00, 0 0 35px #B6FF00, 0 0 40px #B6FF00, 0 0 50px #B6FF00, 0 0 75px #B6FF00;
    }
}

@-webkit-keyframes neon5 {
    from {
        text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #FF9900, 0 0 70px #FF9900, 0 0 80px #FF9900, 0 0 100px #FF9900, 0 0 150px #FF9900;
    }

    to {
        text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FF9900, 0 0 35px #FF9900, 0 0 40px #FF9900, 0 0 50px #FF9900, 0 0 75px #FF9900;
    }
}

@-webkit-keyframes neon6 {
    from {
        text-shadow: 0 0 10px #ec7979, 0 0 20px #ec7979, 0 0 30px #ec7979, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;
    }

    to {
        text-shadow: 0 0 5px #ec7979, 0 0 10px #ec7979, 0 0 15px #ec7979, 0 0 20px #ff00de, 0 0 35px #ff00de, 0 0 40px #ff00de, 0 0 50px #ff00de, 0 0 75px #ff00de;
    }
}
/*glow for mozilla*/

@-moz-keyframes neon1 {
    from {
        text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #FF1177, 0 0 70px #FF1177, 0 0 80px #FF1177, 0 0 100px #FF1177, 0 0 150px #FF1177;
    }

    to {
        text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FF1177, 0 0 35px #FF1177, 0 0 40px #FF1177, 0 0 50px #FF1177, 0 0 75px #FF1177;
    }
}

@-moz-keyframes neon2 {
    from {
        text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #228DFF, 0 0 70px #228DFF, 0 0 80px #228DFF, 0 0 100px #228DFF, 0 0 150px #228DFF;
    }

    to {
        text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #228DFF, 0 0 35px #228DFF, 0 0 40px #228DFF, 0 0 50px #228DFF, 0 0 75px #228DFF;
    }
}

@-moz-keyframes neon3 {
    from {
        text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #FFDD1B, 0 0 70px #FFDD1B, 0 0 80px #FFDD1B, 0 0 100px #FFDD1B, 0 0 150px #FFDD1B;
    }

    to {
        text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FFDD1B, 0 0 35px #FFDD1B, 0 0 40px #FFDD1B, 0 0 50px #FFDD1B, 0 0 75px #FFDD1B;
    }
}

@-moz-keyframes neon4 {
    from {
        text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #B6FF00, 0 0 70px #B6FF00, 0 0 80px #B6FF00, 0 0 100px #B6FF00, 0 0 150px #B6FF00;
    }

    to {
        text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #B6FF00, 0 0 35px #B6FF00, 0 0 40px #B6FF00, 0 0 50px #B6FF00, 0 0 75px #B6FF00;
    }
}

@-moz-keyframes neon5 {
    from {
        text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #FF9900, 0 0 70px #FF9900, 0 0 80px #FF9900, 0 0 100px #FF9900, 0 0 150px #FF9900;
    }

    to {
        text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FF9900, 0 0 35px #FF9900, 0 0 40px #FF9900, 0 0 50px #FF9900, 0 0 75px #FF9900;
    }
}

@-moz-keyframes neon6 {
    from {
        text-shadow: 0 0 10px #ec7979, 0 0 20px #ec7979, 0 0 30px #ec7979, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;
    }

    to {
        text-shadow: 0 0 5px #ec7979, 0 0 10px #ec7979, 0 0 15px #ec7979, 0 0 20px #ff00de, 0 0 35px #ff00de, 0 0 40px #ff00de, 0 0 50px #ff00de, 0 0 75px #ff00de;
    }
}
/*glow*/

@keyframes neon1 {
    from {
        text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #FF1177, 0 0 70px #FF1177, 0 0 80px #FF1177, 0 0 100px #FF1177, 0 0 150px #FF1177;
    }

    to {
        text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FF1177, 0 0 35px #FF1177, 0 0 40px #FF1177, 0 0 50px #FF1177, 0 0 75px #FF1177;
    }
}

@keyframes neon2 {
    from {
        text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #228DFF, 0 0 70px #228DFF, 0 0 80px #228DFF, 0 0 100px #228DFF, 0 0 150px #228DFF;
    }

    to {
        text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #228DFF, 0 0 35px #228DFF, 0 0 40px #228DFF, 0 0 50px #228DFF, 0 0 75px #228DFF;
    }
}

@keyframes neon3 {
    from {
        text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #FFDD1B, 0 0 70px #FFDD1B, 0 0 80px #FFDD1B, 0 0 100px #FFDD1B, 0 0 150px #FFDD1B;
    }

    to {
        text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FFDD1B, 0 0 35px #FFDD1B, 0 0 40px #FFDD1B, 0 0 50px #FFDD1B, 0 0 75px #FFDD1B;
    }
}

@keyframes neon4 {
    from {
        text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #B6FF00, 0 0 70px #B6FF00, 0 0 80px #B6FF00, 0 0 100px #B6FF00, 0 0 150px #B6FF00;
    }

    to {
        text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #B6FF00, 0 0 35px #B6FF00, 0 0 40px #B6FF00, 0 0 50px #B6FF00, 0 0 75px #B6FF00;
    }
}

@keyframes neon5 {
    from {
        text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #FF9900, 0 0 70px #FF9900, 0 0 80px #FF9900, 0 0 100px #FF9900, 0 0 150px #FF9900;
    }

    to {
        text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FF9900, 0 0 35px #FF9900, 0 0 40px #FF9900, 0 0 50px #FF9900, 0 0 75px #FF9900;
    }
}

@keyframes neon6 {
    from {
        text-shadow: 0 0 10px #ec7979, 0 0 20px #ec7979, 0 0 30px #ec7979, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;
    }

    to {
        text-shadow: 0 0 5px #ec7979, 0 0 10px #ec7979, 0 0 15px #ec7979, 0 0 20px #ff00de, 0 0 35px #ff00de, 0 0 40px #ff00de, 0 0 50px #ff00de, 0 0 75px #ff00de;
    }
}