/*====================== Start Reboot.css ======================*/
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -ms-overflow-style: scrollbar;
    -webkit-tap-highlight-color: transparent;
}

@-ms-viewport {
    width: device-width;
}

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

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-size: 16ox;
    font-weight: normal;
    line-height: 1.5;
    text-align: left;
    background-color: #fff;
}

[tabindex="-1"]:focus {
    outline: none !important;
}

hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible;
}

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

p {
    margin-top: 0;
    margin-bottom: 0;
}

ol,
ul {
    margin: 0 0 0 0;
    padding: 0 0 0 0;
}

ul {
    list-style: none;
}

blockquote {
    margin: 0 0 1rem;
}

b,
strong {
    font-weight: bolder;
}

small {
    font-size: 80%;
}

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

sub {
    bottom: -.25em;
}

sup {
    top: -.5em;
}

a {
    color: inherit;
    text-decoration: none;
    background-color: transparent;
    -webkit-text-decoration-skip: objects;
    transition: all .2s ease-in-out;
}

a:not([href]):not([tabindex]) {
    color: inherit;
    text-decoration: none;
}

a:not([href]):not([tabindex]):focus,
a:not([href]):not([tabindex]):hover {
    color: inherit;
    text-decoration: none;
}

a:not([href]):not([tabindex]):focus {
    outline: 0;
}

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

pre {
    margin-top: 0;
    margin-bottom: 1rem;
    overflow: auto;
    -ms-overflow-style: scrollbar;
}


figure {
    margin: 0 0 1rem;
}


img {
    border-style: none;
    display: block;
    max-width: 100%;
    width: auto;
    height: auto;
}

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


a,
area,
button,
[role="button"],
input:not([type=range]),
label,
select,
summary,
textarea {
    -ms-touch-action: manipulation;
    touch-action: manipulation;
}

table {
    border-collapse: collapse;
}

caption {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    color: #868e96;
    text-align: left;
    caption-side: bottom;
}

th {
    text-align: inherit;
}

label {
    display: inline-block;
    margin-bottom: .5rem;
}

button {
    border-radius: 0;
}

button:focus {
    outline: 1px dotted;
    outline: 5px auto -webkit-focus-ring-color;
}

input,
button,
select,
optgroup,
textarea {
    margin: 0;
    /* Remove the margin in Firefox and Safari */
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

button,
input {
    overflow: visible;
    /* Show the overflow in Edge */
}

button,
select {
    text-transform: none;
    /* Remove the inheritance of text transform in Firefox */
}


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

/*
  Remove inner border and padding from Firefox, but don't restore the outline like Normalize.
  */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
    padding: 0;
    border-style: none;
}

input[type="radio"],
input[type="checkbox"] {
    box-sizing: border-box;
    /* 1. Add the correct box sizing in IE 10- */
    padding: 0;
    /* 2. Remove the padding in IE 10- */
}

input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"] {
    /* 
    Remove the default appearance of temporal inputs to avoid a Mobile Safari bug where setting a custom line-height prevents text from being vertically centered within the input.
    
    See https://bugs.webkit.org/show_bug.cgi?id=139848
    and https://github.com/twbs/bootstrap/issues/11266
    */
    -webkit-appearance: listbox;
}

textarea {
    overflow: auto;
    /* Remove the default vertical scrollbar in IE. */
    /* Textareas should really only resize vertically so they don't break their (horizontal) containers. */
    resize: vertical;
}

fieldset {
    /* 
    Browsers set a default `min-width: min-content;` on fieldsets, unlike e.g. `<div>`s, which have `min-width: 0;` by default. So we reset that to ensure fieldsets behave more like a standard block element.
    
    See https://github.com/twbs/bootstrap/issues/12359
    and https://html.spec.whatwg.org/multipage/#the-fieldset-and-legend-elements  
    */
    min-width: 0;
    /* Reset the default outline behavior of fieldsets so they don't affect page layout. */
    padding: 0;
    margin: 0;
    border: 0;
}

/*
  1. Correct the text wrapping in Edge and IE.
  2. Correct the color inheritance from `fieldset` elements in IE.
  */
legend {
    display: block;
    width: 100%;
    max-width: 100%;
    /* 1 */
    padding: 0;
    margin-bottom: .5rem;
    font-size: 1.5rem;
    line-height: inherit;
    color: inherit;
    /* 2 */
    white-space: normal;
    /* 1 */
}

progress {
    vertical-align: baseline;
    /* Add the correct vertical alignment in Chrome, Firefox, and Opera. */
}

/* 
  Correct the cursor style of increment and decrement buttons in Chrome.
  */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
    height: auto;
}

[type="search"] {
    outline-offset: -2px;
    -webkit-appearance: none;
}

/*
  Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
  */
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

/*
  1. Correct the inability to style clickable types in iOS and Safari.
  2. Change font properties to `inherit` in Safari.
  */
::-webkit-file-upload-button {
    font: inherit;
    -webkit-appearance: button;
}

/*
  Correct element displays
  */
output {
    display: inline-block;
}

summary {
    display: list-item;
    /* Add the correct display in all browsers */
}

template {
    display: none;
    /* Add the correct display in IE */
}

/* 
  Always hide an element with the `hidden` HTML attribute (from PureCSS).
  Needed for proper display in IE 10-.
  */
[hidden] {
    display: none !important;
}

/*====================== End Reboot.css ======================*/

/*====================== Start Global ======================*/
:root {
    --primary-color: #0c7391;
    --secondary-color: #14b3d6;
    --third-color: #3a7ed9;
    --gray-color: #818181;
    --black-color: #474747;
}

body {
    font-size: 16px;
    font-family: "Noto Serif", serif;
    padding: 0;
    margin: 0;
    color: var(--black-color);
    overflow-x: hidden;
}

.container {
    margin: 0 auto;
    max-width: 1300px;
}

@media (max-width: 1300px) {
    .container {
        padding: 0 15px;
    }
}

a:hover {
    color: var(--primary-color);
}

a>img {
    transition: opacity .2s ease-in-out;
}

a:hover>img {
    opacity: .8;
}

img {
    width: auto;
    height: auto;
    object-fit: cover;
    object-position: top;
}

.card-title {
    margin-top: 10px;
}

.card-time {
    font-size: 0.75rem;
    font-weight: 300;
    color: #888;
    text-transform: capitalize;
}

.card-author {
    font-weight: 400;
    color: #555;
    text-transform: capitalize;
}

.card-excerpt {
    margin: 10px 0;
    color: #555;
    font-weight: 300;
    text-align: justify;
}

@media (max-width: 767px) {
    .card-excerpt {
        display: none;
    }
}

.cat-name {
    font-size: 1.1rem;
    color: var(--primary-color);
}

.uppercase {
    text-transform: uppercase;
}

.card img {
    aspect-ratio: 1.85 / 1;
}

/*====================== End Global ======================*/

/*====================== Start Header ======================*/
.topbar {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px 0;
    font-weight: 300;
}

.topbar>ul {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 auto;
}

.topbar .logo {
    display: none;
}

@media (max-width: 1149px) {
    .topbar-wrap {
        box-shadow: 0 3px 8px 0px rgba(0, 0, 0, 0.05);
    }

    .topbar {
        justify-content: space-between;
    }

    .topbar>ul {
        display: none;
    }

    .topbar .logo {
        display: block;
    }

    .topbar .logo img {
        max-height: 40px;
    }

    .mainbar,
    .bottombar {
        display: none !important;
    }
}
@media (max-width: 480px) {
    .topbar {
        padding: 8px 0;
    }
}

.topbar>ul li a {
    padding: 0 10px;
    display: block;
    font-size: .95rem;
    white-space: nowrap;
}

/* Hamburg */
.hamburg-toggle {
    display: block;
    position: relative;
    z-index: 1;
    -webkit-user-select: none;
    user-select: none;
    cursor: pointer;
}

.hamburg-toggle span {
    display: block;
    width: 28px;
    height: 3px;
    margin-bottom: 5px;
    position: relative;
    background: var(--third-color);
    border-radius: 2px;
    z-index: 1;
    transform-origin: 4px 0px;
    transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),
        background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),
        opacity 0.55s ease;
}

.hamburg-toggle span:first-child {
    transform-origin: 0% 0%;
}

.hamburg-toggle span:last-child {
    margin-bottom: 0;
}

.hamburg-toggle span:nth-last-child(2) {
    transform-origin: 0% 100%;
}

.hamburger-open .hamburg-toggle {
    position: fixed;
    left: 30px;
    z-index: 11;
}

.hamburger-open .hamburg-toggle span {
    opacity: 1;
    transform: rotate(45deg) translate(-18px, -15px);
}

.hamburger-open .hamburg-toggle span:nth-last-child(3) {
    opacity: 0;
    transform: rotate(0deg) scale(0.2, 0.2);
}

.hamburger-open .hamburg-toggle span:nth-last-child(2) {
    transform: rotate(-45deg) translate(-1px, -1px);
}

.hamburg-nav {
    position: fixed;
    width: 260px;
    height: 100%;
    left: 0;
    top: 0;
    margin: 0;
    /* padding: 30px; */
    padding: 70px 30px;
    background: #ededed;
    list-style-type: none;
    -webkit-font-smoothing: antialiased;
    transform-origin: 0% 0%;
    transform: translate(-100%, 0);
    transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
    overflow-y: auto;
    z-index: 10;
}

.hamburg-nav::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 245px;
    height: 50px;
    background-color: #ededed;
}

.admin-bar .hamburg-nav {
    top: 30px;
}

.admin-bar .hamburg-nav::after {
    top: 30px;
}

.hamburg-nav .logo {
    display: block;
    margin-bottom: 20px;
}

.hamburg-nav li {
    font-weight: 500;
    padding: 3px 0;
}

.hamburg-nav li a {
    display: block;
    padding: 3px 0;
}

.hamburger-open .hamburg-nav {
    transform: none;
}

.hamburger-open {
    overflow: hidden;
}

.hamburger-open::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .6);
}

/* Hamburger Scrollbar */
.hamburg-nav::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    background-color: #F5F5F5;
}

.hamburg-nav::-webkit-scrollbar {
    width: 12px;
    background-color: #F5F5F5;
}

.hamburg-nav::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
    background-color: var(--black-color);
}

/* Searchbar */
.searchbar {
    position: relative;
    border: 1px solid var(--third-color);
    border-radius: 15px;
    padding: 2px 5px;
    display: flex;
    align-items: center;
    transition: width .3s ease-in-out;
}

.searchbar input {
    width: 0;
    outline: none;
    margin: 0;
    border: none;
    padding: 0;
}
.searchbar-open .logo {
    display: none;
}
.searchbar-open .searchbar input {
    width: 100%;
}
.searchbar-open .searchbar {
    width: 100%;
    margin-inline-start: 15px;
}
@media (min-width: 768px) {
    .searchbar-open .searchbar {
        width: 300px;
    }
}

.searchbar button {
    outline: none;
    background: none;
    padding: 0;
    display: flex;
    border: none;
    border-radius: 15px;
    cursor: pointer;
}

.searchbar svg {
    color: var(--third-color);
}

/* Main bar */
.mainbar {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 0;
}

.mainbar .logo {
    margin: 0 auto;
}

.mainbar .logo img {
    max-height: 60px;
}

.mainbar .date {
    font-weight: 500;
    font-size: .95rem;
}

.mainbar .sitname {
    color: var(--primary-color);
    font-size: .95rem;
}

.bottombar>ul {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 5px;
    border-bottom: 1px solid #555;
}

.bottombar>ul>li {
    position: relative;
}

.bottombar>ul>li.menu-item-has-children::after {
    content: '';
    width: 15px;
    height: 15px;
    background-image: url(../img/angle.svg);
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    transition: transform .3s linear;
    z-index: -1;
}
.bottombar>ul>li.menu-item-has-children .sub-menu {
    transition: display .3s ease-in-out;
}

.bottombar>ul>li.menu-item-has-children:hover .sub-menu {
    display: block;
}

.bottombar>ul>li.menu-item-has-children:hover::after {
    transform: translateY(-50%) rotate(90deg);
}

.bottombar>ul>li>a {
    padding: 10px 20px 10px 10px;
    display: block;
}

.bottombar .sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    background-color: #fff;
    padding: 5px 0;
    box-shadow: 0 0 1px 1px #eee;
    min-width: 200px;
}

.bottombar .sub-menu>li>a {
    display: block;
    padding: 6px 15px;
    white-space: nowrap;
}

.bottombar {
    padding-bottom: 3px;
    border-bottom: 1px solid var(--primary-color);
}

/* End Header */
.main {
    padding: 15px 0 4px;
}

/*====================== Start Footer ======================*/
.newsletter {
    text-align: center;
    padding: 50px 20px;
    margin-bottom: 20px;
    background: #ebf0f4;
}
.newsletter-title {
    font-size: 1.3rem;
    font-weight: 500;
    margin-bottom: 13px;
    color: var(--primary-color);
}
.newsletter input {
    padding: 7px 7px;
    outline: none;
    font-size: .9rem;
    width: 250px;
    border: 1px solid var(--black-color);
}
.newsletter button {
    border: none;
    outline: none;
    padding: 7px 16px;
    background: var(--primary-color);
    color: #fff;
    cursor: pointer;
}
.footer-top {
    display: grid;
    grid-template-columns: 1fr 1fr;
    text-align: center;
    align-items: center;
    padding: 40px 20px 20px;
}

.appdownload {
    border-right: 1px solid var(--gray-color);
}
.footer-top h4 {
    font-size: 1.3rem;
    font-weight: 400;
    margin-bottom: 15px;
}
.appstores,
.social-links {
    display: flex;
    align-items: center;
    justify-content: center;
}
.appstores img {
    height: 55px;
    margin: 5px;
}
.social-links svg {
    height: 40px;
    width: auto;
    margin: 0 8px;
    fill: #333;
}
.social-links a:hover svg {
    fill: var(--primary-color)
}
@media (max-width: 767px) {
    .footer-top {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}

.footer {
    border-top: 1px solid var(--secondary-color);
}

@media (max-width: 767px) {
    .footer-top {
        padding: 20px 0;
    }
    .footer {
        text-align: center;
    }
    .appdownload {
        border-right: none;
        border-bottom: 1px solid var(--gray-color);
        padding-bottom: 20px;
    }
    .appstores {
        flex-direction: column;
    }
    .newsletter {
        padding: 30px 10px;
    }
    .newsletter input {
        margin-bottom: 15px;
        text-align: center;
    }
}

.foot-logo {
    margin: 30px 0;
}

.foot-logo a {
    display: inline-block;
}

.foot-logo img {
    max-height: 45px;
}

@media (min-width: 768px) {
    .foot-menu>ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
}

.foot-menu>ul>li>a {
    text-transform: uppercase;
    font-weight: 600;
    border-bottom: 1px solid #ebe7e7;
    padding-bottom: 7px;
    margin-bottom: 7px;
    display: inline-block;
}

.foot-menu .sub-menu li {
    margin-bottom: 6px;
    font-size: 0.9rem;
}

.foot-copy,
.foot-copy ul {
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 767px) {
    .foot-copy,
    .foot-copy ul {
        flex-direction: column;
    }
}

.foot-copy {
    font-size: 0.85rem;
    color: #7d8083;
    margin-top: 40px;
    border-top: 1px solid #ccc;
    padding: 20px 0;
}

.foot-copy .copyright {
    text-transform: uppercase;
    margin-inline-end: 10px;
}

.foot-copy li {
    padding: 0 10px;
}

/*====================== End Footer ======================*/

/* Start Grid Section */
.grid-section {
    padding: 25px 0 15px 0;
    border-bottom: 1px solid var(--black-color);
}

.grid-section .grid {
    padding: 20px 0;
    display: grid;
    gap: 15px;
}

@media (min-width: 768px) {
    .grid-section .grid {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 20px;
    }

    .grid-section .card:not(:nth-child(2n)) {
        border-right: 1px solid var(--secondary-color);
        padding-right: 15px;
    }

    .grid-section .card img {
        width: 100%;
    }
}

@media (min-width: 991px) {
    .grid-section .grid {
        grid-template-columns: repeat(4, 1fr);

    }

    .grid-section .card:not(:nth-child(4n)) {
        border-right: 1px solid var(--secondary-color);
        padding-right: 15px;
    }
}

.grid-section .card-title {
    font-size: 1.1rem;
}

/* Start Grid Section */

/*====================== Start Homepage ======================*/
.hero-w-sidebar {
    display: grid;
    border-bottom: 1px solid var(--black-color);
    padding-bottom: 15px;
    margin-bottom: 15px;
}

@media (min-width: 1024px) {
    .hero-w-sidebar {
        grid-template-columns: 3fr 1fr;
    }

}

/* Hero Sidebar */
.side-cat:not(:last-child) {
    border-bottom: 1px solid #555;
    margin-bottom: 20px;
}

.side-cat-title {
    text-align: center;
    text-transform: uppercase;
    color: var(--primary-color);
    margin-bottom: 20px;
    font-size: 1.2rem;
}

.side-cat-title a:hover {
    color: var(--secondary-color);
}

.hero-main {
    overflow: hidden;
}

@media (min-width: 1024px) {
    .hero-main {
        padding-right: 15px;
    }

    .hero-side {
        padding-left: 15px;
        border-left: 1px solid var(--primary-color);
    }
}
@media (max-width: 1023px) {
    .hero-side {
        border-top: 1px solid var(--gray-color);
        padding-top: 20px;
        margin-top: 20px;
    }
}

.side-cat .card {
    margin-bottom: 25px;
}
.side-cat .card img {
    width: 100%;
}

.side-cat:last-child .card:last-child {
    margin-bottom: 0;
}

.side-cat .card-title {
    font-size: 1rem;
}

/* Directo */
.directo {
    /* color:  */
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 600;
    border-bottom: 1px solid #555;
    padding-bottom: 15px;
    margin-bottom: 15px;
}

.directo li:not(.directo-title) {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-inline-start: 15px;
}

.directo li:first-child {
    padding-inline-start: 0;
}

.directo-title {
    white-space: nowrap;
    text-transform: uppercase;
    color: #e74c3c;
}

@media (max-width: 768px) {
    .directo {
        display: block;
    }

    .directo-title {
        display: none;
    }

    .directo li:not(.directo-title) {
        padding-inline-start: 0;
    }

    .directo li:not(:last-child) {
        margin: 7px 0;
        padding: 7px 0;
        border-bottom: 1px solid var(--secondary-color);
    }
}

/* Hero Grid / Slider */
.hero-grid {
    border-bottom: 1px solid var(--secondary-color);
    padding-bottom: 15px;
    margin-bottom: 15px;
}

@media (min-width: 768px) {
    .hero-grid {
        display: grid;
        gap: 15px;
        grid-row-gap: 25px;
        grid-template-areas:
            'heroFirst heroFirst heroSecond'
            'heroFirst heroFirst heroThird';
    }
}

@media (max-width: 767px) {
    .hero-grid {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }
}

.hero-grid .card:first-child {
    grid-area: heroFirst;
}

.hero-grid .card:nth-child(2) {
    grid-area: heroSecond;
}

.hero-grid .card:nth-child(3) {
    grid-area: heroThird;
}

.hero-grid img {
    width: 100%;
    aspect-ratio: 1.85 / 1;
}

.hero-grid .card:not(:first-child) .card-title {
    font-size: 1rem;
}

/* Three Cats Columns */
.three-cats {
    display: grid;
    gap: 10px;
    grid-template-columns: 1fr 1fr 1fr;
    padding-bottom: 15px;
    border-bottom: 1px solid #555;
}


.three-cats .cat {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.three-cats .cat:not(:last-child) {
    border-right: 1px solid var(--secondary-color);
    padding-right: 10px;
}

.three-cats .cat-text {
    margin-right: 15px;
}

.three-cats .card-title {
    font-size: 1rem;
    margin-top: 0;

    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
}

.three-cats .cat-img img {
    height: 100%;
}

@media (max-width: 767px) {
    .three-cats .cat:not(:last-child) {
        border-right: none;
        padding-right: 0;
        padding-bottom: 10px;
        border-bottom: 1px solid var(--secondary-color);
    }

    .three-cats {
        display: flex;
        flex-direction: column;
    }
}

/* Three Rows */
.three-rows {
    padding: 25px 0;
    margin-bottom: 15px;
    border-bottom: 1px solid var(--black-color);
}

.three-rows .card {
    display: flex;
    grid-template-columns: 2fr 1fr;
    gap: 15px;
    padding: 10px 0;
}

.three-rows .card-text {
    width: 65%;
    flex-shrink: 0;
}
.three-rows .card-img,
.three-rows .card-img img {
    width: 100%;
}

.three-rows .card-excerpt {
    text-align: initial;
}

@media (min-width: 768px) {
    .three-rows .card:not(:last-child) .card-text {
        border-bottom: 1px solid var(--secondary-color);
    }
}
@media (max-width: 767px) {
    .three-rows .card:not(:last-child) {
        border-bottom: 1px solid var(--secondary-color);
    }
    .three-rows .card-title {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        line-clamp: 3;
        -webkit-box-orient: vertical;
        font-size: 1rem;
        margin-top: 0;
    }
    .three-rows .card-text {
        width: calc(50% - 15px);
    }
}
@media (max-width: 480px) {
    .three-rows .card-title {
        font-size: 1rem;
        margin-top: 0;
    }
    .three-rows .card-time {
        margin-bottom: 5px;
    }
    .three-rows .card {
        align-items: center;
    }
    .three-rows .card-text {
        width: 60%;
    }
}
@media (max-width: 360px) {
    .three-rows .card img {
        aspect-ratio: 1;
    }
}

/* Three Cols */
.three-cols {
    padding: 15px 0;
    border-bottom: 1px solid var(--black-color);
}

.three-cols .grid {
    padding: 20px 0;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 15px;

}

@media (min-width: 768px) {
    .three-cols .card img {
        width: 100%;
        height: 195px;
    }
}

.three-cols .card-title {
    font-size: 1.1rem;
}

.three-cols .card:not(:last-child) {
    border-right: 1px solid var(--secondary-color);
    padding-right: 15px;
}

@media (max-width: 767px) {
    .three-cols .grid {
        display: flex;
        flex-direction: column;
    }

    .three-cols .card:not(:last-child) {
        border-right: none;
        border-bottom: 1px solid var(--secondary-color);
        padding-right: 0;
        padding-bottom: 15px;
    }
}

/* Two Cols */
.two-cols {
    padding-top: 15px;
}

.two-cols .titles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}
.two-cols .titles .cat-name:first-child {
    border-right: 1px solid var(--secondary-color);
}

.two-cols .cat-name {
    padding: 10px 0 20px;
    margin: 0;
}

.two-cols .grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(3, 1fr);
    grid-auto-flow: column;
    column-gap: 15px;
}

.two-cols .card {
    padding-bottom: 20px;
}



@media (max-width: 560px) {
    .two-cols .titles {
        display: none;
    }
    .two-cols .grid {
        display: flex;
        flex-direction: column;
    }
    .two-cols .grid .cat-name:not(:first-child) {
        border-top: 1px solid var(--secondary-color);
        padding-top: 20px;
    }
}
@media (min-width: 561px) {
    .two-cols .grid .cat-name {
        display: none;
    }
    .two-cols .grid > *:nth-child(1),
    .two-cols .grid > *:nth-child(2),
    .two-cols .grid > *:nth-child(3),
    .two-cols .grid > *:nth-child(4) {
        border-right: 1px solid var(--secondary-color);
        padding-right: 15px;
    }
}

/* @media (min-width: 768px) {
    .two-cols .card img {
        width: 100%;
        height: 260px;
    }
} */

.two-cols .card-title {
    font-size: 1.1rem;
}

/* @media (max-width: 767px) {
    .two-cols .titles {

    }
} */

/* Newspaper */
.newspaper {
    padding: 15px 0;
    border-bottom: 1px solid var(--black-color);
}

.newspaper .grid {
    padding-top: 10px;
    display: grid;
    gap: 25px;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, auto);
    grid-template-areas:
        "first third fourth"
        "second third fifth";
}

@media (max-width: 767px) {
    .newspaper .grid {
        display: flex;
        flex-direction: column;
    }
}

.newspaper .card-1 {
    grid-area: first
}

.newspaper .card-2 {
    grid-area: second
}

.newspaper .card-3 {
    grid-area: third
}

.newspaper .card-4 {
    grid-area: fourth
}

.newspaper .card-5 {
    grid-area: fifth
}

.newspaper .card:not(.card-3) .card-title {
    margin-top: 0;
}

.newspaper .card img {
    width: 100%;
}

/*====================== End Homepage ======================*/

/*====================== Start Single ======================*/
.main-article img {
    max-width: 100%;
    margin: 15px auto;
}
.main-article .card-time {
    margin-bottom: 20px;
    font-size: .8rem;
}
.post-body p {
    margin-bottom: 10px;
    line-height: 1.8;
}
.post-body a {
    font-weight: 600;
    color: var(--primary-color);
    transition: color .3s ease-in-out;
}
.post-body a:hover {
    color: var(--secondary-color);
}
.post-body .twitter-tweet {
    margin: 20px auto;
}
.share-buttons {
    text-align: center;
    margin-bottom: 15px;
    margin-top: 10px;
    display: flex;
    justify-content: center;
}
.share-btn {
    margin: 0 2px;
    color: #fff;
    width: 36px;
    height: 36px;
    transition: all .2s linear;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.share-btn:hover {
    background: #363636;
    color: #fff
}
.share-fb {
    background: #3a579a
}
.share-tw {
    background: #14171A
}
.share-ml {
    background: #666
}
.share-in {
    background: #0a66c2
}
.share-tgm {
    background: #65bbe3
}
.share-wh {
    background: #1d9e11
}
.share-copy {
    background: #333
}
.share-print {
    background: #555
}
.share-zoom-in {
    background: #192a56
}
.share-zoom-out {
    background: #40739e;
}
.share-btn i {
    font-size: 18px
}
.share-lg .share-btn {
    width: auto;
    height: auto
}
.share-lg span {
    display: block;
    font-weight: 700;
    padding: 0 7px;
    font-size: 14px
}
.post-tags {
    margin: 10px 0;
}
.post-tag {
    display: inline-block;
    background: var(--secondary-color);
    color: #fff;
    padding: 2px 10px;
    border-radius: 15px;
    font-size: .8rem;
}
.post-cats {
    margin: 20px 0;
    padding: 10px 0;
    border-top: 1px solid var(--gray-color);
    border-bottom: 1px solid var(--gray-color);
}
.post-cat {
    display: inline-block;
    font-size: 1rem;
    padding-inline-start: 5px;
    padding-inline-end: 15px;
    position: relative;
}
.post-cats .post-cat:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--black-color);
}
/*====================== End Single ======================*/

/*====================== Start Archive ======================*/
.next-posts-button {
    text-align: center;
    padding: 20px 0;
}

.next-posts-button a {
    display: inline-block;
    padding: 5px 20px;
    background: var(--primary-color);
    color: #fff;
    border-radius: 5px;
    transition: background .3s ease-in-out;
}

.next-posts-button a:hover {
    background: var(--secondary-color);
}

/*====================== End Archive ======================*/

@media (max-width: 480px) {
    #wp-admin-bar-top-secondary {
        display: none !important;
    }
}
/* Start Language Switcher */
.hamburger {
    display: flex;
    align-items: center;
}
.lang-switcher {
    margin-inline-start: 10px;
}
.lang-switcher img {
    width: 60px;
    filter: invert(26%) sepia(82%) saturate(2958%) hue-rotate(196deg) brightness(90%) contrast(90%);
}
.searchbar {
    margin-inline-start: 50px;
}
/* End Language Switcher */

/* Start CAN25 */
.can25-ban {
    margin-bottom: 15px;
    background: url(../img/caf-bg.jpg) no-repeat center bottom;
    background-size: cover;
    position: relative;
    padding: 5px 0;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}
.can25-ban img {
    width: 25%;
    max-width: 200px;
    height: auto;
    margin-inline-end: 20px;
}
.can25-ban h3 {
    color: #fff;
    font-size: clamp(1rem, 3.7vw, 2rem);
    margin-bottom: 0;
}
.can25-ban:hover h3 {
    opacity: 0.8;
}
.can25-ban span {
    font-size: 1.1rem;
    color: #ccc;
}
/* End CAN25 */