body {
  display: -ms-grid;
  display: grid;
  grid-template-areas: "nav nav nav nav""header header header header""main main aside aside""footer footer footer footer";
  -ms-grid-columns: auto var(--gap) 780px var(--gap) 260px var(--gap) auto;
  grid-template-columns: auto 780px 260px auto;
  -ms-grid-rows: 44px var(--gap) auto var(--gap) auto var(--gap) auto;
  grid-template-rows: 44px auto auto auto;
  grid-gap: var(--gap)
}

#menu-top {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  -ms-grid-column-span: 7;
  grid-area: nav;
  -ms-grid-column: 1;
  grid-column-start: 1
}

header {
  -ms-grid-row: 3;
  -ms-grid-column: 1;
  -ms-grid-column-span: 7;
  grid-area: header;
  -ms-grid-column: 1;
  grid-column-start: 1;
  margin-bottom: 50px
}

main {
  -ms-grid-row: 5;
  -ms-grid-column: 1;
  -ms-grid-column-span: 3;
  grid-area: main;
  margin-left: var(--gap);
  -ms-grid-column: 2;
  grid-column-start: 2
}

aside {
  -ms-grid-row: 5;
  -ms-grid-column: 5;
  -ms-grid-column-span: 3;
  grid-area: aside;
  -ms-grid-column: 3;
  grid-column-start: 3;
  -ms-grid-column-span: 1;
  grid-column-end: 4
}

footer {
  -ms-grid-row: 7;
  -ms-grid-column: 1;
  -ms-grid-column-span: 7;
  grid-area: footer;
  -ms-grid-column: 2;
  grid-column-start: 2;
  -ms-grid-column-span: 2;
  grid-column-end: 4
}

html {
  scroll-behavior: smooth
}

body {
  top: 0 !important;
  overflow-x: hidden;
  font-family: var(--font);
  font-size: var(--font-size);
  line-height: var(--line-height);
  margin: 0;
  padding: 0;
  color: var(--color-text);
  background: linear-gradient(0deg, var(--color-bg) 0, var(--color-primary) 100%);
  background-attachment: fixed;
  max-width: var(--body-width);
  position: relative
}

.noscroll {
  overflow: hidden
}

body.noscroll:before {
  content: "";
  width: 100vw;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  background: rgba(0, 0, 0, .5);
  z-index: 500;
  -webkit-backdrop-filter: saturate(70%);
  backdrop-filter: saturate(70%)
}

body.nogradient {
  background: var(--color-bg);
  background-attachment: scroll
}

a {
  text-decoration: none;
  color: var(--color-primary)
}

a,
img,
svg {
  -webkit-tap-highlight-color: transparent
}

hr {
  margin: 32px 0;
  border-top: 2px dashed #000;
  opacity: .1
}

img {
  max-width: 100%;
  display: block
}

#menu-top {
  position: fixed;
  background: rgba(0, 0, 0, .7);
  -webkit-box-shadow: 0 1px 10px rgba(0, 0, 0, .6);
  box-shadow: 0 1px 10px rgba(0, 0, 0, .6);
  z-index: 1000;
  height: 44px;
  color: rgba(255, 255, 255, .86);
  top: 0;
  -webkit-backdrop-filter: saturate(200%) blur(15px);
  backdrop-filter: saturate(200%) blur(15px);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 100vw;
  padding: 0
}

#brand>section>* {
  margin-top: -400px
}

#menu-top .brand {
  position: absolute;
  left: 62px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-transition: all .2s ease-out;
  -o-transition: all .2s ease-out;
  transition: all .2s ease-out;
  font-size: 1.1rem;
  font-weight: 700
}

#menu-top .brand a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  color: inherit
}

#menu-top .brand .logo {
  max-height: 24px;
  margin-right: 10px
}

#menu-top ul {
  list-style-type: none;
  margin: 0;
  padding: 0
}

#menu-top ul#quick-links a svg,
#menu-top ul#quick-links i {
  display: none
}

#menu-top ul>li {
  display: inline;
  margin-right: 18px;
  position: relative
}

#menu-top ul>li>ul {
  background: var(--color-bg-card);
  visibility: hidden;
  opacity: 0;
  position: absolute;
  margin-top: 6px;
  left: -16px;
  padding: 0;
  min-width: 180px;
  height: auto;
  pointer-events: none;
  transition: all .2s ease-out;
  -webkit-transition: all .2s ease-out;
  -moz-transition: all .2s ease-out;
  -ms-transition: all .2s ease-out;
  -o-transition: all .2s ease-out;
  border-radius: 4
}

#menu-top ul li ul:focus,
#menu-top ul li ul:hover,
#menu-top ul li:focus-within>ul,
#menu-top ul li:hover>ul {
  visibility: visible;
  opacity: 1 !important;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  pointer-events: all;
  -webkit-box-shadow: 0 2px 12px rgba(0, 0, 0, .6);
  box-shadow: 0 2px 12px rgba(0, 0, 0, .6);
  margin-top: 13px
}

#menu-top>ul>li>ul>li {
  clear: both;
  background: var(--color-bg-card);
  margin: 0;
  transition: all .3s ease-out;
  -webkit-transition: all .3s ease-out;
  -moz-transition: all .3s ease-out;
  -ms-transition: all .3s ease-out;
  -o-transition: all .3s ease-out
}

#menu-top>ul>li>ul>li>a {
  font-weight: 500;
  text-decoration: none;
  display: block;
  padding: 10px 16px;
  color: var(--color-text)
}

#menu-top>ul>li>ul>li:hover {
  background-color: #fff
}

#menu-top>ul>li>a {
  padding: 12px 0;
  text-decoration: none;
  color: var(--color-text-light);
  text-transform: uppercase;
  font-size: 1rem
}

#btn-menu {
  cursor: pointer;
  margin-left: var(--gap)
}

#btn-menu polygon,
#btn-mute path,
#btn-mute polygon,
#btn-search path,
#btn-contrast circle,
#btn-contrast path {
  fill: none;
  stroke: #fff;
  stroke-miterlimit: 10;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: all .2s ease-out;
  -webkit-transition: all .2s ease-out;
  -moz-transition: all .2s ease-out;
  -ms-transition: all .2s ease-out;
  -o-transition: all .2s ease-out
}

#btn-mute path {
  opacity: 0
}

#btn-mute path,
#btn-mute polygon {
  stroke: #ef9a9a
}

#btn-mute.on path,
#btn-mute.on polygon {
  stroke: #a5d6a7
}

#btn-mute .line {
  -webkit-transform-origin: center;
  -ms-transform-origin: center;
  transform-origin: center
}

/* .goog-te-banner-frame.skiptranslate {
  display: none!important
} */

#btn-mute,
#lang-switch,
#google_translate_element,
#btn-contrast {
  position: absolute;
  cursor: pointer;
  transition: all .2s ease-in-out;
  -webkit-transition: all .2s ease-in-out;
  -moz-transition: all .2s ease-in-out;
  -ms-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out
}

#btn-contrast {
  right: 226px;
  top: 10px;
  z-index: 10;
  cursor: pointer;
  -webkit-transition-delay: .15s;
  -o-transition-delay: .15s;
  transition-delay: .15s
}

#btn-contrast.active path {
  fill: #fff;
}

#btn-mute {
  right: 194px;
  top: 10px;
  z-index: 10;
  cursor: pointer;
  -webkit-transition-delay: .1s;
  -o-transition-delay: .1s;
  transition-delay: .1s
}

.open #btn-mute,
.open #lang-switch,
.open #google_translate_element,
.open #btn-contrast {
  opacity: 0;
  z-index: 1;
  pointer-events: none;
  -webkit-transform-origin: right;
  -ms-transform-origin: right;
  transform-origin: right;
  transform: translateX(8px) scaleY(.8);
  -webkit-transform: translateX(8px) scaleY(.8);
  -moz-transform: translateX(8px) scaleY(.8);
  -ms-transform: translateX(8px) scaleY(.8);
  -o-transform: translateX(8px) scaleY(.8)
}

#lang-switch {
  right: 42px;
  z-index: 5
}

.open #lang-switch {
  -webkit-transition-delay: .2s;
  -o-transition-delay: .2s;
  transition-delay: .2s
}

#lang-switch img {
  display: inline-block
}

ul#lang-switch>li>ul {
  left: auto;
  right: 0
}

ul#lang-switch>li {
  margin-right: 0
}

ul#lang-switch>li>a {
  padding: 12px 20px
}

ul#lang-switch>li>a>img {
  position: relative;
  top: 3px;
  height: 17px;
  width: 23px;
  object-fit: cover;
}

ul#lang-switch>li>ul>li>a>img {
  margin-right: 8px;
  margin-bottom: -3px;
  height: 17px;
  width: 23px;
  object-fit: cover;
}

/* #google_translate_element {
  display: none
} */

#menu-top form {
  width: 100%;
  position: absolute;
  top: -4px;
  display: flex;
  justify-content: center;
  z-index: -1;
}

#search-input {
  width: 0%;
  max-width: 240px;
  color: var(--color-text-light);
  text-shadow: none;
  padding: 4px 16px;
  position: absolute;
  right: calc(var(--gap) + 30px);
  top: -2px;
  -webkit-transition: all .3s ease-out;
  -o-transition: all .3s ease-out;
  transition: all .3s ease-out;
  -webkit-transform-origin: right;
  -ms-transform-origin: right;
  transform-origin: right;
  -webkit-box-shadow: none;
  box-shadow: none;
  opacity: 0;
  z-index: 1
}

.open #search-input {
  width: 100%;
  -webkit-transition: all .3s ease-out;
  -o-transition: all .3s ease-out;
  transition: all .3s ease-out;
  -webkit-box-shadow: var(--box-shadow-inset);
  box-shadow: var(--box-shadow-inset);
  opacity: 1;
  z-index: 2
}

#btn-search {
  cursor: pointer;
  z-index: 10;
  margin-right: var(--gap)
}

header {
  margin-top: var(--margin-header);
  padding: 0 var(--gap);
  color: var(--color-text-light);
  text-align: center;
  position: relative;
  height: 120vh;
  padding: 0;
  margin-bottom: -20vh;
  background: linear-gradient(0deg, var(--color-bg) 10%, var(--color-primary) 60%)
}

header .swiper-container {
  position: absolute;
  width: 100vw;
  height: 120vh
}

header .swiper-container .swiper-slide {
  width: 100vw
}

header .swiper-container .swiper-slide img {
  width: 100vw;
  height: 120vh;
  object-fit: cover
}

header .overlay {
  position: absolute;
  width: 100%;
  height: 150vh;
  content: "";
  left: 0;
  top: 0;
  background: linear-gradient(0deg, #246804 20%, rgba(0, 0, 0, .35) 35%);
  z-index: 10;
  pointer-events: none
}

header #brand {
  position: absolute;
  width: 100%;
  top: 112px;
  z-index: 20;
  pointer-events: none
}

header #brand section {
  margin-top: -20px
}

header #brand div {
  display: flex;
  width: 100%;
  justify-content: center;
}

header #brand div img {
  width: 160px;
  height: auto;
  margin: 20px 6px;
}

header h1 {
  font-size: 2.78rem;
  margin: 4px 0 0;
  line-height: 1
}

header h2,
header h5 {
  margin: 0
}

header h5 {
  line-height: 1.4
}

header h2 {
  line-height: 1.2
}

#tagline {
  margin-top: 10px;
  fill: none;
  stroke: var(--color-text-light);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 10;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000
}

main>h1 {
  margin-bottom: 1.2rem
}

main .swiper-slide img {
  margin: auto
}

main section {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin-bottom: 10px
}

main section.menu-images {
  margin-top: 30px;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center
}

main section.welcome h1 {
  margin: 0;
  font-size: 2rem;
  line-height: 1
}

main section.welcome h2 {
  margin: 1.2rem 0 0;
  font-size: 1.3rem;
  line-height: 1.1
}

main section.welcome p {
  margin: .4rem 0 0;
  font-size: 1rem;
  line-height: 1.4;
  font-weight: 500
}

main section.menu-images h2 {
  text-align: center
}

main section article {
  -ms-flex-preferred-size: 30%;
  flex-basis: 30%;
  margin-bottom: 16px
}

main section.menu-images article {
  flex-basis: calc(50% - 30px);
  margin: 10px
}

main section.page article {
  -ms-flex-preferred-size: 100%;
  flex-basis: 100%
}

main section.page article:first-child {
  -ms-flex-preferred-size: 100%;
  flex-basis: 100%
}

main section.two-col {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center
}

main section.two-col>a {
  -ms-flex-preferred-size: calc(50% - 16px);
  flex-basis: calc(50% - 16px);
  margin: 4px
}

main section.two-col>a>img {
  max-height: 100px;
  margin: auto
}

main section.three-col {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin: 16px 0
}

main section.three-col>a {
  -ms-flex-preferred-size: calc(33% - 20px);
  flex-basis: calc(33% - 20px);
  margin: 0 10px
}

main section.three-col>a>img {
  max-height: 150px;
  margin: auto
}

main section article>a>img {
  width: 100%;
  height: 162px;
  -o-object-fit: cover;
  object-fit: cover;
  transition: all .3s;
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
  -ms-transition: all .3s;
  -o-transition: all .3s
}

main section.menu-images article>a>img {
  height: 200px
}

main section article:hover img {
  filter: brightness(.8);
  -webkit-filter: brightness(.8)
}

main section article a {
  color: inherit
}

main section article h2 {
  font-size: 1.2rem;
  line-height: 1.1;
  transition: all .3s;
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
  -ms-transition: all .3s;
  -o-transition: all .3s
}

main section.page article:first-child h2 {
  font-size: 1.8rem
}

main section article h3 {
  font-size: 1.6rem
}

main section article h4 {
  font-size: 1.4rem
}

main section article h5 {
  font-size: 1.2rem
}

main section article h6 {
  font-size: 1rem
}

main section.page article:first-child>h2,
main>h1:first-child {
  margin-top: 0
}

main section.page article:first-child>h2+p {
  margin-top: 0
}

main section article p {
  font-size: .8rem;
  margin-bottom: .8rem
}

main section article .content {
  margin-top: 24px
}

main section article .content a[href] {
  color: var(--color-primary);
  font-weight: 500
}

main section.page article .content {
  word-wrap: break-word
}

.ttshide {
  display: none;
}

main section article .content p {
  font-size: 1rem;
  text-align: left !important;
  line-height: 1.4
}

main section article .content img {
  display: inline-block
}

main section.page article .content h1 {
  font-size: 1.6rem
}

main section.page article .content h2 {
  font-size: 1.4rem
}

main section.page article .content h3 {
  font-size: 1.2rem
}

main section.page article .content h4 {
  font-size: 1rem
}

main section.page article .content h5 {
  font-size: .8rem
}

main section.page article .content ol,
main section.page article .content ul {
  margin-top: 6px;
  padding-left: 16px
}

main section.page article .content ol>li,
main section.page article .content ul>li {
  margin-bottom: 10px
}

main section.page article .content ol>li li,
main section.page article .content ul>li li {
  margin-bottom: 6px
}

main section article>a>h2 {
  margin: .6rem 0 .3rem
}

main section article>a>h2+p {
  margin-top: 0
}

.peta-betcipelang {
  margin-bottom: 20px
}

aside {
  margin-right: var(--gap);
  text-align: center
}

aside img {
  margin: 6px auto;
  max-width: 200px;
}

aside img[alt="Direktori"] {
  max-width: 184px;
}

aside img[alt="Link Tree"] {
  max-width: 100%;
}

aside section {
  margin: 0 auto 36px;
  max-width: 300px
}

aside section img.medium {
  width: 50%
}

aside h4 {
  font-size: 1rem;
  font-weight: 500;
  margin: 0 0 6px
}

aside p {
  font-size: .86rem
}

aside h4 {
  font-weight: 500;
  margin: 0 0 6px
}

aside a {
  color: var(--color-text)
}

footer {
  padding: var(--gap);
  margin: 0 var(--gap);
  color: var(--color-text-light);
  word-break: break-all;
}

footer section {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  justify-content: space-between
}

footer section:first-child {
  margin: 10px 0 50px
}

footer section:first-child>div {
  -ms-flex-preferred-size: 30%;
  flex-basis: 30%
}

footer section:first-child>div>div>i,
footer section:first-child>div>div>p {
  display: inline-block
}

footer section:first-child>div>div>p {
  margin-bottom: 6px
}

footer section:first-child>div img {
  margin-bottom: 8px
}

footer section:first-child>div h5 {
  font-size: 1.1rem;
  margin-bottom: 10px
}

footer section:first-child>div p {
  line-height: 1.6;
  margin-top: 0
}

footer section:nth-child(2) div {
  font-size: calc(var(--font-size) * .9);
  margin-top: 40px
}

footer a {
  color: var(--color-text-light);
  font-weight: 700
}

footer>img {
  position: absolute;
  width: 100vw;
  left: 0;
  bottom: 0;
  z-index: -1
}

footer .sapi {
  position: absolute;
  width: 86px;
  height: 74px;
  bottom: 54px;
  right: 20px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent
}

footer .sapi:hover {
  animation: loncat .8s 2s forwards;
  -webkit-animation: loncat .8s 2s forwards
}

footer #sapi-footer:hover>img.kepala {
  animation: none;
  -webkit-animation: none
}

footer #sapi-footer:hover>img.mata {
  animation: mata-sapi-footer 1s linear forwards;
  -webkit-animation: mata-sapi-footer 1s linear forwards;
  transform: translateX(0);
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0)
}

footer #sapi-footer:hover>img.alis {
  animation: alis-sapi-footer 1s linear alternate infinite;
  -webkit-animation: alis-sapi-footer 1s linear alternate infinite
}

footer .sapi>img {
  position: absolute;
  -webkit-tap-highlight-color: transparent
}

footer #sapi-footer>img.alis,
footer #sapi-footer>img.kepala {
  animation: kepala 5s linear infinite alternate;
  -webkit-animation: kepala 5s linear infinite alternate
}

footer #sapi-footer>img.mata {
  transform: translateX(-4px);
  -webkit-transform: translateX(-4px);
  -moz-transform: translateX(-4px);
  -ms-transform: translateX(-4px);
  -o-transform: translateX(-4px);
  animation: mata 3s linear alternate infinite, kepala 5s linear infinite alternate;
  -webkit-animation: mata 3s linear alternate infinite, kepala 5s linear infinite alternate
}

@-webkit-keyframes mata-sapi-footer {
  0% {
    margin-top: 6px
  }

  70% {
    margin-top: 6px
  }

  80% {
    margin-top: -3px
  }

  100% {
    margin-top: -3px
  }
}

@keyframes mata-sapi-footer {
  0% {
    margin-top: 6px
  }

  40% {
    margin-top: 6px
  }

  50% {
    margin-top: -3px
  }

  100% {
    margin-top: -3px
  }
}

@-webkit-keyframes alis-sapi-footer {
  0% {
    margin-top: 3px
  }

  70% {
    margin-top: 3px
  }

  80% {
    margin-top: -3px
  }

  100% {
    margin-top: -3px
  }
}

@keyframes alis-sapi-footer {
  0% {
    margin-top: 0
  }

  40% {
    margin-top: 0
  }

  60% {
    margin-top: -3px
  }

  80% {
    margin-top: -1px
  }

  100% {
    margin-top: -3px
  }
}

aside,
main {
  z-index: 100;
  padding: var(--gap);
  background: #fff;
  border-radius: var(--border-radius);
  -webkit-box-shadow: var(--box-shadow);
  box-shadow: var(--box-shadow)
}

#menu-side {
  position: fixed;
  top: 44px;
  z-index: 1500;
  overflow: hidden;
  width: 250px;
  left: -250px;
  background-color: var(--color-bg-card);
  height: calc(100vh - 44px);
  -webkit-box-shadow: none;
  box-shadow: none;
  overflow-y: auto;
  transition: all .2s ease-out;
  -webkit-transition: all .2s ease-out;
  -moz-transition: all .2s ease-out;
  -ms-transition: all .2s ease-out;
  -o-transition: all .2s ease-out
}

#menu-side.open {
  left: 0;
  -webkit-box-shadow: 1px 1px 12px rgba(0, 0, 0, .5);
  box-shadow: 1px 1px 12px rgba(0, 0, 0, .5);
  transition: all .2s ease-in;
  -webkit-transition: all .2s ease-in;
  -moz-transition: all .2s ease-in;
  -ms-transition: all .2s ease-in;
  -o-transition: all .2s ease-in
}

#menu-side a {
  text-decoration: none;
  color: inherit;
  width: 100%;
  display: block
}

#menu-side ul {
  padding: 0 10px;
  margin-top: 0;
  list-style-type: none;
  line-height: 1.2
}

#menu-side>ul>li {
  padding: 10px 16px 14px;
  border-bottom: 1px solid var(--color-text-light);
  font-weight: 700
}

#menu-side>ul>li>a {
  cursor: pointer;
  font-size: .96rem
}

#menu-side>ul>li>a:not([href]):after {
  content: "\f078";
  font-family: "Font Awesome 5 Free";
  position: absolute;
  right: 6px;
  margin-top: -16px;
  padding: 16px 16px 16px 100%;
  color: var(--color-text);
  opacity: .2;
  transition: all .2s ease-out;
  -webkit-transition: all .2s ease-out;
  -moz-transition: all .2s ease-out;
  -ms-transition: all .2s ease-out;
  -o-transition: all .2s ease-out
}

#menu-side>ul>li>a.active:not([href]):after {
  transform: rotateX(-180deg);
  -webkit-transform: rotateX(-180deg);
  -moz-transform: rotateX(-180deg);
  -ms-transform: rotateX(-180deg);
  -o-transform: rotateX(-180deg)
}

#menu-side>ul>li>ul {
  padding-left: 15px
}

#menu-side>ul>li>a+ul {
  display: none
}

#menu-side>ul>li>a.active+ul {
  display: block
}

#menu-side>ul>li>ul>li {
  font-size: 98%;
  padding-top: 6px;
  font-weight: 600;
  list-style-type: disc
}

#menu-side>ul>li>ul>li>ul {
  padding-left: 15px
}

#menu-side>ul>li>ul>li>ul>li {
  font-size: 95%;
  padding-top: 6px;
  font-weight: 500;
  list-style-type: disc
}

#menu-side>ul>li>ul>li>ul>li>ul {
  padding-left: 15px
}

#menu-side>ul>li>ul>li>ul>li>ul>li {
  font-size: 95%;
  padding-top: 6px;
  font-weight: 400;
  list-style-type: disc
}

#menu-side li {
  margin: 4px 0
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 1.3rem;
  margin-bottom: .6rem
}

p {
  margin-top: .6rem;
  margin-bottom: .6rem
}

button,
input,
select,
textarea {
  color: var(--color-text);
  font-family: var(--font)
}

label {
  margin: 0 0 0 10px;
  font-size: .8rem;
  opacity: .6
}

label+input {
  margin-top: 4px
}

.btn,
button,
input,
main #pagination a {
  border: 0;
  outline: 0;
  font-size: var(--font-size);
  padding: 10px 20px;
  text-shadow: 1px 1px 0 var(--color-highlight-light);
  width: 100%;
  margin: 10px 0;
  border-radius: 16px;
  -webkit-border-radius: 16px;
  -moz-border-radius: 16px;
  -ms-border-radius: 16px;
  -o-border-radius: 16px;
  -webkit-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out
}

main #pagination {
  width: 100%;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap
}

main #pagination a {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 4px !important;
  padding: 6px 10px;
  min-width: 18px;
  text-align: center;
}

input {
  -webkit-box-shadow: var(--box-shadow-shallow-inset);
  box-shadow: var(--box-shadow-shallow-inset);
  width: 100%;
  background-color: rgba(0, 0, 0, .05);
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -moz-appearance: none;
  appearance: none;
  -webkit-appearance: none
}

input:focus {
  -webkit-box-shadow: var(--box-shadow-inset);
  box-shadow: var(--box-shadow-inset);
  background-color: rgba(0, 0, 0, .1)
}

input+small {
  display: block;
  margin: -8px 0 10px 10px;
  font-size: 70%;
  opacity: .6
}

.btn,
button,
main #pagination a {
  font-weight: 700;
  -webkit-box-shadow: var(--box-shadow);
  box-shadow: var(--box-shadow);
  -webkit-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
  background-color: rgba(0, 0, 0, .05);
  cursor: pointer;
  font-weight: 600
}

.btn:hover,
button:hover {
  -webkit-box-shadow: var(--box-shadow-shallow);
  box-shadow: var(--box-shadow-shallow);
  background-color: rgba(0, 0, 0, .1)
}

.btn:active,
button:active {
  -webkit-box-shadow: var(--box-shadow-shallow-inset);
  box-shadow: var(--box-shadow-shallow-inset);
  background-color: rgba(0, 0, 0, .1)
}

.btn-block,
main #pagination a {
  display: block;
  margin: auto;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content
}

.btn-primary,
main #pagination a.active {
  background: var(--color-primary);
  color: var(--color-text-light);
  text-shadow: -1px -1px 0 var(--color-shadow)
}

#pagination a.active {
  pointer-events: none;
}

.btn-primary:hover,
main #pagination a.active:hover {
  background: var(--color-primary-light)
}

.btn-primary:active,
main #pagination a.active:active {
  background: var(--color-primary)
}

.btn[disabled],
#pagination a[disabled] {
  pointer-events: none;
  background: rgba(0, 0, 0, .1);
  color: var(--color-text-mute);
  text-shadow: 1px 1px 0 var(--color-highlight);
  -webkit-box-shadow: none;
  box-shadow: none
}

#tooltip {
  background-color: #333;
  color: #fff;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 13px
}

.survey>img {
  transform-origin: bottom center;
  -webkit-transform-origin: bottom center;
  -ms-transform-origin: bottom center;
  animation: loncat 1s ease-in-out forwards infinite;
  -webkit-animation: loncat 1s ease-in-out forwards infinite
}

.survey+p {
  transform-origin: top center;
  -webkit-transform-origin: top center;
  -ms-transform-origin: top center;
  animation: loncat 1s .1s ease-in-out forwards infinite;
  -webkit-animation: loncat 1s .1s ease-in-out forwards infinite
}

.survey:hover+p,
.survey:hover>img {
  animation: none;
  -webkit-animation: none
}

@-webkit-keyframes loncat {
  0% {
    transform: scale(1, 1) translateY(0);
    -webkit-transform: scale(1, 1) translateY(0);
    -moz-transform: scale(1, 1) translateY(0);
    -ms-transform: scale(1, 1) translateY(0);
    -o-transform: scale(1, 1) translateY(0)
  }

  10% {
    transform: scale(1.05, .95) translateY(0);
    -webkit-transform: scale(1.05, .95) translateY(0);
    -moz-transform: scale(1.05, .95) translateY(0);
    -ms-transform: scale(1.05, .95) translateY(0);
    -o-transform: scale(1.05, .95) translateY(0)
  }

  30% {
    transform: scale(.95, 1.05) translateY(-12px);
    -webkit-transform: scale(.95, 1.05) translateY(-12px);
    -moz-transform: scale(.95, 1.05) translateY(-12px);
    -ms-transform: scale(.95, 1.05) translateY(-12px);
    -o-transform: scale(.95, 1.05) translateY(-12px)
  }

  50% {
    transform: scale(1.05, .95) translateY(0);
    -webkit-transform: scale(1.05, .95) translateY(0);
    -moz-transform: scale(1.05, .95) translateY(0);
    -ms-transform: scale(1.05, .95) translateY(0);
    -o-transform: scale(1.05, .95) translateY(0)
  }

  57% {
    transform: scale(1, 1) translateY(-3px);
    -webkit-transform: scale(1, 1) translateY(-3px);
    -moz-transform: scale(1, 1) translateY(-3px);
    -ms-transform: scale(1, 1) translateY(-3px);
    -o-transform: scale(1, 1) translateY(-3px)
  }

  64% {
    transform: scale(1, 1) translateY(0);
    -webkit-transform: scale(1, 1) translateY(0);
    -moz-transform: scale(1, 1) translateY(0);
    -ms-transform: scale(1, 1) translateY(0);
    -o-transform: scale(1, 1) translateY(0)
  }

  100% {
    transform: scale(1, 1) translateY(0);
    -webkit-transform: scale(1, 1) translateY(0);
    -moz-transform: scale(1, 1) translateY(0);
    -ms-transform: scale(1, 1) translateY(0);
    -o-transform: scale(1, 1) translateY(0)
  }
}

@keyframes loncat {
  0% {
    transform: scale(1, 1) translateY(0);
    -webkit-transform: scale(1, 1) translateY(0);
    -moz-transform: scale(1, 1) translateY(0);
    -ms-transform: scale(1, 1) translateY(0);
    -o-transform: scale(1, 1) translateY(0)
  }

  10% {
    transform: scale(1.05, .95) translateY(0);
    -webkit-transform: scale(1.05, .95) translateY(0);
    -moz-transform: scale(1.05, .95) translateY(0);
    -ms-transform: scale(1.05, .95) translateY(0);
    -o-transform: scale(1.05, .95) translateY(0)
  }

  30% {
    transform: scale(.95, 1.05) translateY(-12px);
    -webkit-transform: scale(.95, 1.05) translateY(-12px);
    -moz-transform: scale(.95, 1.05) translateY(-12px);
    -ms-transform: scale(.95, 1.05) translateY(-12px);
    -o-transform: scale(.95, 1.05) translateY(-12px)
  }

  50% {
    transform: scale(1.05, .95) translateY(0);
    -webkit-transform: scale(1.05, .95) translateY(0);
    -moz-transform: scale(1.05, .95) translateY(0);
    -ms-transform: scale(1.05, .95) translateY(0);
    -o-transform: scale(1.05, .95) translateY(0)
  }

  57% {
    transform: scale(1, 1) translateY(-3px);
    -webkit-transform: scale(1, 1) translateY(-3px);
    -moz-transform: scale(1, 1) translateY(-3px);
    -ms-transform: scale(1, 1) translateY(-3px);
    -o-transform: scale(1, 1) translateY(-3px)
  }

  64% {
    transform: scale(1, 1) translateY(0);
    -webkit-transform: scale(1, 1) translateY(0);
    -moz-transform: scale(1, 1) translateY(0);
    -ms-transform: scale(1, 1) translateY(0);
    -o-transform: scale(1, 1) translateY(0)
  }

  100% {
    transform: scale(1, 1) translateY(0);
    -webkit-transform: scale(1, 1) translateY(0);
    -moz-transform: scale(1, 1) translateY(0);
    -ms-transform: scale(1, 1) translateY(0);
    -o-transform: scale(1, 1) translateY(0)
  }
}

.primary {
  color: var(--color-primary)
}

.danger {
  color: var(--color-danger)
}

.success {
  color: var(--color-success)
}

@media all and (min-width:1025px) {
  #menu-top form {
    position: absolute;
    right: 8px;
    top: 0;
    width: 180px;
  }
}

@media all and (max-width:1024px) {
  body {
    grid-template-areas: "nav""header""main""aside""footer";
    -ms-grid-rows: 44px 0 auto 0 auto 0 auto 0 auto;
    grid-template-rows: 44px auto auto auto auto;
    -ms-grid-columns: 100%;
    grid-template-columns: 100vw;
    grid-gap: 0
  }

  aside,
  footer,
  main {
    margin: 8px var(--gap)
  }

  aside,
  footer,
  main {
    -ms-grid-column: 1;
    grid-column-start: 1
  }

  aside {
    -ms-grid-column-span: 1;
    grid-column-end: 1
  }

  aside section img.medium {
    width: 40%
  }

  #menu-top ul#quick-links {
    background: var(--color-bg-card);
    position: fixed;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: space-evenly;
    -ms-flex-pack: space-evenly;
    justify-content: space-evenly;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: start;
    width: 100vw;
    height: 56px;
    top: calc(100vh - 56px);
    box-shadow: 0 -1px 10px rgba(0, 0, 0, .6)
  }

  #menu-top>ul#quick-links>li {
    margin-right: 0;
    -ms-flex-preferred-size: 20%;
    flex-basis: 20%
  }

  #menu-top>ul#quick-links>li:active {
    background: #fff
  }

  #menu-top>ul#quick-links>li:active svg {
    color: var(--color-primary)
  }

  #menu-top>ul#quick-links>li>a {
    color: var(--color-text);
    font-size: .55rem;
    text-transform: none
  }

  #menu-top ul#quick-links a svg,
  #menu-top ul#quick-links i {
    display: block;
    transform: scale(2);
    -webkit-transform: scale(2);
    -moz-transform: scale(2);
    -ms-transform: scale(2);
    -o-transform: scale(2);
    margin: 4px 0 12px
  }

  #menu-top ul#quick-links>li>a {
    /* white-space: nowrap; */
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    text-align: center;
    line-height: 1;
  }

  #menu-top ul#quick-links>li>ul {
    position: fixed;
    margin-top: auto;
    padding: 0;
    min-width: auto;
    width: 60vw;
    bottom: calc((100vh * -1) + 93px);
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    border-radius: var(--border-radius);
    -webkit-border-radius: var(--border-radius);
    -moz-border-radius: var(--border-radius);
    -ms-border-radius: var(--border-radius);
    -o-border-radius: var(--border-radius)
  }

  #menu-top>ul#quick-links>li>ul>li {
    width: 100%;
    border-radius: var(--border-radius);
    -webkit-border-radius: var(--border-radius);
    -moz-border-radius: var(--border-radius);
    -ms-border-radius: var(--border-radius);
    -o-border-radius: var(--border-radius)
  }

  #menu-top>ul#quick-links>li>ul>li>a {
    text-align: center
  }

  #search-input {
    position: relative;
    top: 0;
    right: 0;
    text-align: center
  }

  #menu-top .brand .logo,
  #menu-top .brand span {
    -webkit-transform-origin: left;
    -ms-transform-origin: left;
    transform-origin: left;
    transition: all .2s ease-in-out;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out
  }

  #menu-top.open .brand .logo {
    -webkit-transition-delay: .2s;
    -o-transition-delay: .2s;
    transition-delay: .2s
  }

  #menu-top.open .brand span {
    letter-spacing: -4px
  }

  #menu-top .brand span {
    -webkit-transition-delay: .1s;
    -o-transition-delay: .1s;
    transition-delay: .1s;
    opacity: 0;
  }

  #menu-top .brand {
    left: 62px;
    -webkit-transform-origin: left;
    -ms-transform-origin: left;
    transform-origin: left
  }

  #menu-top.open .brand .logo,
  #menu-top.open .brand span {
    opacity: 0;
    transform: translateX(-8px) scale(.8);
    -webkit-transform: translateX(-8px) scale(.8);
    -moz-transform: translateX(-8px) scale(.8);
    -ms-transform: translateX(-8px) scale(.8);
    -o-transform: translateX(-8px) scale(.8)
  }

  header h1,
  header h2,
  header h5 {
    margin-right: var(--gap);
    margin-left: var(--gap)
  }

  header #tagline {
    transform: scale(.9);
    -webkit-transform: scale(.9);
    -moz-transform: scale(.9);
    -ms-transform: scale(.9);
    -o-transform: scale(.9);
    margin-top: -2px
  }

  .hidden-md {
    display: none
  }

  main {
    margin-top: 20px
  }

  header+main {
    margin-top: 0
  }

  main h1 {
    font-size: 1.5rem
  }

  main section {
    justify-items: center
  }

  main section article {
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%
  }

  main section article:first-child>a>img,
  main section article>a>img {
    width: 100%;
    height: 50vw;
    -o-object-fit: cover;
    object-fit: cover
  }

  main section.menu-images article>a>img {
    height: 25vw
  }

  main section article h2,
  main section article:first-child h2 {
    font-size: 1rem
  }

  main section.page article:first-child h2 {
    font-size: 1.4rem
  }

  main #pagination a {
    padding: 4px !important;
    box-shadow: none;
    font-size: 14px;
    margin: 0px 2px!important;
    background: transparent;
    min-width: unset;
  }

  main #pagination a span {
    display: none
  }

  main section.page article .content {
    width: calc(100vw - (var(--gap)*4))
  }

  main section.page article .content p {
    font-size: .95rem
  }

  footer {
    padding: 0 0 42px;
    font-size: 95%;
  }

  footer section {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
  }

  footer section:first-child>div {
    margin: 10px 0
  }

  footer section:nth-child(2) {
    margin: 30px 0
  }

  footer section:nth-child(2) div {
    margin: 10px 0
  }

  footer section:nth-child(2):after {
    content: "";
    background: #193d06;
    width: 100vw;
    height: 58px;
    position: absolute;
    bottom: 0;
    left: 0
  }

  footer>img {
    height: 210px;
    -o-object-fit: cover;
    object-fit: cover;
    bottom: 50px
  }

  footer .sapi {
    bottom: 132px
  }

  #menu-top {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1
  }

  header {
    -ms-grid-row: 3;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1
  }

  main {
    -ms-grid-row: 5;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1
  }

  aside {
    -ms-grid-row: 7;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1
  }

  footer {
    -ms-grid-row: 9;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1
  }
}

@media all and (max-width:780px) {
  header #brand {
    top: 100px
  }

  header #brand .logo {
    max-width: 140px
  }
}

@media all and (max-width:600px) {
  header #brand {
    top: 132px
  }

  header #brand div img {
    width: 110px;
  }

  header h1 {
    font-size: 1.55rem
  }

  header h2 {
    font-size: 1rem
  }

  header h5 {
    line-height: 1.3;
    margin-bottom: .3rem
  }

  header #tagline {
    transform: scale(.6) !important;
    -webkit-transform: scale(.6) !important;
    -moz-transform: scale(.6) !important;
    -ms-transform: scale(.6) !important;
    -o-transform: scale(.6) !important
  }
}

@media screen and (max-width:400px) {
  nav .brand span {
    font-size: .95rem;
  }
}

@media screen and (max-width:374px) {
  nav .brand span {
    display: none;
  }
  main #pagination a {
    padding: 2px !important;
    font-size: 13px;
  }
}

.modal {
  opacity: 0;
  pointer-events: none;
  position: fixed;
  min-width: 200px;
  max-width: 85vw;
  max-height: 70vh;
  overflow-y: auto;
  top: 50%;
  left: 50%;
  z-index: 150;
  background: #fff;
  padding: 20px;
  box-shadow: 0 9px 46px 8px rgba(0, 0, 0, .14), 0 11px 15px -7px rgba(0, 0, 0, .12), 0 24px 38px 3px rgba(0, 0, 0, .2);
  border-radius: var(--border-radius);
  -webkit-border-radius: var(--border-radius);
  -moz-border-radius: var(--border-radius);
  -ms-border-radius: var(--border-radius);
  -o-border-radius: var(--border-radius);
  transform: translateX(-50%) translateY(-50%) scale(.8);
  -webkit-transform: translateX(-50%) translateY(-50%) scale(.8);
  -moz-transform: translateX(-50%) translateY(-50%) scale(.8);
  -ms-transform: translateX(-50%) translateY(-50%) scale(.8);
  -o-transform: translateX(-50%) translateY(-50%) scale(.8);
  transition: .2s ease-out;
  -webkit-transition: .2s ease-out;
  -moz-transition: .2s ease-out;
  -ms-transition: .2s ease-out;
  -o-transition: .2s ease-out;
  word-wrap: break-word
}

.modal.open {
  opacity: 1;
  pointer-events: all;
  transform: translateX(-50%) translateY(-50%) scale(1);
  -webkit-transform: translateX(-50%) translateY(-50%) scale(1);
  -moz-transform: translateX(-50%) translateY(-50%) scale(1);
  -ms-transform: translateX(-50%) translateY(-50%) scale(1);
  -o-transform: translateX(-50%) translateY(-50%) scale(1)
}

.modal button.close {
  position: sticky;
  width: 50px;
  top: 0;
  margin-left: auto;
  display: block;
  z-index: 200;
  margin-top: -50px
}

.modal h2 {
  margin-top: 16px;
  margin-right: 50px
}

.modal ol,
.modal ul {
  padding-left: 24px
}

.modal.submenu ul {
  padding-left: 10px;
  font-size: 1.3rem;
  margin-bottom: 6px
}

.modal.submenu li {
  list-style: none;
  margin-bottom: 14px
}

.modal.submenu li:last-child {
  margin-bottom: 0
}

.modal form span {
  display: block;
  text-align: center
}

body.modal-open {
  overflow-y: hidden
}

body.modal-open .quick-links {
  pointer-events: none
}

body.modal-open:before {
  content: "";
  position: fixed;
  width: 100vw;
  height: 100vh;
  z-index: 140;
  background: rgba(0, 0, 0, .8);
  left: 0;
  top: 0;
  backdrop-filter: saturate(30%)
}

div.stok-embrio {
  width: 200px;
  margin: auto;
  user-select: none
}

div.stok-embrio .header-top {
  background: #e90101;
  padding: 6px
}

div.stok-embrio .header-top img {
  width: 140px;
  height: 36px;
  object-fit: contain;
  margin: 0 auto;
  background: #fff;
  border-radius: 20px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  -ms-border-radius: 20px;
  -o-border-radius: 20px
}

div.stok-embrio .header-bottom {
  background: #001c4b;
  color: #fff;
  padding: 6px 0
}

div.stok-embrio .header-bottom h4,
div.stok-embrio .header-bottom h5 {
  line-height: 1
}

div.stok-embrio .header-bottom h4 {
  font-weight: 800;
  font-size: 20px;
  margin: 0 0 3px
}

div.stok-embrio .header-bottom h5 {
  font-size: 10px;
  margin: 0
}

div.stok-embrio .stock-list {
  background: #a2a7ab;
  padding: 4px 10px
}

div.stok-embrio .stock-list>.row {
  display: flex;
  justify-content: space-between;
  align-items: center
}

div.stok-embrio .stock-list>.row>div {
  display: flex;
  align-items: center;
  line-height: 1;
  margin: 2px 0;
  transition: .3s;
  -webkit-transition: .3s;
  -moz-transition: .3s;
  -ms-transition: .3s;
  -o-transition: .3s;
  cursor: pointer
}

div.stok-embrio .stock-list>.row:hover>div {
  transform: scale(1.06) translateX(-3px);
  -webkit-transform: scale(1.06) translateX(-3px);
  -moz-transform: scale(1.06) translateX(-3px);
  -ms-transform: scale(1.06) translateX(-3px);
  -o-transform: scale(1.06) translateX(-3px);
  box-shadow: var(--box-shadow)
}

div.stok-embrio .stock-list>.row>div:first-child {
  background: #000;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  color: #fff;
  padding: 2px;
  line-height: 1;
  display: flex;
  font-size: 12px;
  justify-content: center;
  z-index: 30
}

div.stok-embrio .stock-list>.row>div:nth-child(2) {
  background: #ffc700;
  font-size: .65rem;
  width: 105px;
  height: 18px;
  padding-left: 20px;
  margin-left: -50px;
  font-weight: 600;
  justify-content: start;
  border-radius: 12px;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  -ms-border-radius: 12px;
  -o-border-radius: 12px;
  z-index: 20;
  white-space: nowrap;
  transform-origin: left
}

div.stok-embrio .stock-list>.row:hover>div:nth-child(2) {
  background: #ff0
}

div.stok-embrio .stock-list>.row>div:nth-child(3) {
  background: #e90101;
  color: #fff;
  width: 50px;
  height: 18px;
  padding: 3px 10px;
  border-radius: 12px;
  justify-content: flex-end;
  font-size: 13px;
  font-weight: 600;
  z-index: 10;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  -ms-border-radius: 12px;
  -o-border-radius: 12px;
  margin-left: -58px;
  transform-origin: left;
  transition: .3s;
  -webkit-transition: .3s;
  -moz-transition: .3s;
  -ms-transition: .3s;
  -o-transition: .3s
}

div.stok-embrio .stock-list>.row:hover>div:nth-child(3) {
  background: red;
  transform: scale(1.06) translateX(-1px);
  -webkit-transform: scale(1.06) translateX(-1px);
  -moz-transform: scale(1.06) translateX(-1px);
  -ms-transform: scale(1.06) translateX(-1px);
  -o-transform: scale(1.06) translateX(-1px);
  color: #ffa;
  transition: .3s .2s;
  -webkit-transition: .3s .2s;
  -moz-transition: .3s .2s;
  -ms-transition: .3s .2s;
  -o-transition: .3s .2s
}

.sitemap {
  display: flex;
  flex-wrap: nowrap
}

.sitemap #beti {
  position: sticky;
  top: 80px
}

.sitemap #beti-head {
  -webkit-transform: rotate(1deg);
  transform: rotate(1deg);
  -webkit-transform-origin: center center;
  -ms-transform-origin: center center;
  transform-origin: center center;
  animation: beti-head 6s ease-out alternate infinite;
  -webkit-animation: beti-head 6s ease-in-out alternate infinite;
  -webkit-transform: rotate(-1deg);
  -moz-transform: rotate(1deg);
  -ms-transform: rotate(1deg);
  -o-transform: rotate(1deg)
}

@-webkit-keyframes beti-head {
  0% {
    transform: rotate(-1deg);
    -webkit-transform: rotate(-1deg);
    -moz-transform: rotate(-1deg);
    -ms-transform: rotate(-1deg);
    -o-transform: rotate(-1deg)
  }

  50% {
    transform: rotate(-1deg);
    -webkit-transform: rotate(-1deg);
    -moz-transform: rotate(-1deg);
    -ms-transform: rotate(-1deg);
    -o-transform: rotate(-1deg)
  }

  70% {
    transform: rotate(1deg);
    -webkit-transform: rotate(1deg);
    -moz-transform: rotate(1deg);
    -ms-transform: rotate(1deg);
    -o-transform: rotate(1deg)
  }

  100% {
    transform: rotate(1deg);
    -webkit-transform: rotate(1deg);
    -moz-transform: rotate(1deg);
    -ms-transform: rotate(1deg);
    -o-transform: rotate(1deg)
  }
}

@keyframes beti-head {
  0% {
    transform: rotate(-1deg);
    -webkit-transform: rotate(-1deg);
    -moz-transform: rotate(-1deg);
    -ms-transform: rotate(-1deg);
    -o-transform: rotate(-1deg)
  }

  50% {
    transform: rotate(-1deg);
    -webkit-transform: rotate(-1deg);
    -moz-transform: rotate(-1deg);
    -ms-transform: rotate(-1deg);
    -o-transform: rotate(-1deg)
  }

  70% {
    transform: rotate(1deg);
    -webkit-transform: rotate(1deg);
    -moz-transform: rotate(1deg);
    -ms-transform: rotate(1deg);
    -o-transform: rotate(1deg)
  }

  100% {
    transform: rotate(1deg);
    -webkit-transform: rotate(1deg);
    -moz-transform: rotate(1deg);
    -ms-transform: rotate(1deg);
    -o-transform: rotate(1deg)
  }
}

@media screen and (max-width:767px) {
  .sitemap #beti {
    display: none
  }
}

.goog-te-gadget img {
  display: none;
}

#google_translate_element {
  position: fixed;
  right: 56px;
}

/* TTS */

.tts.buttons {
  display: flex;
  justify-content: start;
  position: sticky;
  top: 56px;
  z-index: 100;
}

.tts.buttons button.active,
.tts.buttons button:active,
.tts.buttons button:hover {
  background: #ff0;
}

html:not([lang="id"]) .tts.buttons {
  display: none;
}

.tts.buttons>button {
  min-width: 80px;
  max-width: fit-content;
  padding: 8px 10px;
  margin: 4px;
  border-radius: 4px;
  background: #fff;
}

#TTSplay {
  border-top: 6px solid darkgreen;
}

#TTSpause {
  border-top: 6px solid orange;
}

#TTSstop {
  border-top: 6px solid darkred;
}

@media screen and (max-width: 480px) {
  .tts.buttons>button {
    min-width: 70px;
    padding: 6px;
    font-size: 12px;
  }

  .tts.buttons>button>span {
    display: none;
  }
}

#menu-top .brand a span {
    line-height: .9;
    font-size: 15px;
}

#menu-top .brand a span small {
    font-weight: normal;
    font-size: 8px;
}