/*BISMILLAH*/
/*========================================
v1. love you bunda, rafka, dean, amanda
========================================*/

/* =================================================== RESPONSIVE LAYOUT */
.boxTest-1 {
	border: 1px solid #ddd;
}
/* =================================================== FLEX-X ROW*/
.iniContainer-x {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.iniContainer-x  div.iniCol-1 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 200px;
}
.iniContainer-x > div.iniCol-2 {
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: 300px;
}
.iniContainer-x > div.iniCol-3 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 180px;
  border-left: 1px solid #ddd;
}
/* =================================================== GRID-X */
.inires-x {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-flow: row wrap;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
}
/* =================================================== GRID-Y */
.inires-y {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-flow: column nowrap;
  -ms-flex-flow: column nowrap;
  flex-flow: column nowrap;
}
/* =================================================== BESAR */
.lebar {max-width: 100%; margin: 0 auto;}
.inires-x > .besar-1  {width:8.33333%;}
.inires-x > .besar-2  {width:16.66667%;}
.inires-x > .besar-3  {width:25%;}
.inires-x > .besar-4  {width:33.333%;}
.inires-x > .besar-5  {width:41.66667%;}
.inires-x > .besar-6  {width:50%;}
.inires-x > .besar-7  {width:58.33333%;}
.inires-x > .besar-8  {width:66.66667%;}
.inires-x > .besar-9  {width:75%;}
.inires-x > .besar-10 {width:83.33333%;}
.inires-x > .besar-11 {width:91.66667%;}
.inires-x > .besar-12 {width:100%;}

.show-hanya-kecil {display: none}
.show-sedang {display: none}
.show-sedang-up {display: block}

/* =================================================== SEDANG */
@media (min-width: 800px) and (max-width: 1200px) {
  .lebar {max-width: 100%; margin: 0 auto;}
  .inires-x > .sedang-1  {width:8.33333%;}
  .inires-x > .sedang-2  {width:16.66667%;}
  .inires-x > .sedang-3  {width:25%;}
  .inires-x > .sedang-4  {width:33.333%;}
  .inires-x > .sedang-5  {width:41.66667%;}
  .inires-x > .sedang-6  {width:50%;}
  .inires-x > .sedang-7  {width:58.33333%;}
  .inires-x > .sedang-8  {width:66.66667%;}
  .inires-x > .sedang-9  {width:75%;}
  .inires-x > .sedang-10 {width:83.33333%;}
  .inires-x > .sedang-11 {width:91.66667%;}
  .inires-x > .sedang-12 {width:100%;}

  .show-hanya-besar {display: none}
  .show-sedang {display: block}
  .show-sedang-up {display: block}



}

/* =================================================== KECIL */
@media only screen and (max-width: 1025px) {
  .lebar {max-width: 100%; margin: 0 auto;}
  .inires-x > .kecil-1  {width:8.33333%;}
  .inires-x > .kecil-2  {width:16.66667%;}
  .inires-x > .kecil-3  {width:25%;}
  .inires-x > .kecil-4  {width:33.333%;}
  .inires-x > .kecil-5  {width:41.66667%;}
  .inires-x > .kecil-6  {width:50%;}
  .inires-x > .kecil-7  {width:58.33333%;}
  .inires-x > .kecil-8  {width:66.66667%;}
  .inires-x > .kecil-9  {width:75%;}
  .inires-x > .kecil-10 {width:83.33333%;}
  .inires-x > .kecil-11 {width:91.66667%;}
  .inires-x > .kecil-12 {width:100%;}

  .show-hanya-kecil {display: block}
  .show-sedang {display: block}
  .show-hanya-besar {display: none}
  .show-sedang-up {display: none}

  /* =================================================== FLEX-X ROW*/
.iniContainer-x {
  display: flex;
  flex-direction: column;
}
.iniContainer-x > div.iniCol-1 {
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: 100%;
}
.iniContainer-x > div.iniCol-2 {
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: 100%;
}
.iniContainer-x > div.iniCol-3 {
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: 100%;
  border-left: 0px solid #ddd;
}


}

/* =================================================== BESAR X */

/* =================================================== BESAR X */
@media screen and (min-width: 1440px) {.boxPadi {max-width: 1500px;margin: 0 auto;}}


/* =========================================================================================== GAYA */
.iniSticky {
  position: sticky;
  position: -webkit-sticky;
  position: -moz-sticky;
  position: -ms-sticky;
  position: -o-sticky;
  top: 0;
  z-index: 1001;
}

/*ALHAMDULILLAH*/