/*!
Theme Name: Compliant Blog
Theme URI: http://creativthemes.com/downloads/compliant-blog/
Author: Creativ Themes
Author URI: http://creativthemes.com/
Description: Compliant Blog is a light and elegant theme that suits all kinds of blog. It can be used for fashion blog, food blog, travel blog, personal blog, magazine blog websites.
Version: 1.0
Requires at least: 5.1
Requires PHP: 5.6
Tested up to: 6.5
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Template: elastic-blog
Text Domain: compliant-blog
Tags: translation-ready, custom-background, theme-options, custom-menu, threaded-comments, featured-images, footer-widgets, left-sidebar, editor-style, right-sidebar, full-width-template, two-columns, three-columns, custom-colors, custom-header, custom-logo

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.

Compliant Blog is based on Underscores http://underscores.me/, (C) 2012-2016 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 http://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
# Typography
--------------------------------------------------------------*/
body {
    font-family: 'Lora', serif;
}

h1, 
h2, 
h3, 
h4, 
h5, 
h6 {
	font-family: 'Josefin Sans', sans-serif;
}

/*--------------------------------------------------------------
# Colors
--------------------------------------------------------------*/
.logged-in-as a:hover,
.logged-in-as a:focus,
a,
.site-title a:hover,
.site-title a:focus,
.main-navigation ul.nav-menu > li:hover > a,
.main-navigation ul.nav-menu > li.focus > a,
.main-navigation ul.nav-menu .current_page_item > a,
.main-navigation ul.nav-menu .current-menu-item > a,
.main-navigation ul.nav-menu .current_page_ancestor > a,
.main-navigation ul.nav-menu .current-menu-ancestor > a,
.post-navigation a:hover, 
.posts-navigation a:hover,
.post-navigation a:focus, 
.posts-navigation a:focus,
.pagination .page-numbers,
.pagination .page-numbers.dots:hover,
.pagination .page-numbers.dots:focus,
.pagination .page-numbers.prev,
.pagination .page-numbers.next,
#secondary a:hover,
#secondary a:focus,
.page-header small,
.post-categories a,
.cat-links:before,
.entry-meta a:hover,
.entry-meta a:focus,
.comment-meta .url:hover,
.comment-meta .url:focus,
.comment-metadata a:hover,
.comment-metadata a:focus,
.comment-metadata a:hover time,
.comment-metadata a:focus time,
.entry-title a:hover,
.entry-title a:focus,
#colophon a:hover,
#colophon a:focus,
.blog-posts-wrapper .post-item .date a {
    color: #e00025;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover,
button:focus,
input[type="button"]:focus,
input[type="reset"]:focus,
input[type="submit"]:focus,
button:active,
input[type="button"]:active,
input[type="reset"]:active,
input[type="submit"]:active,
.menu-toggle:hover,
.menu-toggle:focus,
.pagination .page-numbers.current,
.pagination .page-numbers:hover,
.pagination .page-numbers:focus,
.wp-block-search__button:hover,
.wp-block-search__button:focus,
.tags-links a,
.reply a:hover,
.reply a:focus,
.btn,
.wp-block-tag-cloud a,
#colophon .widget_search form.search-form button.search-submit,
.blog-posts-wrapper .post-item .cat-links a,
.wp-block-search__button {
    background-color: #e00025;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover,
button:focus,
input[type="button"]:focus,
input[type="reset"]:focus,
input[type="submit"]:focus,
button:active,
input[type="button"]:active,
input[type="reset"]:active,
input[type="submit"]:active,
.widget_search form.search-form input[type="search"]:focus,
.wp-block-search__button:hover,
.wp-block-search__button:focus,
.tags-links a,
.reply a:hover,
.reply a:focus,
.btn,
.wp-block-search__button {
    border-color: #e00025;
}

#loader svg {
    fill: #e00025;
}

#secondary ul li a:hover,
#secondary ul li a:focus {
    border-bottom-color: #e00025;
}

@media screen and (min-width: 1024px) {
    .main-navigation ul.nav-menu .current_page_item > a, 
    .main-navigation ul.nav-menu .current-menu-item > a, 
    .main-navigation ul.nav-menu .current_page_ancestor > a, 
    .main-navigation ul.nav-menu .current-menu-ancestor > a,
    .main-navigation ul.nav-menu > li:hover > a, 
    .main-navigation ul.nav-menu > li.focus > a {
        color: #e00025;
    }
    .main-navigation ul ul li:hover > a,
    .main-navigation ul ul li.focus > a {
        background-color: #e00025;
        color: #fff;
    }
}

/*--------------------------------------------------------------
# Latest Posts List Layout
--------------------------------------------------------------*/
.blog-posts-wrapper .list-layout article {
    width: 100%;
}

@media screen and (min-width: 767px) {
    .blog-posts-wrapper .list-layout .has-post-thumbnail .post-item {
        position: relative;
        display: table;
        width: 100%;
        padding: 0;
    }
    .blog-posts-wrapper .list-layout .has-post-thumbnail .post-item .featured-image {
        display: table-cell;
        width: 50%;
        margin: 0;
        padding: 0;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        height: 100%;
    }
    .blog-posts-wrapper .list-layout .has-post-thumbnail .post-item .entry-container {
        display: table-cell;
        width: 50%;
        float: right;
        text-align: left;
        padding: 50px 30px;
    }
    .blog-posts-wrapper .list-layout .entry-title {
        font-size: 24px;
    }
}

/*--------------------------------------------------------------
# Highlighted Posts Section
--------------------------------------------------------------*/
#section-highlighted-posts {
    margin-bottom: 50px;
}
#section-highlighted-posts .grid {
    margin: -5px;
}
#section-highlighted-posts article {
    width: 100%;
    padding: 5px;
    margin-bottom: 0;
}
#section-highlighted-posts .highlighted-posts-image {
    background-color: #cccccc;
    position: relative;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    -ms-justify-content: center;
    justify-content: center;
    -ms-flex-pack: center;
    z-index: 1;
}
#section-highlighted-posts .highlighted-posts-image {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}
#section-highlighted-posts .highlighted-posts-image {
    -webkit-align-items: flex-end;
    -moz-align-items: flex-end;
    -ms-align-items: flex-end;
    -ms-flex-align: flex-end;
    align-items: flex-end;
}
#section-highlighted-posts .highlighted-posts-image {
    height: 240px;
}
#section-highlighted-posts .highlighted-posts-image:before {
    background-color: rgba(0, 0, 0, 0.5);
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 1;
    position: absolute;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -ms-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;
    z-index: 1;
}
#section-highlighted-posts .highlighted-posts-content {
    padding: 0 20px 20px;
    position: relative;
    width: 100%;
    z-index: 2;
}
#section-highlighted-posts .cat-links {
    display: inline-block;
}
#section-highlighted-posts .cat-links a {
    background-color: #e00025;
    color: #FFFFFF;
    letter-spacing: 0.8px;
    line-height: 1;
    padding: 2px 6px;
    margin: 2px;
    text-transform: uppercase;
    font-size: 12px;
    transition: all 0.4s ease-out 0s;
}
#section-highlighted-posts .cat-links a:hover,
#section-highlighted-posts .cat-links a:focus {
    background-color: #000;
    color: #FFF;
}
#section-highlighted-posts .highlighted-posts-title {
    font-size: 18px;
    line-height: 1.2;
    margin-bottom: 5px;
}
#section-highlighted-posts .highlighted-posts-title a {
    text-decoration: none;
    color: #FFFFFF;
    transition: all 0.4s ease-out 0s;
}
#section-highlighted-posts .highlighted-posts-title a:hover,
#section-highlighted-posts .highlighted-posts-title a:focus {
    color: #e00025;
}
#section-highlighted-posts .entry-meta a {
    color: #FFFFFF;
    text-decoration: none;
    font-size: 13px;
    transition: all 0.4s ease-out 0s;
}
#section-highlighted-posts .entry-meta a:hover,
#section-highlighted-posts .entry-meta a:focus {
    color: #e00025;
}

#section-highlighted-posts .date a:before {
    content: "\f133";
    font-weight: 400;
    margin-right: 8px;
    font-family: 'Font Awesome 5 Free';
}

@media screen and (min-width: 567px) {
    #section-highlighted-posts article {
        width: 50%;
    }
}

@media screen and (min-width: 767px) {
    #section-highlighted-posts article {
        width: 25%;
    }
    #section-highlighted-posts article:nth-child(3) {
        width: 50%;
    }
    #section-highlighted-posts article:nth-child(3) .highlighted-posts-image {
        height: 490px;
    }
    #section-highlighted-posts article:nth-child(3) .highlighted-posts-title {
        font-size: 32px;
    }
}

/*--------------------------------------------------------------
# Popular Posts Section
--------------------------------------------------------------*/
#section-popular-posts .featured-image {
    background-size: cover;
    background-position: center center;
    padding: 120px 0;
    position: relative;
    margin-bottom: 20px;
    background-color: #eee;
}

#section-popular-posts .cat-links {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 8px 12px;
}

#section-popular-posts .cat-links a {
    background-color: #e00025;
    color: #fff;
    text-transform: uppercase;
    font-size: 10px;
    padding: 3px 10px;
    font-weight: 600;
    letter-spacing: 1px;
}

#section-popular-posts .cat-links a:hover,
#section-popular-posts .cat-links a:focus {
    background-color: #000;
}

#section-popular-posts .entry-content {
    margin-bottom: 15px;
}

.section-header {
    text-align: left;
    margin-bottom: 30px;
}

.section-title {
    text-transform: uppercase;
    font-size: 18px;
    font-weight: 600;
    color: #000;
    border-bottom: 2px solid #000;
    padding-bottom: 5px;
}

#section-popular-posts .date a:before {
    content: "\f133";
    font-weight: 400;
    margin-right: 8px;
    font-family: 'Font Awesome 5 Free';
}

/*--------------------------------------------------------------
# Featured Posts Section
--------------------------------------------------------------*/
#section-featured-posts {
    margin-bottom: 20px;
}

#section-featured-posts .featured-image {
    background-size: cover;
    background-position: center center;
    padding: 180px 0;
    position: relative;
    background-color: #333;
}

#section-featured-posts .entry-container {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 15px;
    background: linear-gradient(to top,rgba(0,0,0,.9) 0,rgba(0,0,0,0) 100%);
}

#section-featured-posts .cat-links {
    margin-bottom: 5px;
    display: inline-block;
}

#section-featured-posts .cat-links a {
    background-color: #e00025;
    color: #fff;
    text-transform: uppercase;
    font-size: 10px;
    padding: 3px 10px;
    font-weight: 600;
    letter-spacing: 1px;
}

#section-featured-posts .cat-links a:hover,
#section-featured-posts .cat-links a:focus {
    background-color: #000;
}

#section-featured-posts .entry-header,
#section-featured-posts .entry-title {
    margin-bottom: 0;
}

#section-featured-posts .entry-title {
    font-size: 18px;
    line-height: 1.3;
}

#section-featured-posts .entry-title a,
#section-featured-posts .date a {
    color: #fff;
}
#section-featured-posts .entry-title a:hover,
#section-featured-posts .entry-title a:focus,
#section-featured-posts .date a:hover,
#section-featured-posts .date a:focus {
    color: #e00025;
}

#section-featured-posts .date a:before {
    content: "\f133";
    font-weight: 400;
    margin-right: 8px;
    font-family: 'Font Awesome 5 Free';
}

/*--------------------------------------------------------------
# Trending Posts Section
--------------------------------------------------------------*/
#section-trending-posts {
    margin-bottom: 30px;
}
#section-trending-posts article {
    position: relative;
    display: table;
}
#section-trending-posts .featured-image {
    padding: 0;
    background-size: cover;
    background-position: center center;
    border-radius: 5px;
    margin-bottom: 15px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100px;
    height: 100%;
    display: table-cell;
    background-color: #f6f6f6;
}
#section-trending-posts .entry-container {
    width: 100%;
    float: right;
    display: table-cell;
    text-align: left;
    padding-left: 115px;
}
#section-trending-posts .cat-links {
    margin-bottom: 5px;
    display: inline-block;
}
#section-trending-posts .entry-header {
    margin-bottom: 0;
}
#section-trending-posts .entry-title {
    font-weight: 600;
    font-size: 15px;
    margin-bottom: 0;
}
#section-trending-posts .entry-title a {
    color: #0d1e50;
}
#section-trending-posts .entry-title a:hover,
#section-trending-posts .entry-title a:focus,
#section-trending-posts .date a:hover,
#section-trending-posts .date a:focus {
    color: #e00025;
}
#section-trending-posts .date a:before {
    content: "\f133";
    font-weight: 400;
    margin-right: 8px;
    font-family: 'Font Awesome 5 Free';
}
#section-trending-posts .date a {
    color: #777;
    text-decoration: none;
    font-size: 12px;
}
#section-trending-posts article:nth-child(1),
#section-trending-posts article:nth-child(2),
#section-trending-posts article:nth-child(3) {
    display: block;
}
#section-trending-posts article:nth-child(1) .featured-image,
#section-trending-posts article:nth-child(2) .featured-image,
#section-trending-posts article:nth-child(3) .featured-image {
    padding: 120px 0;
    position: relative;
    width: 100%;
    height: auto;
    display: block;
}
#section-trending-posts article:nth-child(1) .entry-container,
#section-trending-posts article:nth-child(2) .entry-container,
#section-trending-posts article:nth-child(3) .entry-container {
    float: none;
    display: block;
    padding-left: 0;
}
#section-trending-posts article:nth-child(1) .entry-title,
#section-trending-posts article:nth-child(2) .entry-title,
#section-trending-posts article:nth-child(3) .entry-title {
    font-size: 22px;
}

#section-trending-posts .cat-links a:after {
    content: ",";
}

#section-trending-posts .cat-links a:last-child:after {
    display: none;
}

@media screen and (min-width: 767px) {
    #section-trending-posts .entry-container {
        padding-left: 100px;
    }
}