/*
Theme Name: Graceful Fame Blog
Theme URI: https://optimathemes.com/graceful-fame-blog-theme/
Author: Aslam
Author URI: http://optimathemes.com/
Description: Graceful Fame Blog is a free WordPress Blogging theme. Its perfect for any kind of blog or website like lifestyle, fashion, travel, tech, health, fitness, beauty, food, news, magazine, blogging, personal, professional, etc. Its fully Responsive and Retina Display ready, clean, modern and minimal design. Graceful is WooCommerce compatible, supports RTL(Right To Left) and is optimized for SEO.
Template: graceful
Version: 1.0.2
Requires at least: 5.3
Tested up to: 6.3
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: graceful-fame-blog
Tags: blog, one-column, two-columns, three-columns, left-sidebar, right-sidebar, custom-background, custom-colors, custom-header, custom-menu, custom-logo, featured-images, footer-widgets, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready, e-commerce
*/


/*
Customization of child theme starts here
*/

/*--------------------------------------------------------------
Header Sections
--------------------------------------------------------------*/
body {
    background-color: #f9f6f4;
}

.site-branding a {
    color: #333f3b;
}

.blog .post-title {
    font-size: 28px;
    line-height: 38px;
}

.blog article .post-meta {
    margin-bottom: 10px;
}

.blog .post-page-content {
    padding-top: 10px;
}

.entry-header {
    border-bottom: 1px solid #e4e4e4;
    background-color: #f9f6f4;
}

#main-navigation {
    background-color: #b8bcb3;
    border-bottom: 1px solid #e4e4e4;
}

#main-navigation a, #main-navigation i, #main-navigation li.current-menu-item > a {
    color: #ffffff;
}

.left-menu-icon span {
    background-color: #ffffff;
}

#top-navigation {
    border-bottom: 1px solid #d9d1c0;
}

aside .graceful-widget h2, 
.graceful-widget .widget-title {
    background: #f9f6f4;
    border: 1px solid #ddac94;
    font-weight: 600;
}

aside .graceful-widget h2::after {
    border-top: 8px solid #ddac94;
}

#graceful-post-slider .owl-stage-outer:after {
    background-color: #ffffff;
}

#graceful-post-slider .owl-nav {
    background-color: #f9f6f4;
}

#graceful-post-slider {
    background-color: #f6ede9;
    padding-left: 40px;
    padding-right: 40px;
}




.post-title {
    word-wrap: break-word;
}

.post-title a {
    color: #6d7975;
}

#primary .continue-read a {
    background-color: #ddac94;
    color: #ffffff;
    text-decoration: none;
}

#primary .post-categories a {
    color: #b14d1c;
}

.graceful-slider-title {
    width: 460px;
    word-wrap: break-word;
}

@media screen and (max-width: 480px) {
    .graceful-slider-title {
        width: 300px;
    }
}

.site-images {
    min-height: 245px;
    background: #f9f6f4;
}

#site-footer {
    margin-top: 40px;
    background: #f6ede9;
}

#site-footer .graceful-widget h2::after {
    background: #f9f6f4 !important;
}

.header-left-menu-wrapper .header-left-menu-wrap {
    background: #f9f6f4;
}

.content-column > li {
    margin-bottom: 30px;
    display: inline-block;
    vertical-align: top;
    margin-right: 35px;
    width: calc((100% - 37px ) /2);
    width: -webkit-calc((100% - 40px ) /2);
}

.content-column > li:nth-of-type(2n+2) {
    margin-right: 0;
}

[data-layout*="col1-leftrightsidebar"] .content-column > li {
    width: 100%;
}

.single .post-date {
    color: #111111 !important;
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
}

.single .post-title-author { 
    color: #111111 !important;
    display: inline-block;
    font-family: 'Lato', sans-serif;
    font-size: 13px;
    font-weight: normal;
}

@media screen and (max-width: 480px) {
    .content-column > li {
        width: 100%;
    }
}

#responsive-menu .sub-menu > li {
    background: #9aa38e;
}

#responsive-menu .sub-menu > li li {
    background: #848f75;
}

/* Top Navigation
   ========================================================================== */

#top-navigation {
  background: #b8bcb3;    
  text-align: center;
  box-shadow: 0px 1px 5px rgba(0,0,0, 0.1);
  border-bottom: none;
}

#top-menu {
  display: inline-block;
}

#top-menu li {
  position: relative;
}

#top-menu li.menu-item-has-children>a:after {
    font-family: FontAwesome;
    content: "\f107";
    margin-left: 6px;
    font-size: 12px;
}

#top-menu ul li.menu-item-has-children>a:after {
    font-family: FontAwesome;
    content: "\f105";
    font-size: 14px;
    float: right;
}

#top-menu > li {
  display: inline-block;
  list-style: none;
}

#top-menu li a {
  display: block;
  position: relative;
  padding: 0 5px;
  margin-left: 5px;
  color: #000000;
}

#top-menu a:focus {
  outline: 3px dotted #000000 !important;
}

#top-menu li a:first-child {
  margin-left: 0;
}

#top-menu > li > a {
  display: block;
  text-decoration: none;
}

#top-menu > li:first-child > a {
  padding-left: 0px;
}

#top-menu > li:last-child > a {
  padding-right: 0px;
}

#top-menu ul ul {
  top: -1px;
  left: 100%;
}

#top-menu .sub-menu {
  position: absolute;
  left: -999em;
  z-index: 1101;
  width: 170px;
  text-align: left;
  border: 1px solid #e4e4e4;
  border-width: 1px;
  opacity: 0;
}

#top-menu .menu-item:hover > ul, #top-menu .menu-item:focus-within > ul {
  left: 0;
  opacity: 1;
}

#top-menu .menu-item:hover ul ul, #top-menu .menu-item:focus-within ul ul{
  left: 100%;
}

#top-menu .sub-menu a {
  border-bottom-style: solid;
  border-bottom-width: 1px; 
}

#top-menu .sub-menu > li:last-of-type > a {
  border: none;
}

#top-menu .sub-menu li:first-child > .sub-menu {
  margin-top: -1px;
}

#top-menu .sub-menu > li > a {
  display: block;
  width: 100%;
  padding: 8px 15px;
  margin: 0;
}

#top-menu li a {
  font-size: 11px;
  line-height: 40px;
  letter-spacing: 1px;
  font-weight: 600;
  text-transform: uppercase;
}
#top-menu .sub-menu > li > a {
  font-size: 11px;
  line-height: 24px;
  letter-spacing: 0.5px;
  background: #f7f7f7;
}

#top-menu .sub-menu a {
    border-bottom:1px solid #dddddd;
}

#top-menu li a {
  font-size: 11px;
  line-height: 40px;
  letter-spacing: 1px;
  font-weight: 600;
}
#top-menu li > a {
    color: #fff;
}
#top-menu .sub-menu > li > a {
  font-size: 11px;
  line-height: 22px;
  letter-spacing: 0.5px;
  color: #000;
}

#top-menu li a,
#main-menu li a {
  text-transform: uppercase;
}

#top-navigation > div {
  padding-left: 30px;
  padding-right: 30px;
}

.post-categories {
    background: #ffffff;
    border: 1px solid #dddddd;
}

.wp-block-search__button {
background: #f5f5f5;
    border: 1px solid #dddddd;
}


#site-menu li a {
    border-left: 1px solid #e4e4e4;
}


#site-menu .sub-menu > li > a {
    background-color: #f5f5f5;
    color: #6d7975;
}

#site-menu li:first-child a {
    padding-left: 16px;
}

#site-menu li:last-child a {
    padding-right: 16px;
    border-right: 1px solid #e4e4e4;
}

#main-navigation #searchform #s {
    border: 1px solid #bdb29b;
}

#main-navigation #searchform #searchsubmit, .close-graceful-search {
    background: #f4f1ec;
    border: 1px solid #d9d1c0;
}

.main-content {
    margin-top: 40px;
}

#graceful-post-slider {
    padding-bottom: 40px;
    margin-top: 40px;
}

.widget_categories > ul > li {
    border-bottom: 1px solid #f4f1ec;
}

aside .wp-block-latest-posts.wp-block-latest-posts__list li {
    border-bottom: 1px solid #f4f1ec;
}

.wp-block-search__label {
    display: none;
}

.post-header {
    margin-top: 30px;
}

.single .post-header {
    margin-top: 0px;
    margin-bottom: 30px;
}

.content-column li {
    border-bottom: none;
}

.blog article .post-meta {
    margin-bottom: 0;
}

#graceful-post-slider .graceful-wrap-inner {
    vertical-align: middle;
}

/* Media Query Min 768px
   ========================================================================== */
@media screen and (min-width: 768px) {
    .blog .post-page-content p {
        padding: 0 24px;
    }
    #main-navigation .wrapped-content {
        padding-left: 0;
    }
    .main-navigation-search {
        right: 0;
    }
    #main-navigation .navigation-socials {
        right: 35px;
    }

    #graceful-post-slider .slide-item {
        background-position: center;
        height: 500px;
    }

    #graceful-post-slider.wrapped-content .slide-item {
        height: 450px;
    }

    .graceful-slider-read-more a {
        margin-bottom: 0;
    }

    .graceful-slider-info {
        padding: 20px 20px 30px 20px;
        background: rgba(0,0,0,0.3);
    }
}