@import "https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,400;0,700;1,400;1,700&display=swap";
@import "https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;0,900;1,400;1,700;1,900&display=swap";

/* khusus mobile */
@media screen and (max-width: 600px) {
  #genflix #pricing .bonus {
    text-align: center;
  }
}   
@media screen and (max-width: 600px) {
  header #primary .oxygen-packages {
    min-height: initial;
    margin-bottom: 1px;
  }
  header #primary .oxygen-packages h2 {
    font-size: 24px !important;
  }
  header #primary .oxygen-packages p {
    display: none;
  }
}
@media screen and (max-width: 600px) {
  #genflix #pricing {
    flex-direction: column-reverse;
  }
}
@media screen and (max-width: 600px) {
  body .branches:not(.ho) {
    width: 100%;
    margin: 5px 0;
  }
} 
@media screen and (max-width: 600px) {
  body h1 {
    font-size: 3em;
  }
  body h2 {
    font-size: 2.5em;
  }
  body h3 {
    font-size: 2em;
  }
  body h4 {
    font-size: 1.5em;
  }
  body h5 {
    font-size: 1.15em;
  }
  body h6 {
    font-size: 1em;
  }
} 
@media screen and (max-width: 600px) {
  #pnf #links li {
    display: initial;
  }
} 
@media screen and (max-width: 768px) {
  header #secondary {
    display: none;
  }
} 
@media screen and (max-width: 600px) {
  header #primary .navbar-menu .navbar-end > .navbar-item {
    padding: 0.5rem 0.75rem;
  }
  header #primary .navbar-menu .navbar-end > .navbar-item .navbar-link {
    padding: 0;
  } 
}
@media screen and (max-width: 600px) {
  .tnc {
    width: 100%;
  }
}
@media screen and (min-width: 1367px) {
  #vidtuts #yt-vplayer iframe {
    width: 1260px;
    height: 620px;
  }
}
@media screen and (min-width: 600px) and (max-width: 1366px) {
  #vidtuts #yt-vplayer iframe {
    width: 800px;
    height: 450px;
  }
}
@media screen and (max-width: 480px) {
  #vidtuts #yt-vplayer iframe {
    width: 100%;
    height: 56.25vw;
  }
} 
@media screen and (max-width: 600px) {
  header #primary .is-mega .navbar-dropdown {
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5333333333);
  }
} 
@media screen and (max-width: 600px) {
  header #primary {
    min-height: initial;
  }
  header #primary #mainNav {
    width: 100%;
    height: calc(100vh + 6em);
    position: absolute;
    background: #efefef;
    padding: 3rem 2rem;
  }
  header #primary #mainNav .navbar-item {
    font-size: 18px;
    font-weight: 800;
  }
  header #primary #mainNav .navbar-item .navbar-dropdown {
    display: none;
    padding-top: 0;
  }
  header #primary #mainNav .navbar-item .navbar-dropdown.is-active {
    display: block;
  }
  header #primary #mainNav .navbar-item .navbar-dropdown > .navbar-item {
    font-size: 14px;
    padding-left: 2.5em;
  }
  header #primary #mainNav .navbar-item.btn-placeholder {
    padding: 0;
  }
  header #primary #mainNav .navbar-item.btn-placeholder .buttons {
    display: flex;
    justify-content: center;
    padding: 1em;
    margin: 0 auto;
    border-top: 1px dotted #777;
  }
  header #primary #mainNav .navbar-item.btn-placeholder .buttons .button {
    margin-bottom: 0;
  }
  header #primary #mainNav .navbar-item.btn-placeholder .buttons .button img {
    max-height: 3rem;
  }
  header
    #primary
    #mainNav
    .navbar-item.btn-placeholder
    .buttons
    .button#oxygames-menu {
    width: 100%;
    border-radius: 3em;
  }
  header #primary #mainNav .navbar-item.btn-placeholder:last-child .buttons {
    border-bottom: 1px dotted #777;
  }
  header #primary #secondary-mobile {
    display: block;
  }
}
@media screen and (max-width: 600px) {
  header #primary .oxygen-packages-alt {
    max-width: 100% !important;
  }
}
@media screen and (max-width: 600px) {
  header #primary .oxygen-packages-alts {
    max-width: 100% !important;
  }
}

@media screen and (max-width: 600px) { 
	
  .plan-container#streamplus {
    background-image: url(../images/banners/banner_streamplus_bawah_mobile.png);
  }
} 
@media screen and (max-width: 600px) {
  .plan-container#zoom {
    background-image: url(../images/site/zoom-bg.html);
  }
} 
@media screen and (max-width: 600px) {
  .plan-container#power {
    background-image: url(../images/site/power-bg.html);
  }
}
@media screen and (max-width: 600px) {
  footer .footer { 
    background: #111;
    /* background-image: url('../contents/tematikrms/design page oxygen.id-04.jpg'); */
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    margin: 0;
  }
  footer .footer.columns > .column:not(:last-child) {
    margin-bottom: 2em;
  }
}
@media screen and (max-width: 768px) {
  #sales {
    display: initial;
    top: auto;
    bottom: 16px;
    left: 10px;
  }
  #sales.direct {
    max-width: 70%;
  }
  #sales.direct ul li {
    width: 30%;
  }
  #sales.tele {
    max-width: 40%;
  }
  #sales.tele ul li {
    width: 45%;
  }
  #sales ul {
    border-radius: 50px;
    width: initial;
  }
  #sales ul li {
    display: inline-block;
  }
  #sales ul li:not(:last-child) {
    border-bottom: none;
  }
  #sales ul li a {
    padding: 5px;
    line-height: 12px;
  }
  #sales ul li a i {
    font-size: 18px;
  }
  #sales ul li a span {
    display: block;
    font-size: 10px;
    font-weight: 600;
  }
}
@media screen and (max-width: 600px) {
  .plan-container .plan-name {
    font-size: 14px;
    margin: 0 auto 1em;
    padding: 0px 0px 2px;
  }
}
@media screen and (max-width: 600px) {
  #oxygames {
    background-image: url(images/site/oxygames/october-hero.html);
  }
}
@media screen and (max-width: 600px) {
  .plan-container#stream {
    background-image: url(../contents/newbanner/banner_stream.jpg);
  }
}
@media screen and (max-width: 600px) {
  #oxygames #ala-carte {
    padding: 2em 0;
  }
  #oxygames #ala-carte img {
    width: 100%;
    margin: 0 auto;
    display: block;
  }
  #oxygames #ala-carte h2 {
    font-size: 2em;
    text-align: center;
  }
  #oxygames #ala-carte #pricing {
    margin: 0;
  }
}
@media screen and (max-width: 600px) {
  #oxygames #ala-carte #pricing .plan-container {
    margin: 2em auto 0;
    padding: 1em;
    width: 90%;
  }
  #oxygames #ala-carte #pricing .plan-container img.plan-name {
    width: 100%;
  }
  #oxygames #ala-carte #pricing .plan-container .plan-name {
    font-size: 14px;
    margin: 0 auto 1em;
    padding: 0px 0px 2px;
  }
  #oxygames #ala-carte #pricing .plan-container .price {
    font-size: 2em;
  }
}
@media screen and (max-width: 600px) {
  .plan-container#sf-ala-carte .section #emblem {
    width: 150px;
  }
  .plan-container#sf-ala-carte .section .pack-section > .columns .column {
    padding: 1em 2.5em;
  }
  .plan-container#sf-ala-carte
    .section
    .pack-section
    > .columns
    .column.display {
    padding: 0;
  }
  .plan-container#sf-ala-carte .section .pack-section > .columns .column h4,
  .plan-container#sf-ala-carte
    .section
    .pack-section
    > .columns
    .column
    .pack-price {
    text-align: center;
  }
  .plan-container#sf-ala-carte
    .section
    .pack-section
    > .columns
    .column
    .pack-price
    sub {
    top: -10px;
  }
  .plan-container#sf-ala-carte
    .section
    .pack-section
    > .columns
    .column
    .pack-price.x2 {
    font-size: 5em;
  }
  .plan-container#sf-ala-carte
    .section
    .pack-section
    > .columns
    .column
    .pack-price.x2
    sup {
    font-size: 30px;
  }
  .plan-container#sf-ala-carte
    .section
    .pack-section
    > .columns
    .column
    .pack-price.x2
    sub {
    font-size: 20px;
    margin-left: -62px;
    top: -17px;
  }
  .plan-container#sf-ala-carte .section .pack-section > .columns.is-vcentered {
    margin-bottom: 4em;
  }
  .plan-container#sf-ala-carte
    .section
    .pack-section#kelas-pintar
    > .columns
    .column {
    padding: 1em;
  }
  .plan-container#sf-ala-carte .section .pack-section#kelas-pintar #pricing h5 {
    font-size: 1.5em;
  }
  .plan-container#sf-ala-carte
    .section
    .pack-section#kelas-pintar
    #pricing
    .columns
    .column {
    margin: 1em 0;
  }
  .plan-container#sf-ala-carte .modal .modal-content {
    width: 100%;
  }
}
@media screen and (max-width: 600px) {
  #oxygames #ala-carte #pricing .column#checked {
    width: 100%;
  }
  #oxygames #ala-carte #pricing .column#checked ul {
    width: 90%;
    margin: 0 auto;
    text-align: center;
  }
  #oxygames #ala-carte #pricing .column#checked ul li {
    list-style-type: none;
    font-size: 18px;
    width: 100%;
  }
}
@media screen and (max-width: 600px) {
  .plan-container#stream {
    background-image: url(../contents/newbanner/banner_stream.jpg);
  }
}
@media screen and (max-width: 600px) {
  #oxygames #platforms {
    text-align: center;
  }
  #oxygames #platforms.with-media-bg .container {
    padding: 0em 5%;
  }
  #oxygames #platforms h2 {
    font-size: 2em;
  }
  #oxygames #platforms h2 span {
    font-size: 0.85em;
  }
  #oxygames #platforms p {
    font-size: 18px;
  }
  #oxygames #platforms .columns {
    display: flex;
    flex-direction: column-reverse;
  }
  #oxygames #platforms .columns .column:first-child {
    width: 100%;
  }
}
@media screen and (max-width: 600px) {
  .plan-container#squad {
    background-image: url(images/site/squad-bg.html);
  }
  .plan-container#squad #emblem {
    width: 75%;
  }
  .plan-container#squad .section.head h2 {
    font-size: 1.5em;
  }
  .plan-container#squad .feat-content {
    margin-top: 0;
  }
}
@media screen and (max-width: 600px) {
  .plan-container .plans .section.package .pricing {
    margin: 0;
  }
}
@media screen and (max-width: 600px) {
  .plan-container .plans {
    font-size: 14px;
  }
  .plan-container .plans .section {
    padding: 2rem 1rem;
  }
  .plan-container .plans .section.head {
    padding: 0;
  }
  .plan-container .plans .section.head .container.is-fluid {
    padding-left: 0;
    padding-right: 0;
  }
  .plan-container .plans .section.head .container.is-fluid .feat-content {
    max-width: 100%;
    padding: 2em 1em;
  }
  .plan-container .plans .section.head .container.is-fluid .feat-content p {
    font-size: 1.25em;
    max-width: 100%;
  }
  .plan-container
    .plans
    .section.head
    .container.is-fluid
    .feat-content
    .feat-list
    li {
    font-size: 12px;
    margin: 0 5px;
    padding: 5px;
  }
}
@media screen and (max-width: 600px) {
  #gak-bisa-pelan .tnc {
    width: 100%;
    padding: 1em 1.5em;
  }
}




















































































/* khusus web */
html {
  scroll-behavior: smooth;
}
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: #000;
}
::-webkit-scrollbar-thumb {
  background: #0b8344;
  border-radius: 3px;
  cursor: pointer;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(
    150deg,
    rgb(11, 131, 68) 0%,
    rgb(48, 195, 118) 100%
  );
}
.modal {
  z-index: 9999;
}
body {
  position: relative;
  font-family: "Lato", sans-serif;
  font-size: 16px;
  color: #505152;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body h1,
body h2,
body h3,
body h4,
body h5,
body h6 {
  font-weight: 600;
  line-height: 1.35em;
  padding-bottom: 20px;
}
body h1 {
  font-size: 4em;
}
body h1.hero-title {
  font-size: 3em;
}
body h2 {
  font-size: 3em;
}
body h3 {
  font-size: 2.5em;
}
body h4 {
  font-size: 2em;
}
body h5 {
  font-size: 1.5em;
}
body h6 {
  font-size: 1em;
}
body p:not(:last-child) {
  padding-bottom: 1em;
}
body small {
  font-size: 0.8em !important;
}

body .strike::before {
  background: url(images/site/stroke.html) no-repeat center center;
  content: "aaa";
  position: absolute;
  z-index: 1;
  -webkit-text-fill-color: rgba(0, 0, 0, 0);
  letter-spacing: -2px;
  transform: rotate(-25deg);
}
body .hide {
  visibility: collapse;
}
body .hidden {
  display: none;
}
body .gradient-title {
  background: linear-gradient(
    150deg,
    rgb(11, 131, 68) 0%,
    rgb(48, 195, 118) 100%
  );
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: rgba(0, 0, 0, 0);
}
body .bold-text {
  font-weight: 800;
}
body .button {
  font-size: 14px;
  color: #0b8344;
  height: auto;
  min-width: 100px;
  padding-top: 5px;
  padding-bottom: 5px;
  border-radius: 20px;
  transition: all 0.25s ease-in;
}
body .button,
body a {
  transition: all 0.25s ease-in;
}
body .button.is-primary {
  background: #0b8344;
}
body .button.is-light {
  background: #f9bc13;
}
body .button.is-light:hover {
  background: #f2d179;
}
body .cta {
  font-weight: 900;
}
body .cta.large {
  font-size: 1.25em;
  min-width: 180px;
}
body .branches {
  padding: 1em 0;
}
body .branches h6 {
  padding-bottom: 0;
}
body .branches a {
  font-weight: bold;
}
body .branches:not(.ho) {
  width: 24%;
  margin: 0.5%;
  background: #f8f8f8;
  text-align: center;
}
body .branches:not(.ho) p {
  font-size: 14px;
}
body .branches:not(.ho) i {
  display: inline-block;
  margin-right: 3px;
  font-weight: 900;
}

body #form-response {
  margin-bottom: 2em;
  padding: 1em;
  font-size: 14px;
  border-radius: 5px;
  display: none;
  color: #999;
}
body #form-response.success {
  display: block;
  border: 3px solid #0b8344;
}
body #form-response.success p {
  padding: 0;
}
body #form-response.success p span {
  font-weight: bold;
}
body #form-response.warning {
  display: block;
  border: 3px solid #f9bc13;
}
body #form-response.warning p {
  padding: 0;
}
body #form-response.warning p span {
  font-weight: bold;
}
body .grecaptcha-badge {
  visibility: hidden;
}
body .lSSlideOuter {
  position: relative;
}
body .lSSlideOuter .lSPager.lSpg {
  position: absolute;
  width: 100%;
  bottom: 10px;
}
body .modal-open {
  display: block;
  font-size: 14px;
  font-weight: bold;
  background: #0b8344;
  color: #fff;
  padding: 5px 1em;
  margin: 1em auto;
  border-radius: 5px;
  width: max-content;
}
.button.is-info.is-outlined {
  color: #3298dc !important;
}
.button.is-info.is-outlined:hover {
  color: #fff !important;
}
.clear-ratio {
  aspect-ratio: initial !important;
}
.chat {
  display: block;
  width: max-content;
  margin: 5px auto 0;
  background: #0b8344;
  color: #fff;
  font-size: 1em;
  padding: 3px 6px;
  border-radius: 6px;
}
.chat i {
  margin-right: 5px;
}
.chat:hover {
  color: #fff;
  background: linear-gradient(
    150deg,
    rgb(11, 131, 68) 0%,
    rgb(48, 195, 118) 100%
  );
}
header {
  position: sticky;
  z-index: 999;
  top: 0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1333333333);
  font-family: "Nunito", sans-serif;
}
header .navbar-item {
  font-size: 14px;
}
header .navbar-item:hover,
header .navbar-item .navbar-link:hover {
  color: #0b8344;
}
header .navbar-item .navbar-link::after {
  border-color: #4a4a4a;
}
header .navbar-item i {
  font-size: 13px;
  display: inline-block;
  margin-right: 0px;
}
header #secondary {
  font-family: "Lato", sans-serif;
  font-weight: 600;
  border-bottom: 1px solid #eee;
  min-height: 44px;
}
header #secondary .navbar-item {
  font-size: 13px;
}
header #secondary .navbar-item.oxygames {
  background: #191414;
  width: 120px;
}
header #secondary .navbar-start .navbar-item {
  padding: 0.2em 0.75em;
}
header #secondary .navbar-start .navbar-item:not(:last-child) {
  border-right: 1px solid #eee;
}
header #primary .navbar-menu .navbar-end > .navbar-item {
  padding: 1.25rem 0.75rem;
}

header #primary .navbar-item {
  font-size: 16px;
  font-weight: 900;
}
header #primary .navbar-item .navbar-link::after {
  font-size: 12px;
}
header #primary .navbar-item i {
  margin-right: 5px;
}
header #primary .navbar-item:hover,
header #primary .navbar-item.has-dropdown:hover .navbar-link {
  background: none;
}
header #primary #secondary-mobile {
  display: none;
  text-align: center;
}
header #primary .is-mega .navbar-dropdown {
  margin: 0;
  padding: 0;
  min-width: 96%;
  width: 96%;
  transform: translateX(2%);
  overflow: hidden;
  border-radius: 0;
  border-top: 1px solid #555;
  box-shadow: 0 15px 20px rgba(0, 0, 0, 0.5333333333);
}
header #primary .is-mega .navbar-dropdown .container.is-fluid {
  margin: 0;
  padding: 0;
}
header #primary .is-mega .navbar-dropdown .container.is-fluid .columns {
  margin: 0;
}

header #primary .oxygen-packages {
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  cursor: pointer;
  min-height: 200px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  transition: all 0.4s ease-out;
  z-index: 0;
}
header #primary .oxygen-packages:hover::before {
  opacity: 0.85;
}
header #primary .oxygen-packages:hover .service-area {
  display: block;
}
header #primary .oxygen-packages::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: "";
  z-index: 0;
  /* opacity: 0.75;
  transition: opacity 0.4s ease-out;
  background: #000; */
}
header #primary .oxygen-packages .pack-info {
  z-index: 1;
  color: #fff;
}
header #primary .oxygen-packages .pack-info h2 {
  font-family: "Lato", sans-serif;
  font-size: 4em;
  font-weight: 800;
  line-height: 1em;
  padding-bottom: 0;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: rgba(0, 0, 0, 0);
}
header #primary .oxygen-packages .pack-info p {
  font-weight: normal;
  max-width: 85%;
  margin: 0 auto;
  font-size: 14px;
}

header #primary .oxygen-packages#zoom {
  background-image: url(../images/site/res_stream.png);
}
header #primary .oxygen-packages#zoom h2 {
  background: linear-gradient(
    345deg,
    rgb(139, 200, 63) 0%,
    rgb(179, 255, 44) 100%
  );
}
header #primary .oxygen-packages#power {
  background-image: url(../images/site/power-bg.jpg);
}
header #primary .oxygen-packages#power h2 {
  background: linear-gradient(
    345deg,
    rgb(214, 16, 135) 0%,
    rgb(255, 117, 224) 100%
  );
}
header #primary .oxygen-packages#sporty {
  background-image: url(../images/site/sporty-bg.jpg);
}
header #primary .oxygen-packages#sporty h2 {
  background: linear-gradient(
    345deg,
    rgb(17, 119, 191) 0%,
    rgb(29, 185, 235) 100%
  );
}
header #primary .oxygen-packages#squad {
  background-image: url(../images/site/squad-bg.jpg);
}
header #primary .oxygen-packages#squad h2 {
  background: linear-gradient(
    345deg,
    rgb(252, 17, 81) 0%,
    rgb(190, 9, 61) 100%
  );
}
header #primary .oxygen-packages#oxygames {
  background-image: url(../images/site/oxygames/october-hero.html);
}
header #primary .oxygen-packages#oxygames h2 {
  background-clip: initial !important;
  text-fill-color: initial !important;
  -webkit-background-clip: initial !important;
  -webkit-text-fill-color: initial !important;
  background: url(images/site/oxygames/icon.html) no-repeat center center;
  background-size: auto 100%;
  text-indent: -9999px;
}

header #primary .oxygen-packages-streamnew{
	margin-top: 10px;
  font-family: "Lato", sans-serif;
  margin: 0;
  /* padding: 0;
  max-width: 40%; */
  background-image: url(../images/site/menu_new_stream_navbar.jpg);
	background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

header #primary .oxygen-packages-streamnew img{
	margin-left: auto;
	margin-right: auto;
	width: 500px;
	height: 500px; 
}

/* header #primary .oxygen-packages-streamnew a{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 50%; 
} */
header #primary .oxygen-packages-streamnew p{
	margin: 0;
	text-decoration: none;
	color: black;
	font-family: "Lato", sans-serif;
	font-size: 16px;
	margin-top: 100px;
	text-align: center;
}

header #primary .oxygen-packages-streamplusnew{
  font-family: "Lato", sans-serif;
  margin: 0;
  /* padding: 0;
  max-width: 40%; */
  background-image: url(../images/site/banner_navbar_streamplusnew.jpg);
	background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

header #primary .oxygen-packages-streamplusnew p{
	margin: 0;
	text-decoration: none;
	color: black;
	font-family: "Lato", sans-serif;
	font-size: 16px;
	margin-top: 100px;
	text-align: center;
}
header #primary .oxygen-packages-alt {
  font-family: "Lato", sans-serif;
  margin: 0;
  padding: 0;
  max-width: 10%;
  background: linear-gradient(
    150deg,
    rgb(11, 131, 68) 0%,
    rgb(77, 195, 118) 100%
  );
}

header #primary .oxygen-packages-alts {
  font-family: "Lato", sans-serif;
  margin: 0;
  padding: 0;
  max-width: 10%;
  background: linear-gradient(
    150deg,
    rgb(11, 131, 68) 0%,
    rgb(77, 195, 118) 100%
  );
}

header #primary .oxygen-packages-alt a {
  margin: 0;
  padding: 0;
  flex-direction: column;
  justify-content: center;
  white-space: initial;
  height: 50%;
  font-size: 1.5em;
  padding: 5px;
  text-align: center;
  color: #fff;
}

header #primary .oxygen-packages-alts a {
  margin: 0;
  padding: 0;
  flex-direction: column;
  justify-content: center;
  white-space: initial;
  height: 50%;
  font-size: 1.5em;
  padding: 5px;
  text-align: center;
  color: #fff;
	top: 50px;
}

header #primary .oxygen-packages-alt a:not(:last-child) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}

header #primary .oxygen-packages-alts a:not(:last-child) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}

header #primary .oxygen-packages-alt a span {
  display: block;
  font-size: 13px;
  font-weight: 700;
}

header #primary .oxygen-packages-alts a span {
  display: block;
  font-size: 13px;
  font-weight: 700;
}
header #primary .oxygen-packages-alt#ala-carte {
  background: linear-gradient(
    345deg,
    rgb(11, 131, 68) 0%,
    rgb(9, 161, 90) 100%
  ) !important;
}

header #primary .oxygen-packages-alts#ala-carte {
  background: linear-gradient(
    345deg,
    rgb(11, 131, 68) 0%,
    rgb(9, 161, 90) 100%
  ) !important;
}
header #primary .oxygen-packages-alt#ala-carte a {
  height: 100% !important;
}

header #primary .oxygen-packages-alts#ala-carte a {
  height: 100% !important;
}

header #primary .oxygen-packages-alt#ala-carte a img {
  width: auto;
}
header #primary .oxygen-packages-alts#ala-carte a img {
  width: auto;
}

footer {
  background: #111;
  /* background-image: url('../contents/tematikrms/design page oxygen.id-02.jpg'); */
  background-position: center;
  background-repeat: no-repeat;
   background-size: cover;
}
footer .footer {
  margin-top: 0;
  margin-bottom: 0 !important;
  padding: 3rem 1.5rem;
  /* background: #111; */
  color: #fff;
}

footer .footer .content {
  font-weight: 600;
  margin-bottom: 0;
}
footer .footer ul {
  margin: 7px 0 0 0;
  padding: 0;
}
footer .footer ul li {
  list-style: none;
}
footer .footer ul li.sep {
  height: 1px;
  border-bottom: 1px solid #777;
  max-width: 10em;
}
footer .footer ul li a {
  color: #eee;
  font-size: 13px;
}
footer .footer ul li a:hover {
  color: #f9bc13;
}
footer .footer #copy {
  font-size: 13px;
}
.oxygen-tv a {
  background: crimson;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  border-color: rgba(0, 0, 0, 0);
}
.oxygen-tv a:hover {
  color: #fff;
  border-color: rgba(0, 0, 0, 0);
  background: rgba(220, 20, 60, 0.6666666667);
}
.social-links {
  display: flex;
  justify-content: center;
  align-items: center;
}
.social-links#footer-social a {
  display: block;
  margin: 0 15px;
  font-size: 24px;
  color: #f9bc13;
}
.social-links#footer-social a:hover {
  color: #505152;
}
#sales {
  position: fixed;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 99;
  /* top: 140px; */
  right: 10px;
}
#sales img {
  width: 140px;
  display: block;
  margin-bottom: -12px;
  z-index: 0;
}
#sales ul {
  background: #0b8344;
  padding: 5px;
  text-align: center;
  font-size: 10px;
  border-radius: 10px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2666666667);
  border: 1px solid rgba(255, 255, 255, 0.5333333333);
  width: max-content;
}
#sales ul li:not(:last-child) {
  border-bottom: 1px dotted #fff;
}
#sales ul li a {
  padding: 1.25em 0;
  display: block;
  color: #fff;
}
#sales ul li a i {
  display: block;
  font-size: 32px;
  margin-bottom: 5px;
}
#sales ul li a span {
  display: block;
  font-size: 11px;
  font-weight: 600;
}

#call-center {
  position: fixed;
  bottom: 16px;
  right: 120px;
  left: auto;
  text-align: center;
  font-size: 10px;
  border-radius: 10px 0 0 10px;
  box-shadow: -1px 0 2px rgba(0, 0, 0, 0.2666666667);
  z-index: 99;
  width: 180px;
}
#call-center .column {
  width: max-content;
  background: #0b8344;
  padding: 5px 10px;
  margin: 0 3px 0 0;
  border-radius: 5px;
}
#call-center a {
  color: #fff;
  width: max-content;
}
#call-center a i {
  display: block;
  font-size: 32px;
}
#call-center a span {
  display: block;
  font-size: 12px;
  font-weight: 600;
}
.plan-container {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}
.plan-container .plan-name {
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: rgba(0, 0, 0, 0);
}

header #primary .oxygen-packages#stream {
    background-image: url(../images/site/res_stream.png); 
}

 

header #primary .oxygen-packages#streamplus {
	background-image: url(../images/site/res_streamplus.png); 
}
header #primary .oxygen-packages#stream h2 {
    background: linear-gradient(
      345deg,
      rgb(11, 131, 68) 0%,
      rgb(16, 236, 133) 100%
    );
  }
/* stream */
.plan-container#stream {
  background-image: url(../contents/newbanner/banner_stream.jpg);
  /* background-image: url(../images/site/stream-bg.jpg);
  background-image: url(../images/site/stream-bg.webp); */
}
.plan-container#stream .plan-name,
.plan-container#stream a.cta,
.plan-container#stream .pack-name,
.plan-container#stream #channels h1.title,
.plan-container#stream #channels .ch-list h3,
.plan-container#stream #channels .ch-list ul li.hd::after {
  background: linear-gradient(
    345deg,
    rgb(11, 131, 68) 0%,
    rgb(16, 236, 133) 100%
  );
}
.plan-container#stream #ala-carte {
  background: linear-gradient(
    345deg,
    rgba(11, 131, 68, 0.65) 0%,
    rgba(16, 236, 133, 0.65) 100%
  );
}

/* .featured.plan-container#stream .plan-name span,
.featured.plan-container#stream a.cta {
  background: linear-gradient(
    345deg,
    rgb(11, 131, 68) 0%,
    rgb(16, 236, 133) 100%
  );
} */
#gak-bisa-pelan #stream,
#gak-bisa-pelan #zoom,
#gak-bisa-pelan #power {
  background: none;
  margin: 2.5em 0;
}
#gak-bisa-pelan #stream .package {
  outline: 1px solid #0fcf73;
}
#gak-bisa-pelan #stream .pack-name {
  background: #0fcf73 !important;
}


/* stream + */
/* .plan-container#streamplus {
  background-image: url(../images/banners/banner_streamplus_bawah.png);
  background-image: url(../images/banners/banner_streamplus_bawah.png);
} */

.plan-container#streamplus_new {
  background-image: url(../contents/newbanner/banner_streamplus.jpg);
  /* background-image: url(../images/banners/streamplus_new_listban_light.png); */
}
.plan-container#streamplus .plan-name,
.plan-container#streamplus a.cta,
.plan-container#streamplus .pack-name,
.plan-container#streamplus #channels h1.title,
.plan-container#streamplus #channels .ch-list h3,
.plan-container#streamplus #channels .ch-list ul li.hd::after {
  background: linear-gradient(
    345deg,
    rgb(11, 131, 68) 0%,
    rgb(16, 236, 133) 100%
  );
}
.plan-container#streamplus #ala-carte {
  background: linear-gradient(
    345deg,
    rgba(11, 131, 68, 0.65) 0%,
    rgba(16, 236, 133, 0.65) 100%
  );
}
.featured.plan-container#streamplus .plan-name span,
.featured.plan-container#streamplus a.cta {
  background: linear-gradient(
    345deg,
    rgb(11, 131, 68) 0%,
    rgb(16, 236, 133) 100%
  );
}
#gak-bisa-pelan #streamplus,
#gak-bisa-pelan #zoom,
#gak-bisa-pelan #power {
  background: none;
  margin: 2.5em 0;
}
#gak-bisa-pelan #streamplus .package {
  outline: 1px solid #0fcf73;
}
#gak-bisa-pelan #streamplus .pack-name {
  background: #0fcf73 !important;
} 
/* stream */
.plan-container#zoom {
  background-image: url(../images/site/zoom-bg.jpg);
  background-image: url(../images/site/zoom-bg.html);
}
.plan-container#zoom .plan-name,
.plan-container#zoom a.cta,
.plan-container#zoom .pack-name,
.plan-container#zoom #channels h1.title,
.plan-container#zoom #channels .ch-list h3,
.plan-container#zoom #channels .ch-list ul li.hd::after {
  background: linear-gradient(
    345deg,
    rgb(139, 200, 63) 0%,
    rgb(179, 255, 44) 100%
  );
}
.plan-container#zoom #ala-carte {
  background: linear-gradient(
    345deg,
    rgba(139, 200, 63, 0.65) 0%,
    rgba(179, 255, 44, 0.65) 100%
  );
}
 

.plan-container#power {
  background-image: url(../images/site/power-bg.jpg);
  background-image: url(../images/site/power-bg.html);
}
.plan-container#power .plan-name,
.plan-container#power a.cta,
.plan-container#power .pack-name,
.plan-container#power #channels h1.title,
.plan-container#power #channels .ch-list h3,
.plan-container#power #channels .ch-list ul li.hd::after,
.plan-container#power #channels.xstream #ch-premium .ch-list ul li {
  background: linear-gradient(
    345deg,
    rgb(214, 16, 135) 0%,
    rgb(255, 117, 224) 100%
  );
}
.plan-container#power #ala-carte {
  background: linear-gradient(
    345deg,
    rgba(214, 16, 135, 0.65) 0%,
    rgba(255, 117, 224, 0.65) 100%
  );
}

.plan-container#sf-ala-carte {
  color: #fff;
}
.plan-container#sf-ala-carte .plan-name,
.plan-container#sf-ala-carte a.cta {
  background: #fff;
}
.plan-container#sf-ala-carte .plan-name {
  padding-bottom: 0;
  line-height: 1em;
}
.plan-container#sf-ala-carte .plans {
  background: linear-gradient(
    345deg,
    rgb(11, 131, 68) 0%,
    rgb(9, 161, 90) 100%
  );
}
.plan-container#sf-ala-carte .section.package {
  background: none;
}
.plan-container#sf-ala-carte .pack-section {
  background: #fff;
  margin-bottom: 40px;
  border-radius: 20px;
}
.plan-container#sf-ala-carte .pack-section > .columns {
  color: #121209 !important;
  margin: 0;
  padding: 0;
}
.plan-container#sf-ala-carte .pack-section > .columns .column {
  padding: 1em;
}
.plan-container#sf-ala-carte .pack-section > .columns .column small {
  display: block;
}
.plan-container#sf-ala-carte .pack-section > .columns .column.display {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
}
.plan-container#sf-ala-carte .pack-section > .columns .column.display img {
  width: 85%;
  margin: 1em auto;
  filter: drop-shadow(0px 7px 35px rgba(0, 0, 0, 0.1333333333));
}
.plan-container#sf-ala-carte
  .pack-section#telephony
  > .columns
  .column.display {
  padding: 0;
}
.plan-container#sf-ala-carte .pack-section#telephony > .columns .column {
  padding: 1em 2em;
}
.plan-container#sf-ala-carte .pack-section h3 {
  background: linear-gradient(
    345deg,
    rgb(11, 131, 68) 0%,
    rgb(9, 161, 90) 100%
  );
  color: #fff;
  padding: 10px 0;
  font-size: 1.5em;
  font-weight: 900;
  text-align: center;
  border-radius: 0 0 20px 20px;
  width: 80%;
  min-width: 220px;
  line-height: 0.9em;
}
.plan-container#sf-ala-carte .pack-section h3 small {
  display: block;
  font-size: 0.7em !important;
  font-weight: normal;
}
.plan-container#sf-ala-carte .pack-section h4 {
  font-size: 1.25em;
  font-weight: 800;
  border-bottom: 1px dotted #999;
  padding-bottom: 10px;
}
.plan-container#sf-ala-carte .pack-section h4 span {
  color: #fc1151;
}
.plan-container#sf-ala-carte .pack-section ul {
  list-style-type: disc;
  font-size: 14px;
  padding-top: 10px;
  padding-left: 1.5em;
}
.plan-container#sf-ala-carte .pack-section .pack-price {
  color: #121209 !important;
}
.plan-container#sf-ala-carte .pack-section .pack-price.x2 {
  font-size: 5em;
  padding-top: 25px;
}
.plan-container#sf-ala-carte .pack-section .pack-price.x2 sup {
  font-size: 35px;
}
.plan-container#sf-ala-carte .pack-section .pack-price.x2 sub {
  font-size: 20px;
  margin-left: -70px;
  top: -20px;
}
.plan-container#sf-ala-carte .pack-section .pack-price sub {
  /* top: -15px;
  margin-left: -70px; */
  color: #fc1151;
}
.plan-container#sf-ala-carte .pack-section#kelas-pintar a {
  font-size: 14px;
  background: #002e6d;
  color: #fff;
  border: initial;
  border-radius: 5px;
}
.plan-container#sf-ala-carte .pack-section#kelas-pintar #pricing .columns {
  color: #fff;
  margin: 1em auto;
  width: 90%;
}
.plan-container#sf-ala-carte
  .pack-section#kelas-pintar
  #pricing
  .columns
  .column {
  background: #002e6d;
  padding: 2em 1em;
}
.plan-container#sf-ala-carte .pack-section#kelas-pintar #pricing h4 {
  border-bottom: initial;
  color: #002e6d;
  font-size: 2em;
}
.plan-container#sf-ala-carte .pack-section#kelas-pintar #pricing h5 {
  color: #ffaa10;
  line-height: 1em;
  font-weight: 900;
}
.plan-container#sf-ala-carte .pack-section#kelas-pintar #pricing ul {
  width: max-content;
  margin: 0 auto;
}
.plan-container#sf-ala-carte .pack-section#kelas-pintar #pricing ul li {
  text-align: left;
}
.plan-container#sf-ala-carte .modal .modal-content {
  width: 90%;
}
.plan-container#sf-ala-carte
  .modal
  .modal-content
  .xstream
  #ch-premium
  .ch-list
  li,
.plan-container#sf-ala-carte .modal .modal-content .xstream .ch-list h3,
.plan-container#sf-ala-carte .modal .modal-content .xstream .ch-list li::after {
  background: linear-gradient(
    345deg,
    rgb(214, 16, 135) 0%,
    rgb(255, 117, 224) 100%
  );
}

.plan-container#squad {
  background-image: url(../images/site/squad-bg.jpg);
  background-image: url(../images/site/squad-bg.html);
  background-position: -380px center;
}
.plan-container#squad .plan-name,
.plan-container#squad a.cta,
.plan-container#squad #channels h1.title,
.plan-container#squad #channels .ch-list h3,
.plan-container#squad #channels .ch-list ul li.hd::after {
  background: linear-gradient(
    345deg,
    rgb(252, 17, 81) 0%,
    rgb(190, 9, 61) 100%
  );
}
.plan-container#squad #ala-carte {
  background: linear-gradient(
    345deg,
    rgba(252, 17, 81, 0) 0%,
    rgba(190, 9, 61, 0.65) 100%
  );
}
.plan-container#squad .plans {
  background: rgba(247, 247, 247, 0.9333333333);
}
.plan-container#squad .section.head {
  color: #121209 !important;
  padding-top: 0;
}
.plan-container#squad .section.head h2 {
  font-weight: 900;
}
.plan-container#squad .section.head .feat-content {
  margin-top: 2em;
}
.plan-container#squad .section.head .feat-content p {
  color: #121209 !important;
}
.plan-container#squad .section.head .feat-content .feat-list {
  display: inline-flex;
}
.plan-container#squad .section.head .feat-content .feat-list li {
  background: #fc1151;
  margin: 0 0.5em;
  padding: 0.5em 1em;
  color: #fff;
}
.plan-container#squad .section.package {
  background: linear-gradient(
    0deg,
    rgba(255, 255, 255, 0.8) 25%,
    rgba(255, 255, 255, 0) 100%
  );
}
.plan-container#squad .pricing .package {
  background: rgba(247, 247, 247, 0.6666666667);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
.plan-container#squad .pricing .package .pack-name {
  -webkit-background-clip: initial;
  -webkit-text-fill-color: initial;
  color: #121209 !important;
  border: initial;
}
.plan-container#squad .pricing .package .pack-name span {
  color: #fc1151;
}
.plan-container#squad .pricing .package .info-speed {
  padding-top: 1em;
}
.plan-container#squad .pricing .package .pack-price {
  color: #505152;
}
.plan-container#squad .pricing .package .pack-info > div:not(.info-speed) span {
  display: block;
  background: #fc1151;
  color: #fff;
  padding: 5px;
  width: 95%;
  margin: 0 auto;
}
.plan-container#squad
  .pricing
  .package
  .pack-info
  > div:not(.info-speed)
  span.tv {
  background: #9a47aa;
}
.plan-container#squad
  .pricing
  .package
  .pack-info
  > div:not(.info-speed)
  span.internet {
  background: #0b8344;
}
.plan-container#squad .pricing .package .info-feats li {
  font-size: 15px;
}
.plan-container#squad .pricing .package .info-feats li.blank::before,
.plan-container#squad .pricing .package .info-feats li.shout::before {
  content: "";
}
.plan-container#squad .pricing .package .info-feats li.shout {
  border: 2px solid #fc1151;
  width: max-content;
  padding: 5px 2em;
  margin: 0 auto 1em;
  border-radius: 25px;
  line-height: 1em;
  font-weight: 900;
  color: #121209 !important;
}
.plan-container#squad .pricing .package .info-feats li.shout small {
  font-weight: 400;
}

.plan-container#partnership .plan-name,
.plan-container#partnership a.cta,
.plan-container#partnership .pack-name,
.plan-container#partnership #channels h1.title,
.plan-container#partnership #channels .ch-list h3,
.plan-container#partnership #channels .ch-list ul li.hd::after {
  background: linear-gradient(
    333deg,
    rgb(247, 148, 29) 30%,
    rgb(247, 197, 29) 100%
  );
}
.plan-container#partnership #ala-carte {
  background: linear-gradient(
    333deg,
    rgba(247, 148, 29, 0.65) 30%,
    rgba(247, 197, 29, 0.65) 100%
  );
}
.plan-container#partnership .plans {
  background: rgba(255, 255, 255, 0.8);
}
.plan-container#partnership .section.head .feat-content p {
  color: #505152;
}
.plan-container#partnership .section.head .feat-content .feat-list {
  display: inline-flex;
}
.plan-container#partnership .section.head .feat-content .feat-list li {
  color: #505152;
  border: 1px solid rgba(80, 81, 82, 0.8);
}
.plan-container#partnership .section.package {
  background: #f5f5f5;
  background: -moz-linear-gradient(
    0deg,
    rgba(245, 245, 245, 0.8) 50%,
    rgba(245, 245, 245, 0) 100%
  );
  background: -webkit-linear-gradient(
    0deg,
    rgba(245, 245, 245, 0.8) 50%,
    rgba(245, 245, 245, 0) 100%
  );
  background: linear-gradient(
    0deg,
    rgba(245, 245, 245, 0.8) 50%,
    rgba(245, 245, 245, 0) 100%
  );
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#1a1a1a", endColorstr="#1a1a1a", GradientType=1);
}
.plan-container#partnership .pricing .package {
  background: #eee;
}
.plan-container#partnership .pricing .package .pack-price {
  color: #505152;
}
.plan-container .plans {
  background: rgba(26, 26, 26, 0.8);
}
.plan-container .plans .section.head {
  padding-bottom: 0;
}
.plan-container .plans .section.head .feat-content {
  max-width: 100%;
  margin: 0 auto;
}
.plan-container .plans .section.head .feat-content h1 {
  font-size: 8em;
  font-weight: 800;
}
.plan-container .plans .section.head .feat-content p {
  font-size: 1em;
  color: #ccc;
  max-width: 70%;
  margin: 1em auto;
}
.plan-container .plans .section.head .feat-content .feat-list {
  display: inline-flex;
}
.plan-container .plans .section.head .feat-content .feat-list li {
  margin: 0 1.5em;
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  padding: 1em;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 5px;
}
@media screen and (max-width: 600px) {
  .plan-container .plans .section.head .feat-content h1 {
    font-size: 5em;
    margin: 0 auto;
  }
}
.plan-container .plans .section.package {
  background: #1a1a1a;
  background: -moz-linear-gradient(
    0deg,
    rgba(26, 26, 26, 0.8) 50%,
    rgba(26, 26, 26, 0) 100%
  );
  background: -webkit-linear-gradient(
    0deg,
    rgba(26, 26, 26, 0.8) 50%,
    rgba(26, 26, 26, 0) 100%
  );
  background: linear-gradient(
    0deg,
    rgba(26, 26, 26, 0.8) 50%,
    rgba(26, 26, 26, 0) 100%
  );
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#1a1a1a", endColorstr="#1a1a1a", GradientType=1);
}
.plan-container .plans .section.package .pricing {
  margin: 40px 0;
}

.plan-container .vendor {
  max-width: 70%;
  margin: 1em auto 2em;
}
.plan-container .vendor h3 {
  margin-top: 0.5em;
  padding-bottom: 0.25em;
}
.plan-container .vendor img {
  max-width: 420px;
}
@media screen and (max-width: 600px) {
  .plan-container .vendor {
    max-width: 85%;
  }
  .plan-container .vendor h3 {
    font-size: 1.5em;
  }
  .plan-container .vendor img {
    max-width: 100%;
  }
}
.flex-flow-column {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 500px;
}
#banner {
  background: #333;
}
#banner li {
  width: 80%;
  height: 560px;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
#banner li .banner-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  padding: 1.5em;
}
#banner li .banner-content.h-align-left {
  align-items: flex-start;
}
#banner li .banner-content.h-align-center {
  align-items: center;
}
#banner li .banner-content.h-align-right {
  align-items: flex-end;
}
#banner li .banner-content.v-align-top {
  justify-content: flex-start;
}
#banner li .banner-content.v-align-center {
  justify-content: center;
}
#banner li .banner-content.v-align-bottom {
  justify-content: flex-end;
}
#banner #power {
  background-image: url(../images/banners/paket-power-banner.jpg);
  background-image: url(../images/banners/paket-power-banner.html);
}
#banner #tokopedia {
  background-image: url(../images/banners/promo-bayar-di-tokopedia.jpg);
  background-image: url(../images/banners/promo-bayar-di-tokopedia.html);
}
#banner #semua-bisa {
  background-image: url(../contents/promo/img/semua-bisa/2023-sb-banner.jpg);
}
#banner #iduladha {
  background-image: url(../contents/iduladha/iduladha_website.jpg);
}
#banner #indodana {
  background-image: url(contents/promo/img/indodana/indodana-banner.html);
  background-image: url(contents/promo/img/indodana/indodana-banner-2.html);
}
#banner #vasm {
  background-image: url(../images/banners/cara-bayar-sm.jpg);
  background-image: url(../images/banners/cara-bayar-sm.html);
}
#banner #truequadplay {
  background-image: url(../images/banners/squad-truequadplay.jpg);
  background-image: url(../images/banners/squad-truequadplay.html);
}
#banner #kelas-pintar {
  background-image: url(contents/promo/img/kelas-pintar/kelas-pintar-banner.html);
  background-image: url(contents/promo/img/kelas-pintar/kelas-pintar-banner-2.html);
}
#banner #genflix {
  background-image: url(contents/promo/img/genflix/gf-banner-dark.html);
  background-image: url(contents/promo/img/genflix/gf-banner-dark-2.html);
}
#banner #qris {
  background-image: url(../images/banners/cara-bayar-qris-banner.jpg);
  background-image: url(../images/banners/cara-bayar-qris-banner.html);
} 

#banner #newstreamplus {
  background-image: url(../images/banners/banner_slide_new_package.png);
  background-image: url(../images/banners/banner_slide_new_package.png);
}

#banner #banstream {
  background-image: url(../images/banners/stream_new_web.jpg);
  background-image: url(../images/banners/stream_new_web.jpg);
}
  
#banner #bann_new_stream {
  background-image: url(../images/banners/bann_new_stream.png);
  background-image: url(../images/banners/bann_new_stream.png);
}

#banner #bann_new_streamplus {
  background-image: url(../images/banners/bann_new_streamplus.png);
  background-image: url(../images/banners/bann_new_streamplus.png);
}
/* mobile */
@media screen and (max-width: 600px) {
  #banner #power {
    background-image: url(../images/banners/paket-power-banner-mobile.jpg);
    background-image: url(../images/banners/paket-power-banner-mobile.html);
  }
  #banner #tokopedia {
    background-image: url(../images/banners/promo-bayar-di-tokopedia-mobile.jpg);
    background-image: url(../images/banners/promo-bayar-di-tokopedia-mobile.html);
  }
  #banner #semua-bisa {
    background-image: url(contents/promo/img/semua-bisa/2023-sb-banner-mobile.html);
  }
  #banner #iduladha {
    background-image: url(../contents/iduladha/iduladha_mobile.jpg);
  }
  #banner #indodana {
    background-image: url(contents/promo/img/indodana/indodana-banner-mobile.html);
    background-image: url(contents/promo/img/indodana/indodana-banner-mobile-2.html);
  }
  #banner #vasm {
    background-image: url(../images/banners/cara-bayar-sm-mobile.jpg);
    background-image: url(../images/banners/cara-bayar-sm-mobile.html);
  }
  #banner #truequadplay {
    background-image: url(../images/banners/squad-truequadplay-mobile.jpg);
    background-image: url(../images/banners/squad-truequadplay-mobile.html);
  }
  #banner #kelas-pintar {
    background-image: url(contents/promo/img/kelas-pintar/kelas-pintar-banner-mobile.html);
    background-image: url(contents/promo/img/kelas-pintar/kelas-pintar-banner-mobile-2.html);
  }
  #banner #genflix {
    background-image: url(contents/promo/img/genflix/gf-banner-dark-mobile.html);
    background-image: url(contents/promo/img/genflix/gf-banner-dark-mobile-2.html);
  }
  #banner #qris {
    background-image: url(../images/banners/cara-bayar-qris-mobile.jpg);
    background-image: url(../images/banners/cara-bayar-qris-mobile.html);
  }

	#banner #banstream {
		background-image: url(../images/banners/stream_new_mobile.jpg);
		background-image: url(../images/banners/stream_new_mobile.jpg);
	}

	#banner #newstreamplus {
		background-image: url(../images/banners/banner_slide_new_package_mobile.png);
		background-image: url(../images/banners/banner_slide_new_package_mobile.png);
	}
	#banner #bann_new_stream {
		background-image: url(../images/banners/bann_new_stream_mobile.png);
		background-image: url(../images/banners/bann_new_stream_mobile.png);
	}
	
	#banner #bann_new_streamplus {
		background-image: url(../images/banners/bann_new_streamplus_mobile.png);
		background-image: url(../images/banners/bann_new_streamplus_mobile.png);
	}
}
.featured {
  padding: 6em 1em;
  background-color: #fff;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: cover !important;
}
.featured h3,
.featured h4,
.featured h5,
.featured h6,
.featured p {
  line-height: 1.25em;
}
.featured .container {
  margin: 0 auto;
}
@media screen and (max-width: 600px) {
  .featured .container.columns {
    background: rgba(255, 255, 255, 0.8666666667);
		color: #000;
  }
  .featured .container.columns.dark {
    background: rgba(0, 0, 0, 0.8666666667);
  }
}
.featured .columns {
  padding-top: 1em;
  padding-bottom: 1em;
}
.featured .columns .column .pack-price {
  color: #505152;
  font-size: 6em;
}
.featured .columns .column .pack-price sub {
  left: 3px;
  top: -30px;
}
@media screen and (max-width: 600px) {
  .featured .columns .column .pack-price {
    font-size: 4em;
  }
  .featured .columns .column .pack-price sub {
    top: -15px;
  }
}
.featured .columns .column p {
  font-size: 1em;
  padding-bottom: 1em;
}
@media screen and (max-width: 600px) {
  .featured .columns .column {
    padding: 1em;
  }
}
.featured .feat-content h1,
.featured .feat-content h2 {
  font-weight: 900;
}
.featured .feat-content h2 {
  font-size: 2.5em;
}
.featured .feat-content p {
  font-size: 1.5em;
  line-height: 1.5em;
}
.featured .feat-content .button {
  border-radius: 5px;
}
.featured .feat-list {
  width: max-content;
  max-width: 80%;
  margin: 0 auto;
  font-size: 1.5em;
}
.featured .feat-list .feat {
  font-weight: 600;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
}
.featured .feat-list .feat img {
  margin-right: 10px;
}
@media screen and (max-width: 600px) {
  .featured .feat-list {
    font-size: 12px;
    max-width: 100%;
  }
  .featured .feat-list .feat {
    font-size: 1em;
    display: inline-flex;
    width: 49%;
    padding: 1em 1%;
    flex-flow: column;
  }
  .featured .feat-list .feat img {
    max-width: 60px;
  }
}
.featured .pack-info {
  align-items: flex-end;
  padding: 1em 0;
}
.featured .pack-info h3 {
  line-height: 16px;
  padding-bottom: 10px;
}
.featured .pack-info a.cta {
  color: #fff;
  border: none;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.4s ease-out;
  margin-top: 2em;
}
.featured .pack-info a.cta::after {
  font-family: "Font Awesome 5 Free";
  content: "";
  font-weight: 900;
  margin-left: 5px;
}
.featured .pack-info a.cta:hover {
  background: #f9bc13 !important;
  color: #505152;
}
.featured .start-from {
  font-weight: 700;
}
.featured.plan-container .plan-name {
  font-size: 1.5em;
  font-weight: 600;
  padding: 0px 0px 3px;
  width: max-content;
  border-bottom: 1px solid #999;
  margin-top: 1em;
  background: initial;
  -webkit-background-clip: initial;
  -webkit-text-fill-color: initial;
}
.featured.plan-container .plan-name span {
  font-size: 2em;
  color: #fff;
  padding: 0px 25px;
  border-radius: 5px 5px 0 0;
  line-height: 1em;
  margin-right: 5px;
}
@media screen and (max-width: 600px) {
  .featured.plan-container .plan-name {
    font-size: 14px;
    margin: 0 auto 1em;
    padding: 0px 0px 2px;
  }
}

.featured.plan-container#zoom .plan-name span,
.featured.plan-container#zoom a.cta {
  background: linear-gradient(
    345deg,
    rgb(139, 200, 63) 0%,
    rgb(179, 255, 44) 100%
  );
}
.featured.plan-container#power .plan-name span,
.featured.plan-container#power a.cta {
  background: linear-gradient(
    345deg,
    rgb(214, 16, 135) 0%,
    rgb(255, 117, 224) 100%
  );
}
.featured.plan-container#sporty .plan-name span,
.featured.plan-container#sporty a.cta {
  background: linear-gradient(
    345deg,
    rgb(17, 119, 191) 0%,
    rgb(29, 185, 235) 100%
  );
}
.featured.plan-container#squad .plan-name span,
.featured.plan-container#squad a.cta {
  background: linear-gradient(
    345deg,
    rgb(252, 17, 81) 0%,
    rgb(190, 9, 61) 100%
  );
}
.featured.plan-container#oxygames {
  background-position-y: bottom !important;
  background: url(images/site/oxygames/oxygames-homebg.html);
  background: url(images/site/oxygames/oxygames-homebg-2.html);
}
.featured.plan-container#oxygames .plan-name span,
.featured.plan-container#oxygames a.cta {
  background: linear-gradient(177deg, #ffae45 0%, #f76a23 100%);
}
.featured.plan-container#genflix {
  width: 100%;
  background-image: url(../images/site/genflix-bg.jpg);
  background-image: url(../images/site/genflix-bg.html);
  background-position: center center;
}
.featured.plan-container#genflix section {
  max-width: initial !important;
}
.featured.plan-container#genflix #gratis {
  color: #f4980a;
  margin: 15px 0 10px;
  align-items: center;
}
.featured.plan-container#genflix #gratis img {
  margin-left: 10px;
}
@media screen and (max-width: 600px) {
  .featured.plan-container#genflix #gratis img {
    display: block;
    margin: 15px auto 0;
    width: 150px;
  }
}
.featured.plan-container#genflix .button {
  background: #f4980a;
}
@media screen and (max-width: 600px) {
  .featured.plan-container#genflix {
    background-position: left center !important;
  }
}
@media screen and (max-width: 600px) {
  .featured {
    padding: 2em 1em;
  }
  .featured .container.is-fluid {
    padding: 2em 0;
  }
}
.dark {
  background: #111;
}
.dark.with-bg {
  background: #1a1a1a;
}

.dark.with-tematic {
  /* background-image: url('../contents/tematikrms/design page oxygen.id-01.jpg'); */
}
.dark h1,
.dark h2,
.dark h3,
.dark h4,
.dark h5,
.dark h6,
.dark p,
.dark ul li,
.dark small,
.dark strong,
.dark .pack-price {
  color: #fff !important;
}
@media screen and (max-width: 600px) {
  .dark .feat-content {
    padding: 2em 1em;
  }

  .dark.with-tematic {
    /* background-image: url('../contents/tematikrms/design page oxygen.id-03.jpg'); */
  }
}
#homepage .featured.plan-container {
  border-top: 8px solid #000;
}
#alc-doc-dashboard {
  margin-left: 0;
  margin-right: 0;
}
#alc-doc-dashboard ul,
#alc-doc-dashboard ol {
  padding-left: 10px;
}
#alc-doc-dashboard ul li,
#alc-doc-dashboard ol li {
  list-style-type: disc;
}
#alc-doc-dashboard ul li.ajx-content,
#alc-doc-dashboard ol li.ajx-content {
  cursor: pointer;
  color: #0b8344;
}
#alc-doc-dashboard #doc-list {
  z-index: 1;
  border-right: 1px dotted #ccc;
  padding-right: 0;
}
#alc-doc-dashboard #doc-list h4 {
  background: linear-gradient(
    150deg,
    rgb(11, 131, 68) 0%,
    rgb(48, 195, 118) 100%
  );
  color: #fff;
  padding: 10px;
  text-shadow: -1px -1px rgba(0, 0, 0, 0.1333333333);
}
#alc-doc-dashboard #doc-list ul,
#alc-doc-dashboard #doc-list ol {
  margin-top: 20px;
}
#alc-doc-dashboard #doc-list ul li,
#alc-doc-dashboard #doc-list ol li {
  font-weight: bold;
  transition: all 0.2s ease-in;
  list-style-type: none;
  color: #999;
  font-size: 14px;
  padding-bottom: 5px;
}
#alc-doc-dashboard #doc-list ul li a,
#alc-doc-dashboard #doc-list ol li a {
  color: #999;
}
#alc-doc-dashboard #doc-list ul li.dropdown,
#alc-doc-dashboard #doc-list ol li.dropdown {
  display: none;
  justify-content: space-between;
  align-items: center;
}
#alc-doc-dashboard #doc-list ul li.ajx-content,
#alc-doc-dashboard #doc-list ol li.ajx-content {
  cursor: pointer;
}
#alc-doc-dashboard #doc-list ul li:hover,
#alc-doc-dashboard #doc-list ul li a:hover,
#alc-doc-dashboard #doc-list ol li:hover,
#alc-doc-dashboard #doc-list ol li a:hover {
  color: #0b8344;
}
@media screen and (max-width: 768px) {
  #alc-doc-dashboard #doc-list {
    position: sticky;
    top: 65px;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2666666667);
    height: max-content;
    background: #fafafa;
    border-radius: 10px;
    padding-right: 0.75em;
  }
  #alc-doc-dashboard #doc-list h4 {
    display: none;
  }
  #alc-doc-dashboard #doc-list ul {
    margin-top: initial;
    height: 20px;
    overflow: hidden;
    transition: height 0.4s ease-out;
  }
  #alc-doc-dashboard #doc-list ul.is-opened {
    height: max-content;
  }
  #alc-doc-dashboard #doc-list ul li.dropdown {
    display: flex;
  }
}
#doc-content,
.text {
  padding: 1em 1em 1em 2em;
}
#doc-content .subhead,
.text .subhead {
  width: 240px;
  -webkit-transform: translateX(-24px);
  transform: translateX(-24px);
  margin-top: 3em;
  background: #0b8344;
  color: #fff;
  padding: 0.5em 1em;
  font-size: 14px;
  font-weight: bold;
  font-style: italic;
  -webkit-clip-path: polygon(0% 0%, 85% 0, 100% 100%, 0% 100%);
  clip-path: polygon(0% 0%, 85% 0, 100% 100%, 0% 100%);
}
#doc-content .header-article,
.text .header-article {
  font-size: 24px;
}
#doc-content p,
.text p {
  padding-bottom: 1em;
}
#doc-content ul,
#doc-content ol,
.text ul,
.text ol {
  padding-left: 1em;
}
#doc-content .column,
.text .column {
  padding: 40px 10px;
}
#doc-content .column a[data-lightbox],
.text .column a[data-lightbox] {
  max-height: 520px;
  overflow: hidden;
  display: block;
  outline: 1px solid #ccc;
  margin-bottom: 1em;
  text-align: center;
}
@media screen and (max-width: 600px) {
  #doc-content,
  .text {
    padding: 1em 0.5em;
  }
}
.text ul,
.text ol {
  padding-left: 10px;
}
.text ul li,
.text ol li {
  list-style-type: disc;
}
#ala-carte {
  color: #fff;
  padding-bottom: 40px;
}
#ala-carte img {
  width: 90%;
  max-width: 500px;
}
#ala-carte h3 {
  font-size: 2.5em;
  line-height: 1em;
}
#ala-carte h3,
#ala-carte p {
  padding-bottom: 0;
  font-weight: 700;
}
#ala-carte h3.name,
#ala-carte p.name {
  font-size: 1.75em;
  font-weight: 900;
}
#ala-carte p.note {
  font-size: 12px;
  font-weight: normal;
  background: rgba(255, 255, 255, 0.2666666667);
  padding: 5px 10px;
  border-radius: 5px;
  max-width: 520px;
  margin: 10px auto 5px;
}
#ala-carte .column img[alt="STB Ala Carte"] {
  max-width: 300px;
}
#ala-carte .pack-price {
  color: #fff;
  padding: 15px 0 5px;
}
#ala-carte small {
  font-weight: 900;
  padding: 5px 3em;
  border-top: 1px solid rgba(255, 255, 255, 0.4);
}
#ala-carte small::before {
  content: "";
  font-family: "Font Awesome 5 Free";
  margin-right: 5px;
}
@media screen and (max-width: 600px) {
  #ala-carte {
    padding-bottom: 80px;
  }
  #ala-carte .column:not(:last-child) {
    margin-bottom: 2em;
  }
  #ala-carte p.note {
    width: 100%;
  }
}
#channels {
  background: rgba(0, 0, 0, 0.8666666667);
  color: #ccc;
}
#channels h1.title {
  margin: 0;
  padding: 0;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: rgba(0, 0, 0, 0);
}
@media screen and (max-width: 600px) {
  #channels h1.title {
    font-size: 2.5em;
  }
}
#channels #ch-lineup {
  margin-top: 1em;
  padding: 2em;
  border-radius: 10px;
  column-count: 4;
}
@media screen and (max-width: 600px) {
  #channels #ch-lineup {
    padding: 20px;
    column-count: 2;
  }
}
#channels .ch-list {
  margin-bottom: 3px;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
}
#channels .ch-list:not(:first-child) {
  margin-top: 15px;
}
#channels .ch-list:not(:last-child) {
  margin-bottom: 0.5em;
}
#channels .ch-list h3 {
  font-size: 18px;
  font-weight: 900;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: rgba(0, 0, 0, 0);
  padding: 0 0 0 0;
  width: max-content;
}
#channels .ch-list ul {
  font-size: 14px;
  color: #fff;
}
#channels .ch-list ul li {
  display: flex;
  align-items: center;
}
#channels .ch-list ul li.hd::after {
  content: "HD";
  font-size: 10px;
  display: inline-block;
  background: #0b8344;
  color: #fff;
  padding: 1px 5px 0;
  font-style: italic;
  margin-left: 0.5em;
  font-weight: 800;
  border-radius: 3px;
}
#channels.xstream #ch-premium .ch-list ul {
  display: flex;
  justify-content: center;
  flex-flow: row wrap;
}
#channels.xstream #ch-premium .ch-list ul li {
  display: block;
  font-size: 16px;
  font-weight: 600;
  margin: 5px 5px;
  text-align: center;
  width: max-content;
  padding: 0 5px;
  color: #fff;
  border-radius: 3px;
}
#channels.xstream #ch-lineup {
  column-count: 4;
}
@media screen and (max-width: 600px) {
  #channels.xstream #ch-premium img {
    width: 60%;
    margin-top: 2em;
  }
  #channels.xstream #ch-lineup {
    padding: 20px;
    column-count: 2;
  }
}
.pricing {
  font-family: "Lato", sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0;
  justify-content: center;
}
.pricing .package {
  text-align: center;
  margin: 0 0.5em;
  padding: 3em 0 1em;
  max-width: 320px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 10px;
  position: relative;
}
@media screen and (max-width: 600px) {
  .pricing .package {
    margin: 0 0 3em;
    max-width: 100%;
  }
}
.pricing .package.best-offer::before {
  background: url(../images/site/badge-best-offer.png) no-repeat center center;
  width: 60px;
  height: 60px;
  background-size: 100% auto;
  position: absolute;
  transform: translateX(-50%);
  top: -30px;
  content: "";
  z-index: 1;
}
.pricing .package.discount::before {
  background: url(../images/site/badge-discount.png) no-repeat center center;
  width: 60px;
  height: 60px;
  background-size: 100% auto;
  position: absolute;
  transform: translateX(-50%);
  top: -30px;
  content: "";
  z-index: 1;
}
.pricing .package .pack-name {
  position: relative;
  letter-spacing: -1px;
  font-weight: 800;
  font-size: 2.75em;
  width: max-content;
  margin: 0 auto;
  border-bottom: 3px solid #777;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: rgba(0, 0, 0, 0);
}
.pricing .package .pack-info {
  position: relative;
  padding: 1em 0 0;
  z-index: 0;
}
.pricing .package .pack-info .info-speed h3 {
  font-size: 2.5em;
  line-height: 1em;
  padding-bottom: 0.5em;
  color: #505152;
  font-weight: 900;
  letter-spacing: -1px;
}
.pricing .package .pack-info .info-speed h3 sup {
  display: inline-block;
  font-size: 18px;
}
.pricing .package .pack-info .info-feats {
  margin: 1em auto;
  padding: 0;
  color: #707172;
}
.pricing .package .pack-info .info-feats li {
  padding: 0.1em 0;
}
.pricing .package .pack-info .info-feats li::before {
  font-family: "Font Awesome 5 Free";
  content: "";
  display: inline-block;
  margin-right: 5px;
}
.pricing .package .pack-info .info-feats li span {
  display: inline-block;
  margin: 0 1em;
}
.pricing .package .note {
  color: #f9bc13;
  font-size: 16px;
  font-weight: 700;
}
.pricing .package .button {
  margin: 1.5em 0 1em 0;
  width: 150px;
  background: #0b8344;
  color: #fff;
  border: none;
  font-weight: 600;
  border-radius: 25px;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
}
.pricing .package .button:hover {
  background: #f9bc13;
  color: #111;
  text-shadow: -1px -1px 1px rgba(255, 255, 255, 0.4);
}
.pack-price {
  position:relative;
  font-weight:800;
  font-size:3.5em;
  padding:40px 0 20px;
  line-height:0;
  color:#529000
}
.pack-price:nth-child(even) {
  padding-bottom: 5px;
}
.pack-price.yearly {
  width: 90%;
  margin-inline: auto;
  border-top: 3px solid #777;
}
.pack-price.yearly .note {
  margin-top: 15px;
}
.pack-price sup {
  font-size: 25px;
}
.pack-price sup .digit {
  margin: 0;
  line-height: 0;
}
.pack-price sub {
  font-size: 16px;
  margin-left: -80px;
  line-height: 0;
  padding: 0;
  /* top: -10px; */
  position: relative;
  left: 35px;
}
.disclaimer {
  font-size: 14px;
  margin-bottom: 40px;
  text-align: center;
}
#all-promo {
  background: url(../images/site/special-offer.png) no-repeat -15px -15px;
  background-size: 200px auto;
  padding-top: 160px;
  padding-bottom: 0;
}
@media screen and (max-width: 600px) {
  #all-promo {
    background-position: center 10px;
    padding-top: 190px;
  }
}
.promo-page img.banner {
  display: block;
  margin: 0 auto;
}
.promo-item a {
  display: block;
}
.promo-item img {
  margin: 0;
  padding: 0;
  width: 100%;
  outline: 1px solid #ccc;
}
.benefit {
  margin-top: 5px;
  color: red !important;
}
.benefit::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "";
  margin-right: 5px;
}
#promo {
  letter-spacing: -1px;
}
#promo .column {
  padding: 1em 0;
  color: #4d4d4d;
}
#promo .column .headline {
  font-size: 48px;
  font-weight: bold;
  color: #0b8344;
  line-height: 1.5em;
}
@media screen and (max-width: 480px) {
  #promo .column .headline {
    line-height: 1em;
    margin-bottom: 15px;
  }
}
#promo .column .sub-headline {
  font-size: 20px;
  font-weight: bold;
  line-height: 1.25em;
}
@media screen and (max-width: 480px) {
  #promo .column .sub-headline {
    font-size: 16px;
  }
}
#promo .column table {
  width: 100%;
  max-width: 900px;
  margin: 2em auto;
  font-size: 18px;
  border-collapse: initial;
  border-spacing: 5px;
}
@media screen and (max-width: 480px) {
  #promo .column table {
    font-size: 12px;
  }
}
#promo .column table thead tr td {
  border-radius: 20px;
  font-weight: bold;
  color: #000;
  padding: 0.5em 1em;
}
#promo .column table thead tr td:nth-child(1) {
  background: #fabc14;
}
#promo .column table thead tr td:nth-child(2) {
  background: #f7941d;
  text-align: center;
}
#promo .column table thead tr td:nth-child(3) {
  background: #ddd;
  text-align: center;
}
#promo .column table tbody tr td {
  padding: 0.5em;
}
#promo .column table tbody tr td:nth-child(1) {
  max-width: 48px;
}
#promo .column table tbody tr td:nth-child(2) {
  max-width: 1.5em;
  font-size: 1.5em;
  font-weight: bold;
  text-decoration: line-through;
  color: #c00;
  text-align: center;
  vertical-align: middle;
}
@media screen and (max-width: 480px) {
  #promo .column table tbody tr td:nth-child(2) {
    padding: 0;
  }
}
#promo .column table tbody tr td:nth-child(3) {
  vertical-align: top;
}
#promo .column table tbody tr td:nth-child(3) span {
  font-size: 1.75em;
  font-weight: bold;
  display: block;
  margin-top: 0px;
  line-height: 1em;
}
#promo .column table tbody tr td:nth-child(4) {
  font-size: 1.25em;
  text-align: center;
}
#promo .column table tbody tr td:nth-child(4) span {
  font-size: 1.75em;
  font-weight: bold;
  display: inline-block;
  margin-left: 5px;
}
#promo .column table#tnc {
  letter-spacing: 0;
}
#promo .column table#tnc thead tr td {
  text-align: center;
  background: #eee;
}
#promo .column table#tnc tbody tr td {
  font-size: 0.8em;
  line-height: 1em;
  vertical-align: middle;
  padding: 2.5em 0;
  border: 1px solid #eee;
  border-radius: 20px;
}
#promo .column table#tnc tbody tr td ul {
  padding-left: 2em;
}
#promo .column table#tnc tbody tr td ul li {
  padding: 0 0 1em 0;
  list-style: disc;
  text-align: left;
  line-height: 1em;
}
#promo .column table#tnc tbody tr td ul li small {
  font-size: 0.8em;
  letter-spacing: 0;
}
@media screen and (max-width: 480px) {
  #promo .column table#tnc tbody tr td {
    font-size: 1em;
  }
}
#promo #cta {
  background: #f9bc13;
  padding: 2em;
  text-align: center;
  border-radius: 25px 25px 0 0;
}
#promo #cta a {
  background: #0b8344;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  border-radius: 40px;
  padding: 1em;
  width: 300px;
  margin: 0;
  display: inline-block;
  transition: 0.2s all ease-in;
}
@media screen and (max-width: 480px) {
  #promo #cta a {
    font-size: 16px;
    width: 80%;
  }
}
#promo #cta a:hover {
  background: #f7941d;
  color: #333;
  width: 400px;
}
@media screen and (max-width: 480px) {
  #promo #cta a:hover {
    width: 100%;
  }
}
#indodana {
  background: #0b8344;
  background: linear-gradient(
    190deg,
    rgb(11, 131, 68) 100%,
    rgb(10, 177, 90) 35%
  );
}
#indodana.promo-page h1 {
  font-size: 3em;
}
#indodana.promo-page .page-header {
  background: url(contents/promo/img/indodana/page-banner.html) no-repeat center
    center;
  background: url(contents/promo/img/indodana/page-banner-2.html) no-repeat center
    center;
  background-size: cover;
  padding: 0em 12.5em;
  max-width: 100%;
  height: 700px;
  display: block;
  box-sizing: border-box;
  background-color: #f1f1f1;
  clip-path: ellipse(90% 100% at 65% 0%);
}
#indodana.promo-page .page-header img {
  margin-bottom: 2em;
  display: block;
  max-width: 360px;
}
#indodana.promo-page .page-header h1 {
  font-weight: 900;
}
#indodana.promo-page .page-header .columns {
  height: 100%;
}
#indodana.promo-page .page-header .columns .subtitle {
  background-color: rgba(11, 131, 68, 0.9);
  color: #fff;
  line-height: 1.2em;
  padding: 1em;
  border-radius: 10px;
}
#indodana.promo-page .page-header .columns .subtitle strong {
  color: #f3f333;
}
/* mobile */
@media screen and (max-width: 600px) {
  #indodana.promo-page .page-header {
    background: url(contents/promo/img/indodana/page-banner-mobile.html)
      no-repeat center center;
    background: url(contents/promo/img/indodana/page-banner-mobile-2.html)
      no-repeat center center;
    padding: 1em;
    clip-path: ellipse(165% 100% at 65% 0);
    height: 625px;
  }
  #indodana.promo-page .page-header img {
    width: 160px;
  }
  #indodana.promo-page .page-header h1 {
    font-size: 23px;
    width: 60%;
  }
  #indodana.promo-page .page-header .subtitle {
    font-size: 14px;
    padding: 0.5em;
  }
  #indodana.promo-page .page-header .column.is-two-thirds {
    max-width: 50%;
  }
  #indodana.promo-page .page-header .columns .column.is-two-thirds {
    max-width: 100%;
  }
}
#indodana #promo-pack {
  margin-top: -50px;
  padding-top: 0;
  padding-bottom: 0;
}
#indodana #promo-pack .columns {
  max-width: 1000px;
  margin: 0 auto;
}
#indodana #promo-pack .columns .column {
  padding: 2em;
}
#indodana #promo-pack .columns .column .promo {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: 10px;
  padding: 2em;
  background: #f1f1f1;
  aspect-ratio: 1;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}
#indodana #promo-pack .columns .column .promo h2 {
  font-size: 2em;
  font-weight: 900;
  color: #0b8344;
}
#indodana #promo-pack .columns .column .promo p {
  font-size: 0.85em;
}
#indodana #promo-pack .columns .column .promo small {
  font-size: 12px !important;
}
#indodana #promo-pack .columns .column .promo img {
  margin-bottom: 1em;
}
#indodana #promo-pack .columns .column .promo img:not(.kupon) {
  width: 120px;
  margin-bottom: 0;
}
#indodana #promo-pack .columns .column .promo .info {
  color: #777;
  font-size: 1em;
}
#indodana #promo-pack .columns .column .promo .info strong {
  color: #0b8344;
}
@media screen and (max-width: 600px) {
  #indodana #promo-pack {
    margin-top: -80px;
  }
  #indodana #promo-pack .columns .column {
    padding: 1em 2.5em;
  }
  #indodana #promo-pack .columns .column .promo {
    padding: 1em;
  }
  #indodana #promo-pack .columns .column .promo .info {
    font-size: 14px;
  }
}
#indodana .tnc {
  color: #fff;
  margin-bottom: 5em;
  border: none;
}
#indodana .tnc ul {
  width: 800px;
  text-align: left;
}
@media screen and (max-width: 600px) {
  #indodana .tnc ul {
    width: 100%;
  }
}
#indodana #cara-bayar {
  padding: 3em 0;
  max-width: 100%;
  color: #333;
  display: block;
  box-sizing: border-box;
  clip-path: ellipse(60% 100% at 50% 100%);
  background: #ffc902;
  background: -moz-linear-gradient(
    5deg,
    rgb(255, 201, 2) 0%,
    rgb(238, 220, 51) 100%
  );
  background: -webkit-linear-gradient(
    5deg,
    rgb(255, 201, 2) 0%,
    rgb(238, 220, 51) 100%
  );
  background: linear-gradient(
    5deg,
    rgb(255, 201, 2) 0%,
    rgb(238, 220, 51) 100%
  );
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffc902", endColorstr="#eedc33", GradientType=1);
}
#indodana #cara-bayar h3 {
  line-height: 1em;
}
#indodana #cara-bayar h3 strong {
  font-weight: 900;
}
#indodana #cara-bayar a,
#indodana #cara-bayar strong {
  font-weight: bold;
  color: #0b8344;
}
#indodana #cara-bayar ol {
  font-size: 14px;
  border-radius: 10px;
  padding: 1em 1em 1em 2.5em;
  width: 800px;
  margin: 0 auto;
  text-align: left;
}
#indodana #cara-bayar ol strong,
#indodana #cara-bayar ol a {
  color: #015228;
}
@media screen and (max-width: 600px) {
  #indodana #cara-bayar {
    clip-path: ellipse(120% 100% at 50% 100%);
  }
  #indodana #cara-bayar ol {
    width: 100%;
  }
}
#oxygames.promo-page {
  background: #191914 url(public/contents/promo/img/oxygames/mosaic.html)
    no-repeat;
  background-position: center bottom;
  background-size: cover;
  padding: 3em 0 520px;
}
#oxygames.promo-page .page-header img {
  display: block;
  margin: 0 auto;
}
#oxygames.promo-page .section {
  padding-bottom: 2em;
}
#oxygames.promo-page .section h3 {
  color: #ffae45;
}
#oxygames.promo-page .section .columns {
  max-width: 1000px;
  margin: 0 auto;
}
#oxygames.promo-page .section .columns .column {
  text-align: center;
}
#oxygames.promo-page .section .columns .column img {
  max-width: 90%;
}
#oxygames.promo-page .section .columns .column span {
  background: #ffae45;
  color: #191914;
  display: block;
  margin: 0 auto;
  width: 30px;
  aspect-ratio: 1/1;
  font-size: 1.25em;
  font-weight: bold;
  border-radius: 10px;
  text-align: center;
}
#oxygames.promo-page .section .columns .column p {
  margin: 1em 0;
}
#oxygames.promo-page .cta-btn {
  background: #ffae45;
  color: #191914 !important;
  border: none;
  font-size: 32px;
}
#oxygames.promo-page .cta-btn:hover {
  background: #f76a23;
}
@media screen and (max-width: 600px) {
  #oxygames.promo-page {
    background-size: 100%;
    padding: 3em 0 8em;
  }
  #oxygames.promo-page .page-header img {
    width: 240px;
  }
}
#genflix {
  background: #1a1a1a;
  color: #fff;
}
@media screen and (max-width: 600px) {
  #genflix {
    padding-bottom: 0;
  }
}
#genflix #dl-link a {
  max-width: 200px;
  display: inline-block;
}
@media screen and (max-width: 600px) {
  #genflix #dl-link a {
    width: 49%;
  }
}
#genflix section {
  background: none;
  padding: 40px 0;
}
#genflix section.page-header {
  padding-top: 0;
}
#genflix section.intro,
#genflix section .intro {
  font-size: 20px;
  max-width: 75%;
  margin: 0 auto;
  padding: 1em 0;
  color: #fff;
}
#genflix section.intro p,
#genflix section .intro p {
  font-size: 0.9em;
  line-height: 1.75em !important;
}
#genflix section.intro h1,
#genflix section .intro h1 {
  font-size: 2.5em;
  font-weight: 900;
  letter-spacing: -1px;
  color: #f39815;
}
#genflix section.intro h3,
#genflix section .intro h3 {
  font-size: 1.75em;
  font-weight: bold;
}
#genflix section.intro #gf-premium li,
#genflix section .intro #gf-premium li {
  padding-bottom: 0.65em;
}
#genflix section.intro #gf-premium li::before,
#genflix section .intro #gf-premium li::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "";
  display: inline-block;
  margin-right: 5px;
  color: #f39815;
}
#genflix section.intro #gf-content,
#genflix section .intro #gf-content {
  display: flex;
  align-items: center;
}
@media screen and (max-width: 600px) {
  #genflix section.intro #gf-content,
  #genflix section .intro #gf-content {
    display: block;
  }
}
#genflix section.intro .gf-category,
#genflix section .intro .gf-category {
  display: inline-block;
  width: 49%;
  font-size: 0.8em;
  padding: 1em 1em 1em 2.5em;
}
@media screen and (max-width: 600px) {
  #genflix section.intro .gf-category,
  #genflix section .intro .gf-category {
    padding: 1em 0 1em 1.5em;
  }
}
@media screen and (max-width: 600px) {
  #genflix section.intro,
  #genflix section .intro {
    font-size: 16px !important;
    max-width: 90% !important;
  }
  #genflix section.intro p,
  #genflix section.intro h2,
  #genflix section .intro p,
  #genflix section .intro h2 {
    line-height: 1.25em !important;
    text-align: center;
  }
  #genflix section.intro h2,
  #genflix section .intro h2 {
    margin-top: 1em;
  }
}
#genflix section #oxygenflix p {
  margin: 1.5em 0 0.5em;
}
@media screen and (max-width: 600px) {
  #genflix section #oxygenflix {
    width: 75%;
    margin: 0 auto;
  }
  #genflix section #oxygenflix p {
    text-align: left;
  }
}
@media screen and (max-width: 600px) {
  #genflix section {
    max-width: 100% !important;
  }
  #genflix section img {
    width: 100%;
  }
}
#genflix #pricing {
  display: flex;
  justify-content: space-between;
  font-size: 1.5em;
  padding: 1em;
  border: 2px solid #f9bc13;
  border-radius: 10px;
}
#genflix #pricing .gf-price {
  display: flex;
  line-height: 1em;
  align-items: center;
  margin-bottom: 20px;
  justify-content: flex-end;
  letter-spacing: -1px;
}
#genflix #pricing .gf-price span.big {
  font-size: 4em;
  font-weight: bold;
}
@media screen and (max-width: 600px) {
  #genflix #pricing .gf-price {
    justify-content: center;
  }
}
#genflix #pricing .bonus {
  display: block;
  font-size: 0.8em;
  margin-top: 1em;
  font-weight: bold;
  color: #f9bc13;
}

#genflix #gf-cta {
  font-size: 1.25em;
  width: 180px;
  margin: 2em auto;
  font-weight: bold;
  display: inline-block;
  background: #f8bb14;
  padding: 0.5em 1.5em;
  color: #222;
  box-shadow: 0 -2px 1px rgba(249, 188, 19, 0.5333333333),
    0 2px 1px rgba(239, 113, 0, 0.8);
  border-radius: 8px;
  display: block;
}
#genflix #gf-cta:hover {
  background: #ef7100;
  color: #fff;
  box-shadow: 0 0 2px #aa5001, 0 0 2px #7e3f09;
}
@media screen and (max-width: 600px) {
  #genflix #gf-cta {
    margin: 30px auto 0;
    font-size: 1.5em;
    width: max-content;
  }
}
#genflix #tnc {
  border-top: 1px dotted #555;
  border-radius: 5px;
  padding: 2em 20% 2em;
  margin: 40px auto 0;
}
#genflix #tnc h3 {
  font-size: 16px;
  color: #999;
  font-weight: bold;
}
#genflix #tnc ul {
  list-style-position: outside !important;
  margin-left: 2em;
  font-size: 14px;
}
#genflix #tnc ul li {
  list-style: disc;
}
@media screen and (max-width: 600px) {
  #genflix #tnc {
    padding: 2em 5% 0;
    margin: 40px auto;
  }
}
#gak-bisa-pelan {
  padding-bottom: 80px;
  background: #0a6f3a;
  background: -moz-linear-gradient(
    18deg,
    rgb(10, 111, 58) 30%,
    rgb(17, 190, 80) 100%
  );
  background: -webkit-linear-gradient(
    18deg,
    rgb(10, 111, 58) 30%,
    rgb(17, 190, 80) 100%
  );
  background: linear-gradient(
    18deg,
    rgb(10, 111, 58) 30%,
    rgb(17, 190, 80) 100%
  );
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#0a6f3a", endColorstr="#11be50", GradientType=1);
}
@media screen and (max-width: 600px) {
  #gak-bisa-pelan {
    padding-bottom: 0;
  }
}
#gak-bisa-pelan .strike::before {
  font-size: 14px;
}
#gak-bisa-pelan section {
  padding-bottom: 0;
  margin-bottom: 0;
}
@media screen and (max-width: 600px) {
  #gak-bisa-pelan section.section {
    padding: 0 1em;
  }
}
#gak-bisa-pelan section:last-child {
  padding-bottom: 2em;
}
#gak-bisa-pelan .page-header {
  width: 90%;
  border-radius: 0 0 50px 50px;
  overflow: hidden;
  margin: 0 auto;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.4);
}
@media screen and (max-width: 600px) {
  #gak-bisa-pelan .page-header {
    width: 95%;
    border-radius: 0 0 20px 20px;
  }
}

#gak-bisa-pelan #zoom .package {
  outline: 1px solid #a8f031;
}
#gak-bisa-pelan #zoom .pack-name {
  background: #a8f031 !important;
}
#gak-bisa-pelan #power .package {
  outline: 1px solid #d11a88;
}
#gak-bisa-pelan #power .package .annual {
  border-top: 2px solid #d11a88;
}
#gak-bisa-pelan #power .package.special .annual {
  border-top: none;
  border-bottom: 2px solid #d11a88;
}
#gak-bisa-pelan #power .pack-name {
  background: #d11a88 !important;
}
#gak-bisa-pelan .featured {
  padding: 0em;
}
#gak-bisa-pelan .plan-name {
  margin: 0;
  padding: 1em;
  color: #fff;
  border-bottom: initial;
  border-radius: 30px 0 0 30px;
  -webkit-background-clip: initial !important;
}
#gak-bisa-pelan .plan-name h3 {
  font-size: 3em;
  font-weight: 900;
  letter-spacing: -1px;
  padding-bottom: 0;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
}
#gak-bisa-pelan .plan-name h4 {
  font-size: 0.85em;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
}
#gak-bisa-pelan .plan-name p {
  font-size: 16px;
  font-weight: normal;
}
#gak-bisa-pelan .plan-name a.modal-open {
  margin: 0 auto;
  background: #fff;
  color: #0a6f3a;
  border-radius: 1em;
}
@media screen and (max-width: 600px) {
  #gak-bisa-pelan .plan-name {
    width: 100%;
    border-radius: 30px 30px 0 0;
    padding-bottom: 20px;
  }
  #gak-bisa-pelan .plan-name h4 {
    padding-bottom: 10px;
  }
}
#gak-bisa-pelan .package {
  padding: 0 0 1em 0;
  margin: 0 0 0 5px;
  border-radius: 0;
}
#gak-bisa-pelan .package.special .pack-name {
  padding-top: 10px;
}
@media screen and (max-width: 600px) {
  #gak-bisa-pelan .package.special .pack-price {
    margin-top: 0 !important;
  }
}
#gak-bisa-pelan .package .pack-name {
  font-size: 1.5em;
  padding: 5px 0 8px;
  border-bottom: none;
  -webkit-background-clip: initial;
  -webkit-text-fill-color: initial;
  width: 100%;
  color: #fff;
  margin-bottom: 1em;
}
#gak-bisa-pelan .package .pack-name::before {
  content: "Up to";
  font-size: 1em;
  font-weight: normal;
  padding-bottom: 5px;
}
#gak-bisa-pelan .package .pack-name sup {
  font-size: 16px;
}
#gak-bisa-pelan .package .pack-name sup.hide {
  font-size: 0;
  line-height: 0;
}
#gak-bisa-pelan .package small {
  display: block;
  color: #999;
  font-weight: 600;
}
@media screen and (max-width: 600px) {
  #gak-bisa-pelan .package {
    margin: 0 0 10px 0;
  }
}
#gak-bisa-pelan .pricing .package {
  background: #fff;
}
#gak-bisa-pelan .pricing .package .pack-price {
  font-size: 2.25em;
  padding-top: 20px;
  padding-bottom: 10px;
}
#gak-bisa-pelan .pricing .package .pack-price sup {
  font-size: 18px;
  margin-left: 2px;
}
#gak-bisa-pelan .pricing .package .pack-price sub {
  font-size: 14px;
  margin-left: -40px;
  top: -7px;
}
#gak-bisa-pelan .pricing .package .pack-price.strike {
  color: red;
  text-decoration: line-through;
}
#gak-bisa-pelan .pricing .package .pack-price.normal {
  font-size: 1.75em;
  padding: 0;
}
#gak-bisa-pelan .pricing .package .pack-price.normal sup {
  font-size: 12px;
}
#gak-bisa-pelan .pricing .package .pack-price.normal sub {
  font-size: 10px;
  margin-left: -30px;
}
#gak-bisa-pelan .pricing .package .pack-price.annual {
  padding-top: 17px;
  margin: 0 10px;
}
#gak-bisa-pelan .pricing .package .hemat {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #0b8344;
  color: #fff;
  width: 100px;
  aspect-ratio: 1/1;
  margin: 0.5em auto;
  border-radius: 10%;
  text-align: center;
  font-size: 16px !important;
  font-weight: 900;
}
#gak-bisa-pelan .pricing .package .hemat span {
  display: block;
  font-size: 40px !important;
  font-weight: 900;
  line-height: 0.9em;
}
#gak-bisa-pelan .tnc {
  border: 1px solid #fff;
  color: #fff;
  width: max-content;
  padding: 1em 3em;
  margin: 0 auto;
}

#gak-bisa-pelan .modal .modal-content {
  width: 90%;
}
#gak-bisa-pelan .modal .modal-content .basic #ch-premium .ch-list li,
#gak-bisa-pelan .modal .modal-content .basic .ch-list h3,
#gak-bisa-pelan .modal .modal-content .basic .ch-list li::after {
  background: linear-gradient(
    345deg,
    rgb(139, 200, 63) 0%,
    rgb(179, 255, 44) 100%
  );
}
#gak-bisa-pelan .modal .modal-content .xstream #ch-premium .ch-list li,
#gak-bisa-pelan .modal .modal-content .xstream .ch-list h3,
#gak-bisa-pelan .modal .modal-content .xstream .ch-list li::after {
  background: linear-gradient(
    345deg,
    rgb(214, 16, 135) 0%,
    rgb(255, 117, 224) 100%
  );
}
#kelas-pintar {
  background: #f3f7fc url(public/contents/promo/img/kelas-pintar/kp-home-bg.html)
    no-repeat;
  background-position: center 100px;
  background-size: 1920px auto;
  color: #fff;
}
#kelas-pintar a.button {
  font-size: 1.25em;
  color: #004fac;
  font-weight: 700;
}
#kelas-pintar .page-header {
  padding: 3em 0;
  min-height: 650px;
}
#kelas-pintar .page-header h1 {
  color: #004fac;
  font-weight: 900;
  line-height: 1.15em;
  font-size: 3.75em;
}
#kelas-pintar .page-header img {
  border-radius: 1em;
  display: block;
  overflow: hidden;
}
#kelas-pintar section h4 {
  color: #ffb30c;
}
#kelas-pintar #more {
  width: 960px;
  margin: 0 auto;
}
#kelas-pintar #pricing {
  margin: 3em auto;
}
#kelas-pintar #pricing .column {
  border: 1px solid #fff;
  border-radius: 1em;
  margin: 0 1em;
}
#kelas-pintar #pricing .column h3 {
  padding-bottom: 0;
  font-size: 2em;
  color: #ffaa10;
}
#kelas-pintar #pricing .column .kp-price {
  font-size: 2em;
  font-weight: 900;
}
#kelas-pintar #pricing .column .kp-price .strike {
  font-size: 14px;
  min-height: 1em;
  color: #ff6106;
  font-weight: normal;
  text-decoration: line-through;
}
#kelas-pintar #pricing .column .kp-price .strike::before {
  background: initial;
}
#kelas-pintar #pricing .column .kp-price small {
  display: block;
  font-size: 14px !important;
  font-weight: normal;
}
#kelas-pintar #pricing .column ul {
  margin: 1em 0;
}
#kelas-pintar #kemudahan {
  margin: 0 auto;
  padding: 0;
}
#kelas-pintar #kemudahan h2 {
  margin-bottom: 1em;
}
#kelas-pintar #kemudahan .columns .column {
  background: #fff;
  color: #004fac;
  border-radius: 1em;
  margin: 0 1rem;
  padding: 2rem;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1333333333);
}
#kelas-pintar #kemudahan .columns .column h4 {
  margin-top: 1em;
  padding-bottom: 0;
}
#kelas-pintar #download {
  margin: 2em auto 0;
  padding-bottom: 0;
  color: #004fac;
}
@media screen and (max-width: 600px) {
  #kelas-pintar {
    width: 100%;
    padding-right: 1em;
    padding-left: 1em;
    background-size: cover;
    background-position: left -920px;
  }
  #kelas-pintar section {
    padding: 2em 0;
  }
  #kelas-pintar section h2 {
    font-size: 1.85em;
    margin-bottom: 0em !important;
  }
  #kelas-pintar section .columns {
    margin: 1em auto;
  }
  #kelas-pintar section .columns .column {
    margin-bottom: 0.75em !important;
  }
  #kelas-pintar .page-header {
    min-height: initial;
    padding-bottom: 2em;
  }
  #kelas-pintar .page-header h1 {
    font-size: 2.25em;
  }
  #kelas-pintar #more {
    width: 100%;
  }
  #kelas-pintar #more .columns {
    width: 100%;
  }
  #kelas-pintar #more #pricing h3 {
    font-size: 1.5em;
  }
  #kelas-pintar #kemudahan {
    padding: 2em 0 !important;
  }
  #kelas-pintar #download {
    margin: 0 auto;
    padding-top: 0 !important;
  }
}
.maskot {
  background: url("../public/contents/microsite/maskot/page-bg.html") no-repeat
    center center;
  background-size: cover;
  color: #fff;
}
.maskot strong {
  color: #ccc;
}
#maskot-spc {
  padding: 40px 5%;
}
#maskot-spc #svg-logo {
  text-align: center;
  width: 85%;
  margin: 0 auto;
}
#maskot-spc svg {
  overflow: visible;
}
#maskot-spc svg #maskot-title {
  filter: drop-shadow(0 0 15px rgba(0, 0, 0, 0.6));
}
#maskot-spc #prize {
  max-width: 600px;
  filter: drop-shadow(0 0 15px rgba(0, 0, 0, 0.6));
}
#maskot-spc #page-menu {
  max-width: 600px;
  margin: 0 auto;
}
#maskot-spc #page-menu a {
  display: block;
  color: #ff0;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5333333333);
  font-weight: 600;
  transition: all 0.5s ease-in-out;
}
#maskot-spc #page-menu a img {
  margin: 0 auto;
  display: block;
  width: auto;
  height: 120px;
  filter: drop-shadow(0 0 0px rgba(255, 255, 255, 0.5333333333));
  transition: all 0.5s ease-in-out;
}
#maskot-spc #page-menu a:hover {
  color: #fff;
}
#maskot-spc #page-menu a:hover img {
  filter: drop-shadow(0 0 20px #fff);
}
#maskot-spc #countdown {
  background: url(../public/contents/microsite/maskot/ico-apply.html) no-repeat
    left center;
  background-size: auto 100%;
  max-width: 1000px;
  padding: 0 12.5%;
  margin: 0 auto;
}
#maskot-spc #countdown h2 {
  padding-bottom: 10px;
  font-weight: 900;
  letter-spacing: -1px;
  font-size: 47px;
  background: #fec751;
  background: -moz-linear-gradient(
    35deg,
    rgb(254, 199, 81) 0%,
    rgb(255, 235, 0) 100%
  );
  background: -webkit-linear-gradient(
    35deg,
    rgb(254, 199, 81) 0%,
    rgb(255, 235, 0) 100%
  );
  background: linear-gradient(
    35deg,
    rgb(254, 199, 81) 0%,
    rgb(255, 235, 0) 100%
  );
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#fec751",endColorstr="#ffeb00",GradientType=1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: rgba(0, 0, 0, 0);
}
#maskot-spc #countdown h6 {
  color: #ff0;
  padding-bottom: 5px;
}
#maskot-spc #countdown p {
  background: rgba(255, 255, 0, 0.9333333333);
  padding: 3px;
  border-radius: 5px;
  color: #068243;
  font-weight: 600;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2666666667);
}
#maskot-spc #countdown .columns {
  margin-bottom: 0;
}
#maskot-spc #countdown .columns .column div {
  font-weight: 600;
  background: rgba(255, 255, 0, 0.9333333333);
  padding: 1em 0;
  border-radius: 5px;
  color: #068243;
  text-shadow: -1px -1px 2px rgba(255, 255, 255, 0.8);
  font-size: 1.5em;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2666666667);
}
#maskot-spc #countdown .columns .column div span {
  font-size: 3.5em;
  display: block;
  line-height: 1em;
}
#maskot-spc #closing {
  width: 60%;
  margin: 0 auto;
  border-radius: 10px;
}
#maskot-spc #closing i {
  margin: 0 5px;
  font-size: 12px;
}
#maskot-spc #closing h4 {
  font-size: 1.5em;
}
#maskot-spc #closing p {
  max-width: 75%;
  margin: 0 auto;
}
#maskot-spc #gallery {
  max-width: 80%;
  margin: 0 auto;
}
#maskot-spc #gallery h1 {
  padding-bottom: 0;
  font-weight: 900;
  font-size: 6em;
  line-height: 1em;
  background: #fec751;
  background: -moz-linear-gradient(
    35deg,
    rgb(254, 199, 81) 0%,
    rgb(255, 235, 0) 100%
  );
  background: -webkit-linear-gradient(
    35deg,
    rgb(254, 199, 81) 0%,
    rgb(255, 235, 0) 100%
  );
  background: linear-gradient(
    35deg,
    rgb(254, 199, 81) 0%,
    rgb(255, 235, 0) 100%
  );
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#fec751",endColorstr="#ffeb00",GradientType=1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: rgba(0, 0, 0, 0);
}
#maskot-spc #gallery h2 {
  font-size: 1.6em;
}
#maskot-spc #gallery p {
  font-size: 14px;
  background: rgba(255, 255, 0, 0.9333333333);
  padding: 3px;
  border-radius: 5px;
  color: #068243;
  font-weight: 600;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2666666667);
}
#maskot-spc #gallery .columns {
  margin-top: 40px;
}
#maskot-spc #gallery .mascot {
  position: relative;
  opacity: 0;
  top: -50px;
}
#maskot-spc #gallery .mascot a {
  z-index: 0;
}
#maskot-spc #gallery .mascot a img {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5333333333);
  filter: saturate(0.75);
  transition: all 0.4s ease-out;
}
#maskot-spc #gallery .mascot a:hover {
  z-index: 1;
}
#maskot-spc #gallery .mascot a:hover img {
  filter: saturate(1);
  transform: scale(1.1, 1.1);
}
#maskot-spc #live {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 0 25px;
}
#maskot-spc #live #svg-logo {
  padding: 40px 0;
  width: 90%;
}
#maskot-spc #live h1 {
  padding-bottom: 0;
}
#maskot-spc #live h5 {
  background: #fff200;
  color: #078243;
  width: max-content;
  margin: 0 auto 1em;
  font-size: 20px;
  padding: 5px 15px;
  border-radius: 5px;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.2666666667);
}
#maskot-spc #live p {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 40px;
}
#maskot-spc #live iframe {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 560px;
  background: #000;
  border-top: 5px solid #000;
  border-bottom: 5px solid #000;
  border-left: 5px solid #000;
  border-right: 5px solid #000;
  border-radius: 5px;
}
#maskot-spc #live .time {
  font-size: 20px;
  color: #fff;
  background: #006837;
  padding: 5px 10px;
  display: block;
  width: 260px;
  margin: 10px auto 0;
  border-radius: 5px;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.2666666667);
}
#maskot-spc #live .time i {
  font-size: 16px;
}
#maskot-spc .guides a {
  color: #ff0;
}
#maskot-spc .guides .columns {
  max-width: 80%;
  margin: 0 auto;
}
#maskot-spc .guides .columns .column.is-two-thirds {
  background: rgba(0, 0, 0, 0.6);
  border-radius: 10px;
  padding: 20px;
}
#maskot-spc .guides .list-section:not(:last-child) {
  margin-bottom: 2em;
}
#maskot-spc .guides .list-section p {
  padding-bottom: 0;
  font-size: 1.2em;
  font-weight: 600;
  color: #93b13b;
}
#maskot-spc .guides ul,
#maskot-spc .guides ol {
  padding: 0 1em;
}
#maskot-spc .guides ul > li {
  list-style-type: disc;
}
#maskot-spc #disclaimer {
  margin: 25px auto 0 auto;
  text-align: center;
  color: #fff;
  font-size: 14px;
  border-radius: 5px;
  width: 600px;
  font-weight: 600;
}
#maskot-spc #mascot-footer {
  text-align: center;
}
#maskot-spc #mascot-footer #supported-by img {
  display: block;
  margin: 0 auto;
}
@media screen and (max-width: 600px) {
  #maskot-spc {
    padding: 40px 0 80;
    background-position: center center;
    background-size: auto 101%;
  }
  #maskot-spc .section {
    padding: 40px 0;
  }
  #maskot-spc #svg-logo {
    padding-bottom: 0;
    margin: auto -5px auto -40px;
    width: 110%;
  }
  #maskot-spc svg {
    max-width: 100%;
  }
  #maskot-spc #prize {
    width: 60%;
  }
  #maskot-spc #page-menu {
    margin-top: 1em;
    padding: 0 5%;
  }
  #maskot-spc #page-menu a {
    font-size: 14px;
    line-height: 1.2em;
  }
  #maskot-spc #page-menu a img {
    width: auto;
    height: 80px;
    margin-bottom: 10px;
  }
  #maskot-spc #countdown {
    max-width: 100%;
    background: none;
    padding: 40px 5%;
  }
  #maskot-spc #countdown h2 {
    font-size: 2.5em;
    line-height: 1.2em;
  }
  #maskot-spc #countdown h6 {
    font-size: 0.9em;
  }
  #maskot-spc #countdown p {
    font-size: 10px;
  }
  #maskot-spc #countdown .columns {
    margin-bottom: 0;
  }
  #maskot-spc #countdown .columns .column div {
    padding: 0.5em 0;
    font-size: 1em;
  }
  #maskot-spc #countdown .columns .column div span {
    font-size: 2em;
  }
  #maskot-spc #closing {
    width: 95%;
  }
  #maskot-spc #closing h4 {
    font-size: 1.25em;
  }
  #maskot-spc #closing p {
    font-size: 12px;
    max-width: 95%;
  }
  #maskot-spc #live {
    background-size: 130%;
    padding: 40px 0 5px;
  }
  #maskot-spc #live h1 {
    line-height: 1em;
  }
  #maskot-spc #live #svg-logo {
    width: 100%;
    margin: 0 auto;
    padding: 20px 0;
  }
  #maskot-spc #live iframe {
    height: 220px;
  }
  #maskot-spc #live p {
    font-size: 16px;
    margin-bottom: 0;
  }
  #maskot-spc #live img#poster {
    max-width: 65%;
  }
  #maskot-spc #gallery {
    max-width: 90%;
  }
  #maskot-spc #gallery h1 {
    font-size: 5.5em;
    padding-bottom: 20px;
  }
  #maskot-spc #gallery h2 {
    font-size: 1.2em;
  }
  #maskot-spc #gallery p {
    font-size: 10px;
  }
  #maskot-spc #gallery .mascot a img {
    filter: initial;
  }
  #maskot-spc #gallery .mascot a:hover img {
    filter: initial;
    transform: initial;
  }
  #maskot-spc .guides .columns {
    max-width: 90%;
  }
  #maskot-spc .guides#panduan .columns {
    display: flex;
    flex-direction: column-reverse;
  }
  #maskot-spc .guides ul {
    font-size: 12px;
  }
  #maskot-spc .guides h3 {
    font-size: 18px;
    padding-bottom: 0;
  }
  #maskot-spc .spaceman {
    max-width: 120px;
  }
  #maskot-spc #download {
    padding: 40px 0 80px;
  }
  #maskot-spc #download h3 {
    font-size: 18px;
  }
  #maskot-spc #download h4 {
    font-size: 14px;
  }
  #maskot-spc #disclaimer {
    font-size: 12px;
    width: 90%;
  }
}
#cloud1 {
  animation: cloud-anim1 6s alternate-reverse infinite linear;
}
#cloud2 {
  animation: cloud-anim2 10s alternate-reverse infinite linear;
}
#cloud3 {
  animation: cloud-anim3 8s alternate-reverse infinite linear;
}
#spaceman {
  animation: space-animloop 5s alternate-reverse infinite linear;
}
@keyframes space-animloop {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-40px);
  }
}
@keyframes cloud-anim1 {
  from {
    transform: translateX(40px);
  }
  to {
    transform: translateX(60px);
  }
}
@keyframes cloud-anim2 {
  from {
    transform: translateX(20px);
  }
  to {
    transform: translateX(-80px);
  }
}
@keyframes cloud-anim3 {
  from {
    transform: translateX(-10);
  }
  to {
    transform: translateX(60px);
  }
}
#posts {
  font-size: 18px;
}
#posts h1 {
  font-size: 3em;
}
#posts h2 {
  font-size: 2em;
}
#posts h3 {
  font-size: 1.75em;
}
#posts h4 {
  font-size: 1.5em;
}
#posts h5 {
  font-size: 1.35em;
}
#posts h6 {
  font-size: 1.25em;
}
#posts p {
  font-size: 1em;
}
#posts small {
  font-size: 0.85em;
}
#posts a {
  color: #0b8344;
  transition: all 0.2s ease-in-out;
}
#posts a:hover {
  opacity: 0.8;
}
#posts input[name="keyword"] {
  width: 360px;
}
#posts .container {
  max-width: 960px;
}
#posts i {
  margin-right: 5px;
}
#posts .columns.is-multiline {
  margin: 0;
}
#posts #post-bar {
  font-size: 14px;
  margin-bottom: 2em;
}
#posts #post-bar.level p {
  padding: 0;
}
#posts #post-bar.level a {
  font-weight: bold;
}
#posts #post-bar.level .category {
  margin-right: 2em;
  text-transform: uppercase;
}
#posts #post-bar.level .category i {
  margin-right: 5px;
}
#posts #post-bar.level .breadcrumb {
  font-size: 1em;
}
#posts #post-bar.level .breadcrumb li:not(:last-child) a {
  text-transform: uppercase;
}
#posts #post-bar.level .breadcrumb li.is-active a {
  color: #999;
}
@media screen and (max-width: 600px) {
  #posts #post-bar {
    flex-direction: column-reverse !important;
  }
  #posts #post-bar .level-left {
    margin-top: 2em;
  }
  #posts #post-bar .level-left .category {
    margin-right: 0;
    padding: 0 0.75em;
  }
  #posts #post-bar .level-left .category a i {
    display: none;
  }
}
#posts #related,
#posts .post-item.list {
  margin-top: 4em;
  padding: 2em;
  border: 1px solid #ccc;
}
#posts #related h3,
#posts .post-item.list h3 {
  font-size: 1em;
  padding-bottom: 0;
}
#posts #related p,
#posts .post-item.list p {
  font-size: 0.85em;
  padding: 1em 0;
}
#posts #related a.button,
#posts .post-item.list a.button {
  font-size: 0.75em;
  border-radius: 3px;
  padding: 0.25em 1em;
  min-width: initial;
}
#posts .post-item h1 {
  line-height: 1.1em;
}
#posts .post-item .meta {
  padding: 0.5em 0;
  margin-bottom: 2em;
  border-bottom: 1px solid #ccc;
}
#posts .post-item a.post-featured {
  display: block;
  overflow: hidden;
  width: 100%;
}
#posts .post-item.latest {
  padding: 0 1em;
  margin: 3em 0;
}
#posts .post-item.latest h1 {
  font-size: 2em;
}
#posts .post-item.latest p {
  font-size: 1.1em;
}
#posts .post-item.latest .meta {
  font-weight: bold;
  padding: 0;
  margin-bottom: 0.5em;
  border-bottom: none;
  color: #888;
}
#posts .post-item.latest a.cat {
  display: block;
  width: max-content;
  margin-bottom: 5px;
  padding: 5px;
  border-bottom: 1px solid;
}
@media screen and (max-width: 600px) {
  #posts .post-item.latest {
    background: #eee;
    padding: 1em;
  }
  #posts .post-item.latest .column {
    padding: 0.5em 0;
  }
  #posts .post-item.latest p {
    font-size: 0.9em;
  }
}
#posts .post-item.list {
  margin-top: 0;
  padding: 0 0.5em 3em;
  border: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
#posts .post-item.list i {
  margin-right: 0;
}
#posts .post-item.list small {
  font-size: 14px;
}
#posts .post-item.list small .cat::after {
  content: "·";
  margin: 0 0.35em;
}
#posts .post-item iframe {
  margin-bottom: 2em;
  aspect-ratio: 16/9;
  width: 100%;
}
#posts #search-result ul li {
  padding: 0.5em 0;
  border-bottom: 1px dotted #999;
}
#posts #search-result ul li a {
  font-size: 1.1em;
  font-weight: bold;
}
#posts #search-result ul li p {
  color: #888;
  font-size: 0.9em;
}
.button {
  color: black;
  font-weight: 900;
}
.button.is-ogprimary {
  background: #ffae45;
}
.button.is-ogsecondary {
  background: #f76a23;
}
.button.is-imsak {
  background: #FEEB00;
  color: #000;
}
.button.is-ogdark {
  background: #111;
}
#oxygames {
  position: relative;
  color: #fff;
}
#oxygames #hero {
  background-image: url(images/site/oxygames/october-hero-2.html);
  background-image: url(images/site/oxygames/october-hero.html);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  padding-bottom: 4em;
}
#oxygames #hero .boxed {
  color: #191414;
  padding: 0.15em 0.5em;
  width: max-content;
  margin: 5px auto;
  border-radius: 5px;
  font-weight: 900;
}
#oxygames #hero .boxed.main {
  background: #ffae45;
}
#oxygames #hero .boxed.secondary {
  background: #f76a23;
}
#oxygames #hero h1 {
  font-size: 3em;
}
#oxygames #hero ul#feats {
  margin: 4em auto 0;
  color: #fff;
  width: 75%;
  max-width: 1130px;
}
#oxygames #hero ul#feats li {
  display: inline-block;
  margin: 0 1.5%;
  width: 25%;
}
#oxygames #hero ul#feats li img {
  width: 50%;
}
#oxygames #hero ul#feats li h4 {
  font-size: 24px;
  padding-bottom: 5px;
  color: #fff;
}
#oxygames #hero ul#feats li p {
  font-size: 16px;
}
@media screen and (max-width: 600px) {
  #oxygames #hero .boxed {
    width: initial;
  }
  #oxygames #hero h1 {
    font-size: 2em;
  }
  #oxygames #hero p {
    font-size: 1em;
  }
  #oxygames #hero ul#feats {
    margin: 2em auto 0;
    width: 100%;
  }
  #oxygames #hero ul#feats li h4 {
    font-size: 16px;
  }
  #oxygames #hero ul#feats li p {
    display: none;
  }
}
#oxygames #platforms {
  background: #efefef;
  width: 100%;
  padding: 0;
  overflow: hidden;
}
#oxygames #platforms .container {
  max-width: 100%;
  padding: 4em 5%;
}
#oxygames #platforms .columns .column:first-child {
  flex: none;
  width: 55%;
}
#oxygames #platforms .feat-content {
  margin-bottom: 3em;
}
#oxygames #platforms h2 {
  color: #f76a23;
  line-height: 1.2em;
  font-weight: 900;
  font-size: 3.25em;
  border-bottom: 1px dotted #111;
  padding-bottom: 15px;
  margin-bottom: 15px;
}
#oxygames #platforms h2 span {
  display: block;
  color: #111;
  font-weight: 600;
}
#oxygames #platforms p {
  color: #111;
  font-size: 32px;
}
#oxygames #platforms video {
  width: 100%;
  border-radius: 10px;
}

#oxygames #ala-carte {
  background: url(images/site/oxygames/background-bn.html) no-repeat center
    center;
  background-size: cover;
  padding: 4em 0;
  border-top: 10px solid #ffae45;
}
#oxygames #ala-carte .container {
  margin-top: 2em;
}
#oxygames #ala-carte h2 {
  font-size: 3em;
  text-align: left;
  margin: 0 auto;
  line-height: 1.25em;
  letter-spacing: -1px;
  font-weight: 900;
}
#oxygames #ala-carte #pricing .column#checked ul {
  width: max-content;
  margin: 2em auto;
  display: block;
  text-align: initial;
}
#oxygames #ala-carte #pricing .column#checked ul li {
  list-style-type: "✔";
  padding-left: 0.5em;
  padding-bottom: 0.5em;
  font-size: 24px;
  font-weight: 700;
  color: #fff;
}

#oxygames #ala-carte #pricing .plan-container {
  margin: 0 10px;
  padding: 2em;
  background: #ffae45;
  border-radius: 10px;
}
#oxygames #ala-carte #pricing .plan-container a {
  color: #0b8344;
}
#oxygames #ala-carte #pricing .plan-container .plan-name,
#oxygames #ala-carte #pricing .plan-container .desc,
#oxygames #ala-carte #pricing .plan-container .price {
  color: #111;
}
#oxygames #ala-carte #pricing .plan-container img.plan-name {
  border: none;
}
#oxygames #ala-carte #pricing .plan-container .plan-name {
  font-size: 2em;
  font-weight: 900;
  padding: 0 0 0.25em;
  border-bottom: 1px dotted #111;
  margin-top: 1em;
  color: #111;
}
#oxygames #ala-carte #pricing .plan-container .plan-name span {
  font-size: 2em;
  color: #fff;
  padding: 0px 25px;
  border-radius: 5px 5px 0 0;
  line-height: 1em;
  margin-right: 5px;
}
#oxygames #ala-carte #pricing .plan-container .desc {
  list-style-type: disc;
  padding: 0;
  font-size: 20px;
  line-height: 1.35em;
}
#oxygames #ala-carte #pricing .plan-container .desc a {
  color: #333;
}
#oxygames #ala-carte #pricing .plan-container .desc a:hover {
  color: #f76a23;
}
#oxygames #ala-carte #pricing .plan-container .price {
  font-size: 2.5em;
  font-weight: 900;
  margin: 1em 0;
}
#oxygames #ala-carte #pricing .plan-container .price small {
  border-top: initial;
  font-size: 14px !important;
  font-weight: normal;
  display: block;
}
#oxygames #ala-carte #pricing .plan-container .price small::before {
  content: "";
}

#oxygames #ala-carte .tnc {
  margin: 1em auto 0;
  width: 100%;
  border: none;
  color: #111;
}
#oxygames #ala-carte .tnc ul {
  padding: 0 0 0 1em;
  text-align: left;
}

#oxygames #controllers {
  padding-top: 4em;
  color: #111;
}
#oxygames #controllers .title {
  width: 800px;
  margin: 0 auto 0.5em;
  font-size: 3em;
  font-weight: 900;
}
#oxygames #controllers .columns {
  width: 75%;
  margin: 0 auto;
}
#oxygames #controllers .columns .column img {
  width: 75%;
}


form .select,
form .select > select {
  width: 100%;
}
.section {
  padding-bottom: 80px;
}
.section .title {
  font-size: 4em;
  letter-spacing: -1px;
  font-weight: 900;
}
.section.dark h1,
.section.dark h2,
.section.dark h3,
.section.dark h4,
.section.dark h5,
.section.dark h6,
.section.dark p,
.section.dark ul {
  color: #eee;
}
.multi-column {
  column-count: 6;
}

.chatbox {
  position: sticky;
  bottom: 0;
  width: 200px;
  left: 80%;
}

#services {
  font-family: "Lato", sans-serif;
  font-size: 24px;
  font-weight: 800;
  max-width: 1000px;
  margin: 2em auto 0;
}
#services .column:not(:last-child) {
  border-right: 1px dotted #ccc;
}

#services .column a {
  display: block;
}
#services .column a span {
  display: block;
  position: relative;
  bottom: 20px;
  transition: all 0.4s ease-out;
}
#services .column a:hover span {
  background: #f9bc13;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: rgba(0, 0, 0, 0);
}
.tnc {
  width: 75%;
  margin: 40px auto 0;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 1em;
}
.tnc p {
  font-weight: bold;
  text-decoration: underline;
  padding-bottom: 0;
}
.tnc ul {
  list-style: initial;
  font-size: 14px;
  padding: 0 1em;
}
.tnc ul li strong {
  color: inherit;
} 
#vidtuts {
  background: #2a2a2a;
}
#vidtuts #yt-vplayer {
  background: rgba(0, 0, 0, 0.2666666667);
  padding: 1em;
  width: max-content;
  margin: 1em auto;
} 
#vidtuts #yt-vlist {
  padding: 1em 2em;
}
#vidtuts #yt-vlist .columns .column {
  cursor: pointer;
  padding: 2px 5px;
  transition: all 0.4s ease-out;
}
#vidtuts #yt-vlist .columns .column:hover {
  z-index: 1;
  transform: scale(1.1);
}
.faq-list {
  background: #f8f8f8;
  margin: 0 0 20px 0;
  padding: 0.75em 1em;
}
.faq-list h3 {
  font-size: 18px;
  padding: 0;
  line-height: 1.5em;
  cursor: pointer;
}
.faq-list h3::before {
  font-family: "Font Awesome 5 Free";
  content: "";
  margin-right: 0.5em;
  transform: rotate(-90deg);
  display: inline-block;
}
.faq-list .faq {
  margin-left: 1.1em;
  display: none;
}
.faq-list a {
  font-weight: bold;
}
#oxygen-livestream {
  background: #222;
}
#oxygen-livestream .columns .column {
  padding: 0;
}
#oxygen-livestream .columns .column.panel {
  box-shadow: initial;
  overflow-y: auto;
  border-radius: 0 !important;
}
#oxygen-livestream .columns .column.panel .panel-heading {
  position: sticky;
  top: 0;
  border-radius: 0 !important;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
}
#oxygen-livestream .columns .column #channel.table {
  width: 100%;
  height: 450px;
}
#oxygen-livestream .columns .column #channel.table thead,
#oxygen-livestream .columns .column #channel.table tbody,
#oxygen-livestream .columns .column #channel.table tr,
#oxygen-livestream .columns .column #channel.table td,
#oxygen-livestream .columns .column #channel.table th {
  display: block;
  width: 100%;
}
#oxygen-livestream .columns .column #channel.table tbody {
  height: 0;
  -ms-overflow-style: none;
  width: 100%;
}
#oxygen-livestream .columns .column #channel.table tbody tr td {
  font-size: 12px;
  padding: 10px 25px;
  color: #111;
  cursor: pointer;
}
#oxygen-livestream .columns .column #channel.table tbody tr td:hover {
  background: linear-gradient(
    150deg,
    rgb(11, 131, 68) 0%,
    rgb(48, 195, 118) 100%
  );
  color: #fff;
}
#oxygen-livestream .columns .column #channel.table tbody tr td:hover strong {
  color: #fff;
}
#oxygen-livestream .columns .column #channel .table-fixed tbody td,
#oxygen-livestream .columns .column #channel .table-fixed thead > tr > th {
  float: left;
  border-bottom-width: 0;
}
#pnf h1 {
  font-size: 8em;
  font-weight: 900;
  letter-spacing: -4px;
}
#pnf h2 {
  font-size: 1.35em;
  line-height: 1.5em;
}
#pnf #links li {
  display: inline-block;
  font-weight: bold;
}
#pnf #links li:not(:last-child)::after {
  content: " | ";
  color: #0b8344;
}
#pnf #links li a {
  color: #0b8344;
}
#pnf #links li a:hover {
  color: #f9bc13;
} 
.sticky {
  position: sticky;
  top: 180px;
}
#back-to-top {
  color: #fdc514;
  display: inline-block;
  font-size: 14px;
  margin-top: 0;
}
#back-to-top::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "";
  margin-right: 0.5em;
} 
.namapaket.content > img,
    .namapaket.content > p {
        display: inline-block;
    }