@font-face {
  font-family: 'Varela Round';
  src: url('fonts/varelaround-regular.ttf');
}

html * {
  font-family: Varela Round !important;
  color:#000000;
}

h1{
  color: #fff;
  font-size: 3.5em;
  margin: 1em;
}
h2{
  font-size: 2em;
  font-weight: 900;
  margin: 1em 0;
}
h3{
  font-size: 1.5em;
  font-weight: 900;
  margin: 1em 0;
}
h3.h-bg{
  margin: 2em 0 0 0;
  padding: 0.25em 1em;
  background-color: #f9a100;
  width: fit-content;
  border-radius: 1em;
  cursor:pointer;
}
.btn-number{
  background-color:#f9a100; 
  color:#fff; 
  font-size: 2em;
  padding: 0.5em 1em;
  border-radius: 0.3em;
  cursor:auto;
}
p{
  font-size: 15px;
  margin: 1em 0;
}
.abox-navbar{
  padding: 0 200px;
  border-top: 4px solid #FCB542;
  background: linear-gradient(to right, #ffffffde, #ffffff 40%);
}
.navbar-default .navbar-nav>li>a{
  color: darkorange;
  font-size: 12px;
  font-weight: 700;
  margin: 0 5px;
  /*padding-left: 35px;
  padding-right: 35px;*/
}

/* center */
.abox-center{
  text-align: center;
}

/*atur logo*/
.abox-logo{
  height: 100%;
}
.navbar-brand{
  padding: 10px;
}

.btn-primary{
  font-weight: 700;
  padding: 1.2em 2.5em;
  color: darkorange;
  background-color: #fff;
  border: unset;
  border-radius: unset;
}
.btn-primary:hover {
  color: #fff;
  background-color: darkorange;
}

/*BACKGROUND VIDEO*/
#myVideo{
  position: absolute;
  right: 0;
  bottom: 0;
  top:0;
  width: 100%;
  height: 100%;
  background-size: 100% 100%;
  background-color: black; /* in case the video doesn't fit the whole page*/
  opacity: 0.65;
    background-image: /* our video */;
    background-position: center center;
    background-size: contain;
    object-fit: cover; /*cover video background */
    z-index:3;
}

#section0, #section1, #section2{background-color: black!important;
}

/* Layer with position absolute in order to have it over the video
* --------------------------------------- */
#section0 .layer, #section1 .layer1, #section2 .layer2{
  position: absolute;
  z-index: 4;
  width: 100%;
  left: 0;
  top: 32%;

  /*
  * Preventing flicker on some browsers
  * See http://stackoverflow.com/a/36671466/1081396  or issue #183
  */
  -webkit-transform: translate3d(0,0,0);
  -ms-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}

/*solves problem with overflowing video in Mac with Chrome */
#section0{
  overflow: hidden;
}


/* Bottom menu
* --------------------------------------- */
/*#infoMenu li a {
  color: #fff;
}*/


/* Hiding video controls
* See: https://css-tricks.com/custom-controls-in-html5-video-full-screen/
* --------------------------------------- */
video::-webkit-media-controls {
  display:none !important;
}

/* background melengkung */
/*.abox-curve-background {
  clip-path: ellipse(90% 100% at 50% 0%);
}*/ /* END */

header {
  position: relative;
  background-color: black;
  height: 90vh;
  min-height: 25rem;
  width: 100%;
  overflow: hidden;
  clip-path: ellipse(80% 100% at 50% 0%);
}

/* .abox-no-background{
  background:unset!important;
} */

.abox-container{
  background-color:#fff;
  margin-top: -7em;
  position: absolute;
  width: 100%;
  padding-top:5em;
  padding-bottom:5em;
}

.abox-navbuttons {
  display: inline-block;
  overflow: auto;
  overflow-y: hidden;
  max-width: 100%;
  /* margin: 0 0 1em; */
  margin: 3px 10px;
  white-space: nowrap;
}
.abox-navbuttons LI {
  display: inline-block;
  vertical-align: top;
}
.abox-navbuttons LI.active{
  background-color: darkorange;
  border-radius:10px;
  font-weight:900;
}
.abox-navbuttons LI a{
  /* font */
  font-size: initial;
  letter-spacing: -1px;
  margin: 0 15px;
  color:#00000080!important;
}

#fp-nav ul li, .fp-slidesNav ul li{
    margin-bottom:30px;
}
  


/* Hilangkan scrollbar menu tab tapi masih berfungsi scrollnya */
/* Hide scrollbar for Chrome, Safari and Opera */
.abox-navbuttons::-webkit-scrollbar {
display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
.abox-navbuttons {
-ms-overflow-style: none;  /* IE and Edge */
scrollbar-width: none;  /* Firefox */
}
/* END HILANGKAN SCROLLBAR */

.abox-td-hover td:hover { 
  background-color: rgb(249, 228, 201);
}

.abox-td-image-list{
  width:33.3%;
  border-radius: 0.5em;
}

.abox-title-blog{
  display: -webkit-inline-box;
}
.abox-title-blog h3{
  font-weight: unset;
}
.abox-text-gray{
  letter-spacing: -1px;
  color:#00000080;
}

.abox-footer{
  background-color:gray;
  margin-top: 7em;
  position: absolute;
  width: 100%;
  padding-top:3em;
  padding-bottom:3em;
}

.abox-footer p{
  color:white;
  font-size:14px;
}

.abox-footer h4{
  color:white;
  font-size:15px;
  font-weight:900;
}
.abox-footer a{
  color:white;
}
.abox-footer .abox-sosmed{
  color:white;
  width:20px;
  margin-right:10px;
  margin-top:17px;
}

.footer-right{
  padding-top:32px;
}
.footer-right .bold{
  color:white;
  font-weight:900;
}

.abox-youtube {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
}
.abox-youtube-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.abox-article-image-list{
  width:100%;
  border-radius: 0.5em;
}
.article-navigation{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-top: 5em;
}
.abox-content a{
  color:darkorange;
}

.all-game-container{background:white; padding:3em; border:0.5em solid black; border-radius:2em;}
.all-game-border{border:0.15em solid black; border-radius:1em; padding:1em;}
.all-game-grid{display: grid; grid-template-columns: repeat(auto-fit, minmax(30%, 1fr)); grid-gap: 0.5em; width: 100%; padding:1em;}

.client-logos-flex {display: flex; flex-wrap: wrap; justify-content: space-around; gap: 20px; padding: 20px 0; align-items: center;}
.client-logos-flex div {flex: 1 1 calc(16.666% - 1em); /* 6 items per row */ max-width: calc(16.666% - 1em); text-align: center;}
.client-logos-flex img {width: 100%; height: auto;}

/* ===================================================================================================================
Jika ukuran layar 768px atau kurang dari itu */
@media screen and (max-width:1150px){
	h1{font-size: 10vw;}
  .abox-navbar{padding:0 20px; width:100vw; background:#ffffffde; /*position:relative*/; margin:0;}
  .abox-menu{background-color: #ffffff; border-radius:20px;}
  .row{margin-right:unset; margin-left:unset;}
  .abox-td-image-list{padding:2px!important;}
  h3.h-bg{width:100%; text-align:center;}

  /* all-game page */
  .all-game-container{padding:1em; border:none; /*margin:0.3em;*/}
  .all-game-grid{grid-template-columns:none;}
  header{margin-top:unset!important;}
}

/* hapus watermaruk fullpage.js */
.fp-watermark{display:none!important}