/*
Theme Name: Zakra Child
Theme URI: https://zakratheme.com/
Template: zakra
Author: ThemeGrill
Author URI: https://themegrill.com
Description: Zakra is a powerful and versatile multipurpose theme that makes it easy to create beautiful and professional websites. With over free 40 pre-designed starter demo sites to choose from, you can quickly build a unique and functional site that fits your specific needs. Whether you're launching a blog, news site, e-commerce store, showcasing your portfolio, building a business site, LMS, or niche-specific site (such as a cafe, spa, charity, yoga studio, wedding venue, dental practice, photography, restaurant, or educational institution), Zakra has everything you need to succeed. The theme integrates seamlessly with popular page builders like Elementor, Brizy, BlockArt, and the Gutenberg editor, giving you complete freedom to create any layout you can imagine. Importantly, Zakra is optimized for speed, features a mobile-first responsive design, is built with block-based technology, and is optimized for search engines. It is also compatible with a wide range of popular WordPress plugins, allowing you to extend its functionality as needed. Build your next project with Zakra today and see the difference for yourself. Check out all the starter sites at https://zakratheme.com/demos!
Tags: one-column,two-columns,left-sidebar,right-sidebar,custom-background,custom-colors,custom-logo,featured-images,footer-widgets,full-width-template,theme-options,threaded-comments,translation-ready,blog,news,e-commerce,rtl-language-support
Version: 4.2.0.1772642296
Updated: 2026-03-04 12:38:16

*/
#page {
border-top:1px solid #ececec;
border-right:1px solid #ddd;
border-left:1px solid #ddd;
}
.zak-row .zak-header-main-row {
border-bottom:1px solid #bbb;	
	text-shadow: 1px 1px #fff;
text-shadow: 1px 1px #fff;
background: linear-gradient(90deg, #fff 1%,transparent 3%,transparent 80%,#fff 82%),
linear-gradient(0deg , #fff 1%,transparent 3%,transparent 80%,#fff 82%);
background-color: #ccc;
background-size: 3px 3px;
}
.zak-entry-summary, .entry-content {
text-shadow: 1px 1px #fff;
}
#zak-content {
	border-top:1px solid #fff;
background: linear-gradient(90deg, #fff 1%,transparent 3%,transparent 80%,#fff 82%),
linear-gradient(0deg , #fff 1%,transparent 3%,transparent 80%,#fff 82%);
background-color: #ccc;
background-size: 2.5px 2.5px;
}
.zak-page-header {
display:none
}
#zak-masthead {
   -webkit-transition-delay: 0s;
   -moz-transition-delay: 0s;
   -o-transition-delay: 0s;
   -ms-transition-delay: 0s;
   transition-delay: 0s;
   -webkit-animation: Bouncefek 0.9s linear;
   -moz-animation: Bouncefek 0.9s linear;
   -ms-animation: Bouncefek 0.9s linear;
    animation: Bouncefek 0.9s linear;
}
.site-title {
   -webkit-transition-delay: 0s;
   -moz-transition-delay: 0s;
   -o-transition-delay: 0s;
   -ms-transition-delay: 0s;
   transition-delay: 0s;
   -webkit-animation: Bouncefek 1.7s linear;
   -moz-animation: Bouncefek 1.7s linear;
   -ms-animation: Bouncefek 1.7s linear;
    animation: Bouncefek 1.7s linear;
}
.site-title a {
font-size:20px;
}
.site-description {
   -webkit-transition-delay: 0s;
   -moz-transition-delay: 0s;
   -o-transition-delay: 0s;
   -ms-transition-delay: 0s;
   transition-delay: 0s;
   -webkit-animation: Bouncefek 2.7s linear;
   -moz-animation: Bouncefek 2.7s linear;
   -ms-animation: Bouncefek 2.7s linear;
    animation: Bouncefek 2.7s linear;
}
/*--- Animasi --*/
@keyframes Bouncefek {
	0% { transform: translateY(-205px);}
	40% { transform: translateY(-100px);}
	65% { transform: translateY(-52px);}
	82% { transform: translateY(-25px);}
	92% { transform: translateY(-12px);}
	55%, 75%, 87%, 97%, 100% { transform: translateY(0px);}
}
@-moz-keyframes Bouncefek {
	0% { -moz-transform: translateY(-205px);}
	40% { -moz-transform: translateY(-100px);}
	65% { -moz-transform: translateY(-52px);}
	82% { -moz-transform: translateY(-25px);}
	92% { -moz-transform: translateY(-12px);}
	55%, 75%, 87%, 97%, 100% { -moz-transform: translateY(0px);}
}
@-webkit-keyframes Bouncefek {
	0% { -webkit-transform: translateY(-205px);}
	40% { -webkit-transform: translateY(-100px);}
	65% { -webkit-transform: translateY(-52px);}
	82% { -webkit-transform: translateY(-25px);}
	92% { -webkit-transform: translateY(-12px);}
	55%, 75%, 87%, 97%, 100% { -webkit-transform: translateY(0px);}
}
/* kotak-pesan2
----------------------------------------------- */
#kotak-pesan2 {
    position: absolute;
    top: -1000px;
    margin: 0px 0px 0px 0px;
    width: auto;
    height: auto;
    background-color: #174A87;
    border: 10px solid #0A2E58;
    color: white;
    padding: 0;
    -webkit-box-shadow: 0 0 2px 1px black,0 0 10px black;
    -moz-box-shadow: 0 0 2px 1px black,0 0 10px black;
    box-shadow: 0 0 2px 1px black,0 0 10px black;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    z-index: 1000;
}
#kotak-pesan2 *:focus {
    outline: none;
}
#kotak-pesan2 .isi-dialog2 {
    height: auto;
    margin: 15px;
    font: normal 12px Arial,Sans-Serif;
}
#kotak-pesan2 .close2 {
    position: absolute;
    top: -15px;
    right: -15px;
    background: #174A87;
    font: bold 16px Arial,Sans-Serif;
    text-decoration: none;
    line-height: 22px;
    width: 22px;
    text-align: center;
    color: #fff;
    border: 4px solid #0A2E58;
    -webkit-box-shadow: 0 0 2px 1px black,0 0 10px black;
    -moz-box-shadow: 0 0 2px 1px black,0 0 10px black;
    box-shadow: 0 0 2px 1px black,0 0 10px black;
    -webkit-border-radius: 22px;
    -moz-border-radius: 22px;
    border-radius: 22px;
    cursor: pointer;
}
#kotak-pesan2 .close2:hover {
    color: yellow;
}
#dialog-overlay2 {
    position: fixed !important;
    position: absolute;
    z-index: 999;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    background-color: #111;
    display: none;
}
.content-left2 {
    width: 150px;
    height: auto;
    padding: 2px;
    margin-bottom: 2px;
    text-align: center;
  border:1px solid #144F69;
  background-color:#067BAF;
  background-image:-webkit-radial-gradient(top,#2493C4,#086A95);
  background-image:-moz-radial-gradient(top,#2493C4,#086A95);
  background-image:-ms-radial-gradient(top,#2493C4,#086A95);
  background-image:-o-radial-gradient(top,#2493C4,#086A95);
  background-image:radial-gradient(top,#2493C4,#086A95);
  -webkit-box-shadow:inset 0 0 0 1px #2493C4,0 1px 3px black;
  -moz-box-shadow:inset 0 0 0 1px #2493C4,0 1px 3px black;
  box-shadow:inset 0 0 0 1px #2493C4,0 1px 3px black;
  -webkit-border-radius:0px 0 0 0;
  -moz-border-radius:0px 0 0 0;
  border-radius:0px 0 0 0;
}
.content-right2 {
    width: 150px;
    height: auto;
    padding-top: 2px;
    padding-bottom: 2px;
    margin-top: 2px;
    text-align: center;
  border:1px solid #144F69;
  background-color:#067BAF;
  background-image:-webkit-radial-gradient(top,#2493C4,#086A95);
  background-image:-moz-radial-gradient(top,#2493C4,#086A95);
  background-image:-ms-radial-gradient(top,#2493C4,#086A95);
  background-image:-o-radial-gradient(top,#2493C4,#086A95);
  background-image:radial-gradient(top,#2493C4,#086A95);
  -webkit-box-shadow:inset 0 0 0 1px #2493C4,0 1px 3px black;
  -moz-box-shadow:inset 0 0 0 1px #2493C4,0 1px 3px black;
  box-shadow:inset 0 0 0 1px #2493C4,0 1px 3px black;
  -webkit-border-radius:0px 0 0 0;
  -moz-border-radius:0px 0 0 0;
  border-radius:0px 0 0 0;
}
/* kotak-pesan */
#kotak-pesan {
    position: absolute;
    top: -1000px;
    margin: 0px 0px 0px 0px;
    width: auto;
    height: auto;
    background-color: #174A87;
    border: 10px solid #0A2E58;
    color: white;
    padding: 0;
    -webkit-box-shadow: 0 0 2px 1px black,0 0 10px black;
    -moz-box-shadow: 0 0 2px 1px black,0 0 10px black;
    box-shadow: 0 0 2px 1px black,0 0 10px black;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    z-index: 1000;
}
#kotak-pesan *:focus {
    outline: none;
}
#kotak-pesan .isi-dialog {
    height: auto;
    margin: 15px;
    font: normal 12px Arial,Sans-Serif;
}
#kotak-pesan .close {
    position: absolute;
    top: -15px;
    right: -15px;
    background: #174A87;
    font: bold 16px Arial,Sans-Serif;
    text-decoration: none;
    line-height: 22px;
    width: 22px;
    text-align: center;
    color: #fff;
    border: 4px solid #0A2E58;
    -webkit-box-shadow: 0 0 2px 1px black,0 0 10px black;
    -moz-box-shadow: 0 0 2px 1px black,0 0 10px black;
    box-shadow: 0 0 2px 1px black,0 0 10px black;
    -webkit-border-radius: 22px;
    -moz-border-radius: 22px;
    border-radius: 22px;
    cursor: pointer;
}
#kotak-pesan .close:hover {
    color: yellow;
}
#dialog-overlay {
    position: fixed !important;
    position: absolute;
    z-index: 999;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    background-color: #111;
    display: none;
}
.content-left {
    width: 230px;
    height: auto;
    padding: 2px;
    margin-bottom: 2px;
    text-align: center;
  border:1px solid #144F69;
  background-color:#067BAF;
  background-image:-webkit-radial-gradient(top,#2493C4,#086A95);
  background-image:-moz-radial-gradient(top,#2493C4,#086A95);
  background-image:-ms-radial-gradient(top,#2493C4,#086A95);
  background-image:-o-radial-gradient(top,#2493C4,#086A95);
  background-image:radial-gradient(top,#2493C4,#086A95);
  -webkit-box-shadow:inset 0 0 0 1px #2493C4,0 1px 3px black;
  -moz-box-shadow:inset 0 0 0 1px #2493C4,0 1px 3px black;
  box-shadow:inset 0 0 0 1px #2493C4,0 1px 3px black;
  -webkit-border-radius:0px 0 0 0;
  -moz-border-radius:0px 0 0 0;
  border-radius:0px 0 0 0;
}
.content-right {
    width: 230px;
    height: auto;
    padding-top: 2px;
    padding-bottom: 2px;
    margin-top: 2px;
    text-align: center;
  border:1px solid #144F69;
  background-color:#067BAF;
  background-image:-webkit-radial-gradient(top,#2493C4,#086A95);
  background-image:-moz-radial-gradient(top,#2493C4,#086A95);
  background-image:-ms-radial-gradient(top,#2493C4,#086A95);
  background-image:-o-radial-gradient(top,#2493C4,#086A95);
  background-image:radial-gradient(top,#2493C4,#086A95);
  -webkit-box-shadow:inset 0 0 0 1px #2493C4,0 1px 3px black;
  -moz-box-shadow:inset 0 0 0 1px #2493C4,0 1px 3px black;
  box-shadow:inset 0 0 0 1px #2493C4,0 1px 3px black;
  -webkit-border-radius:0px 0 0 0;
  -moz-border-radius:0px 0 0 0;
  border-radius:0px 0 0 0;
}
/* Back to top */
#easy-top {
  background: rgba(0, 0, 0, 0.5);
  text-align: center;
  position: fixed;
  bottom: 15px;
  right: 15px;
  cursor: pointer;
  width: 38px;
  height: 38px;
  line-height: 38px;
  border-radius: 4px;
  padding: 4px;
  display: none;
  -webkit-transform: translateZ(0);
  transition: all .3s ease-out;
}
#easy-top:hover {
  background: rgba(0, 0, 0, 0.9);
}
#easy-top:before,
#easy-top:after {
  -webkit-backface-visibility: hidden;
}
#easy-top:before {
  content: '';
  height: 8px;
  width: 8px;
  display: block;
  border: 3px solid #fff;
  border-left-width: 0;
  border-bottom-width: 0;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  position: absolute;
  top: 15px;
  left: 15px;
}
#easy-top:after {
  content: '';
  height: 16px;
  width: 3px;
  display: block;
  background: #fff;
  position: absolute;
  top: 16px;
  left: 18px;
}
#easy-top:hover:after {
  border-color: transparent transparent rgba(0, 0, 0, 0.9) transparent;
}
.shared-files-main-elements {
text-shadow: 1px 1px #fff;
border:4px solid #eee;
border-radius:1px;
background: linear-gradient(90deg, #fff 1%,transparent 3%,transparent 80%,#fff 82%),
linear-gradient(0deg , #fff 1%,transparent 3%,transparent 80%,#fff 82%);
background-color: #ccc;
background-size: 3px 3px;
}
.blockart-heading {
text-shadow: 1px 1px #fff;
}