/*
Theme Name: Goblog Free
Theme URI: https://gothemeshop.com/theme-wordpress-goblog-free/
Author: Yuky Hendiawan
Author URI: https://hendky.com/
Description: Goblog Free is a WordPress theme with a clean design and fully responsive layout. Tailor-made for bloggers and personal web needs. This theme has many features to support your blogging needs, and there are customization controls. You can get it for free and download it in the official WordPress repository.
Version: 3.1.4
Requires at least: 5.0
Tested up to: 5.5
Requires PHP: 7.0
License: GNU General Public License v3 or later
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: goblog-free
Use it to make something cool, have fun, and share what you've learned with others.
Tags: two-columns, right-sidebar, custom-background, custom-logo, custom-header, custom-colors, custom-menu, featured-images, editor-style, blog, portfolio, footer-widgets, post-formats
*/
/* =========================================
============ TABLE OF CONTENTS: ============
* Normalize
* Font
* Accessibility
* Alignments
* Typography
* Form
* Formating
* Lists
* Tables
* Pagination Page
* Author Info
* Scroll Button Top
* Social Media Share
* Main Layout
* Grids Layout
* Breadcrumbs
* Widget Sidebar Default Style
* 404 File
* Archive File
* Author File
* Comments File
* Footer File
* Footer Widget Default File
* Footer Navigasi File
* Front Page File
* Header Navigasi Primary Default
* Header Navigasi Primary 1
* Index File
* Page File
* Search File
* Sidebar Blog Default File
* Single File 
========================================= */

/* =================== Normalize =================== */
* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: #fbfeff;
}

header,
section,
footer,
aside,
nav,
main,
article,
figure {
    display: block;
}

figure {
    margin: 1em 0;
}

hr {
    height: 0;
    overflow: visible;
}

pre {
    font-family: monospace, monospace;
    font-size: 1em;
}

a {
    text-decoration: none;
    color: #0639a9;
}

b,
strong {
    color: #454545;
    font-weight: 600;
}

code,
kbd,
samp {
    font-family: monospace, monospace;
    font-size: 1em;
}

dfn {
    font-style: italic;
}

mark {
    background-color: #eee;
    color: #222;
}

small {
    font-size: 80%;
}

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sub {
    bottom: -0.25em;
}

sup {
    top: -0.5em;
}

audio,
video {
    display: inline-block;
}

audio:not([controls]) {
    display: none;
    height: 0;
}

img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

svg:not(:root) {
    overflow: hidden;
}

button,
input,
optgroup,
select,
textarea {
    font-family: sans-serif;
    font-size: 100%;
    line-height: 1.15;
    margin: 0;
}

button,
input {
    overflow: visible;
}

button,
select {
    text-transform: none;
}

fieldset {
    border: 1px solid #bbb;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em;
}

legend {
    color: inherit;
    display: table;
    max-width: 100%;
    padding: 0;
    white-space: normal;
}

progress {
    display: inline-block;
    vertical-align: baseline;
}

textarea {
    overflow: auto;
}

details,
menu {
    display: block;
}

summary {
    display: list-item;
}

canvas {
    display: inline-block;
}

template {
    display: none;
}

[hidden] {
    display: none;
}

/* =================== Font =================== */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: local('Roboto'), url(../goblog-free/assets/roboto/Roboto-Regular.ttf) format('truetype');
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    src: local('Roboto'), url(../goblog-free/assets/roboto/Roboto-Medium.ttf) format('truetype');
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 900;
    src: local('Roboto'), url(../goblog-free/assets/roboto/Roboto-Bold.ttf) format('truetype');
    font-display: swap;
}

body {
    font-family: 'Roboto', sans-serif;
}

/* =================== Accessibility =================== */
.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    height: 1px;
    overflow: hidden;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
}

.screen-reader-text:focus {
    background-color: #f1f1f1;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    -webkit-box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
    clip: auto !important;
    color: #21759b;
    display: block;
    font-size: 14px;
    font-size: 0.875rem;
    font-weight: 700;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
    /* Above WP toolbar. */
}

a:focus {
    outline: thin dotted;
}

a:hover,
a:active {
    outline: 0;
}

/* Logo Navigasi */
.logo-nav a:focus {
    border: 2px dotted #111;
    outline: 2px dotted #fff;
}

.logo-nav a:hover,
.logo-nav a:active {
    border: 0;
    outline: 0;
}

/* Layout content-gambar */
main .box-content .content-gambar a:focus,
section .box-content .content-gambar a:focus {
    border: 2px dotted #111;
    outline: 2px dotted #fff;
}

main .box-content .content-gambar a:hover,
main .box-content .content-gambar a:active,
section .box-content .content-gambar a:hover,
section .box-content .content-gambar a:active {
    border: 0;
    outline: 0;
}

/* Widget search sidebar */
.sidebar-default .widget_search input[type="search"]:focus {
    border: 2px dotted #74fb1f;
    outline-offset: 0;
}

.sidebar-default .search-form .search-submit:focus {
    border: 2px dotted #74fb1f;
}

/* Widget search footer */
#footer .widget_search input[type="search"]:focus {
    border: 2px dotted #74fb1f;
    outline-offset: 0;
}

#footer .search-form .search-submit:focus {
    border: 2px dotted #74fb1f;
}

/* Sub menu */
nav #box-menu li.menu-item-has-children a:focus,
nav #box-menu li a:focus {
    border: 1px dotted #f1f1f1;
    outline: 1px dotted #333;
    outline-offset: 5px;
}

nav #box-menu li.menu-item-has-children a:hover,
nav #box-menu li.menu-item-has-children a:active,
nav #box-menu li a:hover,
nav #box-menu li a:active {
    border: 0;
    outline: 0;
    outline-offset: 0;
}

/* Button  */
button:focus {
    border: 1px dotted #f1f1f1;
    outline: 1px dotted #333;
    outline-offset: 5px;
}

/* Search full for mobile */
.box-search-full button {
    background: transparent;
}

.box-search-full input[type="search"]:focus {
    border: 1px dotted #f1f1f1;
    outline-offset: 0;
}

.box-search-full .search-submit:focus {
    border: 1px dotted #f1f1f1;
}

.box-search-full .search-form-close:focus {
    border: 1px dotted #f1f1f1;
    outline: 1px dotted #333;
    outline-offset: 5px;
    background: #6d604e;
}

/* =================== Alignments =================== */
.alignleft {
    display: inline;
    float: left;
    margin-right: 1.5em;
}

.alignright {
    display: inline;
    float: right;
    margin-left: 1.5em;
}

.aligncenter {
    clear: both;
    display: block;
    margin: 5px auto;
}

.wp-caption {
    max-width: 100%;
    color: #888;
    text-align: center;
}

.wp-caption.alignnone {
    margin: 5px 20px 20px 0;
}

.wp-caption.alignleft {
    margin: 5px 20px 20px 0;
}

.wp-caption.alignright {
    margin: 5px 0 20px 20px;
}

.wp-caption img {
    border: 0 none;
    height: auto;
    margin: 0;
    max-width: 98.5%;
    padding: 0;
    width: auto;
}

.wp-caption .wp-caption-text {
    font-size: 11px;
    line-height: 17px;
    margin: 0;
    padding: 0 4px 5px;
}

.size-auto,
.size-full,
.size-large,
.size-medium,
.size-thumbnail {
    max-width: 100%;
    height: auto;
}

/* =================== Typography =================== */
body,
button,
input,
select,
textarea {
    color: #333;
    font-size: 16px;
    word-wrap: break-word;
    line-height: 1.6;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    clear: both;
    line-height: 1.37;
    margin: 0 0 0.50em;
    padding: 0.7em 0 0;
    color: #3a444d;
    font-weight: 500;
}

h1:first-child,
h2:first-child,
h3:first-child,
h4:first-child,
h5:first-child,
h6:first-child {
    padding-top: 0;
}

h1 {
    font-size: 30px;
}

h2 {
    font-size: 26px;
}

h3 {
    font-size: 22px;
}

h4 {
    font-size: 19px;
    font-weight: 800;
}

h5 {
    font-size: 18px;
    text-transform: uppercase;
}

h6 {
    font-size: 17px;
    font-weight: 800;
}

p {
    margin: 0 0 1.3em;
    padding: 0;
    color: #656;
}

dfn,
cite,
em,
i {
    font-style: italic;
}

address {
    margin: 0 0 1.5em;
}

pre {
    border: 1px solid #d8d8d8;
    background: #f9f9f9;
    font-size: 15px;
    font-size: 0.9375rem;
    line-height: 1.6;
    margin-bottom: 1.6em;
    max-width: 100%;
    overflow: auto;
    padding: 1.6em;
}

code,
kbd,
tt,
var {
    font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono";
    font-size: 15px;
    font-size: 0.9375rem;
}

abbr,
acronym {
    cursor: help;
    border-bottom: 1px dotted #211112;
    text-decoration: none;
}

mark,
ins {
    background: #eee;
    text-decoration: none;
}

big {
    font-size: 125%;
}

blockquote {
    quotes: """";
    border-left: 5px solid #0671ef;
    margin: 0.82em 0;
    padding: 0.8em 2.2em;
    background: #f9f9f9;
    color: #666;
    font-size: 16px;
    line-height: 1.7;
    overflow: hidden;
}

blockquote p {
    margin: 0;
}

blockquote cite {
    display: block;
    font-style: normal;
    font-weight: 600;
    margin-top: 0.5em;
}

q {
    quotes: "“""”""‘""’";
}

blockquote:before,
blockquote:after {
    content: "";
}

/* =================== Form =================== */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {
    color: #222;
    border-color: #333;
}

input[type="radio"]:focus,
input[type="checkbox"]:focus {
    outline: thin dotted #333;
}

button:hover,
button:focus,
input[type="button"]:hover,
input[type="button"]:focus,
input[type="submit"]:hover,
input[type="submit"]:focus {
    background: #767676;
}

button.secondary:hover,
button.secondary:focus,
input[type="reset"]:hover,
input[type="reset"]:focus,
input[type="button"].secondary:hover,
input[type="button"].secondary:focus,
input[type="reset"].secondary:hover,
input[type="reset"].secondary:focus,
input[type="submit"].secondary:hover,
input[type="submit"].secondary:focus {
    background: #bbb;
}

label {
    color: #555;
    display: block;
    font-weight: 800;
    margin-bottom: 0.5em;
}

fieldset {
    margin-bottom: 1em;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
    color: #666;
    background: #fff;
    border: 1px solid #bbb;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    display: block;
    padding: 0.7em;
    width: 100%;
}

select {
    border: 1px solid #bbb;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    height: 2.5em;
    max-width: 100%;
    font-size: 15px;
}

input[type="radio"],
input[type="checkbox"] {
    margin-right: 0.5em;
}

input[type="radio"]+label,
input[type="checkbox"]+label {
    font-weight: 400;
}

button,
input[type="button"],
input[type="submit"] {
    background-color: #555;
    border: 0;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    -webkit-box-shadow: none;
    box-shadow: none;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-size: 14px;
    font-size: 0.875rem;
    font-weight: 800;
    line-height: 1;
    padding: 1em 2em;
    text-shadow: none;
    -webkit-transition: background 0.2s;
    transition: background 0.2s;
}

/* Placeholder text color */
::-webkit-input-placeholder {
    color: #669697;
    font-family: 'Roboto', sans-serif;
}

:-moz-placeholder {
    color: #669697;
    font-family: 'Roboto', sans-serif;
}

::-moz-placeholder {
    color: #669697;
    font-family: 'Roboto', sans-serif;
    opacity: 1;
}

:-ms-input-placeholder {
    color: #669697;
    font-family: 'Roboto', sans-serif;
}

/* =================== Formating =================== */
hr {
    background-color: #bbb;
    border: 0;
    height: 1px;
    margin-bottom: 1.5em;
}

/* =================== Lists =================== */
ul,
ol {
    margin: 0 0 1.5em;
    padding: 0;
}

ul {
    list-style: disc;
}

ol {
    list-style: decimal;
}

li>ul,
li>ol {
    margin-bottom: 0;
    margin-left: 1.5em;
}

dt {
    font-weight: 700;
}

dd {
    margin: 0 1.5em 1.5em;
}

a {
    color: #0639a9;
    text-decoration: none;
}

/* =================== Tables =================== */
table {
    border-collapse: collapse;
    margin: 0 0 1.5em;
    width: 100%;
}

thead th {
    padding-bottom: 0.5em;
    background: #0671ef;
    color: #fff;
    padding: 0.5em 1em;
}

th {
    border: 1px solid #e6e6e6;
    color: #fff;
    padding: 0.4em;
    text-align: center;
    background: #0671ef;
}

th a {
    color: #fff;
}

tr {
    border: 1px solid #e6e6e6;
}

td {
    padding: 0.4em;
    border: 1px solid #e6e6e6;
    padding-left: 2%;
}

tr a {
    text-decoration: underline;
}

th:last-child,
td:last-child {
    padding-right: 0;
}

/* =================== Pagination Page =================== */
.page-pagination {
    width: 100%;
    clear: both;
    margin: 20px 0;
    margin-bottom: 0;
}

.pagination h2 {
    display: none;
}

.page-pagination .page-links {
    display: flex;
    align-items: center;
    background: #f9f9f9;
    padding: 1%;
}

.page-pagination .page-title {
    margin-right: 0.8%;
}

.page-pagination .current {
    background: #0671ef;
    color: #fff;
    border-radius: 3px;
    margin: 0 5px;
    padding: 2px 10px;
}

.page-pagination span,
.page-pagination a {
    padding: 3px 6px;
    position: relative;
    z-index: 1;
}

.page-pagination a.post-page-numbers {
    text-decoration: none;
}

/* Nav pagination number */
.pagination {
    text-align: center;
    width: 100%;
    margin: 10px 0;
}

.nav-links {
    padding: 10px;
    background: #f9f9f9;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pagination .current {
    background: #0671ef;
    color: #fff;
    border-radius: 3px;
}

.pagination .current:hover {
    background: #045eca;
}

.pagination .nav-links a,
.pagination .current {
    padding: 3px 12px;
    position: relative;
    z-index: 1;
    margin: 1px;
}

.pagination a {
    color: #666;
}

.pagination a:hover {
    color: #0671ef;
    font-weight: 500;
}

/* =================== Author Info =================== */
.author-box {
    background: #f9f9f9;
    display: flex;
    flex-wrap: wrap;
    padding: 15px;
    margin: 2% 0 5%;
    line-height: 1.40;
    clear: both;
}

.author-box .author-img {
    margin: 15px;
    width: 15%;
}

.author-box .author-info {
    width: 80%;
}

.author-box .author-img img {
    border-radius: 50%;
}

.author-box .author-img img:hover {
    opacity: 0.7;
}

.author-box h4 {
    margin-bottom: 5px;
    text-transform: capitalize;
}

.author-box h4:hover {
    opacity: 0.7;
    text-decoration: underline;
}

.author-box h4 a {
    font-weight: 500;
}

.author-box small {
    color: #737373;
    font-weight: 500;
    font-size: 14px;
    display: block;
    margin-bottom: 10px;
}

.author-box p {
    color: #444;
    font-size: 17px;
}

.author-box .author-sosmed {
    margin-bottom: 0.8em;
    display: flex;
    flex-wrap: wrap;
}

.author-box .author-sosmed a {
    margin-right: 10px;
    text-align: center;
    border-radius: 2px;
    line-height: 40px;
}

.author-box .author-sosmed i {
    padding: 8px 12px;
    background: #fbedf9;
    border-radius: 2px;
}

.author-box .author-sosmed i.fa-facebook-f {
    color: #3b5998;
}

.author-box .author-sosmed i.fa-twitter {
    color: #1f92ec;
}

.author-box .author-sosmed i.fa-youtube {
    color: #ed3833;
}

.author-box .author-sosmed i.fa-instagram {
    color: #231f20;
}

.author-box .author-sosmed i.fa-linkedin-in {
    color: #0077b5;
}

.author-box .author-sosmed i.fa-pinterest {
    color: #bd081c;
}

.author-box .author-sosmed i.fa-github {
    color: #211f1f;
}

/* =================== Scroll Button Top =================== */
#button-scroll {
    display: block;
    position: fixed;
    bottom: 5%;
    right: 1.5%;
    transition: opacity .5s, visibility .5s;
    opacity: 0;
    visibility: hidden;
    z-index: 10;
}

#button-scroll i {
    font-size: 35px;
    color: #0671ef;
}

#button-scroll:hover {
    cursor: pointer;
}

#button-scroll.show {
    opacity: 1;
    visibility: visible;
}

/* =================== Social Media Share =================== */
.box-sosmed-share {
    display: flex;
    align-items: center;
}

.sosmed-txt strong {
    margin-right: 0.8em;
    font-size: 17px;
    color: #444;
}

.sosmed-txt i {
    font-size: 16px;
    margin-right: 7px;
    color: #777;
}

.box-sosmed-share .facebook,
.box-sosmed-share .twitter,
.box-sosmed-share .whatsapp,
.box-sosmed-share .pinterest,
.box-sosmed-share .linkedin {
    width: 50px;
    height: auto;
    margin-right: 0.1em;
    text-align: center;
}

.box-sosmed-share .facebook .fab,
.box-sosmed-share .twitter .fab,
.box-sosmed-share .whatsapp .fab,
.box-sosmed-share .pinterest .fab,
.box-sosmed-share .linkedin .fab {
    padding: 0.4em;
    font-size: 18px;
    color: #fff;
}

.box-sosmed-share .facebook {
    background: #3b5998;
}

.box-sosmed-share .twitter {
    background: #00acee;
}

.box-sosmed-share .whatsapp {
    background: #25d366;
}

.box-sosmed-share .pinterest {
    background: #c8232c;
}

.box-sosmed-share .linkedin {
    background: #0e76a8;
}

.box-sosmed-share .facebook:hover,
.box-sosmed-share .twitter:hover,
.box-sosmed-share .whatsapp:hover,
.box-sosmed-share .pinterest:hover,
.box-sosmed-share .linkedin:hover {
    opacity: 0.8;
    filter: alpha(opacity=80);
}

/* =================== Main Layout =================== */
.main-layout {
    box-shadow: 0 2px 40px rgba(0, 0, 0, 0.1);
}

/* =================== Grids Layout =================== */
.grids .postformat {
    left: 12px;
    top: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    height: 30px;
    width: 30px;
    background: #222;
    color: #fff;
    border-radius: 50%;
}

.grids .postformat .fa-play,
.grids .postformat .fa-images,
.grids .postformat .fa-headphones,
.grids .postformat .fa-image {
    font-size: 12px;
}

.grids .name-post {
    padding: 0 25px 10px 0;
    margin-bottom: 2%;
    position: relative;
    margin-top: 1.5%;
}

.sticky {
    position: relative;
}

.grids .name-post h2 {
    color: #3a444d;
    font-size: 25px;
    margin-bottom: 0;
    font-weight: 500;
    position: relative;
    left: 35px;
}

.grids .name-post::before {
    position: absolute;
    color: #3a444d;
    left: 0;
    top: -5px;
    content: "\f005";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 25px;
}

.grids .box-content {
    margin-bottom: 25px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row-reverse;
}

.grids .content {
    border-bottom: 2px solid #dbf5ee;
    width: 55.50%;
    margin-left: 2.50%;
    padding-right: 2.50%;
}

.grids .categoris a {
    margin-right: 22px;
    font-size: 15px;
    color: #444;
}

.grids .categoris a:hover {
    color: #111;
}

.grids .categoris a span.first-letter {
    background: #3a444d;
    border-radius: 3px;
    color: #fff;
    padding: 4px 8px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
}

.grids .categoris a span.first-letter:hover {
    background: #0671ef;
}

.grids .categoris a span.arrow::after {
    content: '-';
    color: #555;
    margin: 0 5px;
    -webkit-box-ordinal-group: 3;
    -ms-flex-order: 2;
    order: 2;
}

.grids .content h3 {
    font-size: 24px;
    line-height: 1.3;
    padding: 0;
    padding-top: 8px;
    font-weight: 500;
    margin-bottom: 15px;
    margin-top: 8px;
}

.grids .content h3 a {
    color: #3a444d;
}

.grids .content h3 a:hover {
    color: #0671ef;
}

.grids .content .box-content-info {
    margin-bottom: 1em;
    padding: 1px;
    position: relative;
    top: 2px;
}

.grids .content .box-content-info img {
    border-radius: 50%;
    width: 30px;
    height: 27px;
    margin-right: 6px;
}

.grids .content .box-content-info a.author {
    color: #545;
    font-size: 14px;
    text-transform: capitalize;
}

.grids .content .box-content-info a.author:hover {
    text-decoration: underline;
    color: #545;
}

.grids .content .box-content-info span {
    font-size: 14px;
    color: #545;
    text-transform: capitalize;
}

.grids .content .box-content-info i {
    color: #666;
    font-size: 17px;
}

.grids .content .box-content-info .fa-user-alt {
    font-size: 15px;
    margin-right: 6px;
}

.grids .content .box-content-info a.author {
    margin-right: 13px;
}

.grids .content .box-content-info .com {
    margin-right: 13px;
}

.grids .content .box-content-info .fa-calendar {
    margin-right: 6px;
}

.grids .content .box-content-info .time:hover,
.grids .content .box-content-info .view:hover,
.grids .content .box-content-info .com:hover,
.grids .content .box-content-info i:hover {
    color: #222;
}

.grids .content p {
    font-size: 16px;
    line-height: 1.45;
    margin-bottom: 0.4em;
}

.grids .content-gambar {
    width: 42%;
    height: 100%;
    position: relative;
    background: #ccc;
    overflow: hidden;
    border-radius: 3px;
}

.grids .content-gambar img {
    width: 100%;
    height: auto;
}

/* Grids 1 */
.grids1 .content .post-categories {
    margin-left: 5px;
}

.grids1 .content-gambar a::before {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    display: block;
    content: '';
    width: 0;
    height: 0;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 100%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: width 0.9s, height 0.9s, opacity 0.9s;
}

.grids1 .content-gambar a:hover::before {
    cursor: pointer;
    width: 200%;
    height: 200%;
    opacity: 1;
}

/* Grids 2 */
.grids2 .box-content {
    margin-bottom: 0;
}

.grids2 .content {
    margin-top: 2.5%;
    width: 47%;
    border-bottom: 0;
}

.grids2 .content-gambar {
    width: 50%;
    border-radius: 0;
}

.grids2 .box-content:nth-child(even) {
    justify-content: flex-end;
}

.grids2 .box-content:nth-child(odd) {
    flex-direction: row;
}

.grids2 .box-content:nth-child(odd) .content {
    margin-left: 0;
    width: 50%;
}

/* Grids 3 */
.grids3 .box-content {
    flex-direction: row;
}

.grids3 .content {
    margin-right: 2.5%;
    margin-left: 0;
    padding: 0;
}

/* =================== Breadcrumbs =================== */
.breadcrumbs {
    margin-top: 4%;
}

.breadcrumbs__link,
.breadcrumbs__current {
    color: #315996;
    font-size: 16px;
    margin-right: 4px;
    font-weight: 500;
}

.breadcrumbs__separator {
    margin-right: 5px;
    font-size: 18px;
}

.breadcrumbs__link:hover,
.breadcrumbs__current:hover {
    color: #0c264e;
}

.breadcrumbs__current {
    color: #4e4e4e;
}

/* =================== Widget Sidebar Default Style =================== */
.widget {
    line-height: 1.6;
    margin: 16.9% 0;
}

.widget img:hover {
    opacity: 0.7;
}

.widget ul {
    list-style: none;
    margin-bottom: 0;
}

.widget li {
    padding: 4px 0;
}

.widget li a {
    color: #4a4b4c;
    font-size: 15px;
    -webkit-transition: color 0.3s;
    transition: color 0.3s;
}

.widget ul li:hover>a {
    color: #0671ef;
}

.widget-title-sidebar {
    position: relative;
    font-size: 22px;
    z-index: 2;
    color: #fff;
    text-align: center;
    text-transform: capitalize;
    width: 90%;
    padding: 10px 20px;
    margin: 10% auto;
    margin-top: 0;
}

/* Widget img */
.widget_media_image {
    text-align: center;
}

.widget_media_image figure.wp-caption {
    margin: 0 auto;
}

.widget_media_image {
    width: 100%;
    height: auto;
}

/* Widget text & custome html */
.widget_text .textwidget {
    word-wrap: break-word;
    overflow: hidden;
}

/* pages menu */
.widget_pages .children li {
    padding-left: 0.5em;
}

/* Calendar */
.widget_calendar {
    padding: 0;
    z-index: 1;
}

.widget_calendar table {
    margin: 0;
}

.widget_calendar td,
.widget_calendar th {
    line-height: 1.7;
    padding: 0;
    text-align: center;
    color: #666;
}

.widget_calendar th {
    color: #fff;
}

.widget_calendar td:hover {
    background: #0671ef;
    color: #fff;
}

.widget_calendar th:hover {
    background: #1b8fea;
    color: #ddd;
}

.widget_calendar caption {
    text-align: center;
    font-weight: 600;
    color: #505050;
    border: 1px solid #dadada;
    padding: 7px 0;
}

.widget_calendar tbody a {
    color: #fff;
    display: block;
}

.widget_calendar tfoot td a {
    color: #0e72d8;
}

.widget_calendar tfoot td:hover a {
    color: #fff;
}

/* Recent comments */
.widget_recent_comments {
    padding-bottom: 0;
}

.widget_recent_comments li {
    line-height: 1.4;
    border-bottom: 1px solid #dbf5ee;
    padding: 3px 0 10px;
}

.widget_recent_comments li:last-child {
    border: none;
}

.widget_recent_comments li.recentcomments a {
    display: block;
}

.widget_recent_comments a.url {
    display: block;
    margin-top: 10px;
}

.widget_recent_comments li a.url:hover,
.widget_recent_comments li span:hover {
    text-decoration: underline;
    color: #2b2b2b;
}

/* Recent posts */
.widget_recent_entries {
    padding-bottom: 1px;
}

.widget_recent_entries .post-date {
    display: block;
    font-size: 16px;
    line-height: 1.7;
    margin-bottom: 0.6em;
}

.widget_recent_entries li {
    border-bottom: 1px solid #dbf5ee;
    line-height: 1.42;
    margin-bottom: 10px;
}

.widget_recent_entries li:last-child {
    border: none;
}

.widget_recent_entries span.post-date {
    font-size: 13px;
}

.post-date {
    color: #646464;
}

.widget_recent_entries li:last-child .post-date {
    margin-bottom: 0;
    border: none;
}

.widget_recent_entries span.post-date:hover {
    color: #352f2f;
}

/* Text */
.widget_text ol,
.widget_text ul {
    margin-left: 25px;
}

.widget_text ul {
    list-style: square;
}

/* Rss */
.widget_rss h4 a.rsswidget {
    color: #fff;
}

.widget_rss a.rsswidget {
    font-size: 20px;
    color: #234567;
    line-height: 1.25;
}

.widget_rss p {
    padding: 7% 0;
    margin: 0;
}

.widget_rss .rss-date,
.widget_rss cite {
    display: block;
    font-size: 14px;
    color: #5d5d5d;
    margin: 3px 0;
    line-height: 1.6;
    font-size: 13.5px;
}

.widget_rss .rss-date:hover,
.widget_rss cite:hover {
    color: #575454;
    text-decoration: underline;
}

.widget_rss .rssSummary {
    color: #545050;
    line-height: 1.4;
}

.widget_rss .rssSummary:last-child {
    margin-bottom: 7%;
}

.widget_rss li {
    border-bottom: 1px solid #e6e5e5;
    margin-bottom: 15px;
}

.widget_rss li:last-child {
    margin-bottom: 0;
    border: none;
}

/* Tag cloud */
.widget_tag_cloud li {
    display: inline-block;
    padding: 3px 8px;
    background: #eee;
    margin: 0 0 4px 0;
    -webkit-transition: background 0.4s;
    transition: background 0.4s;
}

.widget_tag_cloud li a {
    color: #191919;
    text-transform: capitalize;
}

.widget_tag_cloud .widget li:hover {
    background: #191919;
}

.widget_tag_cloud .widget li:hover a.tag-cloud-link {
    color: #949494;
}

/* Widget categories dan archive */
.widget_categories,
.widget_archive {
    padding: 0;
}

.widget_archive select,
.widget_categories select {
    font-size: 15px;
    padding: 4px;
    color: #333;
    background: #dcdcdc;
    border: none;
    width: 100%;
}

.widget_archive select,
.widget_categories form {
    margin-bottom: 7%;
}

.widget_categories label,
.widget_archive label {
    display: none;
}

.widget_categories li,
.widget_archive li {
    color: #407171;
    padding: 3px 5px;
    position: relative;
}

.widget_categories li {
    padding: 3px 0;
}

.widget_categories .children li {
    padding-left: 0.5em;
}

.widget_categories a,
.widget_archive a {
    color: #234567;
    text-transform: capitalize;
}

.widget_archive a {
    margin-right: 3px;
}

/* Categories count */
.widget_categories span {
    background: #0671ef;
    border-radius: 50%;
    padding: 1px 2px 3px 2px;
    color: #fff;
    font-weight: 500;
    font-size: 13px;
    text-align: center;
    min-width: 23px;
    position: absolute;
    right: 15px;
    top: 2px;
    height: 22px;
}

.widget_categories>ul>li:hover {
    color: #dc17c2;
}

.widget_categories li:hover span {
    background: #dc17c2;
}

/* Galleries */
.gallery-columns-1 .gallery-item {
    width: 100%;
}

.gallery-columns-2 .gallery-item {
    width: 50%;
}

.gallery-columns-3 .gallery-item {
    width: 33.33%;
}

.gallery-columns-4 .gallery-item {
    width: 25%;
}

.gallery-columns-5 .gallery-item {
    width: 20%;
}

.gallery-columns-6 .gallery-item {
    width: 16.66%;
}

.gallery-columns-7 .gallery-item {
    width: 14.28%;
}

.gallery-columns-8 .gallery-item {
    width: 12.5%;
}

.gallery-columns-9 .gallery-item {
    width: 11.11%;
}

.gallery-columns-6 .gallery-caption,
.gallery-columns-7 .gallery-caption,
.gallery-columns-8 .gallery-caption,
.gallery-columns-9 .gallery-caption {
    display: none;
}

.gallery-item {
    display: inline-block;
    text-align: left;
    vertical-align: top;
    margin: 0 0 1.5em;
    padding: 0 1em 0 0;
    width: 50%;
}

.gallery-item a,
.gallery-item a:hover,
.gallery-item a:focus,
.widget-area .gallery-item a,
.widget-area .gallery-item a:hover,
.widget-area .gallery-item a:focus {
    -webkit-box-shadow: none;
    box-shadow: none;
    background: none;
    display: inline-block;
    max-width: 100%;
}

.gallery-item a img {
    display: block;
    -webkit-transition: -webkit-filter 0.2s ease-in;
    transition: -webkit-filter 0.2s ease-in;
    transition: filter 0.2s ease-in;
    transition: filter 0.2s ease-in, -webkit-filter 0.2s ease-in;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.gallery-item a:hover img,
.gallery-item a:focus img {
    -webkit-filter: opacity(60%);
    filter: opacity(60%);
}

.gallery-caption {
    display: block;
    padding: 0 10px 0 0;
    margin-bottom: 0;
}

.wp-caption,
.gallery-caption {
    color: #666;
    font-size: 13px;
    font-size: 0.8425rem;
    font-style: italic;
    margin-bottom: 1.5em;
    max-width: 100%;
    line-height: 1.50;
}

.wp-caption img[class*="wp-image-"] {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.wp-caption .wp-caption-text {
    margin: 0.5em 0;
    color: #666;
    font-size: 13px;
}

.widget_media_gallery .gallery-item {
    display: inline-block;
    text-align: center;
    vertical-align: top;
    margin: 0 0 0.2em;
    padding: 0.3em;
}

/* nav menu */
.widget_nav_menu .sub-btn {
    display: none;
}

/* Search-form */
.widget_search .search-form input {
    padding: 8px 5px;
    background: #fff;
    color: #676775;
    border-radius: 0;
}

.widget_search #button {
    background: #1b8fea;
    padding: 12px 18px;
    border-radius: 0;
    position: absolute;
    top: 0;
    right: 0;
}

.widget_search button i {
    font-size: 17px;
    color: #ffffff;
}

/* Goblog widget pos */
.box-wg-post {
    margin-bottom: 15px;
    display: flex;
    flex-direction: row-reverse;
}

.goblog-wg-title:last-child,
.goblog-wg-img:last-child {
    margin-bottom: 0;
}

.goblog-wg-title {
    line-height: 1.25;
    width: 53%;
    padding-left: 5%;
}

.goblog-wg-title a {
    font-size: 16px;
    color: #3a444d;
    font-weight: 500;
}

.goblog-wg-title a:hover {
    color: #1b8fea;
}

.goblog-wg-title p {
    font-size: 13px;
    font-weight: 500;
    color: #767676;
    margin: 0;
    padding-top: 5px;
}

.goblog-wg-title p:hover {
    color: #646464;
}

.goblog-wg-img {
    width: 47%;
    height: 100%;
    background: #c3c1c1;
    border-radius: 2px;
}

.goblog-wg-img img {
    width: 100%;
    height: auto;
    border-radius: 3px;
}

.widget-post-flex-direction2 {
    flex-direction: row;
}

.widget-post-flex-direction2 .goblog-wg-title {
    padding-left: 0;
    padding-right: 5%;
}

/* Goblog widget about me */
.goblog_about_me img {
    border-radius: 50%;
    margin: 0 auto;
    display: block;
}

.goblog_about_me .description {
    margin-top: 25px;
}

.goblog_about_me .container-sosmed {
    display: flex;
    align-items: center;
    justify-content: center;
}

.goblog_about_me a {
    padding: 2px 5px;
    margin: 0 5px;
}

.goblog_about_me .fab.fa-facebook-f {
    color: #3b5998;
}

.goblog_about_me .fab.fa-twitter {
    color: #1f92ec;
}

.goblog_about_me .fab.fa-youtube {
    color: #ed3833;
}

.goblog_about_me .fab.fa-instagram {
    color: #231f20;
}

.goblog_about_me .fab.fa-linkedin-in {
    color: #0077b5;
}

.goblog_about_me .fab.fa-pinterest {
    color: #bd081c;
}

.goblog_about_me .fab.fa-github {
    color: #211f1f;
}

.goblog_about_me i:hover {
    opacity: 0.7;
}

/* =================== 404 File =================== */
.main-404 {
    margin: 0 auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

.main-404 h1 {
    margin-bottom: 5px;
    font-size: 120px;
}

.main-404 p {
    font-size: 18px;
    color: #666;
}

.main-404 button {
    background: #444;
}

.main-404 button:hover {
    background: #333;
    opacity: 0.7;
}

.main-404 #back {
    color: #fff;
}

.main-404 #back::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f060 ";
    position: relative;
    right: 10%;
}

/* =================== Archive File =================== */
.main-archive {
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
    max-width: 1150px;
    background: #fff;
    border: 1px solid #ececec;
}

.container-archive {
    width: 70%;
    padding: 2.5%;
}

.main-archive header {
    margin-bottom: 5%;
}

.main-archive header .breadcrumbs {
    margin-top: 1.5%;
}

.main-archive header h1 span {
    font-style: italic;
    text-decoration: underline;
    color: #888;
}

.main-archive .name-post {
    display: none;
}

.main-archive .archive-title {
    color: #555;
    font-size: 26px;
    text-transform: capitalize;
    padding: 2% 0 0;
}

.main-archive .archive-description {
    text-transform: capitalize;
}

/* =================== Author File =================== */
.main-author {
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
    max-width: 1150px;
    background: #fff;
    border: 1px solid #ececec;
}

.container-author {
    width: 70%;
    padding: 2.5%;
}

.main-author header .breadcrumbs {
    margin-top: 1.5%;
}

.main-author .name-post {
    display: none;
}

/* =================== Comments File =================== */
.comments-area {
    margin: 2em auto;
}

.comments-area .comment-form input {
    padding: 0.3em;
}

.comments-area .pingback {
    color: #111;
}

.comments-area .pingback a {
    color: #666
}

.comments-title {
    font-size: 23px;
    line-height: 1.3;
    padding-top: 1.2em;
    color: #462146;
    margin-bottom: 1.15em;
}

.comment-list,
.comment-list .children {
    list-style: none;
    margin: 0;
}

.comment-list .odd article,
.comment-list .children .odd>article {
    background: #f9f9f9;
}

.comment-list .even article,
.comment-list .children .even>article {
    background: #fff;
}

.comment-meta {
    padding: 10px;
}

.comment-author {
    font-size: 16px;
    margin-bottom: 0.4em;
}

.comment-author .avatar {
    float: left;
    margin: 0 1em 1em 0;
    position: relative;
    bottom: 8px;
    border-radius: 50%;
    width: 64px;
    height: 64px;
}

.comment-author .avatar:hover {
    opacity: 0.7;
}

.comment-author b,
.comment-author b a {
    color: #333;
    font-size: 18px;
    text-transform: capitalize;
}

.comment-author b:hover,
.comment-author b a:hover {
    text-decoration: underline;
}

.comment-author .says {
    clip: rect(1px, 1px, 1px, 1px);
    height: 1px;
    overflow: hidden;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
}

.comment-metadata {
    font-size: 13px;
    line-height: 1.7;
    font-style: italic;
    margin-bottom: 1%;
}

.comment-metadata a {
    color: #555;
}

.comment-metadata a:hover {
    color: #505050;
}

.comment-metadata a.comment-edit-link {
    color: #222;
    margin-left: 0.7em;
}

.comment-body {
    padding: 2%;
    position: relative;
}

.comment-reply-link {
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    padding: 3px 12px;
    z-index: 1;
    background: #0671ef;
    border-radius: 3px;
    position: absolute;
    top: 32px;
    right: 25px;
}

.comment-reply-link::before {
    content: "\f3e5";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: 8px;
}

.comments-area a.comment-reply-link:hover {
    background: #7ba6f3;
    color: #fff;
}

.no-comments,
.comment-awaiting-moderation {
    color: #767676;
    font-size: 14px;
    font-size: 0.875rem;
    font-style: italic;
}

.comments-area .children li {
    padding-left: 2.2em;
}

.comment-content p {
    color: #333;
    line-height: 1.45;
    padding: 2% 0;
    padding-top: 2%;
    margin: 0;
}

.comment-content p a {
    text-decoration: underline;
    color: #2f2f8e;
}

.comment-list li.comment-author-admin b::after,
.comment-list li.comment-author-admin b a::after,
.comment-list .bypostauthor li.comment-author-admin b::after,
.comment-list .bypostauthor li.comment-author-admin b a::after {
    content: '\2713';
    color: #0671ef;
    font-size: 25px;
    padding: 3px;
    margin-left: 4px;
}

.comments-area .comment-content {
    clear: both;
    margin-left: 91px;
}

.comments-area .comment-content ul,
.comments-area .comment-content ol {
    margin-left: 1.2em;
}

.comments-area .nav-links {
    margin: 60px 0;
    position: relative;
    padding: 10px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.comments-area .nav-next {
    position: absolute;
    right: 0;
    bottom: 20px;
    background: #444;
    border-radius: 2px;
    padding: 3px 10px;
}

.comments-area .nav-next a {
    color: #fff;
    font-size: 15px;
}

.comments-area .nav-next:hover {
    background: #333;
    opacity: 0.7;
}

.comments-area .nav-next:hover a {
    color: #fff;
}

.comments-area .nav-previous {
    position: absolute;
    left: 0;
    bottom: 20px;
    background: #444;
    border-radius: 2px;
    padding: 3px 10px;
}

.comments-area .nav-previous a {
    color: #fff;
    font-size: 15px;
}

.comments-area .nav-previous:hover {
    background: #333;
    opacity: 0.7;
}

.comments-area .nav-previous:hover a {
    color: #fff;
}

.comments-area .comment-form {
    margin-top: 25px;
}

.comments-area h3#reply-title {
    margin: 15px 0 10px 0;
    color: #484848;
}

.comments-area input.submit {
    padding: 10px;
    background: #444;
}

.comments-area input.submit:hover {
    background: #333;
    opacity: 0.7;
}

.comments-area a#cancel-comment-reply-link {
    border: 1px solid #7ba6f3;
    color: #0671ef;
    padding: 5px;
    border-radius: 3px;
    margin-left: 5px;
}

.comments-area p.logged-in-as a {
    color: #868686;
}

.comments-area a:hover {
    color: #444;
}

/* =================== Footer File =================== */
#footer {
    position: relative;
    z-index: 100;
    background: #1e1e1f;
    z-index: 1;
}

#footer .box-footer-widgets {
    max-width: 1150px;
    margin: 0 auto;
}

#footer .box-widget {
    display: flex;
    flex-wrap: wrap;
    padding: 0 2.5%;
    justify-content: space-between;
}

#footer .footer-widgets {
    width: 31%;
}

/* =================== Footer Widget Default File =================== */
#footer .widget {
    text-align: center;
    margin: 12% 0;
}

#footer .widget h1,
#footer .widget h2,
#footer .widget h3,
#footer .widget h4,
#footer .widget h5,
#footer .widget h6 {
    color: #fff;
}

#footer h4.widget-title-footer {
    text-align: left;
    color: #ccc;
    font-weight: 500;
    font-size: 23px;
    padding-bottom: 7px;
    margin: 7% auto;
    position: relative;
    border-bottom: 2px solid #535353;
}

#footer h4.widget-title-footer::before {
    content: "";
    width: 100px;
    position: absolute;
    border-bottom: 2px solid #0671ef;
    left: 0;
    bottom: -2px;
}

#footer .widget li {
    position: relative;
    left: 10px;
}

#footer .widget li::before {
    content: "\f105";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: relative;
    bottom: 0;
    right: 10px;
    font-size: 14px;
}

#footer .widget li:hover,
#footer .widget a:hover {
    color: #278cf1;
}

#footer .widget li,
#footer .widget a {
    color: rgba(255, 255, 255, 0.7);
    text-align: left;
}

/* Widget categories Count */
#footer .widget_categories span {
    background: #004ec3;
}

/* Widget Gallery */
#footer .widget_media_gallery .gallery-item {
    margin: 0;
    padding: 0.17em 0.3em;
}

/* Widget Cloud */
#footer .widget_tag_cloud li {
    background: #252525;
    left: 0;
}

#footer .widget_tag_cloud li::before {
    content: "";
}

#footer .widget_tag_cloud .widget li:hover {
    background: #191919;
    color: #949494;
}

#footer .tagcloud {
    display: inline-block;
}

#footer .widget_recent_entries .post-date {
    color: #948383;
}

#footer .widget_recent_entries span.post-date:hover {
    color: #fff;
}

/* Widget Calendar */
#footer .widget_calendar caption,
#footer .widget_calendar td,
#footer .widget_calendar th {
    color: #fff;
    background: #252525;
}

#footer .widget_calendar caption {
    border: none;
}

#footer th,
#footer tr {
    border: 1px solid #4a4a4a;
}

#footer td {
    border: none;
}

#footer th:hover,
#footer td:hover {
    background: #1b8fea;
}

#footer td#prev:hover a,
#footer td#next:hover a {
    color: #fff;
}

/* Widget Rss */
#footer .widget_rss a.rsswidget {
    color: #fff;
    text-decoration: underline;
}

#footer .widget_rss .rss-date,
#footer .widget_rss cite {
    color: #ccc;
}

#footer .widget_rss .rssSummary {
    color: #f5f5f5;
}

/* Widget Text Widget */
#footer .widget_text .textwidget {
    color: #e4e4e4;
    text-align: left;
}

#footer .widget_text .textwidget p {
    color: rgba(255, 255, 255, 0.7);
}

#footer .widget_text .textwidget strong {
    color: #fbfbfb;
}

/* Widget search */
#footer .search-form input {
    padding: 8px 5px;
    color: #fff;
    border-radius: 0;
    background: #252525;
    border: 1px solid #353535;
}

#footer .search-form .search-submit {
    padding: 0 30px;
    border-radius: 0;
    background: #000000;
    border: 1px solid #353535;
}

#footer .widget_search i {
    font-size: 18px;
}

/* Widget Recent Comment */
#footer .widget_recent_comments li {
    position: static;
}

#footer .widget_recent_comments li::before {
    content: "";
}

/*  Widget Custome Posts */
#footer .goblog-wg-title {
    text-align: left;
}

/* Goblog widget about me */
#footer .goblog_about_me .description {
    color: rgba(255, 255, 255, 0.7);
}

#footer .goblog_about_me .fab.fa-facebook-f {
    color: #81a9ff;
}

/* =================== Footer Navigasi File =================== */
#footer #navigasi {
    background: #242529;
}

#footer .container-navigasi-footer {
    max-width: 1150px;
    margin: 0 auto;
}

#footer .box-navigasi-footer {
    padding: 0 2.5%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#footer #navigasi ul {
    margin: 0;
}

#footer #navigasi li {
    display: inline-block;
    padding: 10px 3px;
}

#footer #navigasi li:first-child {
    padding: 10px 0;
}

#footer #navigasi li a {
    font-size: 15px;
    display: block;
    color: #b7aaaa;
    padding: 2px 7px;
    text-transform: capitalize;
}

#footer #navigasi li:first-child a {
    padding: 2px 0;
}

#footer #navigasi li:hover a {
    color: #278cf1;
}

#footer .footer-sosmed .box-sosmed-contact {
    display: flex;
    align-items: center;
}

#footer .facebook i,
#footer .twitter i,
#footer .youtube i,
#footer .instagram i,
#footer .linkedin i {
    color: #b7aaaa;
    margin-right: 12px;
    font-size: 16px;
}

#footer .footer-sosmed .sosmed:last-child i {
    margin-right: 0;
}

#footer .facebook:hover i,
#footer .twitter:hover i,
#footer .youtube:hover i,
#footer .instagram:hover i,
#footer .linkedin:hover i {
    color: #278cf1;
}

/* =================== Front Page File =================== */
.main-front-page {
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
    max-width: 1150px;
    background: #fff;
    border: 1px solid #ececec;
    border-top: 0;
}

.container-front-page {
    width: 70%;
    padding: 2.5%;
    padding-bottom: 0;
}

.main-front-page .goblog_grids_order,
.main-front-page .goblog_grids_categories,
.main-front-page .goblog_grids_tags {
    margin-top: 0;
    margin-bottom: 50px;
}

.main-front-page .pagination {
    margin: 50px 0;
}

.main-front-page .grids .name-post {
    margin-top: 1.9%;
}

.main-front-page header .breadcrumbs {
    margin-top: 1.5%;
}

/* =================== Header Navigasi Primary Default =================== */
.header-top {
    position: relative;
}

.title-tagline-hidden .container-header-title {
    display: none;
}

.header-custome-image img {
    width: 100%;
    max-height: 800px;
}

.container-header-title {
    max-width: 1150px;
    margin: 0 auto;
    padding: 0 2.5%;
}

.container-header-title h1 {
    padding-top: 17px;
}

.container-header-title h1 a {
    padding-top: 17px;
    color: #3a444d;
}

.box-menu {
    position: relative;
    display: flex;
    justify-content: space-between;
    max-width: 1150px;
    margin: 0 auto;
    align-items: center;
    flex-direction: row;
    background: #092228;
}

.box-menu ul {
    margin: 0;
    list-style: none;
    padding: 0;
}

.box-menu>ul {
    width: 70%;
    margin: 0 2%;
    flex-wrap: wrap;
}

.box-menu>ul>li {
    display: inline-block;
    position: relative;
    z-index: 3;
}

.box-menu>ul>li>a {
    padding: 31px 14px;
    color: #ccc;
    font-weight: 500;
    z-index: 2;
    position: relative;
}

.box-menu li a {
    display: block;
    font-size: 17px;
    text-transform: capitalize;
    word-spacing: 2px;
}

.box-menu>ul>li:hover>a {
    color: #278cf1;
}

.box-menu .sub-menu {
    background: #fff;
    box-shadow: 2px 5px 8px rgba(0, 0, 0, 0.1), -2px 0 8px rgba(0, 0, 0, 0.1);
    min-width: 270px;
    position: absolute;
    padding: 6px 9px;
    z-index: 99;
    top: 100%;
    overflow: hidden;
    visibility: hidden;
    opacity: 0;
    transition: overflow 0s, visibility 0s, opacity 0.5s linear;
}

.box-menu .menu-item-has-children:hover>.sub-menu {
    overflow: visible;
    visibility: visible;
    opacity: 1;
    display: block;
}

.box-menu .menu-item-has-children:focus-within .sub-menu {
    overflow: visible;
    visibility: visible;
    opacity: 1;
    display: block;
}

.box-menu .sub-menu .sub-menu {
    left: 100%;
    top: 0;
}

.box-menu .sub-menu li {
    padding: 0 24px;
    padding-left: 0;
    position: relative;
    list-style: disc;
    margin-left: 35px;
    color: #4d4d4e;
}

.box-menu .sub-menu li a {
    color: #315996;
    color: #1c1c50;
    font-size: 15px;
    padding: 8px 14px;
    padding-left: 0;
    position: relative;
}

.box-menu .sub-menu li:hover>a {
    color: #3082ff;
}

.box-menu .sub-menu li:last-child>a {
    border: none;
}

.box-menu .menu-item-has-children>a::after {
    content: "\f0dd";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-left: 7px;
    font-size: 18px;
    position: relative;
    bottom: 2px;
}

.box-menu .sub-menu .menu-item-has-children>a::after {
    left: 95%;
    top: 2px;
    position: absolute;
}

.box-menu .menu-item-has-children .btn-dropdown {
    position: absolute;
    right: 4.5%;
    background: transparent;
    padding: 14px 15px 10px;
}

.box-menu .menu-item-has-children .sub-btn {
    display: none;
    margin-left: 7px;
    font-size: 18px;
    position: relative;
}

/* =================== Header Navigasi Primary 1 =================== */
.primary1 {
    display: flex;
    align-items: center;
    z-index: 99;
    background: #092228;
}

.container-primary1 {
    width: 100%;
}

/* Logo Nav Desktop */
.primary1 .box-menu .logo-nav-desktop {
    justify-content: center;
    margin-right: 4%;
    margin-left: 2.5%;
}

.primary1 .box-menu .logo-nav-desktop img {
    max-height: 85px;
    width: auto;
    display: inline-block;
}

/* Toggle Burger  */
.primary1 .toggle-burger-mobile {
    display: none;
}

/* Logo Nav Mobile  */
.primary1 .logo-nav-mobile {
    display: none;
}

/* Toggle Seach */
.primary1 .toggle-icon-search {
    align-items: flex-end;
    justify-content: flex-end;
    display: flex;
    position: relative;
    right: 2.5%;
    background: transparent;
    padding: 0;
}

.primary1 .toggle-icon-search i {
    color: #fff;
    font-size: 20px;
    padding: 10px;
    position: relative;
    left: 10px;
}

/* Search Full for Mobile */
.primary1 .search-form,
.primary1 .search-form-close {
    display: none;
}

.primary1 .search-form-close {
    position: absolute;
    z-index: 5;
    top: 45px;
    left: 8%;
    padding: 2%;
    z-index: 999;
}

.primary1 .search-form-close i {
    color: #fff;
    font-size: 31px;
    text-align: center;
}

.primary1 .search-form {
    height: 1300px;
    width: 100%;
    top: 0;
    left: 0;
    position: absolute;
    z-index: 999;
}

.primary1 .search-form form {
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 4;
    margin: 0 25%;
}

.primary1 .search-form form input {
    background: #172d2f;
    border: 2px solid #2f3235;
    border-radius: 0;
    color: #fff;
    padding: 9px;
    height: 48px;
}

.primary1 .search-form label {
    margin-bottom: 0;
}

.primary1 .search-form .search-submit {
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border-radius: 0;
    background: #0671ef;
}

/* FadeInCustome Animation Box Mobile */
.primary1 div.fadein-custome {
    animation: FadeInCustome 0.7s linear;
    background: #092228;
    display: block;
}

@keyframes FadeInCustome {
    0% {
        height: 0;
    }

    25% {
        height: 600px;
    }

    50% {
        height: 900px;
    }

    75% {
        height: 1200px;
    }

    100% {
        height: 1500px;
    }
}

.primary1 div.fadein-custome form {
    animation: FadeInForm 1.2s;
    margin-top: -212px;
}

@keyframes FadeInForm {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/* FadeOutCustome Animation Box Mobile */
nav.primary1 .fadeout-custome {
    animation: FadeOutCustome 0.7s linear forwards;
    background: #092228;
    display: block;
}

@keyframes FadeOutCustome {
    0% {
        height: 1500px;
    }

    25% {
        height: 1200px;
    }

    50% {
        height: 900px;
    }

    75% {
        height: 600px;
    }

    100% {
        height: 0;
        z-index: -1;
    }
}

.primary1 div.fadeout-custome form {
    animation: FadeOutForm 1.2s forwards;
    margin-top: -212px;
}

@keyframes FadeOutForm {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        height: 0;
        display: none;
    }
}

/* Toggle Class close-x-animasi */
.primary1 .search-form-close {
    display: none;
}

.primary1 .close-x-animasi {
    animation: clodeAnimasi 1s forwards;
}

@keyframes clodeAnimasi {
    0% {
        opacity: 0;
        display: none;
    }

    100% {
        opacity: 1;
        display: block;
    }
}

/* Toggle Class close-x-animasi-penutup */
.primary1 .close-x-animasi-penutup {
    animation: clodeAnimasiPenutup 1s forwards;
}

@keyframes clodeAnimasiPenutup {
    0% {
        opacity: 1;
        display: block;
    }

    100% {
        opacity: 0;
        display: none;
    }
}

.header-top .primary1 .box-menu .active>.sub-menu,
.header-top .primary1 .box-menu .active-key>.sub-menu {
    display: block;
    overflow: visible;
    visibility: visible;
    opacity: 1;
    display: block;
}

/* =================== Index File =================== */
.main-index {
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
    max-width: 1150px;
    background: #fff;
    border: 1px solid #ececec;
}

.container-index {
    width: 70%;
    padding: 2.5%;
}

.main-index header .breadcrumbs {
    margin-top: 1.5%;
}

/* =================== Page File =================== */
.main-page {
    margin: 0 auto;
    max-width: 1150px;
    background: #fff;
    border: 1px solid #ececec;
}

.container-page {
    padding: 2.5%;
}

.main-page header .breadcrumbs {
    margin: 1.5% 0;
    margin-bottom: 1%;
}

.container-page .page-pagination {
    padding: 10px 0;
}

.container-page .page-pagination .page-links {
    margin: 3% 0 2%;
}

.container-page .comments-area {
    width: 100%;
}

.main-page .the-content ol,
.main-page .the-content ul,
.main-page ol,
.main-page ul {
    margin-left: 1.2em;
}

.main-page li {
    color: #656;
}

.main-page .the-content a {
    text-decoration: underline;
}

/* =================== Page Right Custome File =================== */
.main-page-custome-right {
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
    max-width: 1150px;
    background: #fff;
    border: 1px solid #ececec;
}

.container-page-custome-right {
    width: 70%;
    padding: 2.5%;
}

.main-page-custome-right header .breadcrumbs {
    margin-top: 1.5%;
}

.page-template-page-right .sidebar-default {
    padding: 0 2.5%;
}

/* =================== Page Left Custome File =================== */
.main-page-custome-left {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row-reverse;
    margin: 0 auto;
    max-width: 1150px;
    background: #fff;
    border: 1px solid #ececec;
}

.container-page-custome-left {
    width: 70%;
    padding: 2.5%;
}

.main-page-custome-left header .breadcrumbs {
    margin-top: 1.5%;
}

.page-template-page-left .sidebar-default {
    padding: 0 2.5%;
}

/* =================== Search File =================== */
.search-form {
    position: relative;
    font-size: 16px;
    color: #fff;
    border: none;
}

.search-form .search-field {
    background: #b1fdff;
    color: #123;
}

.search-form .search-submit {
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    background: #222;
}

.search-form i {
    font-size: 20px;
    color: #fff;
}

.main-search {
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
    max-width: 1150px;
    background: #fff;
    border: 1px solid #ececec;
}

.container-search {
    width: 70%;
    padding: 2.5%;
}

.main-search header .breadcrumbs {
    margin-top: 1.5%;
}

.main-search header h1 {
    color: #3a444d;
    margin-top: 1.1%;
    margin-bottom: 40px;
}

.main-search header span {
    color: #777;
}

.main-search .name-post {
    display: none;
}

/* =================== Sidebar Blog Default File =================== */
.sidebar-default {
    width: 30%;
    padding: 0 2.5%;
    background: #fff;
}

.sidebar-default h4 {
    margin: 12% 0;
    font-weight: 500;
    margin-top: 0;
    background: #f9f9f9;
    border-left: 5px solid #0671ef;
    color: #3a444d;
    padding: 8px 20px;
}

/* =================== Single File =================== */
/* main single */
.main-single {
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
    max-width: 1150px;
    background: #fff;
    border: 1px solid #ececec;
    box-shadow: 0 2px 40px rgba(0, 0, 0, 0.1);
}

/* box container single */
.container-single {
    width: 70%;
    padding: 2.5%;
}

.container-single article {
    position: relative;
}

.main-single header .breadcrumbs {
    margin-top: 1.5%;
}

/* the_title() */
.main-single h1 {
    padding-top: 12px;
}

/* Box Meta Info */
.main-single .single-info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

/* the_author() */
.main-single .single-info img {
    border-radius: 50%;
    width: 2.4em;
    height: auto;
    position: relative;
    bottom: 0.04em;
}

.main-single .single-info a.author {
    color: #545;
    font-size: 14px;
    text-transform: capitalize;
    margin-right: 13px;
}

.main-single .single-info a.author:hover {
    text-decoration: underline;
    color: #222;
}

.main-single .single-info .fa-user-alt {
    font-size: 15px;
    margin-right: 6px;
}

/* the_category() */
.main-single .post-categories {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.main-single .post-categories li {
    margin-left: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.main-single .post-categories li::before {
    content: '';
    width: 5px;
    height: 5px;
    background: #222;
    display: block;
    position: relative;
    right: 10px;
    border-radius: 50px;
}

.main-single .post-categories li a {
    color: #545;
    padding-left: 8px;
    font-size: 14px;
    margin-right: 3px;
    position: relative;
    right: 13px;
}

.main-single .post-categories li a:hover {
    text-decoration: underline;
    color: #222;
}

/* the_date() */
.main-single .single-info .fa-calendar {
    margin-right: 6px;
    font-size: 16px;
}

.main-single .single-info time {
    font-size: 14px;
    color: #545;
    text-transform: capitalize;
    margin-right: 13px;
}

/* comments_number() */
.main-single .single-info .fa-comments {
    margin-right: 6px;
    font-size: 16px;
}

.main-single .single-info .com {
    margin-right: 13px;
}

.main-single .single-info i {
    color: #666;
}

.main-single .single-info .time:hover,
.main-single .single-info .view:hover,
.main-single .single-info .com:hover,
.main-single .single-info i:hover {
    color: #222;
}

/* the_post_thumbnail() */
.main-single .thumbnail-single {
    margin: 2% 0;
    background: #fff;
}

.main-single .thumbnail-single img {
    margin: auto;
    height: auto;
    width: 100%;
    border-radius: 3px;
}

/* Sosmed Share */
.main-single .container-sosmed-share {
    margin: 20px 0 30px;
}

/* the_content() */
.main-single .the-content img {
    max-width: 100%;
    display: block;
}

.main-single .the-content ol,
.main-single .the-content ul {
    margin-left: 1.2em;
    margin-bottom: 1em;
}

.main-single .the-content a {
    text-decoration: underline;
}

.main-single .the-content p {
    color: #656;
    font-size: 16px;
    margin: 0 0 1em;
}

.main-single .wp-block-gallery ul {
    margin-left: 0;
}

.main-single .wp-block-gallery li.blocks-gallery-item {
    margin-bottom: 16px;
}

.main-single .wp-block-button {
    margin: 12px 0;
}

.main-single .the-content li {
    margin-bottom: 0.25em;
    color: #656;
}

/* the_tags() */
.main-single .tags {
    margin: 33px 0;
    clear: both;
    display: block;
}

.main-single .tags a {
    text-transform: capitalize;
    margin-right: 12px;
    display: inline-block;
    padding: 3px 12px;
    margin: 5px 5px 0 0;
    border: 1px solid #f0f0f0;
    color: #0639a9;
    border-radius: 2px;
    text-decoration: underline;
}

.main-single .tags a:first-child {
    margin-left: 10px;
}

.main-single .tags a:hover {
    background: #f0f0f0;
}

.main-single .tags a::before {
    content: '#';
}