@font-face{
font-family:'bold';
src: url('fonts/bold.otf');
}
@font-face{
font-family:'normal';
src: url('fonts/normal.otf');
}
@font-face{
font-family:'light';
src: url('fonts/light.otf');
}

*{margin: 0px auto; padding: 0px;}
body{font-family: 'normal', verdana; font-size: 14px; color: #073543; background: white;}
a{color: #073543; text-decoration: none;}
b{font-family: 'bold';}
div{word-wrap: break-word;}

/*HEADER*/
#klik_header{height: 40px; width: 100%; position: fixed; top: 0px; left: 0px; z-index: 50;}
#klik_header .header_logo{width: 160px; height: 20px; top: 10.5px; position: relative;}
#klik_header .header_icon{width: 40px; height: 40px;}
#klik_header .header_icon .icon{width: 25px; height: 25px; margin-top: 6px;}
#klik_header_login{height: 170px; background-image: url('../images/general/bg_header.png'); background-size: 100%; margin-bottom: 10px;}
#klik_header_login .icon{width: 150px; height: 30px; position: relative; top: 60px; background-image: url('../images/general/icon_logo.png');}
#klik_header_login .login_desc{width: 80%; max-width: 500px; border-radius: 200px; position: relative; top: 110px;}
#klik_header_login .login_desc .login_desc_content{padding: 10px 20px 11px 20px; text-align: center; font-size: 17px;}
#klik_header_login_telkomsel{height: 170px; margin-bottom: 10px;}
#klik_header_login_telkomsel .icon{width: 150px; height: 70px; position: relative; top: 30px; background-image: url('../images/general/icon_logo_telkomsel.png');}
#klik_header_login_telkomsel .login_desc{width: 80%; max-width: 500px; border-radius: 200px; position: relative; top: 67px;}
#klik_header_login_telkomsel .login_desc .login_desc_content{padding: 10px 20px 11px 20px; text-align: center; font-size: 17px;}

/*HAMBURGER MENU*/
#hamburger_menu{width: 100%; height: 100%; top: 0px; position: fixed; left: 0px; z-index: 50; background: white; overflow: auto;}
#hamburger_menu .big_space{height: 40px;}
#hamburger_menu .big_head{padding: 10px 20px; height: 37px; background: #eeeeee; text-align: right;}
#hamburger_menu .big_head .bh_title{font-size: 12px; color: #ea4923;}
#hamburger_menu .big_head .bh_point{letter-spacing: 5px;}
#hamburger_menu .big_menu{padding: 10px 20px; height: 25px; border-bottom: 1px solid #d5d5d5;}
#hamburger_menu .big_menu .icon{width: 25px; height: 25px; margin-right: 10px;}
#hamburger_menu .big_menu .title{margin-top: 3px;}
#hamburger_menu .big_menu_dropdown{min-height: 50px; padding-left: 65px;}

/*MENUS*/
#klik_menu{height: 40px; background: #060804;}
#klik_menu .options{width: 33.3%; text-align: center; padding: 11px 0px 12px 0px;}

/*CONTENT*/
#klik_content{min-height: 400px;}
.klik_content_topsize{margin-top: 40px;}
.body_canvas{background-position: center center;}
.body_content{max-width: 500px; position: relative;}
.body_content .bc_top{height: 48px; width: 100%; top: -25px; position: absolute;}
.body_content .bc_top .bct_title{padding: 13px 0px 15px 0px; font-size: 17px; border-radius: 50px; text-align: center; width: 200px; color: white;}
.body_content .bc_top .bct_bubble{width: 25px; height: 25px; border-radius: 50%; margin-top: 12px;}
.body_content .bc_top .bct_bubble.bct_left{margin-left: 4%;}
.body_content .bc_top .bct_bubble.bct_right{margin-right: 4%;}
.body_content .bc_top_space{height: 46px;}
.best_games{padding-bottom: 142%; transition: background 1s linear;}
.best_slider{height: 0px;}
.best_slider .slider_games{min-height: 100px; width: 10px; padding: 2px 5px; right: 10px; top: 15px; position: relative;}
.best_slider .slider_games .slider_bubble{width: 10px; height: 10px; margin: 10px 0px; border-radius: 50%;}
.slider_bubble_deactive{background: white;}
.slider_bubble_active{background: #073543;}
.banner_info{min-height: 50px;}
.banner_info img{width: 100%;}

.title_page{padding: 5px 15px 11px 15px; height: 30px;}
.title_page .title{padding-top: 4px; font-size: 17px; font-family: bold;}
.title_page .title_txt{padding-top: 5px;}
.title_page .title_open{width: 30px; height: 30px; border-radius: 50%; margin-left: 5px;}
.title_page .title_open .icon{width: 15px; height: 15px; margin-top: 7px;}

/**INDEX PAGE**/
.index_head{position: fixed; width: 100%; max-width: 500px;}
.index_top{padding: 10px 20px;}
.index_top img{width: 100%;}
.index_body{position: relative; background: white; z-index: 2; box-shadow: 0px 0px 20px white;}

/**PAGE REWARD**/
.reward_menu{height: 40px;}
.reward_menu .rm_option{width: 50%; height: 35px;}
.reward_menu .rm_option .rmo_title{text-align: center; margin-top: 10px;}
.rmo_active{border-bottom: 5px solid #e9890b;}
.reward_point{height: 70px;}
.reward_point .rp_point{float: right; height: 70px; margin-right: 15px;}
.reward_point .rp_point .rpp_title{margin-top: 12px; text-align: right; font-size: 9px;}
.reward_point .rp_point .rpp_icon{width: 27px; height: 27px; float: right; margin-top: 3px;}
.reward_point .rp_point .rpp_infopoint{font-size: 25px; float: right; padding-left: 10px;}

/**PAGE ONLINE GAMES**/
.og_menu_cvs{height: 50px;}
.og_menu{height: 35px; position: fixed; top: 40px; width: 100%; left: 0px; z-index: 11;}
.og_menu .ogm_title{margin-top: 2px; text-align: center;}
.og_menu .ogm_dropdown{width: 10px; height: 10px; margin-top: 2px;}
.og_dropdown{width: 100%; height: 100%; background: #02aaadeb; position: fixed; top: 0px; left: 0px; z-index: 10; overflow: auto; text-align: center;}
.og_dropdown .ogd_space{height: 75px;}
.og_dropdown .ogd_options{padding: 10px 25px 11px 25px;}

/**PAGE EVENT**/
.e_tab_cvs{height: 50px;}
.e_tab{height: 40px; position: fixed; top: 40px; width: 100%; left: 0px; z-index: 11;}
.e_tab ul{list-style-type: none; padding: 0; display: table; width: 100%; table-layout: fixed;}
.e_tab a{display: table-cell; padding: 10px 0px 8px 0px;}
.e_tab a li{text-align: center; color: white;}
.e_tab ul .li_active{border-bottom: 4px solid #00bbff;}
.e_image{margin-bottom: 15px;}
.e_image img{width: 100%; border-radius: 10px;}

/**PAGE QUIZ COMPETITIONS**/
.q_box .qb_area{width: 100%; border-collapse:collapse;}
.q_box .qb_area tr:nth-child(1) td{background: whitesmoke;}
.q_box .qb_area tr:nth-child(1) td:nth-child(1){width: 30%;}
.q_box .qb_area tr:nth-child(1) td:nth-child(2){padding: 15px 10px 15px 15px; height: 10px;}
.q_box .qb_area tr:nth-child(2) td{padding: 0px 10px 0px 15px;}
.q_box .qb_area .qba_left{padding: 15px 0px 0px 15px;}
.q_box .qb_area .qba_left .qbal_photo{width: 100%; padding-bottom: 140%;}
.q_box .qb_area .qba_bottom .qbab_bar{background: pink;}
.q_box .qb_area .qba_bottom .qbab_bar .qbabb_path{width: 25%;}
.q_box .qb_area .qba_bottom .qbab_bar .qbabb_path .qbabbp_box{padding: 7.5px 7.5px 3px 7.5px; max-width: 50px;}
.q_box .qb_area .qba_bottom .qbab_bar .qbabb_path .qbabbp_box .qbabbpb_bubble{padding-bottom: 100%; border-radius: 50%; background-image: linear-gradient(to right, #07cae9 , #0399cd); position: relative;}
.q_box .qb_area .qba_bottom .qbab_bar .qbabb_path .qbabbp_box .qbabbpb_bubble .qbabbpbb_bar{position: absolute; top: 0px; left: 0px; height: 100%; width: 100%; background-repeat: no-repeat; background-position: center; background-size: 40%;}
.q_box .qb_area .qba_bottom .qbab_bar .qbabb_path .qbabbp_title{text-align: center;}
.q_popup{width: 100%; height: 100%; top: 0px; left: 0px; position: fixed; z-index: 55; background: rgba(0, 0, 0, 0.25); overflow: auto;}
.q_popup .qp_box{width: 90%; background-image: linear-gradient(to bottom, #fcd900 , #ea4747); margin-top: 90px; max-width: 500px; border-radius: 10px; padding-bottom: 20px; margin-bottom: 50px;}
.q_popup .qp_box .qpb_close{height: 16px; padding-top: 10px; text-align: right;}
.q_popup .qp_box .qpb_close .qpbc_icon{width: 16px; height: 16px; margin-left: 5px;}
.q_popup .qp_box .qpb_head{height: 100px; width: 90%;}
.q_popup .qp_box .qpb_head .qpbh_left{width: 40%; height: 100px;}
.q_popup .qp_box .qpb_head .qpbh_right{width: 60%; height: 100px;}
.q_popup .qp_box .qpb_head .qpbh_right .qpbhr_title{width: 80%; max-width: 200px; margin-top: 20px;}
.q_popup .qp_box .qpb_head .qpbh_right .qpbhr_title .qpbhrt_logo{padding-bottom: 13%;}
.q_popup .qp_box .qpb_head .qpbh_right .qpbhr_name{margin-top: 50px; font-size: 30px;}
.q_popup .qp_box .qpb_head .qpbh_left .qpbhl_photo{width: 80%; padding-bottom: 112%;}
.q_popup .qp_box .qpb_body{width: 90%; background: white; border-radius: 10px; padding-bottom: 25px;}
.q_popup .qp_box .qpb_body .qpbb_space{padding-bottom: 32%;}
.q_popup .qp_box .qpb_body .qpbb_term{padding: 0px 15px 15px 15px;}
.q_popup .qp_box .qpb_body .qpbb_content{width: 90%; background: #f1f1f1; border-collapse: collapse;}
.q_popup .qp_box .qpb_body .qpbb_content tr:nth-child(odd){background: #d8d8d8;}
.q_popup .qp_box .qpb_body .qpbb_content tr td{padding: 10px 15px;}
.q_popup .qp_box .qpb_body .qpbb_content tr td:last-child{text-align: right;}
.q_popup .qp_box .qpb_body .qpbb_prize{width: 90%;}
.q_popup .qp_box .qpb_body .qpbb_prize .qpbbp_image{padding-bottom: 25%; background: red; margin-top: 15px;}

/**PAGE REWARD**/
.r_head{height: 60px;}
.r_head .rh_point{width: 25px; height: 25px; margin-right: 10px; background: black; border-radius: 50%;}

/**PAGE SEARCH**/
.search_suggest{height: 417px; margin-top: 30px; overflow: auto;}
.search_suggest .search_suggest_bar{height: 400px; width: 1751px;}
.search_suggest .search_suggest_bar .search_games{height: 400px; width: 230px; margin: 0px 10px;}
.search_suggest .search_suggest_bar .search_games .photo{padding-bottom: 138.9%;}
.search_suggest .search_suggest_bar .search_games .title{font-family: light; text-align: center; font-size: 20px; padding: 15px 0px;}

.search_result{padding: 15px 20px; font-family: light;}

/**PAGE LOGIN**/
.login_input{box-shadow: 0 0 15px silver; background: white;}
.login_box{width: 90%;background: white; margin-top: 30px; border-radius: 20px; position: relative;}
.login_box .lb_content{padding: 17px 20px 20px 20px;}
.login_box .lb_gear1{width: 50px; height: 41px; background: url('../images/general/register-gear1.png'); position: relative; float: left; left: -5px; top: -5px;}
.login_box .lb_gear2{width: 50px; height: 50px; background: url('../images/general/register-gear2.png'); position: absolute; float: right; right: -5px; bottom: -5px;}
.login_telkomsel{padding: 40px 0px 25px 0px;}
.login_others{padding: 25px 0px 25px 0px; background: #f1f1f1;}
.login_submit{padding: 25px 0px 30px 0px; background: #dcdcdc;}

/**PAGE ABOUT**/
.about{width: 80%;}
.about .a_title{margin-top: 10px; font-size: 20px; margin-left: 20px;}
.about .a_content{padding: 20px; min-height: 200px; background: white; border-radius: 15px;}