$color-red: #e6242f;

.fusion-page-title-bar {
    background: none !important;
    height: 25vh;
    min-height: 200px;
}
.avada-page-titlebar-wrapper {
    background: $color-red url(images/banner.jpg) no-repeat 50% 50%;
    background-size: cover;
    background-attachment: scroll;
}

form.filters {
    display: flex;
    align-items: center;
    .filter {
        display: flex;
        align-items: center;
        margin: 0 4em 0 0;    
        &:last-child {
            margin-right: 0;
        }
    }
    label {
        margin: 0 1em 0 0;
        font-weight: bold;
        color: #000;
    }
    .select.input {
        position: relative;
        strong {
            color: $color-red;
            font-weight: normal;
            &:before {
                margin: 0 0.5em 0 0;
                content: '+';
                color: #000;
            }
        }
        select {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
        }
    }
    .input.search {
        display: flex;
        align-items: center;
        border: 1px solid currentColor;
        input[type="text"] {
            background: white;
            height: auto;
            width: 20em;
            padding: .5em;
            border: 0;
            color: #000;
        }
        button {
            border: 0;
            background: none;
            cursor: pointer;
        }
    }
    @media screen and (max-width:768px) {
        display: block;
        font-size: 0.8em;
        .input.search {
            input[type="text"] {
                width: 100%;
            }
        }
    }
}
body #wrapper #main {
    position: relative;
    
    &:before {
        content: ' ';
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        width: 320px;
        height: 400px;
        background: url(images/flame.svg) no-repeat 0% 100%;
        background-size: 110%;
    }
}
.query-posts {
    width: 100%;
    margin: 3em 0 0;
    @media screen and (min-width:1024px) {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;

    }
    .hentry {
        flex-basis: 48.5%;
        margin-bottom: 2em;
    }
}
.hentry {
    position: relative;
}
.hentry.resource {
    display: flex;
    flex-direction: column;
    padding: 20px 20px 20px 270px;
    background: #F2F2F2;
    font-size: 0.8em;
    
    .thumbnail {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 250px;
        height: 100%;
        background: #C1C1C1;
        img {
            display: block;
            position: absolute;
            top: 5%;
            left: 5%;
            width: 90%;
            height: 90%;
            object-fit: contain;
            object-position: 50% 50%;
        }
    }
    p {
        line-height: 1.5;
    }
    .category {
        display: block;
        margin: 0;
        font-weight: bold;
        text-transform: uppercase
    }

    .title {
        margin: 0 0 0em;
        color: #000;
        font-family: Teko, sans-serif;
        font-size: 2em;
        a {
            color: inherit;
        }
    }
    .content {
        flex-grow: 1;
    }
    .button {
        display: inline-block;
        padding: .7em 2em;
        border-radius: 50px;
        background: #e6242f;
        color: white;
        text-transform: uppercase;
        line-height: 1;
    }
    &:nth-child(1),
    &:nth-child(4),
    &:nth-child(5),
    &:nth-child(8),
    &:nth-child(9) {
        .thumbnail {
            background: #3B3B3B;
        }
    }
    @media screen and (max-width:768px) {
        padding-left: 200px;
        .thumbnail {
            width: 180px;
        }
    }
    @media screen and (max-width:500px) {
        padding-left: 20px;
        .thumbnail {
            position: relative;
            margin: -20px -20px 20px -20px;
            width: auto;
            height: 200px;
        }
    }
}
.hentry.empty {
    height: 0;
    visibility: hidden;
    opacity: 0;
}

.posts-nav {
    margin: 2em auto 0;
    max-width: 1024px;
    border-top: 1px solid #ccc;
    padding: 2em 0 0;
    ul, li {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    ul {
        margin: 0;
        padding: 0;
        text-align: center;
        li {
            display: inline-block;
            vertical-align: middle;
            margin: 0 5px 0 0;
            padding: 0;
            list-style: none;
            color: #aaa;
            &.page_info {
                display: none;
            }
            a {
                display: block;
                padding: 0.5em 0.7em;
                line-height: normal;
                text-decoration: none;
                border: 0;
                &:hover {
                    color: white;
                    background: $color-red;
                }
            }
            &.active_page {
                color: white;
                background: $color-red;
                a {
                    padding: 0.5em 1em;
                    color: #fff;
                }
            }
        }

    }
}