html{height:100%;font-size:100%;}
html,body,div,span,h1,h2,h3,h4,h5,h6,p,a,acronym,address,em,font,img,strong,b,u,i,ol,ul,li,fieldset,form,label,select,option,input,textarea,iframe{margin:0;padding:0;border:0 none;outline:0;font-family:"Montserrat","Trebuchet Ms",Arial,sans-serif;font-display:swap;}
ol,ul,li{list-style:none;}
h1,h2,h3,h4,h5{font-weight:normal;}
a{background-color:transparent;color:var(--text-color5);text-decoration:none;cursor:pointer;}
a:hover{color:var(--text-color4);}
a:hover, a:focus {outline:none;text-decoration: none;}
*, *:before, *:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
*:not(input) {outline: 0;-moz-osx-font-smoothing: grayscale;-webkit-font-smoothing: antialiased;text-rendering: optimizeLegibility;-webkit-user-select: none;-moz-user-select: none;user-select: none;-webkit-user-drag: none;-moz-user-drag: none;user-drag: none;-webkit-overflow-scrolling: touch;}
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{-webkit-box-shadow: 0 0 0 30px var(--bg-color5) inset !important;}
input:-webkit-autofill{-webkit-text-fill-color: #b8b8b8 !important;}
	
:root {
	--bg-color:#2c2c2c;
	--bg-color2:#ebc759;
	
	--text-color:#008AD2;
	
}

/* Public */
body{background:url(../img/background.jpg) no-repeat center #d7b05d;background-size: cover;height:100%;color:#000;line-height:1.7;font-size:1rem;padding:1rem;}

.main-container{position:relative;top: 0;left: 0;border-radius:15px;}

/* Header */
header{display:flex;justify-content: space-between;align-items: center;margin-bottom:2rem;}
header .logo{position:relative;float:left;display:flex;flex-direction:row;align-items: center;}
header .logo img{height:125px;float:left;}
header .logo span{display:flex;flex-direction:column;padding: 1rem;line-height: 1;font-size:2.6rem;font-weight:900;}
header .right{display:flex;flex-direction:column;align-items:flex-end;font-size:1.2rem;text-align: right;}
header .right span b{padding-left:1rem;}



/* Gold Left Top */
.gold_left_top{background:#000000;display:flex;flex-direction:column;flex: 0 0 100%;color:#FFF;border-radius:40px;text-align:center;}
.gold_left_top .top{display:flex;flex-direction:row;justify-content: space-evenly;font-size:2rem;font-weight:700;padding:1rem;line-height: 1;color:#ffcb00;}
.gold_left_top .bottom{background: rgb(79,91,115);background: linear-gradient(90deg, rgba(79,91,115,1) 0%, rgba(51,60,77,1) 100%);position:relative;padding:2rem 0;display:flex;flex-direction:row;font-size:1rem;font-weight:900;border-radius:40px;}
.gold_left_top .bottom:before{background:#FFF;width:2px;position:absolute;left:50%;top:.8rem;bottom:.8rem;margin-left:-1px;content:"";}
.gold_left_top .bottom>div{line-height: 1.3;display:flex;flex-direction:column;flex-basis: 50%;padding:0 15px;}
.gold_left_top .bottom .rakam{font-size:2rem;}

/* Gold Left Bottom */
.gold_left_bottom{background: rgb(79,91,115);background: linear-gradient(90deg, rgba(79,91,115,1) 0%, rgba(51,60,77,1) 100%);margin-top:1rem;padding-right: 1rem;display:flex;flex-direction:row;justify-content: space-between;flex: 0 0 100%;color:#FFF;border-radius:40px;text-align:center;}
.gold_left_bottom .left{background: linear-gradient(to right, #BF953F, #FCF6BA, #B38728, #FBF5B7, #AA771C);width:85px;height:85px;position:relative;display:flex;flex-direction:row;align-items: center;justify-content: center;padding:.7rem 1rem;line-height: 1;color:#ffcb00;border-radius:50%;box-shadow: rgb(33 35 38 / 90%) 20px 0px 15px -10px;}
.gold_left_bottom .left:before{background:#000;position:absolute;left:10px;top:10px;right:10px;bottom:10px;border-radius:50%;content:"";}
.gold_left_bottom .left span{display: flex;flex-direction: column;position:relative;z-index:1;font-weight:700;font-size:.7rem;}
.gold_left_bottom .left span b{font-size:1.8rem;}
.gold_left_bottom .right{height:85px;padding:.5rem 0;display:flex;flex-direction:row;font-size:1rem;font-weight:900;border-radius:40px;}
.gold_left_bottom .right>div{position:relative;line-height: 1.3;display:flex;flex-direction:column;justify-content: center;flex-basis: 50%;padding:1rem 15px;}
.gold_left_bottom .right>div:last-child:before{background:#FFF;width:2px;position:absolute;left:0;top:.8rem;bottom:.8rem;margin-left:-1px;content:"";}
.gold_left_bottom .right .rakam{font-size:2rem;}

/* Gold Right */
.gold_right{margin-top:.5rem;display:flex;flex-direction:row;justify-content: space-between;flex: 0 0 100%;color:#FFF;border-radius:40px;text-align:center;}
.gold_right .left{background: rgb(252,206,13);background: linear-gradient(60deg, rgba(252,206,13,1) 0%, rgba(251,242,191,1) 22%, rgba(201,150,26,1) 75%, rgba(251,242,191,1) 100%);width:300px;height:40px;line-height:40px;position:relative;text-align:left;font-weight:700;font-size:1.5rem;padding:0 0 0 50px;color:#000;border-radius:40px 0 0 40px;box-shadow: rgb(33 35 38 / 90%) 20px 0px 15px -10px;}
.gold_right .left:before{background:#000;width:15px;height:15px;position:absolute;left:15px;top:50%;transform: translate(0,-50%);border-radius:50%;content:"";}
.gold_right .right{background: rgb(79,91,115);background: linear-gradient(90deg, rgba(79,91,115,1) 0%, rgba(51,60,77,1) 100%);width:100%;height:40px;display:flex;flex-direction:row;font-size:1.8rem;font-weight:600;border-radius:0 40px 40px 0;}
.gold_right .right>div{position:relative;line-height:40px;overflow: hidden;display:flex;flex-direction:column;justify-content: center;flex-basis:33.333%;padding:0 15px;}
.gold_right .right>div:before{background:#FFF;width:2px;position:absolute;left:1px;top:.5rem;bottom:.5rem;content:"";border-radius:2px;}
.gold_right .right>div:first-child:before{display:none;}
.gold_right .right .rakam{font-size:2rem;}
.gold_right.headers .left{opacity:0;}
.gold_right.headers .right{border-radius:40px;}

/* Gold Footer */
.gold_footer{background: rgb(79,91,115);background: linear-gradient(90deg, rgba(79,91,115,1) 0%, rgba(51,60,77,1) 100%);padding-right: 1rem;display:flex;flex-direction:row;justify-content: space-between;flex: 0 0 100%;color:#FFF;border-radius:40px;text-align:center;}
.gold_footer .left{background: linear-gradient(to right, #BF953F, #FCF6BA, #B38728, #FBF5B7, #AA771C);width:40px;height:40px;position:relative;display:flex;flex-direction:row;align-items: center;justify-content: center;padding:.7rem 1rem;line-height: 1;color:#ffcb00;border-radius:50%;box-shadow: rgb(33 35 38 / 90%) 20px 0px 15px -10px;}
.gold_footer .left:before{background:#000;position:absolute;left:5px;top:5px;right:5px;bottom:5px;border-radius:50%;content:"";}
.gold_footer .left span{display: flex;flex-direction: column;position:relative;z-index:1;font-weight:700;font-size:.7rem;}
.gold_footer .right{height:40px;line-height:40px;padding:0 .5rem;display:flex;flex-direction:row;font-size:1rem;font-weight:700;border-radius:40px;}


/* Marquee */
.marquee{background:#000;width:100%;height:40px;line-height:40px;margin-top:.5rem;color:#FFF;letter-spacing: 2px;font-weight: 700;font-size:1.5rem;border-radius:40px;}

/* Advert */
.advert{width:100%;display: flex;align-items: center;flex-direction: column;margin-top:.5rem;}
.advert>img{width: 100%;max-width:100%;height:auto;display: block;vertical-align: middle;aspect-ratio: 633/300;}


/* Footer */
footer{margin-top:1rem;}
footer .marquee{margin:0;}
footer .advert img{aspect-ratio:unset;height:40px;width:auto;}


@media (max-width:1199.98px){
	.gold_left_top .bottom .rakam,.gold_left_bottom .right .rakam{font-size:1.5rem;}
	.gold_right .left{width:240px;font-size:1.4rem;}
	.gold_right .right{font-size:1.4rem;}
}
@media (max-width: 991.98px){
	header .logo span{font-size:2rem;}
	header .right{margin-top:1rem;line-height: 1.2;flex-direction: row;justify-content: space-between;text-align:unset;}
	header .right .date_clock{text-align:right;}
}
@media (max-width: 576px){
	header .logo span{font-size:1.5rem;}
	
	.gold_right{flex-direction: column;}
	.gold_right .left{width: 100%;border-radius:20px 20px 0 0;text-align: center;padding: 0;}
	.gold_right .left:before{display:none;}
	.gold_right .right{font-size:1.2rem;border-radius:0 0 20px 20px;}
	
}