html {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
  }
  body {
    margin: 0;
  }
  main {
    display: block;
  }
  h1 {
    font-size: 2em;
    margin: 0.67em 0;
  }
  hr {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    height: 0;
    overflow: visible;
  }
  pre {
    font-family: monospace, monospace;
    font-size: 1em;
  }
  a {
    background-color: transparent;
  }
  abbr[title] {
    border-bottom: none;
    text-decoration: underline;
    -webkit-text-decoration: underline dotted;
    -moz-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }
  b,
  strong {
    font-weight: bolder;
  }
  code,
  kbd,
  samp {
    font-family: monospace, monospace;
    font-size: 1em;
  }
  small {
    font-size: 80%;
  }
  sub,
  sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }
  sub {
    bottom: -0.25em;
  }
  sup {
    top: -0.5em;
  }
  img {
    border-style: none;
  }
  button,
  input,
  optgroup,
  select,
  textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    margin: 0;
  }
  button,
  input {
    overflow: visible;
  }
  button,
  select {
    text-transform: none;
  }
  button,
  [type="button"],
  [type="reset"],
  [type="submit"] {
    -webkit-appearance: button;
  }
  button::-moz-focus-inner,
  [type="button"]::-moz-focus-inner,
  [type="reset"]::-moz-focus-inner,
  [type="submit"]::-moz-focus-inner {
    border-style: none;
    padding: 0;
  }
  button:-moz-focusring,
  [type="button"]:-moz-focusring,
  [type="reset"]:-moz-focusring,
  [type="submit"]:-moz-focusring {
    outline: 1px dotted ButtonText;
  }
  fieldset {
    padding: 0.35em 0.75em 0.625em;
  }
  legend {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    color: inherit;
    display: table;
    max-width: 100%;
    padding: 0;
    white-space: normal;
  }
  progress {
    vertical-align: baseline;
  }
  textarea {
    overflow: auto;
  }
  [type="checkbox"],
  [type="radio"] {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0;
  }
  [type="number"]::-webkit-inner-spin-button,
  [type="number"]::-webkit-outer-spin-button {
    height: auto;
  }
  [type="search"] {
    -webkit-appearance: textfield;
    outline-offset: -2px;
  }
  [type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
  }
  ::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit;
  }
  details {
    display: block;
  }
  summary {
    display: list-item;
  }
  template {
    display: none;
  }
  [hidden] {
    display: none;
  }
  :root {
    --white: #fff;
    --white-dark: #f3f3f3;
    --white-mode: var(--white);
    --dark: #133e59;
    --dark-mode: var(--dark);
    --main: #1a936f;
    --main-mode: var(--main);
    --main-dark: #147c5d;
  }
  body * {
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
  }
  blockquote,
  pre,
  code,
  input,
  textarea,
  main article * {
    -webkit-touch-callout: text;
    -khtml-user-select: text;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
  }
  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }
  ::-webkit-scrollbar-track,
  ::-webkit-scrollbar-corner {
    background-color: var(--white-dark);
  }
  ::-webkit-scrollbar-thumb {
    background: var(--main);
    -webkit-border-radius: 10px;
    border-radius: 10px;
  }
  ::-webkit-scrollbar-thumb:hover {
    background: var(--main);
  }
  @font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 400;
    src: local("Poppins Regular"), local(Poppins-Regular),
      url(../../../s/poppins/v9/pxiEyp8kv8JHgFVrJJbecmNE.woff) format("woff2");
    unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8,
      U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
  }
  @font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 400;
    src: local("Poppins Regular"), local(Poppins-Regular),
      url(../../../s/poppins/v9/pxiEyp8kv8JHgFVrJJnecmNE.woff) format("woff2");
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
      U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  @font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 400;
    src: local("Poppins Regular"), local(Poppins-Regular),
      url(../../../s/poppins/v9/pxiEyp8kv8JHgFVrJJfecg.woff) format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
      U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
      U+FEFF, U+FFFD;
  }
  html,
  body {
    font-family: "Poppins", sans-serif;
    background-color: var(--white-dark);
  }
  body.noscroll {
    overflow-y: hidden;
  }
  body.darkmode {
    --white: #222;
    --white-dark: #111;
    --dark: #ddd;
    --white-mode: #ddd;
    --dark-mode: #ddd;
    --main-mode: #ddd;
    --main: #066347;
    --main-dark: ##1a936f;
  }
  :focus {
    outline: 0;
    outline: none;
  }
  a {
    color: var(--dark);
    text-decoration: none;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  a i {
    margin-right: 5px;
  }
  a i.reverse {
    margin-right: 0;
    margin-left: 5px;
  }
  nav a i,
  .sublabel i,
  .footercontent i {
    margin-right: 10px;
  }
  nav a i.reverse,
  .sublabel i.reverse,
  .footercontent i.reverse {
    margin-right: 0;
    margin-left: 10px;
  }
  a.social-button i {
    margin: 0;
  }
  i.fa-heart {
    color: red;
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    color: var(--dark-mode);
  }
  .wrapper {
    display: block;
    position: relative;
    max-width: 1050px;
    margin: auto;
  }
  .alert {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    padding: 10px 24px;
    color: var(--white-mode);
    text-align: center;
    display: inline-block;
  }
  .alert i {
    margin-right: 5px;
  }
  .alert-danger {
    border: 1px solid #cc0001;
    background-color: #ff909b;
  }
  .alert-success {
    border: 1px solid #007e34;
    background-color: #01c851;
  }
  .alert-default {
    border: 1px solid #007e34;
    background-color: var(--main);
  }
  .btn {
    background-color: var(--white);
    color: var(--main-mode);
    padding: 4px 20px;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
    text-decoration: none;
    cursor: pointer;
    font-weight: 600;
    letter-spacing: 1.2px;
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -moz-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    outline: none;
  }
  .btn-color {
    background: var(--main);
    color: var(--white-mode);
  }
  .btn-ln {
    border: solid 2px var(--main);
  }
  .btn-anim:link,
  .btn-anim:visited,
  .btn-anim {
    -webkit-transition: all 0.2s ease-in;
    -o-transition: all 0.2s ease-in;
    -moz-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
  }
  .btn-anim:hover {
    -webkit-transform: translateY(-3px);
    -moz-transform: translateY(-3px);
    -ms-transform: translateY(-3px);
    -o-transform: translateY(-3px);
    transform: translateY(-3px);
    -webkit-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
  }
  .btn-anim:active {
    -webkit-transform: translateY(-1px);
    -moz-transform: translateY(-1px);
    -ms-transform: translateY(-1px);
    -o-transform: translateY(-1px);
    transform: translateY(-1px);
    -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  }
  .btn-anim {
    -webkit-box-shadow: 0 10px 20px -10px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: 0 10px 20px -10px rgba(0, 0, 0, 0.25);
    box-shadow: 0 10px 20px -10px rgba(0, 0, 0, 0.25);
  }
  .hero .navtop,
  .hero .mainav {
    z-index: 20;
    top: 0;
    width: 100%;
    position: fixed;
  }
  .hero .mainav {
    top: 35px;
    -webkit-transition: top 0.5s cubic-bezier(0.19, 1, 0.22, 1);
    -o-transition: top 0.5s cubic-bezier(0.19, 1, 0.22, 1);
    -moz-transition: top 0.5s cubic-bezier(0.19, 1, 0.22, 1);
    transition: top 0.5s cubic-bezier(0.19, 1, 0.22, 1);
  }
  .hero .mainav.sticky {
    top: 0;
    -webkit-transition: top 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    -o-transition: top 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    -moz-transition: top 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transition: top 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  }
  .hero .navtop {
    background: var(--main);
    overflow: hidden;
    height: 35px;
  }
  .navtop ul {
    margin: 0;
    padding: 0;
    display: block;
    float: right;
  }
  .navtop ul li {
    list-style: none;
    display: inline-block;
  }
  .navtop ul li a {
    display: block;
    padding: 6px 14px;
    margin: 4px 0 0;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    color: var(--white-mode);
    font-size: 15px;
    overflow: hidden;
  }
  .navtop ul li a:hover {
    background: var(--main-dark);
    -webkit-transition: background 0.3s ease;
    -o-transition: background 0.3s ease;
    -moz-transition: background 0.3s ease;
    transition: background 0.3s ease;
  }
  .mainav {
    background: var(--white);
    -webkit-box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.2);
    box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.2);
  }
  .mainav nav,
  .mainav .logo,
  .mainav .menu,
  footer .logo {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
  }
  .mainav nav {
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -moz-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    min-height: 70px;
  }
  .mainav .logo,
  footer .logo {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    margin: 4px;
    padding: 6px;
  }
  .mainav .logo {
    margin: auto 0;
  }
  body.darkmode .mainav .logo {
    color: var(--white-mode);
  }
  .mainav .logo img{
    width: auto;
    height: 60px;
  }
  footer .logo img {
    width: auto;
    height: 90px;
  }
  .mainav .logo span,
  footer .logo span {
    margin-left: 14px;
    margin-top: 14px;
    font-weight: 600;
    color: var(--dark);
    display: block;
    font-size: 16px;
    max-width: 140px;
  }
  .mainav .menu {
    margin: auto 0;
    max-width: -webkit-calc(100% - 200px);
    max-width: -moz-calc(100% - 200px);
    max-width: calc(100% - 200px);
  }
  .mainav ul {
    margin: 0;
    padding: 0;
    display: inline-block !important;
    text-align: right;
  }
  .mainav ul li {
    list-style: none;
    display: inline-block;
  }
  .mainav ul li a {
    display: block;
    padding: 10px 16px;
    margin: 4px 0 0;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    overflow: hidden;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
  }
  .mainav ul li a.btn {
    margin-left: 10px;
    font-weight: 500;
  }
  .mainav ul li a.search {
    padding: 10px;
  }
  .mainav ul li a.search i {
    margin: 0;
  }
  .mainav .drop {
    list-style: none;
    position: relative;
    cursor: pointer;
    padding: 0;
    margin: 0 auto 0 10px;
    width: 44px;
    height: 44px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
  }
  .mainav .mobile-nav .drop {
    margin: 10px auto !important;
  }
  .mainav .drop img {
    width: 46px;
    height: 46px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: top;
    object-position: top;
    display: block;
  }
  .mainav .drop .drop-menu {
    position: absolute;
    right: 0;
    top: 54px;
    -webkit-transition: all 0.2s;
    -o-transition: all 0.2s;
    -moz-transition: all 0.2s;
    transition: all 0.2s;
    -webkit-transform: scale(0) !important;
    -moz-transform: scale(0) !important;
    -ms-transform: scale(0) !important;
    -o-transform: scale(0) !important;
    transform: scale(0) !important;
    -webkit-transform-origin: top right;
    -moz-transform-origin: top right;
    -ms-transform-origin: top right;
    -o-transform-origin: top right;
    transform-origin: top right;
    -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16),
      0 2px 8px 0 rgba(0, 0, 0, 0.12);
    -moz-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16),
      0 2px 8px 0 rgba(0, 0, 0, 0.12);
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16), 0 2px 8px 0 rgba(0, 0, 0, 0.12);
    padding: 0;
    background: var(--white);
    z-index: 8;
  }
  .mainav .mobile-nav .drop .drop-menu {
    right: 50%;
    -webkit-transform: scale(0) translateX(50%) !important;
    -moz-transform: scale(0) translateX(50%) !important;
    -ms-transform: scale(0) translateX(50%) !important;
    -o-transform: scale(0) translateX(50%) !important;
    transform: scale(0) translateX(50%) !important;
    -webkit-transform-origin: center right;
    -moz-transform-origin: center right;
    -ms-transform-origin: center right;
    -o-transform-origin: center right;
    transform-origin: center right;
  }
  .mainav .drop.open .drop-menu {
    -webkit-transform: scale(1) !important;
    -moz-transform: scale(1) !important;
    -ms-transform: scale(1) !important;
    -o-transform: scale(1) !important;
    transform: scale(1) !important;
    -webkit-transition-timing-function: cubic-bezier(0.68, 0, 0.265, 1);
    -moz-transition-timing-function: cubic-bezier(0.68, 0, 0.265, 1);
    -o-transition-timing-function: cubic-bezier(0.68, 0, 0.265, 1);
    transition-timing-function: cubic-bezier(0.68, 0, 0.265, 1);
  }
  .mainav .mobile-nav .drop.open .drop-menu {
    -webkit-transform: scale(1) translateX(50%) !important;
    -moz-transform: scale(1) translateX(50%) !important;
    -ms-transform: scale(1) translateX(50%) !important;
    -o-transform: scale(1) translateX(50%) !important;
    transform: scale(1) translateX(50%) !important;
    margin-bottom: 20px;
  }
  .mainav .drop-menu li {
    display: block;
    min-width: 110px;
    width: 100%;
    opacity: 0;
    -webkit-transform: translate(20px, 0px);
    -moz-transform: translate(20px, 0px);
    -ms-transform: translate(20px, 0px);
    -o-transform: translate(20px, 0px);
    transform: translate(20px, 0px);
    margin: 0 !important;
  }
  .mainav .drop.open li {
    display: block;
    -webkit-transition: all 0.4s;
    -o-transition: all 0.4s;
    -moz-transition: all 0.4s;
    transition: all 0.4s;
    opacity: 1;
    -webkit-transform: translate(0px, 0);
    -moz-transform: translate(0px, 0);
    -ms-transform: translate(0px, 0);
    -o-transform: translate(0px, 0);
    transform: translate(0px, 0);
  }
  .mainav .drop-menu a {
    padding: 10px 14px;
    display: block;
    text-align: right;
    text-decoration: none;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    margin: 0;
  }
  .mainav .drop-menu a:hover {
    background: var(--white-dark);
  }
  form.search {
    margin: 0 0 12px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  #search_popup h2 {
    text-align: center;
    letter-spacing: 0.5px;
  }
  form.search input {
    padding: 8px 20px;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
    border: 1px solid var(--dark-mode);
    margin: 6px auto;
    width: -webkit-calc(100% - 130px);
    width: -moz-calc(100% - 130px);
    width: calc(100% - 130px);
  }
  form.search .btn {
    outline: none;
    border: none;
    padding: 12px 24px;
    margin: 6px 6px 6px 12px;
  }
  body.darkmode .overlay {
    background: rgba(255, 255, 255, 0.2);
  }
  .overlay {
    opacity: 0;
    cursor: pointer;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: rgba(0, 0, 0, 0.3);
    -webkit-transition: opacity 0.5s cubic-bezier(0.39, 0.575, 0.565, 1);
    -o-transition: opacity 0.5s cubic-bezier(0.39, 0.575, 0.565, 1);
    -moz-transition: opacity 0.5s cubic-bezier(0.39, 0.575, 0.565, 1);
    transition: opacity 0.5s cubic-bezier(0.39, 0.575, 0.565, 1);
  }
  .overlay.is-active {
    opacity: 1;
    z-index: 19;
  }
  @media only screen and (max-width: 1080px) {
    .wrapper {
      max-width: 96%;
    }
    .videowrapper { 
      float: none; 
      clear: both; 
      position: relative; 
       } 
      
      .videowrapper iframe { 
        border: 8px solid var(--white-mode);
        -webkit-box-shadow: 0 10px 20px -10px rgba(0, 0, 0, 0.25);
        -moz-box-shadow: 0 10px 20px -10px rgba(0, 0, 0, 0.25);
        box-shadow: 0 10px 20px -10px rgba(0, 0, 0, 0.25);
        display: block;
        margin: auto;
        overflow: hidden;
        width: 100%;
  }
  }
  @media only screen and (max-width: 375px) {
    form.search {
      margin: 0;
    }
    form.search input {
      width: 100%;
    }
    form.search .btn {
      margin: 6px auto;
    }
  }
  .waves-effect {
    cursor: pointer;
  }
  .has-ripple {
    position: relative;
    overflow: hidden;
    -webkit-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  .ripple {
    display: block;
    position: absolute;
    pointer-events: none;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    -webkit-transform: scale(0);
    -o-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    background: #fff;
    opacity: 1;
  }
  .ripple-animate {
    -webkit-animation: ripple;
    -o-animation: ripple;
    -moz-animation: ripple;
    animation: ripple;
  }
  @-webkit-keyframes ripple {
    100% {
      opacity: 0;
      -webkit-transform: scale(2);
      transform: scale(2);
    }
  }
  @-o-keyframes ripple {
    100% {
      opacity: 0;
      -o-transform: scale(2);
      transform: scale(2);
    }
  }
  @-moz-keyframes ripple {
    100% {
      opacity: 0;
      -moz-transform: scale(2);
      transform: scale(2);
    }
  }
  @keyframes ripple {
    100% {
      opacity: 0;
      -webkit-transform: scale(2);
      -moz-transform: scale(2);
      -o-transform: scale(2);
      transform: scale(2);
    }
  }
  .headingsection h1 {
    font-size: 30px;
    text-align: center;
    letter-spacing: 1.4px;

  
    color: var(--dark-mode);
  }
  body.darkmode .alert {
    color: var(--white);
  }
  body.darkmode section.postingan .box_desc {
    background: var(--white-dark);
  }
  body.darkmode .bagidua .image img {
    opacity: 0.8;
  }
  section.utama,
  .contact .wrapcontact {
    -webkit-box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.2);
    box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.2);
  }
  section.label,
  footer .copyright,
  .postingan {
    /* -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
    -moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15); */

  }
  
  .box_desc {
    -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
    -moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
  }
  .fouricon .subicon {
    -webkit-box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.25);
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.25);
  }
  .kejuaraan .alert,
  .ekstra .alert {
    display: block;
  }
  .parallax {
    position: fixed;
    overflow: visible;
    width: 100%;
    height: 100vh;
    z-index: 1;
  }
  .parallax .layer {
    width: 100%;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    background-position: bottom center;
    background-repeat: repeat-x;
    -webkit-background-size: 2200px auto;
    -moz-background-size: 2200px auto;
    -o-background-size: 2200px auto;
    background-size: 2200px auto;
  }
  .parallax .sky {
    z-index: 2;
  }
  .parallax .layer_0,
  .parallax .layer_1 {
    background-position: 0;
    top: 0;
    -webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size: contain;
  }
  .parallax .layer_0 {
    z-index: 3;
  }
  .parallax .layer_1 {
    z-index: 4;
  }
  .parallax.pagi .sky {
    background: -webkit-gradient(
      linear,
      left top,
      left bottom,
      from(#f59eaa),
      color-stop(65%, #fef5bf)
    );
    background: -webkit-linear-gradient(#f59eaa, #fef5bf 65%);
    background: -moz-linear-gradient(#f59eaa, #fef5bf 65%);
    background: -o-linear-gradient(#f59eaa, #fef5bf 65%);
    background: linear-gradient(#f59eaa, #fef5bf 65%);
  }
  .parallax.pagi .layer_0 {
    background-image: url(../../img/parallax/pagi_layer1.png);
  }
  .parallax.pagi .layer_1 {
    background-image: url(../../img/parallax/pagi_layer2.png);
  }
  .parallax .sky,
  .parallax.siang .sky {
    background: -webkit-gradient(
      linear,
      left top,
      left bottom,
      from(#0db3fc),
      color-stop(65%, #dcf4ff)
    );
    background: -webkit-linear-gradient(#0db3fc, #dcf4ff 65%);
    background: -moz-linear-gradient(#0db3fc, #dcf4ff 65%);
    background: -o-linear-gradient(#0db3fc, #dcf4ff 65%);
    background: linear-gradient(#0db3fc, #dcf4ff 65%);
  }
  .parallax.siang .layer_0,
  .parallax .layer_0 {
    background-image: url(../../img/parallax/siang_layer1.png);
  }
  .parallax.siang .layer_1,
  .parallax .layer_1 {
    background-image: url(../../img/parallax/siang_layer2.png);
  }
  .parallax.sore .sky {
    background: -webkit-gradient(
      linear,
      left top,
      left bottom,
      from(#b84579),
      color-stop(65%, #ffb06f)
    );
    background: -webkit-linear-gradient(#b84579, #ffb06f 65%);
    background: -moz-linear-gradient(#b84579, #ffb06f 65%);
    background: -o-linear-gradient(#b84579, #ffb06f 65%);
    background: linear-gradient(#b84579, #ffb06f 65%);
  }
  .parallax.sore .layer_0 {
    background-image: url(../../img/parallax/sore_layer1.png);
  }
  .parallax.sore .layer_1 {
    background-image: url(../../img/parallax/sore_layer2.png);
  }
  .parallax.malam .sky {
    background: -webkit-gradient(
      linear,
      left top,
      left bottom,
      from(#443580),
      color-stop(65%, #787ddd)
    );
    background: -webkit-linear-gradient(#443580, #787ddd 65%);
    background: -moz-linear-gradient(#443580, #787ddd 65%);
    background: -o-linear-gradient(#443580, #787ddd 65%);
    background: linear-gradient(#443580, #787ddd 65%);
  }
  .parallax.malam .layer_0 {
    background-image: url(../../img/parallax/malam_layer1.png);
  }
  .parallax.malam .layer_1 {
    background-image: url(../../img/parallax/malam_layer2.png);
  }
  .parallax .layer_2 {
    top: 100px;
    z-index: 5;
    background: url(../../img/parallax/layer0.png) no-repeat top 100px center;
    -webkit-background-size: 230px 92px;
    -moz-background-size: 230px 92px;
    -o-background-size: 230px 92px;
    background-size: 230px 92px;
  }
  .parallax.malam .layer_2 {
    background: url(../../img/parallax/layer0_malam.png) no-repeat top 100px
      center;
    -webkit-background-size: 230px 92px;
    -moz-background-size: 230px 92px;
    -o-background-size: 230px 92px;
    background-size: 230px 92px;
  }
  .parallax .layer_3 {
    top: -25px;
    z-index: 6;
    background-image: url(../../img/parallax/layer3.png);
  }
  .parallax .layer_4 {
    top: -30px;
    z-index: 7;
    background-image: url(../../img/parallax/layer4.png);
  }
  .parallax .layer_5 {
    top: 0;
    z-index: 8;
    background-image: url(../../img/parallax/layer5c.png);
  }
  section.utama {
    z-index: 18;
    position: relative;
    background: var(--white);
    border-top: solid 8px var(--main);
    border-bottom: solid 8px var(--main);
    width: 100%;
    margin-top: 100vh;
    padding-bottom: 80px;
  }
  .utama .wrapper {
    margin: 65px auto;
  }
  .utama .utamapost,
  .utama .utamacontent {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }
  .utama .utamapost {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -moz-box-orient: horizontal;
    -moz-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    margin: 50px auto;
  }
  .utamapost .image {
    border: 8px solid var(--white-mode);
    -webkit-box-shadow: 0 10px 20px -10px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: 0 10px 20px -10px rgba(0, 0, 0, 0.25);
    box-shadow: 0 10px 20px -10px rgba(0, 0, 0, 0.25);
    display: block;
    margin: auto;
    overflow: hidden;
    min-width: 290px;
  }
  .utamapost .images {
    border: 8px solid var(--white-mode);
    -webkit-box-shadow: 0 10px 20px -10px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: 0 10px 20px -10px rgba(0, 0, 0, 0.25);
    box-shadow: 0 10px 20px -10px rgba(0, 0, 0, 0.25);
    display: block;
    margin: auto;
    overflow: hidden;
    min-width: 50%;
  }
  .videowrapper { 
    float: none; 
    clear: both; 
    position: relative; 
    margin-right: 10px;
     } 
    
    .videowrapper iframe { 
      border: 8px solid var(--white-mode);
      -webkit-box-shadow: 0 10px 20px -10px rgba(0, 0, 0, 0.25);
      -moz-box-shadow: 0 10px 20px -10px rgba(0, 0, 0, 0.25);
      box-shadow: 0 10px 20px -10px rgba(0, 0, 0, 0.25);
      display: block;
      margin: auto;
      overflow: hidden;
      width: 500px;
      height: 300px;
}
  .utamapost .image img {
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: top;
    object-position: top;
    display: block;
    width: 275px;
    height: 275px;
  }
  .utama .utamacontent {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    margin-left: 50px;
    text-align: left;
    color: var(--dark-mode);
  }
  .utama .utamacontent .btn {
    display: block;
    margin: 18px auto 0 0;
    padding: 8px 20px;
    text-align: center;
    max-width: 200px;
    text-transform: uppercase;
  }
  .utama .utamapost h2 {
    margin: 0 0 20px;
    letter-spacing: 1.25px;
    font-size: 26px;
  }
  .utama .utamapost span.desc {
    line-height: 1.35;
  }
  .utama .utamapost.reserve {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -webkit-flex-direction: row-reverse;
    -moz-box-orient: horizontal;
    -moz-box-direction: reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
  }
  .utama .utamapost.reserve .utamacontent {
    margin-left: 0;
    margin-right: 50px;
    text-align: right;
  }
  .utama .utamapost.reserve .btn {
    margin: 18px 0 0 auto;
  }
  section.fouricon {
    position: relative;
    z-index: 19;
  }
  .fouricon .wrapicon,
  .fouricon .subicon {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }
  .fouricon .wrapicon {
    text-align: center;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -moz-box-orient: horizontal;
    -moz-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: -70px auto 70px;
  }
  body.darkmode .fouricon .subicon {
    background: var(--main);
  }
  .fouricon .subicon {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    overflow: hidden;
    width: -webkit-calc(100% / 5 - 20px);
    width: -moz-calc(100% / 5 - 20px);
    width: calc(100% / 5 - 20px);
    min-width: 180px;
    max-width: 200px;
    height: 130px;
    margin: 10px;
    background: var(--white);
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
  }
  .fouricon .subicon .icon {
    font-size: 40px;
  }
  .fouricon .subicon .title {
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 1.2px;
    margin-top: 6px;
  }
  .bagidua {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -moz-box-orient: horizontal;
    -moz-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-justify-content: space-around;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }
  .bagidua.reverse {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -webkit-flex-direction: row-reverse;
    -moz-box-orient: horizontal;
    -moz-box-direction: reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
  }
  .bagidua .image,
  .bagidua .content {
    width: 40%;
    max-width: 400px;
    min-width: 300px;
  }
  .bagidua .image img {
    width: 100%;
    height: auto;
  }
  .swiper-container {
    width: 100%;
    height: 100%;
  }
  .swiper-slide {
    text-align: center;
    font-size: 18px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }
  .swiper-pagination-bullet {
    width: 26px !important;
    height: 6px !important;
    -webkit-border-radius: 20px !important;
    -moz-border-radius: 20px !important;
    border-radius: 20px !important;
  }
  :root {
    --swiper-theme-color: var(--main) !important;
  }
  .swiper-button-next:after,
  .swiper-container-rtl .swiper-button-prev:after,
  .swiper-button-prev:after,
  .swiper-container-rtl .swiper-button-next:after {
    content: "" !important;
  }
  .swiper-button-next i,
  .swiper-button-prev i {
    font-size: 24px;
    color: var(--main);
  }
  .swiper-button-next,
  .swiper-button-prev {
    background-image: none !important;
    top: 55% !important;
    width: 20px !important;
  }
  section.kejuaraan {
    padding-top: 800px;
    margin-top: -800px;
    padding-bottom: 50px;
    position: relative;
    z-index: 17;
    background: var(--white-dark);
  }
  .kejuaraan .swiper-container {
    height: 360px;
    margin-top: -30px;
  }
  .kejuaraan .postingan {
    display: block;
    max-width: 320px;
    padding: 10px;
    position: relative;
    margin: 0 auto 10px;
  }
  body.darkmode .postingan .label {
    background-color: var(--main);
  }
  .postingan .label {
    position: absolute;
    color: var(--white-mode);
    font-weight: 800;
    letter-spacing: 1.4px;
    z-index: 1;
    background-color: var(--main);
    padding: 5px 14px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    left: 20px;
    top: 20px;
    font-size: 14px;
  }
  .postingan .image {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    background: var(--white-dark);
    max-width: 100%;
    width: 100%;
    height: 250px;
    overflow: hidden;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    position: relative;
    color: var(--white);
    -webkit-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.14),
      0 6px 6px rgba(0, 0, 0, 0.22);
    -moz-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.14),
      0 6px 6px rgba(0, 0, 0, 0.22);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.14), 0 6px 6px rgba(0, 0, 0, 0.22);
  }
  .postingan .image img {
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: top;
    object-position: top;
    display: block;
    margin: auto;
  }
  .postingan .image a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .postingan .box_desc {
    padding: 10px;
    text-align: center;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    background: var(--white);
    z-index: 1;
    position: relative;
    display: block;
    max-width: 290px;
    width: 100%;
    margin: -60px auto;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  .postingan .title {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-self: center;
    -ms-flex-item-align: center;
    align-self: center;
    height: 80px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    margin: auto;
    color: var(--dark);
  }
  .postingan .title span {
    margin: auto;
  }
  .postingan .title h3 {
    margin: auto;
    font-size: 18px;
  }
  section::before,
  section::after {
    position: absolute;
    content: "";
    pointer-events: none;
  }
  .devider {
    display: block;
    position: relative;
    z-index: 10;
    background: var(--white-dark);
  }
  .devider.reverse {
    background: var(--white);
  }
  .devider svg {
    position: relative;
    z-index: 18;
    display: block;
    fill: var(--white);
    stroke: var(--white);
  }
  .devider.atas svg {
    margin-top: -100px;
    padding-top: 110px;
    -webkit-filter: drop-shadow(-4px -4px 14px rgba(0, 0, 0, 0.2));
    filter: drop-shadow(-4px -4px 14px rgba(0, 0, 0, 0.2));
  }
  .devider.bawah svg {
    margin-bottom: -100px;
    padding-bottom: 110px;
    -webkit-filter: drop-shadow(4px 4px 14px rgba(0, 0, 0, 0.2));
    filter: drop-shadow(4px 4px 14px rgba(0, 0, 0, 0.2));
  }
  .devider.reverse svg {
    fill: var(--white-dark);
    stroke: var(--white-dark);
  }
  section.ekstra {
    padding: 50px 0;
    position: relative;
    z-index: 16;
    background: var(--white);
  }
  .ekstra .swiper-container {
    height: 440px;
    margin-top: -30px;
  }
  .ekstra .wrapekstra,
  .ekstra .wrapekstra .box_desc {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    text-align: center;
    color: var(--dark);
  }
  .ekstra .wrapekstra .image {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
  }
  .ekstra .wrapekstra .image img {
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: top;
    object-position: top;
    display: block;
    width: 225px;
    height: 225px;
    margin: auto;
  }
  .ekstra .box_desc h3 {
    font-size: 30px;
    letter-spacing: 1.3px;
    font-weight: 600;
    margin: 10px 0 0;
  }
  .ekstra .box_desc span.subheading {
    margin: 5px auto 14px;
    font-size: 18px;
    letter-spacing: 1.5px;
    font-weight: 600;
    color: var(--dark);
  }
  .ekstra .box_desc .btn {
    padding: 8px 20px;
    text-transform: uppercase;
    display: block;
  }
  section.berita {
    padding-top: 800px;
    margin-top: -800px;
    position: relative;
    z-index: 16;
    background: var(--white-dark);
  }
  .berita .wrapberita {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -moz-box-orient: horizontal;
    -moz-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin: 10px auto;
  }
  .berita .wrapberita .number,
  .berita .wrapberita .heading {
    background: var(--white);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    font-weight: 600;
  }
  .berita .wrapberita .number {
    color: var(--dark);
    padding: 19px 14px;
    font-size: 18px;
    -webkit-box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.2);
    box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.2);
  }
  .berita .wrapberita .heading {
    padding: 10px 14px;
    font-size: 16px;
    letter-spacing: 1.3px;
    line-height: 1.3;
    margin-left: 10px;
  }
  section.postingan {
    padding: 50px 0;
    position: relative;
    z-index: 14;
    background: var(--white);
  }
  .postingan .postwrap {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
  .postingan .postwrap .post_stat {
    margin: 20px auto 10px;
    display: block;
    text-align: center;
  }
  .postingan .post_stat .alert {
    background-color: #ffc0cb;
    padding: 15px 70px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
  }
  .postingan .post {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }
  .postingan .grid {
    display: block;
    max-width: 320px;
    padding: 10px;
    position: relative;
    margin-bottom: 60px;
  }
  body.darkmode .grid.loading {
    background: #797979;
    background: -webkit-gradient(
      linear,
      left top,
      right top,
      color-stop(8%, #2b2a2a),
      color-stop(18%, #404040),
      color-stop(33%, #2b2a2a)
    );
    background: -webkit-linear-gradient(
      left,
      #2b2a2a 8%,
      #404040 18%,
      #2b2a2a 33%
    );
    background: -moz-linear-gradient(left, #2b2a2a 8%, #404040 18%, #2b2a2a 33%);
    background: -o-linear-gradient(left, #2b2a2a 8%, #404040 18%, #2b2a2a 33%);
    background: linear-gradient(to right, #2b2a2a 8%, #404040 18%, #2b2a2a 33%);
    -webkit-background-size: 800px 104px;
    -moz-background-size: 800px 104px;
    -o-background-size: 800px 104px;
    background-size: 800px 104px;
  }
  .grid.loading {
    width: 320px;
    height: 230px;
    padding: 0;
    margin: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    -o-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    -o-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-name: image_loading;
    -moz-animation-name: image_loading;
    -o-animation-name: image_loading;
    animation-name: image_loading;
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    -o-animation-timing-function: linear;
    animation-timing-function: linear;
    background: #f6f7f8;
    background: -webkit-gradient(
      linear,
      left top,
      right top,
      color-stop(8%, #eee),
      color-stop(18%, #ddd),
      color-stop(33%, #eee)
    );
    background: -webkit-linear-gradient(left, #eee 8%, #ddd 18%, #eee 33%);
    background: -moz-linear-gradient(left, #eee 8%, #ddd 18%, #eee 33%);
    background: -o-linear-gradient(left, #eee 8%, #ddd 18%, #eee 33%);
    background: linear-gradient(to right, #eee 8%, #ddd 18%, #eee 33%);
    -webkit-background-size: 800px 104px;
    -moz-background-size: 800px 104px;
    -o-background-size: 800px 104px;
    background-size: 800px 104px;
  }
  .postingan .btn {
    padding: 10px 30px;
    text-transform: uppercase;
    margin: 20px auto 10px;
    display: block;
  }
  section.label {
    padding: 15px 0;
    position: relative;
    z-index: 15;
    background: var(--white-dark);
  }
  .label .wraplabel {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  .label .sublabel {
    color: var(--white-mode);
    background: var(--main);
    padding: 10px 18px;
    margin: 5px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
  }
  body.darkmode section.contact {
    background-color: #2b2b2b;
  }
  .contact .alertwrap {
    display: block;
    margin: 18px auto;
    text-align: center;
  }
  section.contact {
    padding: 50px 0;
    position: relative;
    z-index: 14;
    background-color: var(--white-dark);
  }
  body.darkmode section.contact:after {
    opacity: 0.1;
  }
  section.contact:after {
    content: "";
    background: url(../../img/landing/pattern-bg.png) repeat repeat fixed;
    opacity: 0.35;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: -1;
  }
  .contact .wrapcontact {
    background: var(--white);
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
  }
  .contact .content {
    margin: 50px auto;
  }
  .contact .google-maps {
    position: relative;
    padding-bottom: 75%;
    height: 0;
    overflow: hidden;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16),
      0 3px 6px rgba(0, 0, 0, 0.23);
    -moz-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  }
  .contact .google-maps iframe {
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    position: absolute;
  }
  .contact .input-field textarea {
    min-height: 140px;
    max-height: 140px;
    min-width: 100%;
    max-width: 100%;
    width: 100%;
  }
  .contact .heading h1 {
    font-size: 26px;
    text-align: center;
    letter-spacing: 1.4px;
    margin: 0 0 6px;
    color: var(--dark);
  }
  .contact .alamat h1 {
    margin-bottom: 10px;
  }
  .contact .alamat .groupdesc {
    text-align: center;
    margin: 0 auto 18px;
    line-height: 1.5;
  }
  .contact .formtwo {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -moz-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }
  .contact .formtwo .input-field {
    width: -webkit-calc(50% - 10px);
    width: -moz-calc(50% - 10px);
    width: calc(50% - 10px);
  }
  .contact .pesan {
    font-size: 14px;
    color: var(--dark);
  }
  .contact .btn {
    padding: 8px 20px;
    margin: 20px auto 0;
    display: block;
  }
  .contact .btn-group {
    margin: auto;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }
  .contact .btn-group .btn {
    margin: 12px;
  }
  .spinner {
    -webkit-animation: rotation 1.35s linear infinite;
    -moz-animation: rotation 1.35s linear infinite;
    -o-animation: rotation 1.35s linear infinite;
    animation: rotation 1.35s linear infinite;
    display: none;
    stroke: var(--main);
  }
  .spinner.block {
    display: block;
  }
  @-webkit-keyframes rotation {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(270deg);
      transform: rotate(270deg);
    }
  }
  @-moz-keyframes rotation {
    0% {
      -webkit-transform: rotate(0deg);
      -moz-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(270deg);
      -moz-transform: rotate(270deg);
      transform: rotate(270deg);
    }
  }
  @-o-keyframes rotation {
    0% {
      -webkit-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(270deg);
      -o-transform: rotate(270deg);
      transform: rotate(270deg);
    }
  }
  @keyframes rotation {
    0% {
      -webkit-transform: rotate(0deg);
      -moz-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(270deg);
      -moz-transform: rotate(270deg);
      -o-transform: rotate(270deg);
      transform: rotate(270deg);
    }
  }
  .circle {
    stroke-dasharray: 180;
    stroke-dashoffset: 0;
    -webkit-transform-origin: center;
    -moz-transform-origin: center;
    -ms-transform-origin: center;
    -o-transform-origin: center;
    transform-origin: center;
    -webkit-animation: turn 1.35s ease-in-out infinite;
    -moz-animation: turn 1.35s ease-in-out infinite;
    -o-animation: turn 1.35s ease-in-out infinite;
    animation: turn 1.35s ease-in-out infinite;
  }
  @-webkit-keyframes turn {
    0% {
      stroke-dashoffset: 180;
    }
    50% {
      stroke-dashoffset: 45;
      -webkit-transform: rotate(135deg);
      transform: rotate(135deg);
    }
    100% {
      stroke-dashoffset: 180;
      -webkit-transform: rotate(450deg);
      transform: rotate(450deg);
    }
  }
  @-moz-keyframes turn {
    0% {
      stroke-dashoffset: 180;
    }
    50% {
      stroke-dashoffset: 45;
      -webkit-transform: rotate(135deg);
      -moz-transform: rotate(135deg);
      transform: rotate(135deg);
    }
    100% {
      stroke-dashoffset: 180;
      -webkit-transform: rotate(450deg);
      -moz-transform: rotate(450deg);
      transform: rotate(450deg);
    }
  }
  @-o-keyframes turn {
    0% {
      stroke-dashoffset: 180;
    }
    50% {
      stroke-dashoffset: 45;
      -webkit-transform: rotate(135deg);
      -o-transform: rotate(135deg);
      transform: rotate(135deg);
    }
    100% {
      stroke-dashoffset: 180;
      -webkit-transform: rotate(450deg);
      -o-transform: rotate(450deg);
      transform: rotate(450deg);
    }
  }
  @keyframes turn {
    0% {
      stroke-dashoffset: 180;
    }
    50% {
      stroke-dashoffset: 45;
      -webkit-transform: rotate(135deg);
      -moz-transform: rotate(135deg);
      -o-transform: rotate(135deg);
      transform: rotate(135deg);
    }
    100% {
      stroke-dashoffset: 180;
      -webkit-transform: rotate(450deg);
      -moz-transform: rotate(450deg);
      -o-transform: rotate(450deg);
      transform: rotate(450deg);
    }
  }
  @-webkit-keyframes animate {
    0% {
      opacity: 1;
      -webkit-border-radius: 0;
      border-radius: 0;
    }
    100% {
      -webkit-transform: translateY(-1000px) rotate(720deg);
      transform: translateY(-1000px) rotate(720deg);
      opacity: 0;
      -webkit-border-radius: 50%;
      border-radius: 50%;
    }
  }
  @-moz-keyframes animate {
    0% {
      opacity: 1;
      -moz-border-radius: 0;
      border-radius: 0;
    }
    100% {
      -moz-transform: translateY(-1000px) rotate(720deg);
      transform: translateY(-1000px) rotate(720deg);
      opacity: 0;
      -moz-border-radius: 50%;
      border-radius: 50%;
    }
  }
  @-o-keyframes animate {
    0% {
      opacity: 1;
      border-radius: 0;
    }
    100% {
      -o-transform: translateY(-1000px) rotate(720deg);
      transform: translateY(-1000px) rotate(720deg);
      opacity: 0;
      border-radius: 50%;
    }
  }
  @keyframes animate {
    0% {
      opacity: 1;
      -webkit-border-radius: 0;
      -moz-border-radius: 0;
      border-radius: 0;
    }
    100% {
      -webkit-transform: translateY(-1000px) rotate(720deg);
      -moz-transform: translateY(-1000px) rotate(720deg);
      -o-transform: translateY(-1000px) rotate(720deg);
      transform: translateY(-1000px) rotate(720deg);
      opacity: 0;
      -webkit-border-radius: 50%;
      -moz-border-radius: 50%;
      border-radius: 50%;
    }
  }
  .input-field {
    position: relative;
    margin: 15px 0;
  }
  body.darkmode .input-field input,
  body.darkmode .input-field textarea {
    border-bottom: 1px solid var(--main);
  }
  .input-field input,
  .input-field textarea {
    font-size: 15px;
    padding: 15px 0;
    display: block;
    width: 100%;
    border: none;
    color: var(--dark);
    background: var(--white);
    border-bottom: 1px solid #ddd;
  }
  .input-field input:focus,
  .input-field textarea:focus {
    outline: none;
  }
  body.darkmode .input-field label {
    color: var(--dark);
  }
  .input-field label {
    color: #999;
    font-size: 14px;
    font-weight: 400;
    position: absolute;
    pointer-events: none;
    left: 0;
    top: 18px;
    -webkit-transition: 0.2s ease all;
    -o-transition: 0.2s ease all;
    -moz-transition: 0.2s ease all;
    transition: 0.2s ease all;
  }
  .input-field input:focus ~ label,
  .input-field input:valid ~ label,
  .input-field textarea:focus ~ label,
  .input-field textarea:valid ~ label {
    top: -10px;
    font-size: 14px;
    color: var(--main-mode);
  }
  .bar {
    position: relative;
    display: block;
    width: 100%;
  }
  .bar:before,
  .bar:after {
    content: "";
    height: 2px;
    width: 0;
    bottom: 1px;
    position: absolute;
    background: var(--main);
    -webkit-transition: 0.2s ease all;
    -o-transition: 0.2s ease all;
    -moz-transition: 0.2s ease all;
    transition: 0.2s ease all;
  }
  .bar:before {
    left: 50%;
  }
  .bar:after {
    right: 50%;
  }
  .input-field input:focus ~ .bar:before,
  .input-field input:focus ~ .bar:after,
  .input-field textarea:focus ~ .bar:before,
  .input-field textarea:focus ~ .bar:after {
    width: 50%;
  }
  .highlight {
    position: absolute;
    height: 50%;
    width: 100px;
    top: 25%;
    left: 0;
    pointer-events: none;
    opacity: 0.5;
  }
  .input-field input:focus ~ .highlight,
  .input-field textarea:focus ~ .highlight {
    -webkit-animation: inputHighlighter 0.3s ease;
    -moz-animation: inputHighlighter 0.3s ease;
    -o-animation: inputHighlighter 0.3s ease;
    animation: inputHighlighter 0.3s ease;
  }
  .input-field input:focus ~ label,
  .input-field input:valid ~ label,
  .input-field textarea:focus ~ label,
  .input-field textarea:valid ~ label {
    top: -10px;
    font-size: 13px;
    color: var(--main-mode);
  }
  @media only screen and (max-width: 850px) {
    .navtop ul {
      text-align: center;
      display: block;
      float: none;
    }
    .videowrapper { 
      float: none; 
      clear: both; 
      position: relative; 
       } 
      
      .videowrapper iframe { 
        border: 8px solid var(--white-mode);
        -webkit-box-shadow: 0 10px 20px -10px rgba(0, 0, 0, 0.25);
        -moz-box-shadow: 0 10px 20px -10px rgba(0, 0, 0, 0.25);
        box-shadow: 0 10px 20px -10px rgba(0, 0, 0, 0.25);
        display: block;
        margin: auto;
        overflow: hidden;
        width: 100%;
  }
  }
  @media only screen and (max-width: 790px) {
    .utama .utamapost {
      -webkit-box-orient: vertical !important;
      -webkit-box-direction: normal !important;
      -webkit-flex-direction: column !important;
      -moz-box-orient: vertical !important;
      -moz-box-direction: normal !important;
      -ms-flex-direction: column !important;
      flex-direction: column !important;
    }
    .utama .utamacontent {
      text-align: center !important;
      margin: 10px 4% 0 !important;
    }
    .utama .utamacontent .btn {
      margin: 18px auto 0 !important;
    }
    .utama .utamapost h2 {
      margin: 20px 0;
    }
    .bagidua {
      -webkit-box-orient: vertical !important;
      -webkit-box-direction: normal !important;
      -webkit-flex-direction: column !important;
      -moz-box-orient: vertical !important;
      -moz-box-direction: normal !important;
      -ms-flex-direction: column !important;
      flex-direction: column !important;
    }
    .bagidua .image {
      margin-bottom: 30px;
    }
    .bagidua .image,
    .bagidua .content {
      width: 100% !important;
    }
    .contact .bagidua {
      -webkit-box-orient: vertical !important;
      -webkit-box-direction: reverse !important;
      -webkit-flex-direction: column-reverse !important;
      -moz-box-orient: vertical !important;
      -moz-box-direction: reverse !important;
      -ms-flex-direction: column-reverse !important;
      flex-direction: column-reverse !important;
    }
    .contact .bagidua .content {
      width: -webkit-calc(100% - 60px) !important;
      width: -moz-calc(100% - 60px) !important;
      width: calc(100% - 60px) !important;
      max-width: 500px;
    }
    .contact .bagidua .content:nth-of-type(1) {
      margin: 0 auto 50px !important;
    }
  }
  @media only screen and (max-width: 375px) {
    .postingan .box_desc {
      width: -webkit-calc(100% - 20px);
      width: -moz-calc(100% - 20px);
      width: calc(100% - 20px);
    }
    .contact .bagidua .content:last-child {
      margin-top: 30px;
    }
    .contact .bagidua .content:first-child {
      margin-bottom: 10px;
    }
    .contact form {
      max-width: -webkit-calc(100% - 20px);
      max-width: -moz-calc(100% - 20px);
      max-width: calc(100% - 20px);
      margin: auto;
    }
    .contact .google-maps {
      -webkit-border-radius: 0;
      -moz-border-radius: 0;
      border-radius: 0;
    }

    .videowrapper { 
      float: none; 
      clear: both; 
      position: relative; 
       } 
      
      .videowrapper iframe { 
        border: 8px solid var(--white-mode);
        -webkit-box-shadow: 0 10px 20px -10px rgba(0, 0, 0, 0.25);
        -moz-box-shadow: 0 10px 20px -10px rgba(0, 0, 0, 0.25);
        box-shadow: 0 10px 20px -10px rgba(0, 0, 0, 0.25);
        display: block;
        margin: auto;
        overflow: hidden;
        width: 100%;
  }
  }
  @-webkit-keyframes image_loading {
    0% {
      background-position: -468px 0;
    }
    100% {
      background-position: 468px 0;
    }
  }
  @-moz-keyframes image_loading {
    0% {
      background-position: -468px 0;
    }
    100% {
      background-position: 468px 0;
    }
  }
  @-o-keyframes image_loading {
    0% {
      background-position: -468px 0;
    }
    100% {
      background-position: 468px 0;
    }
  }
  @keyframes image_loading {
    0% {
      background-position: -468px 0;
    }
    100% {
      background-position: 468px 0;
    }
  }
  body.darkmode .blocker {
    background: rgba(255, 255, 255, 0.25);
  }
  body.darkmode #search_popup {
    background: var(--white);
  }
  .menu-toggle .bar {
    width: 25px;
    height: 3px;
    background-color: var(--dark);
    margin: 5px auto;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
  }
  .menu-toggle {
    -ms-grid-column-align: end;
    justify-self: end;
    margin-right: 25px;
    display: none;
  }
  .menu-toggle:hover {
    cursor: pointer;
  }
  #mobile-menu.is-active .bar:nth-child(2) {
    opacity: 0;
  }
  #mobile-menu.is-active .bar:nth-child(1) {
    -webkit-transform: translateY(8px) rotate(45deg);
    -ms-transform: translateY(8px) rotate(45deg);
    -o-transform: translateY(8px) rotate(45deg);
    -moz-transform: translateY(8px) rotate(45deg);
    transform: translateY(8px) rotate(45deg);
  }
  #mobile-menu.is-active .bar:nth-child(3) {
    -webkit-transform: translateY(-8px) rotate(-45deg);
    -ms-transform: translateY(-8px) rotate(-45deg);
    -o-transform: translateY(-8px) rotate(-45deg);
    -moz-transform: translateY(-8px) rotate(-45deg);
    transform: translateY(-8px) rotate(-45deg);
  }
  @media only screen and (max-width: 720px) {
    .mainav .menu > ul {
      display: -webkit-box !important;
      display: -webkit-flex !important;
      display: -moz-box !important;
      display: -ms-flexbox !important;
      display: flex !important;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -webkit-flex-direction: column;
      -moz-box-orient: vertical;
      -moz-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      position: fixed;
      -webkit-box-pack: start;
      -webkit-justify-content: start;
      -moz-box-pack: start;
      -ms-flex-pack: start;
      justify-content: start;
      top: 105px;
      width: 100%;
      max-width: 200px;
      height: -webkit-calc(100vh - 105px);
      height: -moz-calc(100vh - 105px);
      height: calc(100vh - 105px);
      -webkit-transform: translate(30%);
      -moz-transform: translate(30%);
      -ms-transform: translate(30%);
      -o-transform: translate(30%);
      transform: translate(30%);
      text-align: center;
      overflow: hidden;
      background: var(--white);
      overflow-y: auto;
      -webkit-transition: top 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275),
        -webkit-transform 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
      transition: top 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275),
        -webkit-transform 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
      -o-transition: top 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275),
        -o-transform 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
      -moz-transition: transform 0.5s cubic-bezier(0.075, 0.82, 0.165, 1),
        top 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275),
        -moz-transform 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
      transition: transform 0.5s cubic-bezier(0.075, 0.82, 0.165, 1),
        top 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      transition: transform 0.5s cubic-bezier(0.075, 0.82, 0.165, 1),
        top 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275),
        -webkit-transform 0.5s cubic-bezier(0.075, 0.82, 0.165, 1),
        -moz-transform 0.5s cubic-bezier(0.075, 0.82, 0.165, 1),
        -o-transform 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
    }
    .mainav.sticky ul {
      top: 70px;
      height: -webkit-calc(100vh - 70px);
      height: -moz-calc(100vh - 70px);
      height: calc(100vh - 70px);
    }
    .mainav ul li a {
      margin: 0;
    }
    .mainav li {
      margin: 5px 18px 5px 10px;
    }
    .mainav li:first-child {
      margin-top: 10px;
    }
    .mainav li a {
      font-size: 1rem;
    }
    .mainav ul li a.btn {
      margin: 0;
    }
    .mainav .menu-toggle,
    .mainav .bar {
      display: block;
      cursor: pointer;
    }
    .mainav .mobile-nav {
      -webkit-transform: translate(-68%) !important;
      -moz-transform: translate(-68%) !important;
      -ms-transform: translate(-68%) !important;
      -o-transform: translate(-68%) !important;
      transform: translate(-68%) !important;
    }
    section.content aside {
      -webkit-column-count: 1;
      -moz-column-count: 1;
      column-count: 1;
      -webkit-column-gap: 0;
      -moz-column-gap: 0;
      column-gap: 0;
    }
  }
  footer {
    padding: 35px 0 0;
    position: relative;
    z-index: 15;
    background: var(--white);
    -webkit-box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.2);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.2);
    border-top: 5px solid var(--main);
  }
  footer .footerwrap,
  .footer .footerwrap {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
  footer .post,
  .footer .post {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-bottom: 35px;
  }
  footer .grid,
  .footer .grid {
    display: block;
    padding: 10px;
    position: relative;
    max-width: 316px;
    width: 100%;
    margin: 5px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
  }
  footer .titlefooter {
    text-align: center;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: 1.1px;
    margin: 10px auto 30px;
    color: var(--dark-mode);
    border-bottom: 2px solid var(--main-mode);
    padding-bottom: 20px;
  }
  footer .titlefooter i {
    margin-right: 5px;
  }
  footer .footercontent ul {
    margin: 0 0 20px;
    padding: 0;
  }
  footer .footercontent ul li {
    list-style: none;
    text-align: center;
  }
  footer .footercontent a.btn {
    background: var(--main);
    color: var(--white-mode);
    padding: 10px 18px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    margin: 5px;
  }
  footer .logosmanda {
    margin: 20px auto;
  }
  footer .groupdesc {
    text-align: center;
  }
  footer .groupdesc a {
    display: block;
    margin: 8px 5px;
  }
  footer hr.line {
    margin: 15px auto;
  }
  footer .logo {
    max-width: 200px;
    margin: auto;
  }
  footer .copyright {
    text-align: center;
    font-weight: 600;
    line-height: 1.4;
    padding: 20px 0 16px;
    border-top: 3px solid var(--main);
  }
  footer .copyright span,
  footer .copyright a {
    color: var(--dark-mode);
  }
  footer .copyright a {
    text-decoration: underline;
  }
  footer .copyright span:not(#year) {
    display: block;
  }
  footer .grid.card {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }
  footer .cardsmanda {
    margin: auto;
  }
  .wrapfab {
    position: fixed;
    z-index: 19;
  }
  .fabcheckbox {
    display: none;
  }
  .wrapfab.is-active .fabutton,
  .wrapfab.is-active .fab_target {
    left: -130px;
    -webkit-transition: left 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
    -o-transition: left 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
    -moz-transition: left 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
    transition: left 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  .fabutton {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: fixed;
    left: 20px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    background: var(--main);
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    cursor: pointer;
    padding: 25px;
    -webkit-transition: left 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    -o-transition: left 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    -moz-transition: left 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transition: left 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  }
  .fab_dots {
    position: absolute;
    height: 6px;
    width: 6px;
    background-color: var(--white-mode);
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    top: 50%;
    -webkit-transform: translateX(0%) translateY(-50%) rotate(0deg);
    -moz-transform: translateX(0%) translateY(-50%) rotate(0deg);
    -ms-transform: translateX(0%) translateY(-50%) rotate(0deg);
    -o-transform: translateX(0%) translateY(-50%) rotate(0deg);
    transform: translateX(0%) translateY(-50%) rotate(0deg);
    opacity: 1;
    -webkit-animation: blink 3s ease infinite;
    -moz-animation: blink 3s ease infinite;
    -o-animation: blink 3s ease infinite;
    animation: blink 3s ease infinite;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    transition: all 0.3s ease;
  }
  .dots_1 {
    left: 12px;
    -webkit-animation-delay: 0;
    -moz-animation-delay: 0;
    -o-animation-delay: 0;
    animation-delay: 0;
  }
  .dots_2 {
    left: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    -webkit-animation-delay: 0.4s;
    -moz-animation-delay: 0.4s;
    -o-animation-delay: 0.4s;
    animation-delay: 0.4s;
  }
  .dots_3 {
    right: 12px;
    -webkit-animation-delay: 0.8s;
    -moz-animation-delay: 0.8s;
    -o-animation-delay: 0.8s;
    animation-delay: 0.8s;
  }
  .fabcheckbox:checked ~ .fabutton .fab_dots {
    height: 4px;
    -webkit-animation: none;
    -moz-animation: none;
    -o-animation: none;
    animation: none;
  }
  .fab .fab-dots-2 {
    -webkit-transform: translateX(-50%) translateY(-50%) rotate(0deg);
    -moz-transform: translateX(-50%) translateY(-50%) rotate(0deg);
    -ms-transform: translateX(-50%) translateY(-50%) rotate(0deg);
    -o-transform: translateX(-50%) translateY(-50%) rotate(0deg);
    transform: translateX(-50%) translateY(-50%) rotate(0deg);
  }
  .fabcheckbox:checked ~ .fabutton .dots_1 {
    width: 28px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    left: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);
    -moz-transform: translateX(-50%) translateY(-50%) rotate(45deg);
    -ms-transform: translateX(-50%) translateY(-50%) rotate(45deg);
    -o-transform: translateX(-50%) translateY(-50%) rotate(45deg);
    transform: translateX(-50%) translateY(-50%) rotate(45deg);
  }
  .fabcheckbox:checked ~ .fabutton .dots_3 {
    width: 28px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    right: 50%;
    -webkit-transform: translateX(50%) translateY(-50%) rotate(-45deg);
    -moz-transform: translateX(50%) translateY(-50%) rotate(-45deg);
    -ms-transform: translateX(50%) translateY(-50%) rotate(-45deg);
    -o-transform: translateX(50%) translateY(-50%) rotate(-45deg);
    transform: translateX(50%) translateY(-50%) rotate(-45deg);
  }
  .fab_target {
    position: fixed;
    left: 20px;
    top: 50%;
    -webkit-transform: translateY(-50%) scale(0);
    -moz-transform: translateY(-50%) scale(0);
    -ms-transform: translateY(-50%) scale(0);
    -o-transform: translateY(-50%) scale(0);
    transform: translateY(-50%) scale(0);
    width: 7rem;
    height: 9rem;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    transition: all 0.3s ease;
    -webkit-transform-origin: center left;
    -moz-transform-origin: center left;
    -ms-transform-origin: center left;
    -o-transform-origin: center left;
    transform-origin: center left;
    z-index: -1;
  }
  .fabcheckbox:checked ~ .fab_target {
    -webkit-transform: translateY(-50%) scale(1);
    -moz-transform: translateY(-50%) scale(1);
    -ms-transform: translateY(-50%) scale(1);
    -o-transform: translateY(-50%) scale(1);
    transform: translateY(-50%) scale(1);
  }
  .fab_action {
    position: absolute;
    background: var(--main);
    width: 3rem;
    height: 3rem;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    color: var(--white-mode);
    -webkit-transition: all 1s ease;
    -o-transition: all 1s ease;
    -moz-transition: all 1s ease;
    transition: all 1s ease;
    opacity: 0;
  }
  .fab_action i {
    margin: 0;
    font-size: 20px;
  }
  .fabcheckbox:checked ~ .fab_target .fab_action {
    opacity: 1;
  }
  .fab_target .action_1 {
    left: 0;
    top: -1rem;
  }
  .fab_target .action_2 {
    right: 0.6rem;
    top: -0.2rem;
  }
  .fab_target .action_3 {
    right: -0.5rem;
    top: 3rem;
  }
  .fab_target .action_4 {
    right: 0.6rem;
    bottom: -0.2rem;
  }
  .fab_target .action_5 {
    left: 0;
    bottom: -1rem;
  }
  .social-button {
    display: inline-block;
    background: var(--white);
    width: 40px;
    height: 40px;
    line-height: 38px;
    margin: auto 2px;
    text-align: center;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    border: 0;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16),
      0 3px 6px rgba(0, 0, 0, 0.23);
    -moz-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  }
  .social-buttons.center {
    float: none;
    display: block;
    text-align: center;
    margin-bottom: 10px;
    line-height: 30px;
  }
  .social-button:before {
    content: "";
    background-color: var(--dark);
    width: 120%;
    height: 120%;
    position: absolute;
    top: 90%;
    left: -110%;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transition: all 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59);
    -o-transition: all 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59);
    -moz-transition: all 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59);
    transition: all 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59);
  }
  .social-buttons:not(.share) .social-button .fa {
    font-size: 24px;
    vertical-align: middle;
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    -ms-transform: scale(0.8);
    -o-transform: scale(0.8);
    transform: scale(0.8);
    -webkit-transition: all 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59);
    -o-transition: all 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59);
    -moz-transition: all 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59);
    transition: all 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59);
  }
  body.darkmode .social-button .fa,
  body.darkmode .social-button .sharetext {
    color: var(--white-mode);
  }
  .social-button.facebook:before {
    background-color: #3b5998;
  }
  .social-button.facebook .fa,
  .social-button.facebook .sharetext {
    color: #3b5998;
  }
  .social-button.twitter:before {
    background-color: #00aced;
  }
  .social-button.twitter .fa,
  .social-button.twitter .sharetext {
    color: #00aced;
  }
  .social-button.telegram:before {
    background-color: #08c;
  }
  .social-button.telegram .fa,
  .social-button.telegram .sharetext {
    color: #08c;
  }
  .social-button.linkedin:before {
    background-color: #2867b2;
  }
  .social-button.linkedin .fa,
  .social-button.linkedin .sharetext {
    color: #2867b2;
  }
  .social-button.email:before {
    background-color: #5ca08e;
  }
  .social-button.email .fa,
  .social-button.email .sharetext {
    color: #5ca08e;
  }
  .social-button.whatsapp:before {
    background-color: #4caf50;
  }
  .social-button.whatsapp .fa,
  .social-button.whatsapp .sharetext {
    color: #4caf50;
  }
  .social-button.google_bookmark:before {
    background-color: #059142;
  }
  .social-button.google_bookmark .fa,
  .social-button.google_bookmark .sharetext {
    color: #059142;
  }
  .social-button.instagram:before {
    background: -webkit-linear-gradient(75deg, #ffb13d, #dd277b, #4d5ed4);
    background: -moz-linear-gradient(75deg, #ffb13d, #dd277b, #4d5ed4);
    background: -o-linear-gradient(75deg, #ffb13d, #dd277b, #4d5ed4);
    background: linear-gradient(15deg, #ffb13d, #dd277b, #4d5ed4);
  }
  .social-button.instagram .fa {
    color: #e95950;
  }
  .social-button.website:before {
    background-color: #767676;
  }
  .social-button.website .fa {
    color: #767676;
  }
  .social-button:focus:before,
  .social-button:hover:before {
    top: -10%;
    left: -10%;
  }
  .social-buttons:not(.share) .social-button:focus .fa,
  .social-buttons:not(.share) .social-button:hover .fa {
    color: var(--white-mode);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
  .social-buttons.share .social-button {
    min-width: 150px;
    margin: 6px 4px;
  }
  .social-buttons.share .social-button .fa {
    font-size: 20px;
    margin-right: 5px;
    vertical-align: middle;
  }
  .social-buttons.share .fa,
  .social-buttons.share span.sharetext {
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    -ms-transform: scale(0.8);
    -o-transform: scale(0.8);
    transform: scale(0.8);
    -webkit-transition: all 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59);
    -o-transition: all 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59);
    -moz-transition: all 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59);
    transition: all 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59);
  }
  .social-buttons .social-button:focus .fa,
  .social-buttons .social-button:hover .fa {
    color: var(--white-mode);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
  .social-buttons .social-button:focus span.sharetext,
  .social-buttons .social-button:hover span.sharetext {
    color: var(--white-mode);
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    -ms-transform: scale(0.9);
    -o-transform: scale(0.9);
    transform: scale(0.9);
  }
  .social-buttons.share .social-button:before {
    width: 180%;
    height: 330%;
  }
  .social-buttons.share .social-button span.sharetext {
    font-size: 18px;
    vertical-align: middle;
    font-weight: 700;
    letter-spacing: 1.2px;
    display: inline-block;
  }
  .backtotop {
    display: block;
    position: fixed !important;
    bottom: 60px;
    right: 35px;
    cursor: pointer;
    font-weight: 700;
    z-index: 19;
    padding: 12px 10px;
    background-color: var(--main);
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    -webkit-transition: -webkit-transform 0.5s
      cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transition: -webkit-transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    -o-transition: -o-transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    -moz-transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55),
      -moz-transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55),
      -webkit-transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55),
      -moz-transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55),
      -o-transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
  }
  .backtotop span {
    height: 25px;
    width: 30px;
    display: inline-block;
    text-align: center;
    color: var(--white-mode);
  }
  .backtotop span:before {
    font-family: FontAwesome;
    font-size: 25px;
    content: "\f106";
  }
  .backtotop.is-active {
    -webkit-transform: translateY(120px);
    -moz-transform: translateY(120px);
    -ms-transform: translateY(120px);
    -o-transform: translateY(120px);
    transform: translateY(120px);
    -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
    transition: -webkit-transform 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
    -o-transition: -o-transform 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
    -moz-transition: transform 0.5s cubic-bezier(0.075, 0.82, 0.165, 1),
      -moz-transform 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
    transition: transform 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
    transition: transform 0.5s cubic-bezier(0.075, 0.82, 0.165, 1),
      -webkit-transform 0.5s cubic-bezier(0.075, 0.82, 0.165, 1),
      -moz-transform 0.5s cubic-bezier(0.075, 0.82, 0.165, 1),
      -o-transform 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
  }
  @media only screen and (max-width: 790px) {

    .videowrapper { 
      float: none; 
      clear: both; 
      position: relative; 
       } 
      
      .videowrapper iframe { 
        border: 8px solid var(--white-mode);
        -webkit-box-shadow: 0 10px 20px -10px rgba(0, 0, 0, 0.25);
        -moz-box-shadow: 0 10px 20px -10px rgba(0, 0, 0, 0.25);
        box-shadow: 0 10px 20px -10px rgba(0, 0, 0, 0.25);
        display: block;
        margin: auto;
        overflow: hidden;

  }
    .backtotop {
      bottom: 20px;
      right: 20px;
    }
  }
  @media only screen and (max-width: 375px) {
    .wrapper {
      max-width: 94%;
    }
    .navtop ul li a {
      height: 26px;
    }
  }
  .blocker {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    z-index: 28;
    padding: 20px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-color: #000;
    background-color: rgba(0, 0, 0, 0.75);
    text-align: center;
  }
  .blocker:before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: -0.05em;
  }
  .blocker.behind {
    background-color: transparent;
  }
  .modal {
    display: none;
    vertical-align: middle;
    position: relative;
    z-index: 29;
    max-width: 500px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 90%;
    background: #fff;
    padding: 15px 30px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    -webkit-box-shadow: 0 0 10px #000;
    -moz-box-shadow: 0 0 10px #000;
    -o-box-shadow: 0 0 10px #000;
    -ms-box-shadow: 0 0 10px #000;
    box-shadow: 0 0 10px #000;
    text-align: left;
  }
  .modal a.close-modal {
    position: absolute;
    top: -12.5px;
    right: -12.5px;
    display: block;
    width: 30px;
    height: 30px;
    text-indent: -9999px;
    -webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAAAXNSR0IArs4c6QAAA3hJREFUaAXlm8+K00Acx7MiCIJH/yw+gA9g25O49SL4AO3Bp1jw5NvktC+wF88qevK4BU97EmzxUBCEolK/n5gp3W6TTJPfpNPNF37MNsl85/vN/DaTmU6PknC4K+pniqeKJ3k8UnkvDxXJzzy+q/yaxxeVHxW/FNHjgRSeKt4rFoplzaAuHHDBGR2eS9G54reirsmienDCTRt7xwsp+KAoEmt9nLaGitZxrBbPFNaGfPloGw2t4JVamSt8xYW6Dg1oCYo3Yv+rCGViV160oMkcd8SYKnYV1Nb1aEOjCe6L5ZOiLfF120EjWhuBu3YIZt1NQmujnk5F4MgOpURzLfAwOBSTmzp3fpDxuI/pabxpqOoz2r2HLAb0GMbZKlNV5/Hg9XJypguryA7lPF5KMdTZQzHjqxNPhWhzIuAruOl1eNqKEx1tSh5rfbxdw7mOxCq4qS68ZTjKS1YVvilu559vWvFHhh4rZrdyZ69Vmpgdj8fJbDZLJpNJ0uv1cnr/gjrUhQMuI+ANjyuwftQ0bbL6Erp0mM/ny8Fg4M3LtdRxgMtKl3jwmIHVxYXChFy94/Rmpa/pTbNUhstKV+4Rr8lLQ9KlUvJKLyG8yvQ2s9SBy1Jb7jV5a0yapfF6apaZLjLLcWtd4sNrmJUMHyM+1xibTjH82Zh01TNlhsrOhdKTe00uAzZQmN6+KW+sDa/JD2PSVQ873m29yf+1Q9VDzfEYlHi1G5LKBBWZbtEsHbFwb1oYDwr1ZiF/2bnCSg1OBE/pfr9/bWx26UxJL3ONPISOLKUvQza0LZUxSKyjpdTGa/vDEr25rddbMM0Q3O6Lx3rqFvU+x6UrRKQY7tyrZecmD9FODy8uLizTmilwNj0kraNcAJhOp5aGVwsAGD5VmJBrWWbJSgWT9zrzWepQF47RaGSiKfeGx6Szi3gzmX/HHbihwBser4B9UJYpFBNX4R6vTn3VQnez0SymnrHQMsRYGTr1dSk34ljRqS/EMd2pLQ8YBp3a1PLfcqCpo8gtHkZFHKkTX6fs3MY0blKnth66rKCnU0VRGu37ONrQaA4eZDFtWAu2fXj9zjFkxTBOo8F7t926gTp/83Kyzzcy2kZD6xiqxTYnHLRFm3vHiRSwNSjkz3hoIzo8lCKWUlg/YtGs7tObunDAZfpDLbfEI15zsEIY3U/x/gHHc/G1zltnAgAAAABJRU5ErkJggg==);
  }
  .modal-spinner {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    -webkit-transform: translateY(-50%) translateX(-50%);
    -moz-transform: translateY(-50%) translateX(-50%);
    -ms-transform: translateY(-50%) translateX(-50%);
    -o-transform: translateY(-50%) translateX(-50%);
    transform: translateY(-50%) translateX(-50%);
    padding: 12px 16px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background-color: #111;
    height: 20px;
  }
  .modal-spinner > div {
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
    background-color: #fff;
    height: 20px;
    width: 2px;
    margin: 0 1px;
    display: inline-block;
    -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
    -moz-animation: sk-stretchdelay 1.2s infinite ease-in-out;
    -o-animation: sk-stretchdelay 1.2s infinite ease-in-out;
    animation: sk-stretchdelay 1.2s infinite ease-in-out;
  }
  .modal-spinner .rect2 {
    -webkit-animation-delay: -1.1s;
    -moz-animation-delay: -1.1s;
    -o-animation-delay: -1.1s;
    animation-delay: -1.1s;
  }
  .modal-spinner .rect3 {
    -webkit-animation-delay: -1s;
    -moz-animation-delay: -1s;
    -o-animation-delay: -1s;
    animation-delay: -1s;
  }
  .modal-spinner .rect4 {
    -webkit-animation-delay: -0.9s;
    -moz-animation-delay: -0.9s;
    -o-animation-delay: -0.9s;
    animation-delay: -0.9s;
  }
  @-webkit-keyframes sk-stretchdelay {
    0%,
    40%,
    100% {
      -webkit-transform: scaleY(0.5);
    }
    20% {
      -webkit-transform: scaleY(1);
    }
  }
  @-moz-keyframes sk-stretchdelay {
    0%,
    40%,
    100% {
      -moz-transform: scaleY(0.5);
      transform: scaleY(0.5);
      -webkit-transform: scaleY(0.5);
    }
    20% {
      -moz-transform: scaleY(1);
      transform: scaleY(1);
      -webkit-transform: scaleY(1);
    }
  }
  @-o-keyframes sk-stretchdelay {
    0%,
    40%,
    100% {
      -o-transform: scaleY(0.5);
      transform: scaleY(0.5);
      -webkit-transform: scaleY(0.5);
    }
    20% {
      -o-transform: scaleY(1);
      transform: scaleY(1);
      -webkit-transform: scaleY(1);
    }
  }
  @keyframes sk-stretchdelay {
    0%,
    40%,
    100% {
      -moz-transform: scaleY(0.5);
      -o-transform: scaleY(0.5);
      transform: scaleY(0.5);
      -webkit-transform: scaleY(0.5);
    }
    20% {
      -moz-transform: scaleY(1);
      -o-transform: scaleY(1);
      transform: scaleY(1);
      -webkit-transform: scaleY(1);
    }
  }
  .youtube-responsive {
    overflow: hidden;
    position: relative;
    width: 100%;
    min-width: 320px;
  }
  .youtube-responsive:after {
    padding-top: 56.25%;
    display: block;
    content: "";
  }
  .youtube-responsive iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }