/*!
Theme Name: Msc Blog
Theme URI: https://myschoolconnect.com.au/blog
Author: Underscores.me
Author URI: https://myschoolconnect.com.au
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: msc

*/

/*
 * [Table of Contents]
*
* -Container
*  --Content-Blog
*  ---Column-Module
*  ---Column-Content

* [Modules Table Of Contents]
*   1.0- Search-Box / #search-box
        1.1 - .search-bar
        1.2 - .search-button
        1.3 - .search-input
        1.4 - .search-no-match


*   2.0 - Breadcrumbs / #breadcrumbs
        2.1 - .brd-item
            2.1.1 - .brd-home
            2.1.2 - .arrow-right-small
            2.1.3 - .icon-home-page

*   3.0- Pagination /  #pagination
        3.1 - ul .pages
            3.1.1 - .current
            3.1.2 - .next
            3.1.3 - .prev
            3.1.3 - .page-numbers
        3.2 - .results

*   4.0- Widget / .widget
        4.1 - .widget,.widget_categories
            4.1.1 - .widget-title
            4.1.2 - .widget_categories .cat-item a
            4.1.3 - .widget ul
                4.1.3.1 - ul li .cat-item
*    5.0- Post List / .blog-entry
        5.1 - .entry-content
            5.1.1. - .entry-title
            5.1.2  - .entry-summary
            5.1.3  - .entry-date
            5.1.4  - .button-read
        5.2 - .entry-image

*    6.0- Help-Contact-Content / .help-contact-content
        6.1 - .help-section
        6.2 - .customer-helps
            6.2.1 - help-item

*    7.0- Category Filter Buttons / .category-filter-buttons
        7.1 - li .cat-item-f
        7.2 - li .filter-active

*    8.0- Featured Post Module - Home Page /  #featured-module
        8.1 - featured-entry-content
            8.1.1 - .featured-entry-title
            8.1.2 - .featured-entry-date
            8.1.3 - .featured-entry-summary
            8.1.4 - .button-read
        8.2 - .featured-entry-image

 *    9.0- Post Navigation /  .post-buttons
        9.1 - .p-button

 *    10.0- Post Content - Single.php /  #post-content

*/
.new-header-buffer {
    height: 5px !important;
}
@media screen and (max-width: 782px) {
    html #wpadminbar {
        position: fixed !important;
    }
}

/* Text meant only for screen readers. */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
}

.screen-reader-text:focus {
    background-color: #f1f1f1;
    border-radius: 3px;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
    clip: auto !important;
    clip-path: none;
    color: #21759b;
    display: block;
    font-size: 0.875rem;
    font-weight: 700;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
}
.bg {
    background: linear-gradient(
            0deg, transparent 20%, #F5F5F5 0%);
    padding: 50px 140px 0px;
}
h2.light {
    font: normal normal 300 30px/33px Open Sans;
    color: #4D4D4D;
}
h3.light {
    font: normal normal 300 24px/33px Open Sans;
    color: #4D4D4D;
}
h4.light {
    font: normal normal 300 18px/24px Open Sans;
    color: #4D4D4D;
}

/* Icons */
.arrow-left {
    height: 20px;
    width: 20px;
    background-image: url('image/icons/chevron-thin-left.png');
}

.arrow-right {
    height: 20px;
    width: 20px;
    background-image: url('image/icons/chevron-thin-right.png');
}

.page-title {
    text-align: center;
    font: normal normal 300 30px/41px Open Sans;
    letter-spacing: 0px;
    color: #4D4D4D;
    margin-bottom: 30px;
    margin-top: 0px;
}

#container {
    max-width: 1160px !important;
    margin: 0px auto;
    z-index: -2 !important;
    position: unset !important;
    background-color: unset !important;
}

#content-blog {
    margin-top: 30px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
}

@media only screen and (min-width: 768px) and (max-width:1024px) {

    #container {
        padding: 0 20px;
    }

    #content {
        margin-top: 0;
        display: flex;
        flex-direction: column;
    }

    #column-module {
        width: 100%;
        flex: none;
    }
}

#column-module {
    flex: 0 0 260px;
}
#column-content{ }

/* ==========================================================================
   1.0- Search-Box / #search-box
   ========================================================================== */
#search-box {
    display: flex;
    flex-direction: column;
}
#search-box .search-bar {
    margin-top: 50px;
    margin-bottom: 50px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

#search-box .search-bar input[type=text] {
    width: 50%;
    border: none;
    font: normal normal 300 30px/41px Open Sans;
    border-bottom: 0.8px #B3B3B3 solid;
    padding: 0 0.7rem;
    line-height: normal;
}

#search-box .search-bar input[type=text]::placeholder {
    color: #B3B3B3;
}

#search-box .search-button {
    border: none;
    background-color: transparent;
}

.search-button .search-icon {
    height: 35px;
    width: 35px;
}

#search-box .founded {
    color : #4D4D4D;
    text-align: center;
    font: normal normal 300 24px/33px Open Sans;
}

.search-no-match {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* ==========================================================================
    2.0 - Breadcrumbs / #breadcrumbs
   ========================================================================== */
#breadcrumbs {
    font: normal normal normal 13px/17px Open Sans;
    margin-top: 30px;
    display: flex;
    align-items: center;
}

#breadcrumbs .brd-item,.brd-item a {
    letter-spacing: 0px;
    color: #4D4D4D;
}

#breadcrumbs .brd-home {
    margin-top: -1px;
    width: 20px;
    height: 20px;
}

#breadcrumbs .brd-home .icon-home-page {
    width: 20px;
    height: 18px;
    background-image: url('image/icons/home-icon.png');
}

#breadcrumbs .arrow-right-small {
    height: 20px;
    width: 20px;
    background-image: url('image/icons/chevron-small-right.png');
}


/* ==========================================================================
   3.0- Pagination /  #pagination
   ========================================================================== */
#pagination {
    display: flex;
    justify-content: space-evenly;
    margin-top: 50px;
    align-items: baseline;
}

#pagination .results {
    font: normal normal 600 14px/19px Open Sans;
    color: #4D4D4D;
    margin-bottom: 20px;
}

#pagination .pages {
    display: flex;
    list-style: none;
    font: normal normal 300 18px/24px Open Sans;
}

#pagination .pages a {
    cursor: pointer;
}

.pages .next, .pages .prev {
    margin-right: 20px;
    letter-spacing: 0px;
    color: #4D4D4D;
}

.pages .page-numbers {
    color: #4D4D4D;
    margin-right: 10px;
}

.pages .current {
    margin-right: 10px;
    font: normal normal 800 18px/24px Open Sans;
}


/* ==========================================================================
   4.0- Widget / .widget
   ========================================================================== */
.widget {
    border: 0.5px solid #999999;
    margin-right: 20px;
    flex: 1;
    list-style: none;
    margin-bottom: 10px;
}
.widget ul {
    list-style: none;
    padding: 0;
    margin-left: 22px;
}

.widget .widget-title {
    margin: 20px 0px 20px 20px;
    font: normal normal 300 22px/30px Open Sans;
    color: #4D4D4D;
}

.widget .cat-list {
    display: flex;
    flex-direction: column;
    list-style: none;
    margin: 0 0 0 22px;
    padding: 0;
}

.widget_categories .cat-item {
    font: normal normal normal 14px/19px Open Sans;
    color: #4D4D4D;
    margin-bottom: 15px;
}

.widget_categories .cat-item a {
    color: #4D4D4D;
}

.widget_categories .cat-item a:hover {
    color: #383838;
}

/* ==========================================================================
   5.0 Blog-Entry / .blog-entry
   ========================================================================== */
.blog-entry {
    border: 2px solid transparent;
    padding: 0 5px 0 0;
    display: flex;
    margin-bottom: 20px;
    box-shadow: 0px 3px 6px #00000008;
    max-height: 250px;
}

.blog-entry:hover {
    box-shadow: 0px 3px 6px #00000008;
    border: 2px solid #707070;
}

.blog-entry .button-read {
    padding: 15px 15px 15px 0;
}

.entry-content {
    margin-left: 30px;
}

.entry-image img {
    width: 250px;
    height: 246px;

}

.entry-content .entry-title {
    margin: 10px 30px 10px 0px;
    font: normal normal 300 24px/19px Open Sans;
    color: #4D4D4D;
    line-height: normal;
}

.entry-content .entry-title a {
    color: #4D4D4D;
}

.entry-content .entry-summary {
    font: normal normal normal 14px/19px Open Sans;
    color: #4D4D4D;
    height: 60px;
}

.entry-content .entry-date {
    margin-top: 15px;
    font: normal normal normal 10px/14px Open Sans;
    color: #4D4D4D;
}

/* ==========================================================================
6.0- Help-Contact-Content / .help-contact-content
  ========================================================================== */
#help-contact-content {
    background-color: #f5f5f5;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#help-contact-content .help-section{
    margin-top: 50px;
}

#help-contact-content .customer-helps {
    display: flex;
    margin: 0 auto 50px auto;
    width: 1160px;
    justify-content: space-evenly;
}

.customer-helps .help-item .light {
    text-align: center;
    margin-top: 15px;
}

.help-item .light a {
    color: #333745;
}

/* ==========================================================================
7.0- Category Filter Buttons / .category-filter-buttons
  ========================================================================== */
.category-filter-buttons {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    margin-bottom: 20px;
    list-style: none;
    flex-wrap: wrap;
    color: #ffffff;
    margin-top: 20px;
}

.category-filter-buttons .cat-item-f {
    padding: 7px;
    background: white;
    color: #333333;
    border: 1px solid #333333;
    border-radius: 15px;
    margin-right: 20px;
    margin-bottom: 10px;
}

.category-filter-buttons li:hover {
    background: #389D4B;
}

.category-filter-buttons li:hover a {
    color: #ffffff;
}

.category-filter-buttons .cat-item-f a,.cat-item-f a:hover {
    color: #333333;
}

.category-filter-buttons .filter-active,.category-filter-buttons .filter-active a {
    color: #ffffff;
    background: #389D4B;
}


/* ==========================================================================
8.0- Featured Post Module - Home Page /  #featured-module
  ========================================================================== */

#featured-module {
    background: linear-gradient(
            0deg, transparent 26%, #F5F5F5 0%);
}

@media only screen and (min-width: 1025px) {
    #featured-entry {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        padding: 20px;
        width: 1160px;
        margin: 0 auto;
    }
}

#featured-entry {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    padding: 20px;
    margin: 0 auto;
}

.featured-entry-summary {
    display: flex;
    flex-direction: column;
    margin-bottom: 28px;
    min-height: 180px;
    padding-right: 10px;
}

.featured-entry-title {
    font: normal normal 300 30px/41px Open Sans;
    letter-spacing: 0px;
    color: #4D4D4D;
    margin-bottom: 10px;
}

.featured-entry-date {
    text-align: left;
    font: normal normal normal 10px/14px Open Sans;
    letter-spacing: 0px;
    color: #4D4D4D;
    margin-bottom: 15px;
}

.featured-entry-image .featured-image {
    width: 630px;
    height: 330px;
}

@media only screen and (min-width: 768px) and (max-width: 1023px) {
    .featured-entry-image .featured-image {
        width: 380px;
        height: 330px;
    }
}

/* ==========================================================================
9.0- Post Navigation Css - Single.php Page /  .post-buttons
  ========================================================================== */
.post-buttons {
    margin: 25px 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.post-buttons .p-button {
    display: flex;
    align-items: center;
}

.post-buttons .p-button a {
    font: normal normal 300 18px/24px Open Sans;
    letter-spacing: 0px;
    color: #4D4D4D;
    align-content: center;
    padding: 0;
}

/* ==========================================================================
    10.0- Post Content - Single.php Page and Content-Full-Width.php /  #post-content
  ========================================================================== */
#post-content {
    display: flex;
    flex-direction: column;
    margin-bottom: 28px;
    min-height: 180px;
}

#post-content .post-title {
    text-align: left;
    font: normal normal 300 30px/41px Open Sans;
    letter-spacing: 0px;
    color: #4D4D4D;
    margin-bottom: 10px;
    margin-top: 0px;
}

#post-content.post-date {
    text-align: left;
    font: normal normal normal 10px/14px Open Sans;
    letter-spacing: 0px;
    color: #4D4D4D;
    margin-bottom: 15px;
}

#post-content .paragraph {
    margin-top: 10px;
}

.post-date .entry-date {
    font: normal normal normal 10px/14px Open Sans;
    color: #4D4D4D;
}
.post-full-width-image {
    width: 100%;
    max-height: 480px;
}



@media only screen and (min-width: 768px) and (max-height:1024px) {

    #help-contact-content .customer-helps {
        width: 100%;
        margin: 20px 0;
    }
    #help-contact-content .customer-helps{
        display: flex;
        flex-direction: row !important;
    }
}

/** TABLET LANDSPACE */
@media only screen and (orientation: landscape) and (min-width: 801px) and (max-width:1023px) {
    #help-contact-content .customer-helps {
        width: 100%;
        margin: 20px 0;
    }
}

/** Mobile devices **/
@media only screen and (max-width: 767px) {
    #masthead {
        margin-bottom: 75px !important;
    }

    h2.light {
        font: normal normal 300 20px/33px Open Sans
    }

    #container {
        padding: 0 20px;
    }

    #content {
        margin-top: 0;
        display: flex;
        flex-direction: column;
    }

    #column-module {
        width: 100%;
        flex: none;
    }

    #content-blog {
        flex-direction: column;
    }

    /* ==========================================================================
                1.0 -Search-Box / #search-box
    ========================================================================== */
    #search-box {
        display: flex;
        flex-direction: column;
        padding: 20px;
    }

    #search-box .search-bar input[type=text] {
        width: 100%;
    }

    #search-box .search-bar {

        margin: 30px 0px;
    }

    #search-box .founded {
        text-align: left;
        color : #4D4D4D;
        font-size: 16px;
    }
    /* ==========================================================================
        2.0 - Breadcrumbs / #breadcrumbs
       ========================================================================== */
    #breadcrumbs {
        font: normal normal normal 13px/17px Open Sans;
        margin: 30px 0;
        display: flex;
        align-items: center;
    }

    #breadcrumbs .arrow-right-small {
        padding-right: 25px;
    }

    /* ==========================================================================
                3.0- Pagination /  #pagination
   ========================================================================== */
    #pagination {
        display: flex;
        flex-direction: column;
        margin-top: 30px;
        align-items: center;
    }

    #pagination .pages {
        display: flex;
        list-style: none;
        font: normal normal 300 16px/24px Open Sans;
        padding: 0;
    }

    #pagination .pages a {
        cursor: pointer;
        letter-spacing: 0px;
        color: #4D4D4D;
    }

    .pages .next, .pages .prev {
        margin-right: 20px;
        letter-spacing: 0px;
        color: #4D4D4D;
    }

    .pages .page-numbers {
        margin-right: 10px;
    }

    .pages .current {
        margin-right: 10px;
        color: #4D4D4D;
    }

    #pagination .results {
        font: normal normal 600 14px/19px Open Sans;
        color: #4D4D4D;
        text-align: center;
        margin-bottom: 20px;
    }

    /* ==========================================================================
                4.0 - Widget / .widget
    ========================================================================== */
     .widget {
        margin-bottom: 20px;
        margin-right: 0;
     }

    /* ==========================================================================
                5.0 Blog List Entry / .blog-entry
    ========================================================================== */
    .blog-entry {
        display: flex;
        flex-direction: column;
        max-height: none;
        padding: 0;
        margin-bottom: 20px;

    }

    .entry-content {
        margin: 0;
    }

    .entry-image img {
        width: 100%;
        height: 250px;
    }

    .entry-content .entry-title {
        text-align: center;
    }

    .entry-content .button-read {
        padding: 15px 15px 15px 15px;
        text-align: center;
    }

    .blog-entry .entry-summary {
       height: 90px;
    }

    /* ==========================================================================
              6.0- Help-Contact-Content / .help-contact-content
    ========================================================================== */

    #help-contact-content .customer-helps {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: auto;
    }


    /* ==========================================================================
               7.0- Category Filter Buttons / .category-filter-buttons
      ========================================================================== */

    .category-filter-buttons {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        padding: 0;
        text-align: center;
        margin-top: 10px;
    }
    /* ==========================================================================
               8.0 -Featured Post Module - Home Page /  #featured-module
    ========================================================================== */
    #featured-module {
        background: none;
    }

    #featured-entry {
        width: 100%;
        flex-direction: column;
        align-items: center;
        display: flex;
    }

    .featured-entry-title {
        font-size: 20px;
        border-radius: 5px;
        background-color: #ffffff7a;
        -webkit-backdrop-filter: blur(15px);
        backdrop-filter: blur(15px);
        opacity: 1;
        margin: 0;
        margin-top: -45px;
        padding: 2px 20px;
    }
    .featured-entry-content {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .featured-entry-image {
        order: -1;
    }
    .featured-entry-image .featured-image {
        width: 100%;
        height: 100%;
    }
    .featured-entry-summary {
        min-height: 0;
    }

    /* ==========================================================================
        9.0- Post Navigation Css - Single.php Page /  .post-buttons
    ========================================================================== */
    .post-buttons .p-button a {
        font-size: 15px;
    }

    /* ==========================================================================
        10.0- Post Contents - Single.php Page /  .post-buttons
      ========================================================================== */
    .post-title {
        border-radius: 5px;
        background-color: #ffffff7a;
    }
}