/******************************************************************
	
	
	@ Item          GRIDDIE - Personal WordPress Theme
	@ Version       1.0
	@ Author		Avanzare
	@ Website		http://themeforest.net/user/avanzare 
	

 ******************************************************************


	-----------------------------
	----- TABLE OF CONTENTS -----
	-----------------------------
	
	--  1. Typography
    --  2. Basics
	--  3. Forms
	--  4. Loading Screen
	--  5. UI Components
	--  6. Menu
	--  7. Ultility
	--  8. Skeleton Components
    --  9. Background Components
    --  10. Plugins
 
 
 ******************************************************************/



/** 1. Core
*******************************************************************/

.blog-main-wrapper
{
    display: flex;
    font-size: 1.6rem;
    position: relative;
    flex: 1;  
}

.blog-main-posts,
.blog-main-sidebar 
{
  flex: 1 1 100%; 
}

.blog-main-sidebar 
{
    border-left-color: var(--main-border-color);
    border-left-width: var(--main-border-size);
    border-left-style: var(--main-border-style);
}

.blog-main-posts:first-child:nth-last-child(2) 
{
  flex: 0 0 70%;
}

.blog-main-sidebar:last-child:nth-child(2) 
{
  flex: 0 0 30%;
  max-width: 30%;
  overflow: hidden;
}

@media (max-width: 768px) {

    .blog-main-sidebar 
    {
        display: none;
    }

    .blog-main-posts:first-child:nth-last-child(2) 
    {
    flex: 0 0 100%;
    }


}


/** 1. Blog Posts
*******************************************************************/

.blog-grid .item-container.list
{
    grid-template-columns: repeat(1, 1fr);
}

.blog-main-posts .blog-post
{
    position: relative;

}

/*.blog-main-posts .blog-post a
{
	padding-left: 4rem;
    padding-right: 4rem;
	border-bottom-color: var(--main-border-color);
    border-bottom-width: var(--main-border-size);
    border-bottom-style: var(--main-border-style);
	transition: .5s;
    height: 10.8rem;
    transition-timing-function: var(--transition-style-1);
	background: rgba(255, 255, 255, 0);
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 5rem;

}

.blog-main-posts .blog-post:hover
{
	background: rgba(255, 255, 255, 0.05);
}

.blog-main-posts .blog-post .headline .text
{
    position: relative;
    display: flex;
    overflow: hidden;
    justify-content: start;
    align-items: center;
    font-weight: 600;
    font-size: 1.8rem;
    overflow: hidden;
    color: #fff;
}

.blog-main-posts .blog-post .headline .text span
{
    transition: .5s;
    transition-timing-function: var(--transition-style-1);
}

.blog-main-posts .blog-post .headline .text span:first-child
{
    display: block;
    transform: translateY(0%);
}

.blog-main-posts .blog-post:hover .headline .text span:first-child
{
    transform: translateY(-100%);
}

.blog-main-posts .blog-post .headline .text span:last-child
{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transform: translateY(100%);
}

.blog-main-posts .blog-post:hover .headline .text span:last-child
{
    transform: translateY(0%);
}

.blog-main-posts .blog-post .meta
{
    display: flex;
    align-items: center;
    gap: 1.6rem;
}

.blog-main-posts .blog-post .meta p
{
    font-size: 1.4rem;
	line-height: 1.6em;
}

.blog-main-posts .blog-post .meta .line
{
    font-size: 1.4rem;
	line-height: 1.6em;
    width: 0.1rem;
    height: 1.4rem;
    opacity: 0.3;
    background: var( --text-base-color);
}

*/

/** Blog Pagination
*******************************************************************/

.blog-main-wrapper .pagination
{
    display: block;
    height: 8rem;
    border-bottom-color: var(--main-border-color);
    border-bottom-width: var(--main-border-size);
    border-bottom-style: var(--main-border-style);
    grid-column: 1 / -1;
}

.blog-main-wrapper .nav-links,
.page-links,
.wp-block-query-pagination-numbers
{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
}

.page-links
{
    font-size: 0;
    margin-top: 3.2rem;
}

.blog-main-wrapper .pagination .page-numbers,
.post-page-numbers,
.wp-block-query-pagination-numbers .page-numbers
{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 8rem;
    width: 10rem;
    border-right-color: var(--main-border-color);
    border-right-width: var(--main-border-size);
    border-right-style: var(--main-border-style);
    font-size: 1.6rem;
    font-weight: 400;
    transition: .5s;
    transition-timing-function: var(--transition-style-1);
}

.post-page-numbers,
.wp-block-query-pagination-numbers .page-numbers
{
    border-top-color: var(--main-border-color);
    border-top-width: var(--main-border-size);
    border-top-style: var(--main-border-style);
    border-bottom-color: var(--main-border-color);
    border-bottom-width: var(--main-border-size);
    border-bottom-style: var(--main-border-style);
}

.blog-main-wrapper .pagination .page-numbers.current,
.blog-main-wrapper .pagination .page-numbers:hover,
.post-page-numbers.current,
.post-page-numbers:hover,
.wp-block-query-pagination-numbers .page-numbers.current,
.wp-block-query-pagination-numbers .page-numbers:hover
{
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
}

.blog-main-wrapper .pagination .page-numbers.dots,
.wp-block-query-pagination-numbers .page-numbers.dots
{
    background: rgba(255, 255, 255, 0) !important;
    color: var(--text-base-color) !important;
}

.wp-block-query-pagination .wp-block-query-pagination-previous,
.wp-block-query-pagination .wp-block-query-pagination-next
{
    display: none;
}

.wp-block-query-pagination 
{
    margin-top: 3.2rem;
}

/** 1. Widgets
*******************************************************************/

.widget-container .widget
{
    padding: 4rem;
    border-bottom-color: var(--main-border-color);
    border-bottom-width: var(--main-border-size);
    border-bottom-style: var(--main-border-style);
    font-size: 1.6rem;
}

.widget_block
{
    padding: 4rem;
    border-bottom-color: var(--main-border-color);
    border-bottom-width: var(--main-border-size);
    border-bottom-style: var(--main-border-style);
    font-size: 1.6rem;
}

.wp-block-latest-posts,
.wp-block-latest-comments,
.wp-block-archives-list,
.wp-block-categories,
.widget_meta ul
{
    margin: 0;
    padding: 0;
    list-style: none;
    margin-top: 1.4rem;
    display: flex;
    flex-direction: column;
    color: var(--text-base-color);
    align-items: flex-start;
    gap: 1.2rem;
}

.wp-block-latest-posts li,
.wp-block-latest-comments li,
.wp-block-archives-list li,
.wp-block-categories li,
.widget_meta ul li
{
    margin: 0;
    line-height: 1.25em;
    padding: 0;
}

.wp-block-page-list,
.wp-block-page-list ul
{
    margin: 0;
    list-style: none ;
    margin-top: 1.4rem;
    display: flex;
    flex-direction: column;
    color: var(--text-base-color);
    align-items: flex-start;
    gap: 0.8rem;
}

.wp-block-page-list li
{
    margin: 0;
    line-height: 1.25em;
    padding: 0;
}

.widget_block .wp-block-heading
{
    font-size: 1.8rem;
}

.wp-block-archives-list li
{
    color: var(--text-base-color);
}

.wp-block-archives-list li::marker
{
    color: var(--text-base-color);
    opacity: 0.5;
}

.wp-block-search label
{
    display: none;
}

.wp-block-search .wp-block-search__inside-wrapper
{
    gap: 1.6rem;
    border: none !important;
}

.wp-block-search input
{
    padding-left: 2.4rem;
    padding-right: 2.4rem;
    height: 6.4rem;
    border-color: var(--main-border-color);
    border-width: var(--main-border-size);
    border-style: var(--main-border-style);
    border-bottom-width: none !important;
}

.wp-block-search input:focus
{
    border-color: rgba(255, 255, 255, 0.3); 
}

.wp-block-search button
{
    flex: 0 0 auto;
    margin: 0;
}

.widget_media_image figure
{
    margin: 0;
}

.widget  .wp-block-table
{
    margin: 0;
}

.wp-block-calendar table 
{
    margin: 0;
}

.wp-block-calendar table th, .wp-block-calendar table td 
{
    padding: 1.2rem !important;
    text-align: center;
}

.wp-block-calendar table caption
{
    font-size: 1.6rem;
    margin-bottom: 1.2rem;
}

.wp-block-calendar .wp-calendar-nav
{
    font-size: 1.6rem;
    margin-top: 1.2rem;
}

.wp-block-search__button-outside,
.wp-block-search__icon-button,
.wp-block-search__no-button
{
    display: none;
}

.widget-container .wp-block-search__button-outside
{
    display: block !important;
}

.wp-block-social-links
{
    display: flex;
    flex-direction: row !important;
}

.wp-block-latest-comments img,
.wp-block-latest-comments .wp-block-latest-comments__comment-excerpt,
.wp-block-latest-comments time
{
    display: none !important;
}

.wp-block-latest-comments .wp-block-latest-comments__comment-meta
{
    margin: 0 !important;
}

.wp-block-latest-comments li
{
    min-height: unset !important;
}

b
{
    color: var(--text-base-color);
}


/** 1. Comment Area
*******************************************************************/


.comment-form-comment
{
    margin-top: 2.4rem;
}

.comments-area
{
    padding: 8rem;
    border-bottom-color: var(--main-border-color);
    border-bottom-width: var(--main-border-size);
    border-bottom-style: var(--main-border-style);
}

@media (max-width: 1024px) {

    .comments-area
    {
        padding: 5.6rem 4.4rem;
    }

}

@media (max-width: 768px) {

    .comments-area
    {
        padding: 4rem 3.2rem;
    }

}

.comment-list
{
    list-style: none;
    margin-bottom: 6.4rem;
    padding: 0;
}

.comment-list .comment,
.comment-list .pingback,
.comment-list .trackback 
{
    padding: 3.2rem 0;
    border-bottom-color: var(--main-border-color);
    border-bottom-width: var(--main-border-size);
    border-bottom-style: var(--main-border-style);
    list-style: none;
}



.comment-list .comment .comment
{
    border-bottom: none !important;
    padding-bottom: 0;
}

.comment-list .comment .avatar
{
    border-radius: 100%;
}

.comment-list .comment .comment-body
{
    display: flex;
    gap: 1.4rem;
    align-items: flex-start;
    flex-direction: column;
}

.comment-list .comment .comment-header
{
    display: flex;
    align-items: center;
    flex-direction: row;
    gap: 1.6rem;
}

.comment-list .comment .comment-meta
{
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.comment-list .comment .comment-meta .fn,
.comment-list .comment .comment-meta .fn a
{
    font-size: 1.6rem;
    font-style: normal !important;
    color: #fff;
}

.comment-list .comment .comment-meta .comment-time
{
    font-size: 1.6rem;
    font-style: normal !important;
    color: var(--text-base-color);
}

.comment-list .comment .reply,
.wp-block-comment-reply-link,
#cancel-comment-reply-link
{
    font-size: 1.3rem;
    font-style: normal !important;
    padding: 0.6rem 1rem;
    color: #fff !important;
    display: inline-block;
    border-radius: 4px;
    text-transform: uppercase;
    font-weight: 500;
    border: 1px solid #343434;
    margin-top: 1.4rem;
}

#cancel-comment-reply-link
{
    color: var(--text-base-color) !important;
    margin: 0;
    margin-left: 1.2rem;
    vertical-align: middle;
}

.comment-list .comment-respond
{
    margin-top: 3.2rem;
}

.comment-list .trackback .comment-body,
.comment-list .pingback .comment-body
{
    display: flex;
    gap: 1.4rem;
    align-items: flex-start;
    flex-direction: column;
}

.gallery  .gallery-item img
{
    border: none !important;
}

.wp-block-post-comments-form .comment-form .comment-form-comment label
{
    display: none !important;
}

.wp-block-post-comments-form .comment-form p.form-submit,
.wp-block-post-comments-form .comment-form p.logged-in-as
{
    margin: 0 !important;
}

.wp-block-post-comments-form .comment-form p.form-submit
{
    margin-top: 1rem !important;
}

.wp-block-comments .wp-block-avatar img
{
    margin: 0;
}



/** 1. Basics
*******************************************************************/

.post-content h1, 
.post-content h2, 
.post-content h3, 
.post-content h4, 
.post-content h5, 
.post-content h6
{
    margin-top: 4rem;
}

.post-content p
{
    margin-top: 2.4rem;
}

.post-content img
{
    margin-top: 4rem;
}


/** 2. Structure
*******************************************************************/

.post-header
{
    position: relative;
    padding: 8rem 8rem;
    border-bottom-color: var(--main-border-color);
    border-bottom-width: var(--main-border-size);
    border-bottom-style: var(--main-border-style);
}

.post-header h2
{
    max-width: 800px;
    word-break: break-word;
}

.post-header .post-thumbnail
{
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -2;
    top: 0;
    left: 0;
    opacity: 0.05;
}

.post-header .post-thumbnail img
{
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-position: center;
    object-fit: cover;
    image-rendering: auto;
    overflow-clip-margin: content-box;
    overflow: clip;
}

.post-body
{
    display: grid;
    grid-template-columns: 2fr 1fr;
    border-bottom-color: var(--main-border-color);
    border-bottom-width: var(--main-border-size);
    border-bottom-style: var(--main-border-style);
}

.post-content
{
    padding: 8rem 8rem;
}

@media (max-width: 1024px) {


    .post-content,
    .post-header
    {
        padding: 5.6rem 4.4rem;
    }


}

@media (max-width: 768px) {


    .post-content,
    .post-header
    {
        padding: 4rem 3.2rem;
    }

    .post-body
    {
        grid-template-columns: 1fr;
    }

    .post-body .post-meta
    {
        grid-row: 1;
    }

}

.post-meta
{
    border-left-color: var(--main-border-color);
    border-left-width: var(--main-border-size);
    border-left-style: var(--main-border-style);
}

.post-meta .post-meta-item
{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.6rem;
    padding: 2.3rem 2.4rem;
    border-bottom-color: var(--main-border-color);
    border-bottom-width: var(--main-border-size);
    border-bottom-style: var(--main-border-style);
}

.post-meta .post-meta-item-content,
.post-meta .post-meta-item-content a
{

    font-weight: 600;
    color: white;
}


/** 1. Elements
*******************************************************************/

.has-small-font-size 
{
    font-size: 1.5rem !important;
}

.wp-block-embed figcaption,
.wp-block-video :where(figcaption)
{
    font-size: 1.5rem !important;
}

.wp-block-embed-twitter
{
    font-size: 1.5rem;
    margin: 0;
}

.wp-block-embed iframe
{
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
}

.wp-block-audio,
.wp-block-video,
.wp-block-embed
{
    margin-top: 4rem;
}

.wp-block-list,
.blog-post ul,
.blog-post ol,
.blog-post dl
{
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    font-size: 1.6rem;
    color: var(--text-base-color);
    list-style-position: inside;
    padding-left: 0.3rem;
    margin-top: 2.4rem;
    margin-bottom: 0;
}

.wp-block-list li ul,
.wp-block-list li ol,
.wp-block-list li dl,
.blog-post ol li ul,
.blog-post ol li ol,
.blog-post ol li dl,
.blog-post ul li ul,
.blog-post ul li ol,
.blog-post ul li dl
{
    padding-left: 1.6rem;
    margin: .8rem 0;
}

.blog-post dl dt
{
    padding-left: 0;
    margin-left: 0;
    color: #fff;
}

.blog-post dl dd
{
    padding-left: 0;
    margin-left: 0;
    margin-bottom: 1rem;
}


.wp-block-quote
{
    padding-top: 1.6rem;
    padding-bottom: 1.6rem;
    padding-right: 3rem;
    padding-left: 3rem;
    color: #fff;
    margin: 0;
    margin-top: 3.2rem;
    border-left: 1px solid var(--main-border-color) !important;
}

.wp-block-quote.is-style-large
{
    padding-top: 2.6rem;
    padding-bottom: 2.6rem;
    padding-left: 4rem;
    border-left: 1px solid var(--main-border-color) !important;
}

.wp-block-quote.has-text-align-right
{
    border-right: 1px solid var(--main-border-color) !important;
    border-left: none !important;
}


.wp-block-quote p
{
    margin: 0;
}

.wp-block-quote cite,
.wp-block-quote cite em
{
    font-style: italic;
    font-size: 1.5rem;
    margin-top: 0.5rem;
    color: var(--text-base-color);
}

.wp-block-pullquote
{
    border-width: 1px;
    margin-top: 3.2rem;
    border-right: 1px solid var(--main-border-color) !important;
    border-color: var(--main-border-color) !important;
    border-left: 1px solid var(--main-border-color) !important;
}

.wp-block-pullquote cite
{
    font-style: italic;
    font-size: 1.5rem;
    margin-top: 0.5rem;
    color: var(--text-base-color);
}

.wp-block-image figcaption
{
    font-size: 1.5rem;
}

.wp-block-cover
{
    margin-top: 4rem;
    color: #fff;
}

.wp-block-file
{
    margin-top: 3.2rem;
    display: flex;
    align-items: start;
    flex-direction: column;
    gap: 1.2rem;
}

.wp-block-file .wp-element-button
{
    border-radius: 0 !important;
}

.wp-block-file a
{
    margin: 0 !important;
}

.wp-block-file a:not(.wp-element-button)
{
    font-size: 1.6rem;
    color: #fff !important;
    font-weight: 400;
}

.wp-block-cover .wp-block-cover-text
{
     font-size: 1.8rem;
}

.wp-block-cover .wp-block-cover-text
{
     font-size: 1.8rem;
}

.wp-block-gallery
{
    margin-top: 4rem !important;
}

.wp-block-gallery ul
{
    flex-direction: initial !important;
}

.wp-block-gallery figcaption
{
    font-size: 1.5rem !important;
}

.wp-block-gallery img
{
    margin: 0;

}

.wp-block-code
{
    margin-top: 2.4rem;
    display: block;
    margin-bottom: 2.4rem;
    padding: 0;
    border: none;
}

.wp-block-code code
{
    border: 1px solid var(--main-border-color);
    padding: 2rem 3.2rem;
    display: block;
    font-family: var(--secondary-font-family);
    font-size: 1.4rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.8);
}

hr
{
    border: none;
    height: 1px;
    width: 100%;
    background: var(--main-border-color);
}

.wp-block-table table
{
    margin-top: 3.2rem;
}

.wp-block-table table thead,
.wp-block-table table tfoot
{
    border: none;
    background: rgba(255, 255, 255, 0.02);
}


.wp-block-table .wp-element-caption
{
    margin-top: 1.2rem;
    font-size: 1.6rem;
}

table
{
    border-collapse: collapse;
    width: 100%;
    margin-top: 3.2rem;
    padding: 0;
    border:1px solid var(--main-border-color) !important;
    padding: 2.4rem !important;
}

table th,
table td
{
    border: 1px solid var(--main-border-color) !important;
    text-align: left;
    padding: 2.4rem !important;
    margin: 0;
}


.wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
    background-color: rgba(255, 255, 255, 0.02);
}

.wp-block-table.is-style-stripes
{
    border: none;
}

blockquote
{
    padding: 2rem 2rem;
    margin: 0;
    margin-top: 2.4rem;
    border-left: 1px solid var(--main-border-color);
}

.has-background blockquote
{
    border: none !important;
}

blockquote p
{
    margin: 0 !important;
}

.wp-block-button
{
    display: flex;
    margin-top: 2.4rem;
    gap: 1.6rem;
}

.wp-block-button.alignright
{
    justify-content: flex-end;
}

.wp-block-button.aligncenter
{
    justify-content: center;
}

.wp-block-button__link
{
    border-radius: 0;
}

.wp-block-button.is-style-outline .wp-block-button__link
{
    background: rgba(255, 255, 255, 0.05) !important;
    border: none !important;
    color: #fff !important;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover
{
    background: rgba(255, 255, 255, 1) !important;
    color: #000 !important;
}

.wp-block-group.has-border-color
{
    border-color: var(--main-border-color) !important;
    margin-top: 1.6rem;
}


.wp-block-group.has-background
{
    margin-top: 1.6rem;
}

.wp-block-post-author 
{
    align-items: center;
}

.wp-block-post-author  .wp-block-post-author__avatar
.wp-block-post-author  .wp-block-post-author__name
{
    display: flex;
    align-items: center;
    margin: 0;
}

.wp-caption,
.wp-caption-text,
.screen-reader-text,
.gallery-caption,
.bypostauthor,
.alignleft
{
    box-sizing: border-box;
    -webkit-font-smoothing: inherit;
}