.custom-class {
    display: none;
}

@include media-breakpoint-up(sm) {
    .custom-class {
        display: block;
    }
}

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

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

@font-face {
    font-family: 'Klavika Bd';
    src: url('/Nexon_Event/WOD_MapleMCollab/dist/fonts/Klavika-Bold.woff2') format('woff2'), url('/Nexon_Event/WOD_MapleMCollab/dist/fonts/Klavika-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

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

@font-face {
    font-family: 'BebasNeue-Regular';
    src: url('/Nexon_Event/WOD_MapleMCollab/dist/fonts/BebasNeue-Regular.woff2') format('woff2'), url('/Nexon_Event/WOD_MapleMCollab/dist/fonts/BebasNeue-Regular.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',"Microsoft Sans Serif";
    overflow-x: hidden !important;
    background: #E19025 url(../images/bg_WODxMSM_getitem.jpg) center bottom;
    background-position-y: 20px;
    background-repeat: no-repeat;
    color: #000 !important;
    font-weight: 100;
    height: 100%;
    font-size: 0.9rem;
}

.fontboldtext {
    font-family: 'kanitbold';
}

.form-control {
    font-family: 'kanitbold';
    border: 2px solid #4a3a3a;
    text-align: center;
    padding: 10px;
    border-radius: 15px;
    font-size: 14px;
    width: 87%;
}

.btncopy {
    font-family: 'kanitbold';
    border: 2px solid #4a3a3a;
    border-radius: 0 15px 15px 0;
}

p {
    margin-top: 0;
    margin-bottom: 0;
}

.bgbox {
    width: 100%;
    height: auto;
    position: relative;
    border: 1px solid #fff;
    border-radius: 10px;
    background: url(../images/bg_content.png) repeat;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}


.fontor {
    color: #FFA500;
}


img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}


.img-scroll {
    width: 70px;
    height: 81px;
    z-index: 103;
    margin: 0 auto;
    margin-bottom: 30px;
    -ms-transform: rotate(90deg); /* IE 9 */
    -webkit-transform: rotate(90deg); /* Safari */
    -ms-animation: rotate(90deg);
    transform: rotate(90deg);
}

.regterm {
    cursor: pointer;
}

.btenter {
    cursor: pointer;
}

    .btenter:hover {
        filter: brightness(120%);
    }



.form-check-label a {
    color: #fff;
}




.region-flag_home {
    background-image: url(https://th-tosimg.akamaized.net/content/2019/6/10/2019610_17925_bt_home_tabmenu.png);
}

.region-flag_facebook {
    background-image: url(https://th-tosimg.akamaized.net/content/2019/9/24/2019924_12523_bt_fb.png);
}

.region-flag_youtube {
    background-image: url(https://th-tosimg.akamaized.net/content/2019/9/24/2019924_12523_bt_youtube.png);
}

.region-flag_th {
    background-image: url(https://th-tosimg.akamaized.net/content/2019/6/10/2019610_17925_bt_th_tabmenu.png);
}

.region-flag_en {
    background-image: url(https://th-tosimg.akamaized.net/content/2019/6/10/2019610_17925_bt_en_tabmenu.png);
}

.region-flag_id {
    background-image: url(https://th-tosimg.akamaized.net/content/2019/7/26/2019726_145628_bt_id_tabmenu.png);
}

.region-flag {
    display: inline-block;
    width: 28px;
    height: 28px;
    margin: -3px 1px 0 1px;
    vertical-align: middle;
}

.lang-switcher {
    /*background:#2a2c2d;*/
    max-width: 230px;
    padding: 3px 0px;
}


.lang-switcher_label {
    display: inline-block;
    vertical-align: middle;
    content: '';
    -webkit-transition: .2s ease color;
    transition: .2s ease color;
    height: 8px;
    width: 15px;
    right: 0;
    background-image: url(/file/arrow-up.svg);
    background-repeat: no-repeat;
    background-position: center center;
    transform-box: border-box;
    -webkit-transform: rotateZ(200grad);
    transform: rotateZ(200grad);
    opacity: 0.6;
}

.lang-selector {
    width: 100%;
    position: relative;
}

.lang-selector__place {
    overflow: hidden;
    -webkit-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
    clear: both;
    background: #2a2c2d;
    padding: 0 1px;
}

.lang-selector__region-name {
    color: #999;
    margin-bottom: 8px;
    display: block;
}


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

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

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

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


.navbar-dark .navbar-toggler {
    color: #fff;
}

.nav-link:hover {
    color: #ffd800 !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(255,255,255, 1)' 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(255,255,255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

.flex-grow {
    flex: 1;
}

.btdownloadchareffectbt {
    -moz-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    cursor: pointer;
    filter: brightness(100%);
}

    .btdownloadchareffectbt:hover {
        -moz-transform: scale(1.1);
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
        filter: brightness(200%);
        z-index: 200;
    }


.btdownloadchareffectbt2 {
    -moz-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    cursor: pointer;
    filter: brightness(100%);
}

    .btdownloadchareffectbt2:hover {
        margin-top: -20px;
        filter: brightness(120%);
    }

.btdownloadchareffectbt3 {
    -moz-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    cursor: pointer;
    filter: brightness(100%);
}

    .btdownloadchareffectbt3:hover {
        filter: brightness(120%);
    }

.wodlogo {
    position: relative;
    z-index: 99;
    -moz-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}

.jewel2 {
    animation: effect-jewel2 3s ease-in-out infinite;
}

.jewel {
    animation: effect-jewel 3s ease-in-out infinite;
}

@keyframes effect-jewel {
    0% {
        filter: brightness(100%);
    }

    50% {
        filter: brightness(500%);
    }

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

@keyframes effect-jewel2 {
    0% {
        filter: brightness(100%);
    }

    50% {
        filter: brightness(130%);
    }

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

#boxmovie {
    background: #000 url(https://th-tosimg.akamaized.net/tos/landing/images/bg_dot.gif) repeat;
}

.boxmoviecol {
    margin-top: 400px;
}



.html5-video-player {
    position: fixed;
    width: 100%;
    height: 100%;
    overflow: hidden;
    outline: 0;
    font-family: "YouTube Noto",Roboto,Arial,Helvetica,sans-serif;
    color: #eee;
    text-align: left;
    direction: ltr;
    font-size: 11px;
    line-height: 1.3;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    touch-action: manipulation;
    contain: strict;
    z-index: 9998;
    color: #ffeeec;
    /*background: url(https://th-tosimg.akamaized.net/tos/landing/images/bg_dot.gif);*/
    top: 0px;
}



.cboxClose {
    position: fixed;
    right: 0;
    display: block;
    background: url(https://th-tosimg.akamaized.net/tos/landing/images/btn_modal_close.png) no-repeat left top;
    width: 40px;
    height: 40px;
    overflow: hidden;
    text-indent: 110%;
    white-space: nowrap;
    outline: 0;
    z-index: 9999;
    right: 20px;
    /* confuse it i guess */
    margin: auto;
    cursor: pointer;
    top: 120px;
}


.hidevdo {
    display: none;
}


.txttitle {
    margin-top: 3vh;
}


._close {
    cursor: pointer;
    font-size: 32px;
    position: absolute;
    z-index: 1000;
    top: 10px;
    right: 10px;
}


._close {
    cursor: pointer;
    font-size: 32px;
    position: absolute;
    z-index: 1000;
    top: 10px;
    right: 10px;
}



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

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

    .menunavbar {
        margin-left: 5rem;
    }
}


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

    .form-control {
        font-size: 14px;
        width: 100%;
    }

    .menunavbar {
        margin-left: 0rem;
    }

    .ulcheck {
        padding: 0px;
    }
}


@media screen and (max-width:479px) {

    .form-control {
        font-size: 14px;
        width: 100%;
    }

    .ulcheck {
        padding: 0px;
    }
}

.btnhowto {
    background-image: linear-gradient(to right, #FDB600, #FF992A) !important;
    color: #3B2F29 !important;
    font-weight: bold;
    border-radius: 20px;
    font-size: 25px;
    /* padding: 5px 100px; */
    max-width: 285px;
    width: 80%;
}

    .btnhowto:hover {
        filter: brightness(120%);
    }


a:active, a:focus, .btenter:active, .btenter:focus {
    outline: 0;
    border: none;
    -moz-outline-style: none;
}





/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
}

/* 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 */


}