*{
    font-family: sans-serif;
    box-sizing: border-box;
}

p{
    margin: 0;
}

body{
    background: #100f31;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: top center;
    background-size: contain;    
    background-size: 100%;
} 

.container{
    width: 100%;
    margin-left: auto;
    margin-right: auto;
} 

img{
    vertical-align: middle;
    border-style: none;
}

.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

.dot {
  height: 15px;
  width: 15px;
  margin: -9px 0 10px 2px;
  background-color: #00d8ff;
  border-radius: 100%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active {
  background-color: #717171;
}

.slot .slot-sidebar{
    padding-right: 10px;
    padding-left: 0;
    margin-top: -15px;
    background-color: black;
    float: none !important;
    width: 100% !important; 
    flex: none !important;
    max-width: 100% !important;
    padding-right: 0 !important;
} 
 
.slot-sidebar-nav{
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: nowrap;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}

.slot-sidebar-nav > li {
    border-bottom: 1px solid #0092b1;
    width: 100%;
    position: relative;
    display: block;
    border-bottom: none;
    padding: 6px;
    background: linear-gradient(to bottom,#242424 0%,#515151 46%,#242424 100%);
}

.slot-sidebar-nav > li > a{
    color: #fff;
    font-size: 13px;
    padding: 7px 10px;
    display: block;
    background-color: black;
}

.slot-provider-nav{
	padding: 30px;
	margin-bottom: 0;
	text-align: center; 
}

.slot-provider-nav li{
	display: inline-block; 
	width: 200px;
	height: 80px;
	
} 
					
.slot-provider-nav a{
	height: 100%;
	width: 100%;
	text-align: center;
	border-radius: 15px;
}
					 
.slot-provider-nav img{
	margin: 0 auto;
	width: auto;
	height: 100%;
}

.short, .long{
	display: none;
}

.btn-provider span{
    position: unset;
}


.btn-provider:hover{
    background-color: #644C1C;
}


.link-container {
    display: flex;
    justify-content: center;
    font-size: var(--x-large-font);
    padding: 0;
    width: 100%;
}

.title{
    display: flex;
    justify-content: center;
}

.title-text{
    color: white;
    font-size: 2.5rem;
}

.link-container a {
    width: 50%;
    text-align: center;
    padding: 15px 20px;
    text-transform: uppercase;
    color: #ffffff;
	text-decoration: none;
}

.register-button {
    background-image: linear-gradient(rgb(230, 107, 0), rgb(255, 177, 0));
    background-color: initial;
}

.login-button {
    background-image: linear-gradient(rgb(0, 12, 153), rgb(0, 156, 255));
    background-color: initial;
}

.login-button2 {
    background-image: linear-gradient(rgb(0, 153, 18), rgb(162, 255, 0));
    background-color: initial;
} 

/**********************
	provider btn below
***********************/
.slot-provider{
	width: 100%; 
	padding-top: 20px;
}
					
.slot-provider a{
	background: linear-gradient(to bottom,#d4d4d4 0%,#949494 88%);
	color: #000;
	width: 100%;
	height: 35px;
	font-size: 15px;
	margin: 5px 2.5% 5px 2.5%;
	border-radius: 10px;
	padding-top: 4px;
	border: 2px solid #ff7600;
	box-shadow: 0px 3px 5px #949494 ;
	text-decoration: none;
	color:#000;
} 
					 
.slot-provider a:hover{
	background: linear-gradient(to bottom,#FFBD33 0%,#ff7600 88%);
	font-weight: bold;
}

.slot-provider ul{
	padding: 0;
	margin: 0;
	width: 100%;
	text-align: center;
} 

.slot-provider ul li{
	display: inline-block;
	width: 250px;
} 

.btn-provider{
	width: 100%;
	height: auto;
    text-align: center;
    display: block;
}   

.enter{
    display: none;
}
/***********************************
			footer
***********************************/

.footer-menu {background: linear-gradient(180deg,#e66b00 0%,#ffb612 50%,#e66b00);color: #000;position: fixed;bottom: 0;right: 0;left: 0;z-index: 997;display: -ms-grid;display: grid;-ms-grid-columns: (1fr)[5];grid-template-columns: repeat(5, 1fr);border-top: 2px solid #c29421;}
.footer-menu .footer-item {text-align: center;padding: 5px 5px 5px;color: #000;position: relative;}
.footer-menu .footer-item.active {color: #000;}
.footer-menu .footer-item .footer-icon {position: relative;}
.footer-menu .footer-item.footer-login {position: relative;z-index: 999;-ms-flex-item-align: end;align-self: flex-end;}
.footer-menu .footer-item.footer-login .footer-icon {position: absolute;top: 0;top: -41px;right: 0;left: 0;width: 45px;height: 45px;border-radius: 50px;background: linear-gradient(180deg,#e66b00 0%,#ffb612 50%,#e66b00);border: 1px solid #604100;display:-webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;margin: auto;-webkit-animation: beat .5s infinite alternate;animation: beat .5s infinite alternate;}
.footer-menu .footer-item .footer-icon i {font-size: 20px;}
.svg-home {display: inline-block;background-image: url("../images/home.svg");fill: white; height: 25px;width: 25px}
.svg-whatsapp {display: inline-block;background-image: url("../images/daftar.svg");background-repeat: no-repeat;height: 25px;width: 25px}
.svg-login {display: inline-block;background-image: url("../images/login.svg");background-repeat: no-repeat;height: 25px;width: 25px}
.svg-promo {display: inline-block;background-image: url("../images/promo.svg");background-repeat: no-repeat;height: 25px;width: 25px}
.svg-chat {display: inline-block;background-image: url("../images/chat.svg");height: 25px;width: 25px}
.footer-menu .footer-item .footer-title {font-size: 12px;font-family: Helvetica Neue,Helvetica,Arial,sans-serif;font-weight: bold;white-space: nowrap;text-transform: uppercase;}


@keyframes beat{to { transform: scale(1.20); }}


@keyframes slide-in {
            0% {
                top: -100%;
            }
            100% {
                top: 50%;
            }
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}



@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

.active{
    background-color: #0092B1;
}

.slot .content{
    float: none;
    width: 100%;
    padding: 0;
	
    flex: 0 0 100%;
    max-width: 100%;
    background-color: #121212;
}

.wrapper{
    width: 100%;
    padding: 0;
    white-space: nowrap;
    overflow: hidden;
    position: relative;
    z-index: 0;
}

.card{
    float: left;
    width: 20%;
    background: transparent;
    border: none;
    text-align: center;
    position: relative;
}

.card-content{
    margin: 5px;
    color: #fff;
    font-size: 12px;
    border: none;
    overflow: hidden;
    position: relative;
}

.card-content a{
	text-decoration: none;
}
.card-content .gtitle{
	color: #ffffff;
	position: absolute; 
	width: 100%;  
	bottom: 19%;
	font-weight: bold;
	
}

.percent{
    height: 27px;
    display: flex;
    overflow: hidden;
    line-height: 0;
    font-size: .75rem;
    background-color: #e9ecef;
    /* border-radius: .25rem; */
    position: relative;
    z-index: 1;
    border-radius: 18px;
    width: 90%;
    margin: 0 auto;
}

.percent p{
    z-index: 15;    
    position: absolute;
    text-align: center;
    width: 100%;
    font-size: 14px;
    font-weight: bold;
    transform: translateY(14px);
    color: black;
}

.percent-bar{
    /* background-color: #ffc107; */
    background-image: linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
    background-size: 1rem 1rem;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: center;
    justify-content: center;
    overflow: hidden;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    /* background-color: #007bff; */
    transition: width .6s ease;
    -webkit-animation: progress-bar-stripes 1s linear infinite;
    animation: progress-bar-stripes 1s linear infinite;
    /* animation: ; */
    z-index: 10;
}

.yellow{
    background-color: #ffc107;
}

.green{
    background-color: #28a745;
}

.red{
    background-color: #dc3545;
}

.hover-btn{
    position: absolute;
    opacity: 0;
    background-color: rgba(0,0,0,0.9);
    transition: all 0.1s ease-in-out;
    z-index: 10;
    width: 100%;
    height: 87%;
}

.maintenance{
    position: absolute;
    background-color: rgba(0,0,0,0.5);
    z-index: 10;
    width: 100%;
    height: 100%;
    color: white;
    text-align: center;
    margin: -6px;
}

.maintenance p{
    position: relative;
    top: 40%;
    font-size: 13px;
}

.play-btn{
    font-size: 15px;
    text-decoration: none;
    color: white;
    text-align: center;
    align-items: center;
    /* width: 100%; */
    margin-top: 42%;
    padding: 8px;
    display: block;
    margin-left: 30px;
    margin-right: 30px;
    margin: 42% 30px 42% 30px;
    background: linear-gradient(to bottom,#a6e9ff 0%,#00aeff 88%);
    color: #000;
    border-radius: 18px;
    transition: all .3s ease;;
}

.play-btn:hover{
    background: linear-gradient(to top,#a6e9ff 0%,#00aeff 88%);
	font-weight: bold;
	color: #fff;
}

.demo-btn{
    font-size: 15px;
    text-decoration: none;
    color: white;
    text-align: center;
    align-items: center;
    /* width: 100%; */
    margin-top: 42%;
    padding: 8px;
    display: none;
    margin-left: 30px;
    margin-right: 30px;
    margin:  2% 30px 42% 30px;
    background: linear-gradient(to bottom,#FFBD33 0%,#ff7600 88%);
    color: #000;
    border-radius: 18px;
    transition: all .3s ease;;
}

.demo-btn:hover{
    background: linear-gradient(to top,#FFBD33 0%,#ff7600 88%);
	font-weight: bold;
	color: #fff;
	cursor: pointer;
}

.img-zoom{
    transition: all 0.45s ease-in-out;
}

.ygg-img{
    border: 5px solid #2F2F2F;
}

.hover-btn:hover{
    opacity: 100%;
}

.hover-btn:hover ~ .img-zoom{
    /* transform: scale(1.2); */
    position: relative;
}

.short{
    display: none;
}
.next-btn{
    /* display: none; */
    background: linear-gradient(to bottom,#242424 0%,#515151 46%,#242424 100%);
    width: 15%;
}

.mySlides{
    display: none;
}

.next-btn{
    background-color: #292a2b;
    border: none;
    color: #fff;
}

.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

.dot {
  height: 15px;
  width: 15px;
  margin: 15px 0 10px 2px;
  background-color: #00d8ff;
  border-radius: 100%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active {
  background-color: #717171;
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width : 286px ){
  .text {font-size: 11px}
}


.football-section{
	width: 100%; 
	text-align: center;
	margin-top: 10px; 
	border-radius: 10px; 
}
.football-section ul{
	margin:0;
	padding:0;
}
.football-section ul li{
	 display: inline-block;
	 margin: 2px 5px 2px 5px;  
	 min-width: 30%;
}

.football-section a{ 
	color: #fff;
	width: 100%;
	height: 35px;
	font-size: 15px;
	margin: 3px 2.5% 3px 2.5%; 
	padding-top: 4px; 
	background: url(../images/frame.png) no-repeat center center;
	background-size: 100% 100%;
	text-decoration: none;
	 display: block;
}

.football-section a:hover{
	font-weight: bolder;
}


.switcher{
	position: relative;
	font-size: 1.3em; 
	width: 250px; 
	display: flex;  
	color: rgba(255,255,255, 0.7); 
	margin-bottom: 20px;  
	border: 2px solid gray;
	border-radius: 10px;
	padding: 3px;
	text-align: center;
}

.switcher label {
	min-width: 105px; 
}
	
.switcher .selected{
	display: flex;
	cursor: pointer;
	background: url(../images/dropdown.png) no-repeat center right;
	background-size: 8% 50%; 
	width: 120px; 
} 

.switcher .option{
	width: 110px;
	height: auto; 
	border: 1px solid black;
	background: rgba(255,255,255,1);
	border-radius: 10px;
	position: absolute;
	left: 45%;
	top: 110%;
	display:block;
	z-index:1;
}

.switcher .option .opt a{
	display:flex;
	padding-top: 5px;
	padding-bottom: 10px;
	text-decoration: none;
	color: black; 
	border-radius: 10px;
} 

.switcher .option .opt a div, .switcher .selected div{     /*flag div */
	width: 50px;
	height: auto;
	border: 1px solid rgba(0,0,0, 0.2);
	margin-left: 10px;
	margin-right: 10px;
	padding: 0;
}

.th{
background: url(../images/th-icon.png) no-repeat center center; 
background-size: 100% 100%; 
}

.id{ 
background: url(../images/id-icon.png) no-repeat center center; 
background-size: 100% 100%; 

}

.en{ 
background: url(../images/en-icon.png) no-repeat center center; 
background-size: 100% 100%;  
}



#stages, #bracket {
	background: linear-gradient(rgb(0, 156, 255),rgb(0, 12, 153));
	padding: 8px 20px 8px 20px;
	font-weight: bolder; 
	border: 2px solid rgb(255,177,0);
	border-radius: 15px;
	color: #fff;
} 

#stages option, #bracket option{
	background: rgb(0, 156, 255);
}

@media only screen and ( max-width: 445px ){
	.football-section ul li{
		width: 80%;
	}
}

@media (min-width: 576px){
    .container{
        max-width: 540px;
    }
    
}

@media (min-width: 768px){
    .container{
        max-width: 720px;
    }
    
}

@media (min-width: 992px){
    .container{
        max-width: 960px;
    }
}

@media (min-width: 1200px){
    .container{
        max-width: 1140px;
    }
    
}

@media (max-width: 992px) {
    .slot-sidebar-nav{
        flex-wrap: nowrap;
    }
    .slot-sidebar{
        float: none !important;
        width: 100% !important; 
        flex: none !important;
        max-width: 100% !important;
        padding-right: 0 !important;
    }
    .content{
        float: none !important;
        width: 100% !important;
        flex: none !important;
        max-width: 100% !important;
    }
    .card{
        width: 33.3% !important;
    }
    /*.hover-btn{
        display: none;
    }
    .hover-btn:hover ~ .img-zoom{
        transform: scale(1);
        position: relative;
    }*/
    .btn-provider{
        text-align: center;
        display: block;
    }  
    .enter{
        display: block;
    }
    .btn-provider span{
        position: unset;
    }
    .btn-provider i{
        margin: 0;
    }
    .slot-sidebar-nav li{
        border-bottom: none;
    }
    .slot-sidebar-nav li a p{
        font-size: 13px;
    }
    .img-zoom{
        height: auto;
    }
    .slot-sidebar-nav li a img{
        height: 37.5px !important;
    }
    .maintenance p{
        font-size: 5px;
    }
	#column {
		display: block;
		width: 100%;
		height: auto;
	}
}


					
@media only screen and ( max-width: 1200px ){
	.slot-provider{
	flex-direction: column;
	}
	.slot-provider-body{ 
		width: 100%;
	}  
	#rtplive a{ 
		display:flex;
		height: 53px;
		align-items: center;
		justify-content: center;
	}
					
}
@media only screen and ( max-width: 769px ){
	 
	#rtplive a{  
		height: 80px; 
	}
}
@media only screen and ( max-width: 576px ){
	.slot-provider-body{ 
		flex-direction: column;
	}
	.slot-provider ul li{
		width: 100%;
	}  
}
@media only screen and ( max-width: 668px ){
	#rtplive .slot-sidebar-nav{
		flex-direction: column !important;
	}
	
	#rtplive a{  
		height: auto; 
	}
}

#rtplive a{
	font-weight: bold; 
	text-decoration: none;
	background: #022534;
	font-size: 13px;
}
				
#rtplive a:hover{ 
	color: #ff7600; 
}