html {
   line-height: 1.15;
   -webkit-text-size-adjust: 100%
}

body {
   margin: 0
}

main {
   display: block
}

h1 {
   font-size: 2em;
   margin: .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: -.25em
}

sup {
   top: -.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
}

[type=button],
[type=reset],
[type=submit],
button {
   -webkit-appearance: button
}

[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner,
button::-moz-focus-inner {
   border-style: none;
   padding: 0
}

[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring,
button:-moz-focusring {
   outline: 1px dotted ButtonText
}

fieldset {
   padding: .35em .75em .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,
code,
input,
main article *,
pre,
textarea {
   -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-corner,
::-webkit-scrollbar-track {
   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(https://fonts.gstatic.com/s/poppins/v9/pxiEyp8kv8JHgFVrJJbecmNE.woff2) 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(https://fonts.gstatic.com/s/poppins/v9/pxiEyp8kv8JHgFVrJJnecmNE.woff2) 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(https://fonts.gstatic.com/s/poppins/v9/pxiEyp8kv8JHgFVrJJfecg.woff2) 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
}

body,
html {
   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: 0
}

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
}

.footercontent i,
.sublabel i,
nav a i {
   margin-right: 10px
}

.footercontent i.reverse,
.sublabel i.reverse,
nav a 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:not(:first-child) {
   margin-top: 14px
}

.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: 0
}

.btn-color {
   background: var(--main);
   color: var(--white-mode)
}

.btn-ln {
   border: solid 2px var(--main)
}

.btn-anim,
.btn-anim:link,
.btn-anim:visited {
   -webkit-transition: all .2s ease-in;
   -o-transition: all .2s ease-in;
   -moz-transition: all .2s ease-in;
   transition: all .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, .2);
   -moz-box-shadow: 0 10px 20px rgba(0, 0, 0, .2);
   box-shadow: 0 10px 20px rgba(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, .2);
   -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
   box-shadow: 0 5px 10px rgba(0, 0, 0, .2)
}

.btn-anim {
   -webkit-box-shadow: 0 10px 20px -10px rgba(0, 0, 0, .25);
   -moz-box-shadow: 0 10px 20px -10px rgba(0, 0, 0, .25);
   box-shadow: 0 10px 20px -10px rgba(0, 0, 0, .25)
}

.hero .mainav,
.hero .navtop {
   z-index: 20;
   top: 0;
   width: 100%;
   position: fixed
}

.hero .mainav {
   top: 35px;
   -webkit-transition: top .5s cubic-bezier(.19, 1, .22, 1);
   -o-transition: top .5s cubic-bezier(.19, 1, .22, 1);
   -moz-transition: top .5s cubic-bezier(.19, 1, .22, 1);
   transition: top .5s cubic-bezier(.19, 1, .22, 1)
}

.hero .mainav.sticky {
   top: 0;
   -webkit-transition: top .5s cubic-bezier(.175, .885, .32, 1.275);
   -o-transition: top .5s cubic-bezier(.175, .885, .32, 1.275);
   -moz-transition: top .5s cubic-bezier(.175, .885, .32, 1.275);
   transition: top .5s cubic-bezier(.175, .885, .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 .3s ease;
   -o-transition: background .3s ease;
   -moz-transition: background .3s ease;
   transition: background .3s ease
}

.mainav {
   background: var(--white);
   -webkit-box-shadow: 4px 4px 20px rgba(0, 0, 0, .2);
   -moz-box-shadow: 4px 4px 20px rgba(0, 0, 0, .2);
   box-shadow: 4px 4px 20px rgba(0, 0, 0, .2)
}

.mainav .logo,
.mainav .menu,
.mainav nav,
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,
footer .logo img {
   width: auto;
   height: 60px
}

.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 .2s;
   -o-transition: all .2s;
   -moz-transition: all .2s;
   transition: all .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, .16), 0 2px 8px 0 rgba(0, 0, 0, .12);
   -moz-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .16), 0 2px 8px 0 rgba(0, 0, 0, .12);
   box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .16), 0 2px 8px 0 rgba(0, 0, 0, .12);
   padding: 0;
   background: var(--white);
   z-index: 8;
   height: auto
}

.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(.68, 0, .265, 1);
   -moz-transition-timing-function: cubic-bezier(.68, 0, .265, 1);
   -o-transition-timing-function: cubic-bezier(.68, 0, .265, 1);
   transition-timing-function: cubic-bezier(.68, 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
}

.menormalkan(width:75%).mainav .drop-menu li {
   display: block;
   min-width: 110px;
   width: 100%;
   opacity: 0;
   -webkit-transform: translate(20px, 0);
   -moz-transform: translate(20px, 0);
   -ms-transform: translate(20px, 0);
   -o-transform: translate(20px, 0);
   transform: translate(20px, 0);
   margin: 0 !important
}

.mainav .drop.open li {
   display: block;
   -webkit-transition: all .4s;
   -o-transition: all .4s;
   -moz-transition: all .4s;
   transition: all .4s;
   opacity: 1;
   -webkit-transform: translate(0, 0);
   -moz-transform: translate(0, 0);
   -ms-transform: translate(0, 0);
   -o-transform: translate(0, 0);
   transform: translate(0, 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: .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: 0;
   border: none;
   padding: 12px 24px;
   margin: 6px 6px 6px 12px
}

body.darkmode .overlay {
   background: rgba(255, 255, 255, .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, .3);
   -webkit-transition: opacity .5s cubic-bezier(.39, .575, .565, 1);
   -o-transition: opacity .5s cubic-bezier(.39, .575, .565, 1);
   -moz-transition: opacity .5s cubic-bezier(.39, .575, .565, 1);
   transition: opacity .5s cubic-bezier(.39, .575, .565, 1)
}

.overlay.is-active {
   opacity: 1;
   z-index: 19
}

@media only screen and (max-width: 1080px) {
   .wrapper {
      max-width: 96%
   }
}

@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;
   margin: 0 0 35px;
   color: #133e59
}

.author .image,
.postingan .box_desc,
footer .copyright {
   -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, .15);
   -moz-box-shadow: 0 0 20px rgba(0, 0, 0, .15);
   box-shadow: 0 0 20px rgba(0, 0, 0, .15)
}

.agendastatus,
.authorwrap,
.sidebar.error,
.sidebar.ss,
.wrappercomment,
section.content .breadcrumb,
section.content main article,
section.utama {
   -webkit-box-shadow: 0 10px 20px -10px rgba(0, 0, 0, .25);
   -moz-box-shadow: 0 10px 20px -10px rgba(0, 0, 0, .25);
   box-shadow: 0 10px 20px -10px rgba(0, 0, 0, .25)
}

.sidebar .wrappost .box_desc,
.sidebar .wrappost .image,
.sidebar .wrappost .wraptiga .number {
   -webkit-box-shadow: 2px 4px 10px rgba(0, 0, 0, .2);
   -moz-box-shadow: 2px 4px 10px rgba(0, 0, 0, .2);
   box-shadow: 2px 4px 10px rgba(0, 0, 0, .2)
}

section.image-top {
   width: 100%;
   height: 100%;
   min-height: 620px;
   max-height: 620px;
   background-repeat: no-repeat;
   background-position: center;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
   background-attachment: fixed;
   overflow: hidden;
   position: relative;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
   display: -moz-box;
   display: -ms-flexbox;
   display: flex;
   text-align: center
}

section.image-top::before {
   content: '';
   position: absolute;
   height: 100%;
   bottom: 0;
   left: 0;
   right: 0;
   background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, .4)), to(var(--white-dark)));
   background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, .4), var(--white-dark));
   background-image: -moz-linear-gradient(top, rgba(255, 255, 255, .4), var(--white-dark));
   background-image: -o-linear-gradient(top, rgba(255, 255, 255, .4), var(--white-dark));
   background-image: linear-gradient(to bottom, rgba(255, 255, 255, .4), var(--white-dark))
}

.image-top .wrapper {
   padding-top: 140px;
   padding-bottom: 260px;
   margin: auto
}

body.darkmode .image-top .container {
   background: rgba(0, 0, 0, .6)
}

.image-top .container {
   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;
   padding: 14px 20px;
   background: rgba(255, 255, 255, .75);
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
   border-radius: 10px;
   max-width: 640px
}

.image-top h1 {
   color: var(--dark);
   letter-spacing: 1.5px;
   line-height: 1.3;
   font-weight: 600;
   font-size: 150%
}

.image-top ul {
   list-style: none;
   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-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-pack: center;
   -webkit-justify-content: center;
   -moz-box-pack: center;
   -ms-flex-pack: center;
   justify-content: center;
   padding: 5px 0 0;
   margin: 0 auto;
   font-size: 14px;
   border-top: rgba(0, 0, 0, .5) solid 1px
}

body.darkmode .image-top ul {
   border-top: rgba(255, 255, 255, .5) solid 1px
}

.image-top .grouptop.label a:not(:last-child):after {
   content: ', '
}

.image-top ul li,
.image-top ul li a {
   color: var(--dark)
}

.image-top ul li {
   margin: 10px
}

.breadcrumb {
   background: var(--white);
   padding: 6px 12px;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   border-radius: 5px;
   margin-bottom: 16px
}

.breadcrumb ul {
   margin: 0;
   padding: 0;
   list-style: none;
   display: -webkit-box;
   display: -webkit-flex;
   display: -moz-box;
   display: -ms-flexbox;
   display: flex
}

.breadcrumb li {
   margin: auto 0;
   color: var(--dark)
}

.breadcrumb li .petunjuk {
   margin: 0 8px
}

.breadcrumb li a,
.breadcrumb li>span:not(.petunjuk) {
   padding: 10px;
   display: block
}

.breadcrumb li a {
   display: block;
   overflow: hidden;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   border-radius: 5px;
   margin: auto 0;
   text-align: center
}

.agendastatus {
   padding: 16px;
   background: var(--white);
   color: var(--dark);
   margin-bottom: 16px;
   -webkit-border-radius: 6px;
   -moz-border-radius: 6px;
   border-radius: 6px;
   text-align: center
}

.agendastatus .alert {
   margin-bottom: 12px
}

.agendastatus .date div {
   display: inline-block;
   font-size: 28px
}

.agendastatus .date .bulan::before,
.agendastatus .date .tahun::before {
   font-style: normal;
   font-size: 10px;
   display: inline-block;
   float: left;
   content: '\f111';
   font-family: FontAwesome;
   line-height: 30px;
   margin: 0 10px
}

section.content {
   margin: -220px auto 60px
}

.content .bagikan {
   display: -webkit-box;
   display: -webkit-flex;
   display: -moz-box;
   display: -ms-flexbox;
   display: flex
}

section.content main {
   width: -webkit-calc(100% - 320px);
   width: -moz-calc(100% - 320px);
   width: calc(100% - 320px)
}

section.content aside,
section.content main article {
   -webkit-border-radius: 6px;
   -moz-border-radius: 6px;
   border-radius: 6px
}

section.content main article {
   padding: 16px;
   background: var(--white);
   color: var(--dark);
   overflow: hidden
}

section.content aside {
   width: 320px;
   margin-left: 20px
}

.commentku h2,
.sharewrap h2,
.sidebar h2,
.tagwrap h2 {
   text-align: center;
   font-size: 20px;
   letter-spacing: 1.5px;
   margin: 24px 0 12px;
   color: var(--dark)
}

.tagwrap .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
}

.tagwrap .sublabel {
   color: var(--white-mode);
   background: var(--main);
   padding: 10px 18px;
   margin: 5px;
   -webkit-border-radius: 6px;
   -moz-border-radius: 6px;
   border-radius: 6px
}

.authorwrap {
   margin: 10px 0;
   padding: 20px;
   background-color: var(--white);
   color: var(--dark);
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
   border-radius: 10px
}

.authorwrap .author {
   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-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
}

.author .image {
   display: block;
   overflow: hidden;
   width: 160px;
   height: 160px;
   min-width: 160px;
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
   border-radius: 10px;
   margin: auto;
   border: 6px var(--white-mode) solid
}

.author .image img {
   -o-object-fit: cover;
   object-fit: cover;
   -o-object-position: top;
   object-position: top;
   display: block;
   width: 100%;
   height: 100%
}

.author .content {
   display: block;
   margin: auto auto auto 20px
}

.author .content h3 {
   margin: 0;
   letter-spacing: 1.4px;
   font-size: 20px
}

.author .content .desc {
   margin: 10px 0;
   line-height: 1.2;
   font-size: 16px;
   text-align: justify
}

.author .content .btn {
   padding: 8px 20px
}

.wrappercomment {
   background: var(--white);
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
   border-radius: 10px;
   padding: 10px;
   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
}

.wrappercomment .privacy {
   padding: 10px;
   -webkit-border-radius: 6px;
   -moz-border-radius: 6px;
   border-radius: 6px;
   border: 1px solid var(--main);
   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
}

.wrappercomment .privacy li {
   padding: 2px 0;
   letter-spacing: .3px;
   color: var(--dark)
}

.countdown {
   background: #1a936f
}

.wrappercomment .privacy .btn {
   background: var(--main);
   color: var(--white-mode);
   -webkit-border-radius: 6px;
   -moz-border-radius: 6px;
   border-radius: 6px;
   margin: auto;
   margin-bottom: 14px
}

.wrappercomment .commentinput {
   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
}

.wrappercomment .commentinput span.limiter {
   text-align: right;
   margin: 10px 0 0;
   color: var(--dark-mode)
}

.wrappercomment .commentinput textarea {
   width: -webkit-calc(100% - 10px) !important;
   width: -moz-calc(100% - 10px) !important;
   width: calc(100% - 10px) !important;
   height: 160px;
   min-height: 160px;
   max-height: 320px;
   margin: auto !important;
   display: block;
   border: 0;
   padding: 10px 5px;
   color: var(--dark-mode);
   background: var(--white) no-repeat;
   background-image: -webkit-gradient(linear, left top, left bottom, from(var(--main)), to(var(--main))), -webkit-gradient(linear, left top, left bottom, from(silver), to(silver));
   background-image: -webkit-linear-gradient(top, var(--main), var(--main)), -webkit-linear-gradient(top, silver, silver);
   background-image: -moz-linear-gradient(top, var(--main), var(--main)), -moz-linear-gradient(top, silver, silver);
   background-image: -o-linear-gradient(top, var(--main), var(--main)), -o-linear-gradient(top, silver, silver);
   background-image: linear-gradient(to bottom, var(--main), var(--main)), linear-gradient(to bottom, silver, silver);
   -webkit-background-size: 0 3px, 100% 1.5px;
   -moz-background-size: 0 3px, 100% 1.5px;
   -o-background-size: 0 3px, 100% 1.5px;
   background-size: 0 3px, 100% 1.5px;
   background-position: 50% 100%, 50% 100%;
   -webkit-transition: -webkit-background-size .3s cubic-bezier(.64, .09, .08, 1);
   transition: -webkit-background-size .3s cubic-bezier(.64, .09, .08, 1);
   -o-transition: -o-background-size .3s cubic-bezier(.64, .09, .08, 1);
   -moz-transition: background-size .3s cubic-bezier(.64, .09, .08, 1), -moz-background-size .3s cubic-bezier(.64, .09, .08, 1);
   transition: background-size .3s cubic-bezier(.64, .09, .08, 1);
   transition: background-size .3s cubic-bezier(.64, .09, .08, 1), -webkit-background-size .3s cubic-bezier(.64, .09, .08, 1), -moz-background-size .3s cubic-bezier(.64, .09, .08, 1), -o-background-size .3s cubic-bezier(.64, .09, .08, 1)
}

.wrappercomment .commentinput textarea:focus {
   -webkit-background-size: 100% 3px, 100% 1.5px;
   -moz-background-size: 100% 3px, 100% 1.5px;
   -o-background-size: 100% 3px, 100% 1.5px;
   background-size: 100% 3px, 100% 1.5px;
   outline: 0
}

.wrappercomment .commentinput .btn.submit {
   margin: 0 auto 12px
}

.wrappercomment .alert {
   margin: 10px auto;
   display: block;
   text-align: center
}

.wrappercomment .pesan {
   display: block;
   text-align: center
}

.wrappercomment .button-group {
   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;
   -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
}

.wrappercomment .button-group .btn {
   margin: 10px 4px
}

.wrappercomment .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);
   margin: 14px 6px
}

.wrappercomment .spinner.block {
   display: block
}

@-webkit-keyframes rotation {
   0% {
      -webkit-transform: rotate(0);
      transform: rotate(0)
   }

   100% {
      -webkit-transform: rotate(270deg);
      transform: rotate(270deg)
   }
}

@-moz-keyframes rotation {
   0% {
      -webkit-transform: rotate(0);
      -moz-transform: rotate(0);
      transform: rotate(0)
   }

   100% {
      -webkit-transform: rotate(270deg);
      -moz-transform: rotate(270deg);
      transform: rotate(270deg)
   }
}

@-o-keyframes rotation {
   0% {
      -webkit-transform: rotate(0);
      -o-transform: rotate(0);
      transform: rotate(0)
   }

   100% {
      -webkit-transform: rotate(270deg);
      -o-transform: rotate(270deg);
      transform: rotate(270deg)
   }
}

@keyframes rotation {
   0% {
      -webkit-transform: rotate(0);
      -moz-transform: rotate(0);
      -o-transform: rotate(0);
      transform: rotate(0)
   }

   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%
   }
}

.wrappercomment .btn {
   padding: 8px 24px;
   margin: 14px auto
}

.wrappercomment .btn.reply {
   -webkit-border-radius: 6px;
   -moz-border-radius: 6px;
   border-radius: 6px;
   padding: 6px 20px;
   font-size: 14px;
   border: 2px solid var(--main)
}

.wrappercomment .btn.reply:not(:first-child) {
   margin-left: 10px
}

.wrappercomment .btn.reply i {
   margin-right: 5px
}

.commentku .commenthead {
   border: 1px solid var(--main);
   -webkit-border-radius: 6px;
   -moz-border-radius: 6px;
   border-radius: 6px;
   padding: 10px;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box
}

.comment {
   margin: 10px 0
}

.comment>.comment {
   margin: 10px 0 10px 40px
}

.comment .commentwrap {
   display: -webkit-box;
   display: -webkit-flex;
   display: -moz-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-pack: end;
   -webkit-justify-content: end;
   -moz-box-pack: end;
   -ms-flex-pack: end;
   justify-content: end;
   -webkit-box-align: end;
   -webkit-align-items: end;
   -moz-box-align: end;
   -ms-flex-align: end;
   align-items: end
}

.comment .kanan .image {
   width: 75px;
   height: 75px;
   overflow: hidden;
   display: block;
   margin: 0 10px;
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
   border-radius: 10px
}

.comment .kanan .image img {
   -o-object-fit: cover;
   object-fit: cover;
   -o-object-position: top;
   object-position: top;
   display: block;
   width: 100%;
   height: 100%;
   -webkit-transition: -webkit-transform .5s ease;
   transition: -webkit-transform .5s ease;
   -o-transition: -o-transform .5s ease;
   -moz-transition: transform .5s ease, -moz-transform .5s ease;
   transition: transform .5s ease;
   transition: transform .5s ease, -webkit-transform .5s ease, -moz-transform .5s ease, -o-transform .5s ease
}

.comment .kiri {
   margin-left: 10px;
   width: 100%
}

.comment .kiri h3 {
   letter-spacing: .75px;
   font-weight: 700;
   font-size: 18px;
   margin: 4px 0;
   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
}

.comment .kiri h3 span.btn-anim {
   font-size: 12px;
   padding: 6px 10px;
   background: var(--main);
   -webkit-border-radius: 6px;
   -moz-border-radius: 6px;
   border-radius: 6px;
   color: var(--white-mode);
   margin-left: 10px
}

.comment .kiri .date {
   letter-spacing: .75px;
   font-size: 14px;
   color: var(--dark-mode)
}

body.darkmode .comment .content {
   background: #4e4d4d;
   color: var(--white-mode)
}

body.darkmode .comment .btn {
   background: #4e4d4d
}

.comment .content {
   margin: 10px 0 0;
   background: var(--white);
   padding: 12px 14px;
   -webkit-border-radius: 6px;
   -moz-border-radius: 6px;
   border-radius: 6px;
   quotes: "\201c" "\201d";
   -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, .16), 0 2px 4px rgba(0, 0, 0, .23);
   -moz-box-shadow: 0 2px 4px rgba(0, 0, 0, .16), 0 2px 4px rgba(0, 0, 0, .23);
   box-shadow: 0 2px 4px rgba(0, 0, 0, .16), 0 2px 4px rgba(0, 0, 0, .23)
}

.comment .content::before {
   content: open-quote
}

.comment .content::after {
   content: close-quote
}

.sidebar {
   -webkit-column-break-inside: avoid;
   -moz-column-break-inside: avoid;
   break-inside: avoid
}

.sidebar:first-child {
   margin: 0 auto 20px
}

.sidebar:not(:first-child) {
   margin: 15px auto 25px
}

.sidebar h2 {
   margin: 10px 0 20px
}

.sidebar.error,
.sidebar.ss {
   text-align: center;
   padding: 20px 14px 35px;
   background-color: var(--white);
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   border-radius: 5px;
   width: 320px;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box
}

.sidebar.nowrap {
   text-align: center;
   max-width: 320px
}

.sidebar.nowrap h2 {
   border-left: 4px var(--main) solid;
   display: inline-block;
   padding-left: 10px
}

.sidebar .labelwrap {
   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
}

.sidebar .labelwrap .label {
   padding: 8px 14px;
   margin: 4px;
   display: inline-block;
   overflow: hidden
}

.sidebar .labelwrap.counter .label {
   padding: 8px
}

.sidebar .labelwrap.counter .label .counter {
   background-color: var(--main);
   color: var(--white-mode);
   -webkit-border-radius: 100px;
   -moz-border-radius: 100px;
   border-radius: 100px;
   padding: 4px 10px;
   vertical-align: middle;
   font-size: 12px
}

.sidebar .labelwrap.counter .label .text {
   margin: 0 6px 0 3px;
   vertical-align: middle
}

.sidebar .wrappost {
   margin: auto
}

.sidebar .wrappost .post {
   display: inline-block;
   margin: 10px auto 0;
   height: 180px
}

.sidebar .wrappost .post:first-child {
   margin: 0 auto
}

.sidebar .wrappost .post:hover .image img {
   -webkit-transform: scale(1.2);
   -moz-transform: scale(1.2);
   -ms-transform: scale(1.2);
   -o-transform: scale(1.2);
   transform: scale(1.2)
}

.sidebar .wrappost .image {
   width: 280px;
   height: 180px;
   overflow: hidden;
   display: block;
   margin: auto;
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
   border-radius: 10px
}

.sidebar .wrappost .image img {
   -o-object-fit: cover;
   object-fit: cover;
   -o-object-position: top;
   object-position: top;
   display: block;
   width: 100%;
   height: 100%;
   -webkit-transition: -webkit-transform .5s ease;
   transition: -webkit-transform .5s ease;
   -o-transition: -o-transform .5s ease;
   -moz-transition: transform .5s ease, -moz-transform .5s ease;
   transition: transform .5s ease;
   transition: transform .5s ease, -webkit-transform .5s ease, -moz-transform .5s ease, -o-transform .5s ease
}

.sidebar .wrappost .box_desc {
   padding: 8px;
   text-align: center;
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
   border-radius: 10px;
   background: var(--white);
   position: relative;
   display: block;
   max-width: 250px;
   width: 100%;
   margin: -80px auto;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box
}

.sidebar .wrappost .box_desc .title {
   margin: auto;
   color: var(--dark-mode);
   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: 50px;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   border-radius: 5px
}

.sidebar .wrappost .box_desc .title h3 {
   margin: auto;
   font-size: 16px;
   letter-spacing: .5px
}

.sidebar .wrappost .box_desc span {
   margin: auto
}

.sidebar .styledua .post {
   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;
   height: 120px
}

.sidebar .styledua .post:nth-child(even) {
   -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
}

.sidebar .styledua .image {
   width: 260px;
   height: 110px
}

.sidebar .styledua .box_desc {
   margin: auto;
   -webkit-border-radius: 0 10px 10px 0;
   -moz-border-radius: 0 10px 10px 0;
   border-radius: 0 10px 10px 0;
   padding: 8px 8px 8px 0
}

.sidebar .styledua .box_desc .title {
   text-align: left;
   height: 60px;
   padding-left: 10px;
   -webkit-border-radius: 0 10px 10px 0;
   -moz-border-radius: 0 10px 10px 0;
   border-radius: 0 10px 10px 0
}

.sidebar .styledua .post:nth-child(even) .box_desc {
   -webkit-border-radius: 10px 0 0 10px;
   -moz-border-radius: 10px 0 0 10px;
   border-radius: 10px 0 0 10px;
   padding: 8px 0 8px 8px
}

.sidebar .styledua .post:nth-child(even) .box_desc .title {
   text-align: right;
   padding-right: 10px;
   -webkit-border-radius: 10px 0 0 10px;
   -moz-border-radius: 10px 0 0 10px;
   border-radius: 10px 0 0 10px
}

.sidebar .wrappost .wraptiga {
   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
}

.sidebar .wrappost .wraptiga .heading,
.sidebar .wrappost .wraptiga .number {
   background: var(--white);
   color: var(--dark-mode);
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   border-radius: 5px;
   font-weight: 600
}

.sidebar .wrappost .wraptiga.kadarluarsa .heading,
.sidebar .wrappost .wraptiga.kadarluarsa .number {
   background: var(--white-dark);
   color: var(--dark-mode);
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   border-radius: 5px;
   font-weight: 600
}

.sidebar .wrappost .wraptiga .number {
   padding: 10px 14px;
   font-size: 18px
}

.sidebar .wrappost .wraptiga .heading {
   padding: 10px 14px;
   font-size: 16px;
   letter-spacing: 1.3px;
   line-height: 1.3;
   margin-left: 10px;
   text-align: left
}

.wraptiga .heading .kadar {
   font-size: 10px
}

.sidebar .wrappost .wraptiga.agenda {
   margin: 3px 0
}

.sidebar .wrappost .wraptiga .time {
   font-size: 12px;
   margin: 8px auto 4px;
   padding-top: 8px;
   border-top: 1px solid var(--main)
}

@media only screen and (max-width: 850px) {
   .navtop ul {
      text-align: center;
      display: block;
      float: none
   }
}

@media only screen and (max-width: 890px) {
   .content .bagikan {
      -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
   }

   section.content main {
      width: 100%
   }

   section.content aside {
      margin: 30px 0 0;
      -webkit-column-count: 2;
      -moz-column-count: 2;
      column-count: 2;
      -webkit-column-gap: 20px;
      -moz-column-gap: 20px;
      column-gap: 20px;
      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 .content,
   .bagidua .image {
      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: 540px) {
   .comment>.comment {
      margin: 10px 0 10px 24px
   }

   .comment .kiri {
      margin-left: 0
   }

   .comment .commentwrap {
      -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
   }

   .wrappercomment .btn.reply .text {
      display: none
   }

   .wrappercomment .btn.reply i {
      margin: 0
   }
}

@media only screen and (max-width: 375px) {
   section.content {
      margin: -160px auto 60px
   }

   .breadcrumb ul {
      -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;
      text-align: center
   }

   .breadcrumb ul li:nth-child(even) {
      display: none
   }

   .breadcrumb ul li:not(:last-child) {
      border-bottom: 1px #afafaf solid
   }

   .authorwrap .author {
      -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;
      text-align: center
   }

   .author .content {
      margin: 20px auto 0
   }

   .author .content .desc {
      text-align: center
   }

   .sidebar.error,
   .sidebar.ss {
      width: 100%
   }
}

article * {
   overflow-wrap: break-word;
   word-wrap: break-word;
   -webkit-hyphens: auto;
   -moz-hyphens: auto;
   -ms-hyphens: auto;
   hyphens: auto
}

article p {
   margin: 10px 0;
   text-align: justify;
   line-height: 1.5
}

article p.paragraf {
   text-indent: 3rem
}

article p:first-child {
   margin-top: 0
}

article p:last-child {
   margin-bottom: 0
}

article .iframe_responsive:not(:first-of-type),
article .maps_responsive:not(:first-of-type),
article .youtube_responsive:not(:first-of-type) {
   margin: 20px auto
}

article .iframe_responsive,
article .youtube_responsive {
   float: none;
   clear: both;
   width: 100%;
   position: relative;
   padding-bottom: 56.25%;
   padding-top: 25px;
   height: 0
}

article .iframe_responsive iframe,
article .youtube_responsive iframe {
   left: 0;
   top: 0;
   height: 100%;
   width: 100%;
   position: absolute
}

article .iframe_responsive.dokumen,
article .iframe_responsive.website {
   height: 30vh
}

article .maps_responsive {
   overflow: hidden;
   padding-bottom: 56.25%;
   position: relative;
   height: 0
}

article .maps_responsive iframe {
   left: 0;
   top: 0;
   height: 100%;
   width: 100%;
   position: absolute
}

article p a:not(.btn) {
   text-decoration: underline;
   font-weight: 700;
   letter-spacing: .5px;
   color: var(--main-mode)
}

article p .group {
   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
}

article p .group.image {
   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;
   margin: 10px auto
}

article p .group.caption a {
   -webkit-box-ordinal-group: 9;
   -webkit-order: 8px var(--white-mode) solid;
   -moz-box-ordinal-group: 9;
   -ms-flex-order: 8px var(--white-mode) solid;
   order: 8px var(--white-mode) solid;
   text-align: center;
   -webkit-box-shadow: 2px 4px 16px rgba(0, 0, 0, .15);
   -moz-box-shadow: 2px 4px 16px rgba(0, 0, 0, .15);
   box-shadow: 2px 4px 16px rgba(0, 0, 0, .15)
}

article p .group.caption figcaption {
   margin: 0 auto 8px
}

article p .group.image a {
   margin: auto;
   text-decoration: none
}

article p .group.image a.kecil {
   width: 35%
}

article p .group.image a.sedang {
   width: 60%
}

article p .group.image a.besar {
   width: 100%
}

article p .group.image img {
   width: 100%;
   height: auto
}

article p a.btn {
   text-indent: 0;
   -webkit-box-align: center;
   -webkit-align-items: center;
   -moz-box-align: center;
   -ms-flex-align: center;
   align-items: center;
   margin: 5px auto
}

article p a.btn.kecil {
   font-size: 12px;
   padding: 2px 10px
}

article p a.btn.besar {
   font-size: 20px;
   padding: 5px 20px
}

article p .btn.icon_kanan {
   -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
}

article p .btn.icon_kiri {
   -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
}

article p .btn.icon_kiri i.fa {
   margin: 0 6px 0 0
}

article p .btn.icon_kanan i.fa {
   margin: 0 0 0 6px
}

article p .quotewrap {
   margin: 30px auto 10px;
   max-width: 750px;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   border-radius: 4px
}

article p blockquote {
   font-size: 18px;
   margin: auto;
   font-style: italic;
   color: var(--dark);
   padding: 20px 30px 30px 75px;
   border-left: 6px solid var(--main);
   line-height: 1.5;
   position: relative;
   background: var(--white)
}

article p blockquote::before {
   content: '\275D';
   color: var(--main);
   font-size: 60px;
   position: absolute;
   left: 15px;
   top: 0
}

article p blockquote ::after {
   content: ''
}

article p blockquote span.cite {
   font-style: normal;
   font-size: small
}

article p blockquote span.cite cite {
   font-style: italic;
   font-weight: 600
}

article p blockquote span.cite::before {
   content: '\2014\2002'
}

body.darkmode .blocker {
   background: rgba(255, 255, 255, .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 .3s ease-in-out;
   -o-transition: all .3s ease-in-out;
   -moz-transition: all .3s ease-in-out;
   transition: all .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 .5s cubic-bezier(.175, .885, .32, 1.275), -webkit-transform .5s cubic-bezier(.075, .82, .165, 1);
      transition: top .5s cubic-bezier(.175, .885, .32, 1.275), -webkit-transform .5s cubic-bezier(.075, .82, .165, 1);
      -o-transition: top .5s cubic-bezier(.175, .885, .32, 1.275), -o-transform .5s cubic-bezier(.075, .82, .165, 1);
      -moz-transition: transform .5s cubic-bezier(.075, .82, .165, 1), top .5s cubic-bezier(.175, .885, .32, 1.275), -moz-transform .5s cubic-bezier(.075, .82, .165, 1);
      transition: transform .5s cubic-bezier(.075, .82, .165, 1), top .5s cubic-bezier(.175, .885, .32, 1.275);
      transition: transform .5s cubic-bezier(.075, .82, .165, 1), top .5s cubic-bezier(.175, .885, .32, 1.275), -webkit-transform .5s cubic-bezier(.075, .82, .165, 1), -moz-transform .5s cubic-bezier(.075, .82, .165, 1), -o-transform .5s cubic-bezier(.075, .82, .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 .bar,
   .mainav .menu-toggle {
      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 {
  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: 2px 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%;
   border: solid 2px var(--main);
   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 a,
footer .copyright span {
   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 .fab_target,
.wrapfab.is-active .fabutton {
   left: -130px;
   -webkit-transition: left .5s cubic-bezier(.215, .61, .355, 1);
   -o-transition: left .5s cubic-bezier(.215, .61, .355, 1);
   -moz-transition: left .5s cubic-bezier(.215, .61, .355, 1);
   transition: left .5s cubic-bezier(.215, .61, .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 .5s cubic-bezier(.68, -.55, .265, 1.55);
   -o-transition: left .5s cubic-bezier(.68, -.55, .265, 1.55);
   -moz-transition: left .5s cubic-bezier(.68, -.55, .265, 1.55);
   transition: left .5s cubic-bezier(.68, -.55, .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(0);
   -moz-transform: translateX(0) translateY(-50%) rotate(0);
   -ms-transform: translateX(0) translateY(-50%) rotate(0);
   -o-transform: translateX(0) translateY(-50%) rotate(0);
   transform: translateX(0) translateY(-50%) rotate(0);
   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 .3s ease;
   -o-transition: all .3s ease;
   -moz-transition: all .3s ease;
   transition: all .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: .4s;
   -moz-animation-delay: .4s;
   -o-animation-delay: .4s;
   animation-delay: .4s
}

.dots_3 {
   right: 12px;
   -webkit-animation-delay: .8s;
   -moz-animation-delay: .8s;
   -o-animation-delay: .8s;
   animation-delay: .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(0);
   -moz-transform: translateX(-50%) translateY(-50%) rotate(0);
   -ms-transform: translateX(-50%) translateY(-50%) rotate(0);
   -o-transform: translateX(-50%) translateY(-50%) rotate(0);
   transform: translateX(-50%) translateY(-50%) rotate(0)
}

.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 .3s ease;
   -o-transition: all .3s ease;
   -moz-transition: all .3s ease;
   transition: all .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: .6rem;
   top: -.2rem
}

.fab_target .action_3 {
   right: -.5rem;
   top: 3rem
}

.fab_target .action_4 {
   right: .6rem;
   bottom: -.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, .16), 0 3px 6px rgba(0, 0, 0, .23);
   -moz-box-shadow: 0 3px 6px rgba(0, 0, 0, .16), 0 3px 6px rgba(0, 0, 0, .23);
   box-shadow: 0 3px 6px rgba(0, 0, 0, .16), 0 3px 6px rgba(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 .35s cubic-bezier(.31, -.105, .43, 1.59);
   -o-transition: all .35s cubic-bezier(.31, -.105, .43, 1.59);
   -moz-transition: all .35s cubic-bezier(.31, -.105, .43, 1.59);
   transition: all .35s cubic-bezier(.31, -.105, .43, 1.59)
}

.social-buttons:not(.share) .social-button .fa {
   font-size: 24px;
   vertical-align: middle;
   -webkit-transform: scale(.8);
   -moz-transform: scale(.8);
   -ms-transform: scale(.8);
   -o-transform: scale(.8);
   transform: scale(.8);
   -webkit-transition: all .35s cubic-bezier(.31, -.105, .43, 1.59);
   -o-transition: all .35s cubic-bezier(.31, -.105, .43, 1.59);
   -moz-transition: all .35s cubic-bezier(.31, -.105, .43, 1.59);
   transition: all .35s cubic-bezier(.31, -.105, .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(.8);
   -moz-transform: scale(.8);
   -ms-transform: scale(.8);
   -o-transform: scale(.8);
   transform: scale(.8);
   -webkit-transition: all .35s cubic-bezier(.31, -.105, .43, 1.59);
   -o-transition: all .35s cubic-bezier(.31, -.105, .43, 1.59);
   -moz-transition: all .35s cubic-bezier(.31, -.105, .43, 1.59);
   transition: all .35s cubic-bezier(.31, -.105, .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(.9);
   -moz-transform: scale(.9);
   -ms-transform: scale(.9);
   -o-transform: scale(.9);
   transform: scale(.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 .5s cubic-bezier(.68, -.55, .265, 1.55);
   transition: -webkit-transform .5s cubic-bezier(.68, -.55, .265, 1.55);
   -o-transition: -o-transform .5s cubic-bezier(.68, -.55, .265, 1.55);
   -moz-transition: transform .5s cubic-bezier(.68, -.55, .265, 1.55), -moz-transform .5s cubic-bezier(.68, -.55, .265, 1.55);
   transition: transform .5s cubic-bezier(.68, -.55, .265, 1.55);
   transition: transform .5s cubic-bezier(.68, -.55, .265, 1.55), -webkit-transform .5s cubic-bezier(.68, -.55, .265, 1.55), -moz-transform .5s cubic-bezier(.68, -.55, .265, 1.55), -o-transform .5s cubic-bezier(.68, -.55, .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 .5s cubic-bezier(.075, .82, .165, 1);
   transition: -webkit-transform .5s cubic-bezier(.075, .82, .165, 1);
   -o-transition: -o-transform .5s cubic-bezier(.075, .82, .165, 1);
   -moz-transition: transform .5s cubic-bezier(.075, .82, .165, 1), -moz-transform .5s cubic-bezier(.075, .82, .165, 1);
   transition: transform .5s cubic-bezier(.075, .82, .165, 1);
   transition: transform .5s cubic-bezier(.075, .82, .165, 1), -webkit-transform .5s cubic-bezier(.075, .82, .165, 1), -moz-transform .5s cubic-bezier(.075, .82, .165, 1), -o-transform .5s cubic-bezier(.075, .82, .165, 1)
}

@media only screen and (max-width: 790px) {
   .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, .75);
   text-align: center
}

.blocker:before {
   content: "";
   display: inline-block;
   height: 100%;
   vertical-align: middle;
   margin-right: -.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: -.9s;
   -moz-animation-delay: -.9s;
   -o-animation-delay: -.9s;
   animation-delay: -.9s
}

@-webkit-keyframes sk-stretchdelay {

   0%,
   100%,
   40% {
      -webkit-transform: scaleY(.5)
   }

   20% {
      -webkit-transform: scaleY(1)
   }
}

@-moz-keyframes sk-stretchdelay {

   0%,
   100%,
   40% {
      -moz-transform: scaleY(.5);
      transform: scaleY(.5);
      -webkit-transform: scaleY(.5)
   }

   20% {
      -moz-transform: scaleY(1);
      transform: scaleY(1);
      -webkit-transform: scaleY(1)
   }
}

@-o-keyframes sk-stretchdelay {

   0%,
   100%,
   40% {
      -o-transform: scaleY(.5);
      transform: scaleY(.5);
      -webkit-transform: scaleY(.5)
   }

   20% {
      -o-transform: scaleY(1);
      transform: scaleY(1);
      -webkit-transform: scaleY(1)
   }
}

@keyframes sk-stretchdelay {

   0%,
   100%,
   40% {
      -moz-transform: scaleY(.5);
      -o-transform: scaleY(.5);
      transform: scaleY(.5);
      -webkit-transform: scaleY(.5)
   }

   20% {
      -moz-transform: scaleY(1);
      -o-transform: scaleY(1);
      transform: scaleY(1);
      -webkit-transform: scaleY(1)
   }
}

;

main article img {
   width: 100% !important;
   height: auto !important
}