/*!
Theme Name: Record Blog
Theme URI: http://creativthemes.com/downloads/record-blog/
Author: Creativ Themes
Author URI: http://creativthemes.com/
Description: Record 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 websites.
Version: 1.0
Requires at least: 5.1
Requires PHP: 5.6
Tested up to: 6.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Template: notation-blog
Text Domain: record-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.

Record 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/
*/

body {
    font-family: 'Jost', serif;
}

h1, 
h2, 
h3, 
h4, 
h5, 
h6 {
	font-family: 'Jost', serif;
}
.section-featured-posts {
	margin-bottom: 50px;
}
.blog-archive .blog-post-item {
	padding: 0;
}
.blog-archive .entry-container {
	padding: 20px;
}
.blog-archive .featured-image {
	margin-bottom: 0;
}
.blog-archive .featured-post-item-inner {
    position: relative;
}
.blog-archive .featured-image a {
	display: inline-block;
}
.blog-archive .cat-links {
    font-size: 0;
	margin-bottom: 0;
}
.blog-archive article:not(.has-no-thumbnail) .cat-links {
    position: absolute;
    bottom: 10px;
    left: 10px;
    z-index: 1;
}
.blog-archive .cat-links a {
	background-color: #fecc01;
	color: #FFFFFF;
    letter-spacing: 1px;
    line-height: 1;
	padding: 8px 10px;
    margin: 2px;
    transition: all 0.4s ease-out 0s;
}
.blog-archive .cat-links a:hover,
.blog-archive .cat-links a:focus {
    background-color: #000;
    color: #FFF;
}
.blog-archive .blog-post-item .entry-content {
	margin-bottom: 0;
}
.blog-archive.has-no-thumbnail .blog-post-item {
    padding: 20px;
}
.blog-archive.has-no-thumbnail .entry-container {
    padding: 20px 0 0;
}
.section-featured-posts .featured-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-featured-posts .featured-posts-image {
	background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}
.section-featured-posts .featured-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-featured-posts .featured-posts-image {
	height: 400px;
}
.section-featured-posts .featured-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-featured-posts .featured-posts-content {
	padding: 0 20px 20px;
    position: relative;
    width: 100%;
    z-index: 2;
}
.section-featured-posts .featured-posts-content .cat-links {
	display: inline-block;
}
.section-featured-posts .cat-links:before {
    color: #fff;
}
.section-featured-posts .featured-posts-content .cat-links a {
	color: #fff;
}
.section-featured-posts .featured-posts-content .cat-links a:hover,
.section-featured-posts .featured-posts-content .cat-links a:focus {
    color: #fecc01;
}
.section-featured-posts .featured-posts-content .cat-links a:after {
    content: ",";
}
.section-featured-posts .featured-posts-content .cat-links a:last-child:after {
    display: none;
}
.section-featured-posts .featured-posts-content .featured-posts-title {
	font-size: 24px;
    line-height: 1.2;
    margin-bottom: 12px;
}
.section-featured-posts .featured-posts-content .featured-posts-title a{
	text-decoration: none;
	color: #FFFFFF;
    transition: all 0.4s ease-out 0s;
}
.section-featured-posts .featured-posts-content .featured-posts-title a:hover,
.section-featured-posts .featured-posts-content .featured-posts-title a:focus {
    color: #fecc01;
}
.section-featured-posts .featured-posts-content .entry-meta a {
    color: #FFFFFF;
    text-decoration: none;
    font-size: 13px;
    transition: all 0.4s ease-out 0s;
}
.section-featured-posts .featured-posts-content .entry-meta a:hover,
.section-featured-posts .featured-posts-content .entry-meta a:focus {
    color: #fecc01;
}

.blog-posts-wrapper .post-item .featured-image-wrapper {
    position: relative;
}

.blog-posts-wrapper .post-item .featured-image {
    margin-bottom: 0;
}

.blog-posts-wrapper .post-item {
    padding: 20px;
    position: relative;
    background-color: #fff;
    -webkit-box-shadow: 0 3px 12px -1px rgb(7 10 25 / 10%), 0 22px 27px -30px rgb(7 10 25 / 10%);
    box-shadow: 0 3px 12px -1px rgb(7 10 25 / 10%), 0 22px 27px -30px rgb(7 10 25 / 10%);
    max-width: 100%;
    margin: 0 auto;
}

.blog-posts-wrapper .entry-container {
    max-width: 100%;
    padding: 15px 0 0;
    box-shadow: none;
    background-color: transparent;
}

.blog-posts-wrapper .post-item .cat-links {
    margin-bottom: 0;
}

.blog-posts-wrapper .post-item .cat-links a {
    padding: 5px;
    text-transform: none;
    border-radius: 0;
}

.entry-meta .date a:before {
    content: "\f133";
}

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,
.pagination .page-numbers.current,
.pagination .page-numbers:hover,
.pagination .page-numbers:focus,
.tags-links a,
.reply a,
.wp-block-search__button:hover,
.wp-block-search__button:focus,
.widget_tag_cloud .tagcloud a,
#colophon .widget_search form.search-form button.search-submit,
.backtotop {
    background-color: #fecc01;
}

.logged-in-as a:hover,
.logged-in-as a:focus,
a,
.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 {
    color: #fecc01;
}

.widget_search form.search-form input[type="search"]:focus,
.tags-links a,
.reply a {
    border-color: #fecc01;
}

#secondary ul li a:hover,
#secondary ul li a:focus {
    border-bottom-color: #fecc01;
}

#loader svg {
    fill: #fecc01;
}