/*!
Theme Name: Sublime Journal
Theme URI: https://sublimetheme.com/theme/sublime-journal/
Author: SublimeTheme
Author URI: https://sublimetheme.com/
Description: Sublime Journal inherits the functionality & styling from the Sublime Blog theme. And as an awesome child theme, it's easy to extend and use. Built on a powerful theme framework, you get superior flexibility to customize without a single line of coding. Moreover, this journal WordPress theme comes with 100% clean & responsive layouts, flaunts elegant and modern design, which is exactly what you need for grabbing more visitors and boosting your website. On top of it, Sublime Journal is Gutenberg compatible, SEO-friendly, and works almost with all powerful plugins & page builders. Check theme demo at https://sublimetheme.com/theme/sublime-journal/, read the documentation at https://sublimetheme.com/docs/sublime-journal/ and get support at https://sublimetheme.com/support/.
Template: sublime-blog
Version: 1.0.3
Requires at least: 4.9
Tested up to: 6.8
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sublime-journal
Tags: blog, one-column, two-columns, right-sidebar, footer-widgets, custom-background, custom-logo, custom-menu, featured-images, threaded-comments, rtl-language-support, translation-ready, theme-options

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.

Sublime Blogger is based on Underscores https://underscores.me/, (C) 2012-2017 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/
:root {
    --primary-color: #7abfc1;
    --primary-color-rgb: 122, 191, 193;
    --body-color: #494949;
    --heading-color: #212121;
    --black-color-rgb: 0, 0, 0;
    --white-color: #ffffff;
    --white-color-rgb: 255, 255, 255;
    --primary-font: 'Nunito Sans', sans-serif;
}

/*=================================
GLOBAL CSS
=================================*/
h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
}

.search-form .search-submit:hover {
    background-image: url('data:image/svg+xml; utf-8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="%237abfc1" d="M508.5 468.9L387.1 347.5c-2.3-2.3-5.3-3.5-8.5-3.5h-13.2c31.5-36.5 50.6-84 50.6-136C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c52 0 99.5-19.1 136-50.6v13.2c0 3.2 1.3 6.2 3.5 8.5l121.4 121.4c4.7 4.7 12.3 4.7 17 0l22.6-22.6c4.7-4.7 4.7-12.3 0-17zM208 368c-88.4 0-160-71.6-160-160S119.6 48 208 48s160 71.6 160 160-71.6 160-160 160z"></path></svg>');
}

.comments-area ol li article .reply .comment-reply-link {
    background-image: url('data:image/svg+xml; utf-8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="%237abfc1" d="M511.563,434.259c-1.728-142.329-124.42-258.242-277.087-263.419V95.999c0-17.645-14.342-31.999-31.974-31.999 c-7.931,0-15.591,3.042-21.524,8.562c0,0-134.828,124.829-173.609,163.755C2.623,241.109,0,248.088,0,255.994 c0,7.906,2.623,14.885,7.369,19.687c38.781,38.915,173.609,163.745,173.609,163.745c5.933,5.521,13.593,8.562,21.524,8.562 c17.631,0,31.974-14.354,31.974-31.999v-74.591c153.479,2.156,255.792,50.603,255.792,95.924c0,5.896,4.767,10.666,10.658,10.666 c0.167,0.021,0.333,0.01,0.416,0c5.891,0,10.658-4.771,10.658-10.666C512,436.259,511.854,435.228,511.563,434.259z"></path></svg>');
}

.site-footer .search-form .search-submit:hover {
    background-image: url('data:image/svg+xml; utf-8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="%237abfc1" d="M508.5 468.9L387.1 347.5c-2.3-2.3-5.3-3.5-8.5-3.5h-13.2c31.5-36.5 50.6-84 50.6-136C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c52 0 99.5-19.1 136-50.6v13.2c0 3.2 1.3 6.2 3.5 8.5l121.4 121.4c4.7 4.7 12.3 4.7 17 0l22.6-22.6c4.7-4.7 4.7-12.3 0-17zM208 368c-88.4 0-160-71.6-160-160S119.6 48 208 48s160 71.6 160 160-71.6 160-160 160z"></path></svg>');
}

.search .page-header .search-form .search-submit:hover {
    background-image: url('data:image/svg+xml; utf-8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="%237abfc1" d="M508.5 468.9L387.1 347.5c-2.3-2.3-5.3-3.5-8.5-3.5h-13.2c31.5-36.5 50.6-84 50.6-136C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c52 0 99.5-19.1 136-50.6v13.2c0 3.2 1.3 6.2 3.5 8.5l121.4 121.4c4.7 4.7 12.3 4.7 17 0l22.6-22.6c4.7-4.7 4.7-12.3 0-17zM208 368c-88.4 0-160-71.6-160-160S119.6 48 208 48s160 71.6 160 160-71.6 160-160 160z"></path></svg>');
}

/*===============================
SITE HEADER
===============================*/
.header-banner-wrap::before {
    display: none;
}

.header-search .search-toggle {
    padding: 0;
    background: rgba(var(--black-color-rgb), 0.05);
    color: var(--heading-color);
    width: 40px;
    height: 40px;
    line-height: 44px;
    min-height: auto;
    border: none;
    border-radius: 100%;
    font-size: 0.8888em;
    cursor: pointer;
}

.header-search .search-toggle:hover {
    background: var(--primary-color);
    color: var(--white-color);
}

body.search-active {
    overflow: hidden;
}

.header-search .header-search-wrap {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    display: none;
}

.header-search .header-search-inner-wrap {
    background: rgba(var(--black-color-rgb), 0.9);
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    transform: scale(0.9);
    -webkit-transition: all ease 0.35s;
    -moz-transition: all ease 0.35s;
    transition: all ease 0.35s;
}

.header-search .active .header-search-inner-wrap {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    transform: scale(1);
}

.header-search .header-search-wrap .close {
    position: absolute;
    top: 30px;
    right: 30px;
    width: 30px;
    height: 30px;
    padding: 0;
    background: none;
    border: none;
    min-height: auto;
}

.header-search .header-search-wrap .close::before, 
.header-search .header-search-wrap .close::after {
    content: "";
    background: var(--white-color);
    width: 100%;
    height: 2px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
}

.header-search .header-search-wrap .close::after {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.header-search .header-search-wrap .close:hover:before, 
.header-search .header-search-wrap .close:hover:after {
    background: #f00;
}

.header-search .header-search-wrap .search-form {
    max-width: 768px;
    width: 100%;
    background: rgba(var(--white-color-rgb),0.25);
    border: none;
    margin: 0;
}

.header-search .header-search-wrap .search-form label {
    float: left;
    width: calc(100% - 70px);
}

.header-search .header-search-wrap .search-form label .search-field {
    height: 70px;
    border: none;
    padding: 10px 20px;
    font-size: 1.1112em;
    font-weight: 400;
    color: var(--white-color);
}

.header-search .header-search-wrap .search-form .search-submit {
    width: 70px;
    height: 70px;
    padding: 0;
    background-color: var(--primary-color);
    background-image: url('data:image/svg+xml; utf-8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="%23fff" d="M508.5 468.9L387.1 347.5c-2.3-2.3-5.3-3.5-8.5-3.5h-13.2c31.5-36.5 50.6-84 50.6-136C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c52 0 99.5-19.1 136-50.6v13.2c0 3.2 1.3 6.2 3.5 8.5l121.4 121.4c4.7 4.7 12.3 4.7 17 0l22.6-22.6c4.7-4.7 4.7-12.3 0-17zM208 368c-88.4 0-160-71.6-160-160S119.6 48 208 48s160 71.6 160 160-71.6 160-160 160z"></path></svg>');
    white-space: nowrap;
    text-indent: 80px;
    background-repeat: no-repeat;
    background-size: 30px;
    background-position: center;
}

.header-search .header-search-wrap .search-form .search-submit:hover {
    background-color: var(--heading-color);
}

/*============================
SITE HEADER LAYOUT THREE
============================*/
.site-header.layout-three .top-header {
    padding-top: 30px;
    padding-bottom: 30px;
}

.site-header.layout-three .top-header .site-branding {
    text-align: left;
    justify-content: flex-start;
    flex: initial;
}

.site-header.layout-three .top-header .site-branding .site-title-wrap {
    text-align: center;
}

.site-header.layout-three .top-header .site-branding .custom-logo-link + .site-title-wrap {
    text-align: left;
}

.site-header.layout-three .top-header .header-right {
    align-items: flex-end;
    display: flex;
    flex-direction: column;
}

.site-header.layout-three .top-header .site-branding + .header-right {
    padding-left: 5%;
    flex: 1;
}

.site-header .header-right .widget {
    margin: 0;
}

.site-header .header-right .widget .widget-title {
    margin: 0 0 5px 0;
    text-align: center;
    font-size: 0.6666em;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: rgba(var(--black-color-rgb), 0.5);
}

.site-header.layout-three .nav-wrap {
    border-top: none;
    text-align: left;
    background: var(--primary-color);
}

.site-header.layout-three .nav-wrap .container {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.site-header.layout-three .nav-wrap .main-navigation {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex-direction: column;
    flex: 1;
    text-align: left;
}

.site-header.layout-three .nav-wrap .main-navigation ul.menu > li {
    font-size: 0.89em;
}

.site-header.layout-three .nav-wrap .main-navigation ul.menu > li > a, 
.site-header.layout-three .nav-wrap .main-navigation .menu > ul > li > a {
    color: var(--white-color);
    padding-top: 20px;
    padding-bottom: 20px;
}

.site-header.layout-three .nav-wrap .main-navigation ul.menu > li:hover > a, 
.site-header.layout-three .nav-wrap .main-navigation ul.menu > li.current-menu-item > a, 
.site-header.layout-three .nav-wrap .main-navigation ul.menu > li.current_page_item > a, 
.site-header.layout-three .nav-wrap .main-navigation ul.menu > li.current-menu-ancestor > a, 
.site-header.layout-three .nav-wrap .main-navigation ul.menu > li.current_page_ancestor > a, 
.site-header.layout-three .nav-wrap .main-navigation .menu > ul > li:hover > a, 
.site-header.layout-three .nav-wrap .main-navigation .menu > ul > li.current-menu-item > a, 
.site-header.layout-three .nav-wrap .main-navigation .menu > ul > li.current_page_item > a, 
.site-header.layout-three .nav-wrap .main-navigation .menu > ul > li.current-menu-ancestor > a, 
.site-header.layout-three .nav-wrap .main-navigation .menu > ul > li.current_page_ancestor > a {
    background: rgba(var(--black-color-rgb), 0.05);
}

.site-header.layout-three .nav-wrap .header-right {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    flex: initial;
}

.site-header.layout-three .header-social .social-list li {
    margin-bottom: 0;
}

.site-header.layout-three .header-social .social-list li a, 
.site-header.layout-three .header-search .search-toggle {
    width: 30px;
    height: 30px;
    line-height: 30px;
    color: rgba(var(--white-color-rgb), 0.8);
    background: none;
    border-radius: 0;
}

.site-header.layout-three .header-social + .header-search .search-toggle {
    border-left: 1px solid rgba(var(--white-color-rgb), 0.3);
    margin-left: 10px;
    padding-left: 10px;
}

.site-header.layout-three .header-social .social-list li a:hover, 
.site-header.layout-three .header-search .search-toggle:hover {
    color: var(--white-color);
}

/*=============================
SITE BANNER
=============================*/
.site-banner .banner-item .item-content-inner .item-title {
    font-weight: 700;
}

.site-banner .owl-nav button[class*="owl-"] {
    top: 40%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    transform: translateY(-50%);
}

/*===========================
SITE BANNER LAYOUT FOUR
============================*/

.site-banner.layout-four .owl-item:not(.active) .banner-item {
    opacity: 0.35;
    filter: alpha(opacity=35);
}

.site-banner.layout-four .banner-item {
    padding-bottom: 80px;
}

.site-banner.layout-four .banner-item .item-content {
    left: 5%;
    right: 5%;
    top: auto;
}

.site-banner.layout-four .banner-item .item-content-inner {
    background: var(--white-color);
    box-shadow: 0 0 50px rgba(0,0,0,0.15);
    padding: 40px;
    max-width: 768px;
    width: 100%;
}

.site-banner.layout-four .banner-item .item-content .category a, 
.site-banner.layout-four .banner-item .item-content .category a::after {
    color: var(--body-color);
}

.site-banner.layout-four .banner-item .item-content-inner .item-title a {
    color: var(--heading-color);
}

.site-banner.layout-four .banner-item .item-content .category a:hover, 
.site-banner.layout-four .banner-item .item-content-inner .item-title a:hover {
    color: var(--primary-color);
}

/*=========================
ARTICLE GLOBAL CSS
=========================*/
.site-main article .entry-header {
    margin-bottom: 30px;
}
   
.site-main article .entry-title {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 1.6667em;
    font-weight: 700;
    line-height: 1.4;
}
   
.site-main article .entry-title a {
    display: inline-block;
    color: var(--heading-color);
    text-decoration: none;
}
   
.site-main article .entry-title a:hover {
    color: var(--primary-color);
}
   
.site-main article .entry-meta {
    margin-top: 20px;
}
   
.site-main article .entry-content {
    margin-top: 20px;
    font-size: 0.8888em;
}
   
.site-main article .entry-content p {
    margin-top: 20px;
    margin-bottom: 0;
}
   
.site-main article .entry-content p:first-child {
    margin-top: 0;
}
   
.site-main article .button-wrap {
    margin-top: 30px;
}
   
.site-main article .button-wrap a {
    display: inline-block;
    text-transform: uppercase;
    font-size: 0.7778em;
    font-weight: 600;
    letter-spacing: 1px;
    color: var(--body-color);
    border: 2px solid rgba(var(--black-color-rgb), 0.15);
    padding: 12px 25px;
    text-decoration: none;
}
   
.site-main article .button-wrap a:hover {
    color: var(--primary-color);
    border-color: var(--primary-color);
}

/*=========================
LIST LAYOUT
=========================*/
.list-layout .site-main article {
    margin-bottom: 50px;
    padding-bottom: 50px;
    border-bottom: 5px solid rgba(var(--black-color-rgb), 0.1);
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}

.list-layout .site-main article .post-thumbnail {
    width: 400px;
}

.list-layout .site-main article .post-thumbnail + .content-wrap {
    width: calc(100% - 400px);
    padding-left: 40px;
}

.list-layout:not(.fullwidth) .site-main article .post-thumbnail {
    width: 300px;
}

.list-layout:not(.fullwidth) .site-main article .post-thumbnail + .content-wrap {
    width: calc(100% - 300px);
}

.list-layout:not(.fullwidth) .site-main article .entry-title {
    font-size: 1.3333em;
}

.list-layout:not(.fullwidth) .site-main .entry-meta {
    margin-top: 10px;
}

.list-layout:not(.fullwidth) .site-main .entry-meta > span {
    margin-right: 3%;
}

.list-layout:not(.fullwidth) .site-main .entry-meta > span:last-child {
    margin-right: 0;
}

.list-layout:not(.fullwidth) .site-main .entry-meta > span img {
    display: none;
}


/*==============================
RESPONSIVE STYLESHEET
==============================*/
@media screen and (max-width: 1024px) {
    /*==============================
    SITE HEADER
    ==============================*/
    .header-search .header-search-wrap .search-form {
        width: 90%;
    }

    /*============================
    SITE HEADER LAYOUT THREE
    =============================*/
    .site-header.layout-three .nav-wrap .container {
        position: relative;
    }

    .site-header.layout-three .nav-wrap .main-navigation {
        margin-right: 5px;
        position: static
    }

    .site-header.layout-three .nav-wrap .main-navigation .toggle-button {
        padding-left: 0;
        width: 30px;
        height: 30px;
    }

    .site-header.layout-three .nav-wrap .main-navigation .toggle-button .toggle-bar {
        background: rgba(var(--white-color-rgb),0.8);
    }

    .site-header.layout-three .nav-wrap .main-navigation .toggle-button:hover .toggle-bar {
        background: var(--white-color);
    }

    .site-header.layout-three .nav-wrap .main-navigation .toggle-button .toggle-text {
        display: none;
    }

    .main-navigation .close {
        display: none;
        position: relative;
        background: none;
        border: none;
        padding: 0;
        /*min-height: auto;*/
    }
   
    .main-navigation .close:hover {
       background: none;
       color: var(--primary-color);
    }

    .site-header.layout-three .nav-wrap .main-navigation .close {
        min-height: 50px;
    }

    .site-header:not(.layout-four) .main-navigation .close .toggle-bar {
        position: relative;
        width: 25px;
        height: 25px;
        margin-right: 5px;
        display: inline-block;
        vertical-align: middle;
    }
    
    .site-header:not(.layout-four) .main-navigation .close .toggle-bar::before, 
    .site-header:not(.layout-four) .main-navigation .close .toggle-bar::after {
        content: "";
        position: absolute;
        width: 100%;
        height: 2px;
        background: var(--primary-color);
        top: 0;
        bottom: 0;
        left: 0;
        margin: auto;
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        transform: rotate(45deg);
        -webkit-transition: all ease 0.35s;
        -moz-transition: all ease 0.35s;
        transition: all ease 0.35s;
    }
    
    .site-header:not(.layout-four) .main-navigation .close .toggle-bar::after {
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }

    .site-header.layout-three .nav-wrap .main-navigation .close .toggle-bar::before, 
    .site-header.layout-three .nav-wrap .main-navigation .close .toggle-bar::after {
        background: var(--white-color);
    }

    .site-header.layout-three .nav-wrap .main-navigation .close .toggle-text {
        display: none;
    }

    .site-header.layout-three .nav-wrap .main-navigation ul.menu > li > a {
        color: var(--heading-color);
        padding-top: 15px;
        padding-bottom: 15px;
    }

    /*========================
    LIST LAYOUT
    ========================*/
    .list-layout .site-main article .post-thumbnail {
        width: 300px;
    }

    .list-layout .site-main article .post-thumbnail + .content-wrap {
        width: calc(100% - 300px);
    }

    .list-layout .site-main article .entry-meta > span img {
        display: none;
    }
}

@media screen and (max-width: 767px) {
    /*============================
    SITE HEADER LAYOUT THREE
    =============================*/
    .site-header.layout-three .top-header .container {
        flex-direction: column;
    }

    .site-header.layout-three .top-header .site-branding {
        text-align: center;
        justify-content: center;
        flex-direction: column;
    }

    .site-header.layout-three .top-header .site-branding .custom-logo-link + .site-title-wrap {
        text-align: center;
        padding-left: 0;
    }

    .site-header.layout-three .top-header .site-branding + .header-right {
        margin-top: 20px;
        padding-left: 0;
    }

    /*================================
    SITE BANNER
    ================================*/
    .site-banner .owl-nav button[class*="owl-"] {
        top: 30%;
    }

    /*========================
    LIST LAYOUT
    ========================*/
    .list-layout .site-main article {
        flex-direction: column;
    }

    .list-layout .site-main article .post-thumbnail, 
    .list-layout:not(.fullwidth) .site-main article .post-thumbnail {
        width: 100%;
        margin-bottom: 40px;
    }

    .list-layout .site-main article .post-thumbnail + .content-wrap, 
    .list-layout:not(.fullwidth) .site-main article .post-thumbnail + .content-wrap {
        width: 100%;
        padding-left: 0;
    }
}