/* 
Theme Name: MyLife
Theme URI: https://github.com/elementor/hello-theme/
Description: MyLife is a child theme of Hello Elementor, created by Prospekt
Author: Prospekt
Author URI: https://prospekt.hr/
Template: hello-elementor
Version: 1.0.1
Text Domain: mylife
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/** Blog Grid **/

nav.elementor-pagination>span,
nav.elementor-pagination>a {
    background: #F1F1F3;
    padding: 2px 6px;
    display: inline-block;
    width: 32px;
    font-family: "Montserrat";
    font-weight: 400;
    font-size: 14px;
}

nav.elementor-pagination {
    margin: 48px 0;
}

nav.elementor-pagination>span.current {
    box-shadow: inset 0px 0px 0px 1px #393838;
}

footer#site-footer {
    display: none;
}

/** Custom blog grid **/

@media(min-width:1200px) {

    #mylife_custom-blog-grid {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        /* grid-template-rows: repeat(7, 1fr); */
        grid-template-rows: repeat(2, 450px) repeat(5, 1fr);
        grid-column-gap: 48px;
        grid-row-gap: 48px;
        grid-template-areas:
            "item1    item1    item1    item1    item1    item1"
            "item1    item1    item1    item1    item1    item1"
            "item2    item2    item2    item3    item3    item3"
            "item2    item2    item2    item4    item4    item4"
            "item5    item5    banner1  banner1  item6    item6"
            "item7    item7    item7    item8    item8    item8"
            "banner2  banner2  banner2  item8    item8    item8"
        ;
    }

    body.home #mylife_custom-blog-grid {
        grid-template-areas:
            "item1    item1    item1    item1    item1    item1"
            "item1    item1    item1    item1    item1    item1"
            "item2    item2    item2    item3    item3    item3"
            "item2    item2    item2    item4    item4    item4"
            "item5    item5    item6    item6    item7    item7"
            "item8    item8    item8    item9    item9    item9"
            "item8    item8    item8    item10    item10    item10"
        ;
    }

    /** Last page expections **/

    div#mylife_custom-blog-grid.last-page[data-blog-post-count="9"] {
        /* grid-template-rows: repeat(6, 1fr); */
        grid-template-rows: repeat(2, 450px) repeat(4, 1fr);
        grid-template-areas:
            "item1    item1    item1    item1    item1    item1"
            "item1    item1    item1    item1    item1    item1"
            "item2    item2    item2    item3    item3    item3"
            "item2    item2    item2    item4    item4    item4"
            "item5    item5    banner1  banner1  item6    item6"
            "item7    item7    item7    banner2  banner2  banner2"
    }

    div#mylife_custom-blog-grid.last-page[data-blog-post-count="8"] {
        /* grid-template-rows: repeat(6, 1fr); */
        grid-template-rows: repeat(2, 450px) repeat(4, 1fr);
        grid-template-areas:
            "item1    item1    item1    item1    item1    item1"
            "item1    item1    item1    item1    item1    item1"
            "item2    item2    item2    item3    item3    item3"
            "item2    item2    item2    item4    item4    item4"
            "item5    item5    banner1  banner1  item6    item6"
            "banner2  banner2  banner2  .        .        .    "
    }

    div#mylife_custom-blog-grid.last-page[data-blog-post-count="7"] {
        /* grid-template-rows: repeat(5, 1fr); */
        grid-template-rows: repeat(2, 450px) repeat(3, 1fr);
        grid-template-areas:
            "item1    item1    item1    item1    item1    item1"
            "item1    item1    item1    item1    item1    item1"
            "item2    item2    item2    item3    item3    item3"
            "item2    item2    item2    item4    item4    item4"
            "item5    item5    banner1  banner1  banner2  banner2";
    }

    div#mylife_custom-blog-grid.last-page[data-blog-post-count="6"] {
        /* grid-template-rows: repeat(5, 1fr); */
        grid-template-rows: repeat(2, 450px) repeat(3, 1fr);
        grid-template-areas:
            "item1    item1    item1    item1    item1    item1"
            "item1    item1    item1    item1    item1    item1"
            "item2    item2    item2    item3    item3    item3"
            "item2    item2    item2    item4    item4    item4"
            "banner1  banner1  banner1  banner2  banner2  banner2";
    }

    div#mylife_custom-blog-grid.last-page[data-blog-post-count="5"] {
        /* grid-template-rows: repeat(4, 1fr); */
        grid-template-rows: repeat(2, 450px) repeat(2, 1fr);
        grid-template-areas:
            "item1    item1    item1    item1    item1    item1"
            "item1    item1    item1    item1    item1    item1"
            "item2    item2    item2    item3    item3    item3"
            "banner1  banner1  banner1  banner2  banner2  banner2";
    }

    div#mylife_custom-blog-grid.last-page[data-blog-post-count="4"] {
        /* grid-template-rows: repeat(4, 1fr); */
        grid-template-rows: repeat(2, 450px) repeat(2, 1fr);
        grid-template-areas:
            "item1    item1    item1    item1    item1    item1"
            "item1    item1    item1    item1    item1    item1"
            "item2    item2    item2    banner1    banner1    banner1"
            "item2    item2    item2    banner2    banner2    banner2";
    }

    div#mylife_custom-blog-grid.last-page[data-blog-post-count="3"] {
        /* grid-template-rows: repeat(3, 1fr); */
        grid-template-rows: repeat(2, 450px) repeat(1, 1fr);
        grid-template-areas:
            "item1    item1    item1    item1    item1    item1"
            "item1    item1    item1    item1    item1    item1"
            "banner1  banner1  banner1  banner2  banner2  banner2";
    }

}

@media(max-width: 1199px) {
    #mylife_custom-blog-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    #mylife_custom-blog-grid>article {
        width: calc(50% - 4px);
        min-height: 350px;
    }

    #mylife_custom-blog-grid>article:not(.banner):nth-of-type(1) {
        order: 1;
    }

    #mylife_custom-blog-grid>article:not(.banner):nth-of-type(2) {
        order: 2;
    }

    #mylife_custom-blog-grid>article:not(.banner):nth-of-type(3) {
        order: 3;
    }

    #mylife_custom-blog-grid>article:not(.banner):nth-of-type(4) {
        order: 5;
    }

    #mylife_custom-blog-grid>article:not(.banner):nth-of-type(5) {
        order: 6;
    }

    #mylife_custom-blog-grid>article:not(.banner):nth-of-type(6) {
        order: 7;
    }

    #mylife_custom-blog-grid>article:not(.banner):nth-of-type(7) {
        order: 9;
    }

    #mylife_custom-blog-grid>article:not(.banner):nth-of-type(8) {
        order: 10;
    }

    body.home #mylife_custom-blog-grid>article:not(.banner):nth-of-type(9) {
        order: 11;
    }

    body.home #mylife_custom-blog-grid>article:not(.banner):nth-of-type(10) {
        order: 12;
    }

    #mylife_custom-blog-grid>article.banner.loc-1 {
        order: 4;
        min-height: 300px;
    }

    #mylife_custom-blog-grid>article.banner.loc-2 {
        order: 8;
        min-height: 300px;
    }
}

@media(max-width: 768px) {

    #mylife_custom-blog-grid>article {
        width: 100%;
        min-height: 100%;
    }
}


#mylife_custom-blog-grid>article:not(.banner):nth-of-type(1) {
    grid-area: item1;
}

#mylife_custom-blog-grid>article:not(.banner):nth-of-type(2) {
    grid-area: item2;
}

#mylife_custom-blog-grid>article:not(.banner):nth-of-type(3) {
    grid-area: item3;
}

#mylife_custom-blog-grid>article:not(.banner):nth-of-type(4) {
    grid-area: item4;
}

#mylife_custom-blog-grid>article:not(.banner):nth-of-type(5) {
    grid-area: item5;
}

#mylife_custom-blog-grid>article:not(.banner):nth-of-type(6) {
    grid-area: item6;
}

#mylife_custom-blog-grid>article:not(.banner):nth-of-type(7) {
    grid-area: item7;
}

#mylife_custom-blog-grid>article:not(.banner):nth-of-type(8) {
    grid-area: item8;
}

body.home #mylife_custom-blog-grid>article:not(.banner):nth-of-type(9) {
    grid-area: item9;
}

body.home #mylife_custom-blog-grid>article:not(.banner):nth-of-type(10) {
    grid-area: item10;
}

#mylife_custom-blog-grid>article.banner.loc-1 {
    grid-area: banner1;
}

#mylife_custom-blog-grid>article.banner.loc-2 {
    grid-area: banner2;
}

#mylife_custom-blog-grid article.mylife_blog-item {
    background-color: antiquewhite;
    padding: 20px;
    position: relative;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background-position: center;
    background-size: cover;
}

/*#mylife_custom-blog-grid article.mylife_blog-item::before {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 68.89%, rgb(0 0 0 / 45%) 83.67%, rgb(0 0 0 / 70%) 100%);
}*/

#mylife_custom-blog-grid article.mylife_blog-item .overlay {
    background: linear-gradient(267.55deg, rgba(0, 0, 0, 0.228) -41.46%, rgba(0, 0, 0, 0.408) 17.44%, rgba(0, 0, 0, 0.6) 98.79%);
    /*margin-top: 150px;*/
    padding: 46px;
}

#mylife_custom-blog-grid article.mylife_blog-item>a {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: block;
    z-index: 2;
    border-bottom: none;
    background: none !important;
}

#mylife_custom-blog-grid article.mylife_blog-item .meta,
#mylife_custom-blog-grid article.mylife_blog-item .shot-text,
#mylife_custom-blog-grid article.mylife_blog-item h1 {
    text-shadow: 0px 2px 4px rgb(0 0 0 / 45%);
    z-index: 1;
    color: #fff;
}

#mylife_custom-blog-grid article.mylife_blog-item .meta {
    font-family: "Montserrat";
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

#mylife_custom-blog-grid article.mylife_blog-item div.shot-text {
    font-family: "Montserrat";
    font-size: 18px;
    font-weight: 400;
    line-height: 22px;
}

#mylife_custom-blog-grid article.mylife_blog-item img.video-tag {
    margin-bottom: 10px;
}

#mylife_custom-blog-grid article.banner {
    min-height: 508px;
}

#mylife_custom-blog-grid article.banner,
.mylife_blog-single-banner article.banner {
    background-color: #393838;
    display: grid;
    place-content: center;
    color: #fff;
    text-align: center;
    background-size: cover;
    background-position: center;
    overflow: hidden;
    position: relative;
}

.mylife_blog-single-banner article.banner {
    background: none;
}

.mylife_blog-single-banner.primary article.banner {
    /*min-height: 220px;*/
    margin: 20px 0;
}

/*.mylife_blog-single-banner.secondary article.banner {
    min-height: 178px;
}*/

#mylife_custom-blog-grid article.banner>a,
.mylife_blog-single-banner article.banner>a {
    display: block;
    position: absolute;
    /* display: grid;
    place-content: center; */
    width: 100%;
    height: 100%;
    visibility: hidden;
    opacity: 0;
    transition: opacity 1s ease, visibility 0s ease 1s;
    z-index: -1;
}

.mylife_blog-single-banner article.banner>a {
    position: absolute;
    line-height: 0;
}


#mylife_custom-blog-grid article.banner>a.active,
.mylife_blog-single-banner article.banner>a.active {
    visibility: visible;
    opacity: 1;
    transition: opacity 1s ease;
    z-index: 0;
}

/*#mylife_custom-blog-grid article.banner>a.active>img*/
.mylife_blog-single-banner article.banner>a.active {
    position: static;
}

#mylife_custom-blog-grid article.banner>a>img {
    /* position: absolute; */
    /* object-fit: cover; */
    width: 100%;
    height: 100%;

}

.mylife_blog-single-banner article.banner img {
    object-fit: cover;
}

#mylife_custom-blog-grid article.banner>span,
.mylife_blog-single-banner article.banner>span {
    font-family: "Montserrat";
    font-size: 22px;
    font-weight: 400;
    line-height: 30px;
    padding: 64px;
    height: 308px;
    display: grid;
    place-content: center;
}

#mylife_custom-blog-grid article.banner:empty::before {
    content: "Vaš oglas može biti ovdje!";
    font-family: "Montserrat";
    font-size: 22px;
    font-weight: 400;
    line-height: 30px;
    position: absolute;
    display: grid;
    width: 100%;
    height: 100%;
    place-items: center;
}

/** Custom pagination **/

.blog-custom-pagination ul.page-numbers {
    padding: 0;
    list-style: none;
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 48px 0;
}

.blog-custom-pagination {
    width: 100%;
}

.blog-custom-pagination ul.page-numbers a,
.blog-custom-pagination ul.page-numbers span {
    background: #F1F1F3;
    padding: 2px 6px;
    display: inline-block;
    width: 32px;
    height: 32px;
    text-align: center;
    margin: 0 4px;
}

.blog-custom-pagination ul.page-numbers span {
    background-color: #f7f7f7;
}

/** Nav **/

#mylife_sidebar-nav .elementor-nav-menu a.elementor-item {
    display: inline-block;
    padding: 4px 0;
    border-bottom: 1px solid transparent;
}

#mylife_sidebar-nav .elementor-nav-menu a.elementor-item:hover,
#mylife_sidebar-nav .elementor-nav-menu li.current-menu-item>a.elementor-item {
    border-color: var(--e-global-color-primary);
}

#mylife_sidebar-nav .elementor-nav-menu li {
    text-align: right;
}

/** Blog single **/

blockquote {
    margin-left: 0px;
    padding-left: 20px;
    border-left: 3px solid #85C5E8;
}

.elementor-widget-theme-post-content h1,
.elementor-widget-theme-post-content h2,
.elementor-widget-theme-post-content h3,
.elementor-widget-theme-post-content h4,
.elementor-widget-theme-post-content h5,
.elementor-widget-theme-post-content h6 {
    color: #393838;
    margin-top: 20px;
}

.elementor-widget-theme-post-content ul,
.elementor-widget-theme-post-content ol {
    margin-bottom: 15px;
}

.elementor-widget-theme-post-content b,
.elementor-widget-theme-post-content strong {
    font-weight: 600;
}

.elementor-widget-theme-post-content a,
.elementor-tab-content a {
    border-bottom: 1px solid #95C452;
    font-weight: 400 !important;
    position: relative;
    transition: background-size 0.55s cubic-bezier(.2, .75, .5, 1), color 0.3s ease;
    background-image: linear-gradient(to top, #95c45252 0%, #95c45252 100%);
    background-size: 100% 0;
    background-repeat: no-repeat;
    background-position: bottom center;
}

.elementor-widget-theme-post-content a:hover,
.elementor-tab-content a:hover {
    background-size: 100% 4px;
    opacity: 1;
}

.elementor-widget-theme-post-content article.banner a {
    border: none !important;
    background: none !important;
}


body.single-post .content-overview ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

body.single-post .content-overview ul li {
    margin-bottom: 4px;
}

body.single-post .content-overview ul a {
    display: block;
    padding: 4px 12px;
    border-radius: 8px;
    transition: all .3s ease-in;
}

body.single-post .content-overview ul a:hover {
    background: #F1F1F3;
}

body.single-post .content-overview.hide {
    display: none !important;
}

body.single-post .content-overview {
    padding-bottom: 32px;
    margin-bottom: 32px;
    border-bottom: 1px solid #F1F1F3;
}

/* body.single-post .elementor-widget-theme-post-content h2,
body.single-post .elementor-widget-theme-post-content h3,
body.single-post .elementor-widget-theme-post-content h4,
body.single-post .elementor-widget-theme-post-content h5,
body.single-post .elementor-widget-theme-post-content h6 {
    font-family: "Montserrat";
    font-weight: 600;
} */

body.single-post .elementor-author-box__name {
    font-family: "Montserrat", Sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    color: var(--e-global-color-accent);
}

/* #ad-secondary-mobile {
    display: none !important;
} */

/** Alt images on special grids **/

#mylife_custom-blog-grid article.banner img.alt,
#mylife_custom-blog-grid[data-blog-post-count="10"] article.banner img.alt,
#mylife_custom-blog-grid[data-blog-post-count="9"] article.banner img.alt,
#mylife_custom-blog-grid[data-blog-post-count="8"] article.banner img.alt {
    display: none;
}

#mylife_custom-blog-grid[data-blog-post-count="7"] article.banner.loc-2 img.alt {
    display: block;
}

#mylife_custom-blog-grid[data-blog-post-count="7"] article.banner.loc-2 img.first {
    display: none;
}

#mylife_custom-blog-grid[data-blog-post-count="6"] article.banner.loc-1 img.alt,
#mylife_custom-blog-grid[data-blog-post-count="5"] article.banner.loc-1 img.alt,
#mylife_custom-blog-grid[data-blog-post-count="4"] article.banner.loc-1 img.alt,
#mylife_custom-blog-grid[data-blog-post-count="3"] article.banner.loc-1 img.alt {
    display: block;
}

#mylife_custom-blog-grid[data-blog-post-count="6"] article.banner.loc-1 img.first,
#mylife_custom-blog-grid[data-blog-post-count="5"] article.banner.loc-1 img.first,
#mylife_custom-blog-grid[data-blog-post-count="4"] article.banner.loc-1 img.first,
#mylife_custom-blog-grid[data-blog-post-count="3"] article.banner.loc-1 img.first {
    display: none;
}


@media(max-width:1500px) {

    #mylife_custom-blog-grid {
        grid-column-gap: 8px;
        grid-row-gap: 8px;
    }

    #mylife_custom-blog-grid article.mylife_blog-item h1 {
        font-size: 30px;
        line-height: 30px;
    }

    #mylife_custom-blog-grid article.mylife_blog-item .overlay {
        padding: 28px;
    }

    #mylife_custom-blog-grid[data-blog-post-count] article.banner.loc-1 img.first,
    #mylife_custom-blog-grid[data-blog-post-count] article.banner.loc-2 img.alt {
        display: block;
    }

    #mylife_custom-blog-grid[data-blog-post-count] article.banner.loc-1 img.alt,
    #mylife_custom-blog-grid[data-blog-post-count] article.banner.loc-2 img.first {
        display: none;
    }
}

@media(max-width:1200px) {

    #mylife_custom-blog-grid article.banner img.alt {
        display: block;
    }

    #mylife_custom-blog-grid article.banner.loc-1 img.first {
        display: none;
    }

    #mylife_custom-blog-grid article.banner.loc-1 img.first,
    #mylife_custom-blog-grid article.banner.loc-2 img.alt {
        display: none !important;
    }

    #mylife_custom-blog-grid article.banner.loc-1 img.alt,
    #mylife_custom-blog-grid article.banner.loc-2 img.first {
        display: block !important;
    }

}

@media(max-width:768px) {

    #mylife_custom-blog-grid article.banner>a>img {
        object-fit: contain;
    }
}

@media (max-width: 767px) {
    #pojo-a11y-toolbar.pojo-a11y-toolbar-right {
        top: 115px !important;
    }
}


/** Accesibility tools edit **/

ul.pojo-a11y-toolbar-items.pojo-a11y-tools li.pojo-a11y-toolbar-item:nth-of-type(6) {
    display: none !important;
}