/*
Theme Name:   Club Cricket Child
Theme URI:    http://clubcricket.co.za/club-cricket-child/
Description:  Club Cricket Child is a modern and dynamic news WordPress theme with great flexibility and powerful features. This advanced news template is ideal for up-to-date online newspapers, brilliant news magazines and all kind of other vibrant news websites. Styled in flat design MH Newsdesk WordPress Theme is focusing on your newsworthy and fresh content.
Author:       Alessandro Bonora
Author URI:   http://clubcricket.co.za
Template:     mh-newsdesk
Version:      2.2.3
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain:  clubcricketchild
*/

/* @media only screen and (min-width: 1280px) {
    .header-ad {
        text-align: right;
        margin-bottom: -10px;
    }
} */

img {
    width: 100%;
}

.logo-wrap img {
    max-width: 300px;
}

.header-ad {
    text-align: center;
    margin-bottom: 10px;
}

.mh-header {
    background: #ffffff
}

#mh-wrapper {
    padding: 20px;
    border-radius: 6px;
}

img {
    border-radius: 6px;
}

.header-wrap {
    /* background: #ffffff;  no need for this as mh-header has the background applied*/
    max-width: 1220px;
    margin: 0 auto;
}
.logo-wrap {
    max-width: 1180px;
    margin: 0 auto;
    width: 90%;
}

.main-nav li {
    float: left;
    position: relative;
    border-left: 1px solid #424242;
    /* background: #27ABFF; */
    border-radius: 50px;
    margin: 10px 5px 10px 0px;
    font-size: 0.8rem;
    letter-spacing: .025rem;
}
.main-nav li a {
    border-radius: 50px;
    background: #004488;
    padding: 0.425rem 0.9375rem;
}

.main-nav li a:hover {
    border-radius: 50px;
    background: #27ABFF;
}

li.current-menu-item a {
    border-radius: 50px;
    background: #27ABFF;
}

.header-menu {
    /* background: #004488; */
    background: #01092E;
}

.header-logo-full {
    float: left;
}

.breadcrumb {
    font-size: 10px;
}
.breadcrumb a {
    background: none;
}

.social-nav {
    padding: 10px 25px 10px;
    width: 100%;
}

.social-nav a {
    color: #004488;
}

.nav-container {
    max-width: 1220px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}

.search-form .search-field {
    background: #fff;
    border: 1px solid #004488;
    cursor: pointer;
    margin: 0;
    padding: 10px 15px;
    position: relative;
    -webkit-appearance: none;
    -webkit-border-radius: 0;
    border-radius: 50px;
}

.header-search {
    padding: 8px;
}

.search-form input {
    min-width: 200px;
    font-size: 12px;
    line-height: 1;
    color: #1f1e1e;
    text-transform: uppercase;
}

.google-ad-unit {
    max-width: 1220px;
    margin: 0 auto;
    min-height: 250px;
    text-align:center;
    padding-bottom: 20px;
    transition: min-height .8s linear;
}


.mh-footer {
    background: #01092E;
    
    .footer-1, .footer-2, .footer-3 {
        background: none;
    }
    .footer-widgets ul > .menu-item {
        border: none;
    }

    .footer-widgets .widget-title {
        font-size: 20px;
        font-size: 1.25rem;
        font-weight: bold;
        padding: 10px 0px;
        background: none;
    }

} 

/* Example: reserve space to avoid layout shift */
#ad-top { 
    height: 300px; 
    display: block; 
}

/***** Media Queries *****/

@media only screen and (max-width: 980px) {
    body {
        background:#ffffff;
    }
    .header-menu {
        position: absolute;
        width: 100%;
        z-index: 99;
    }
	.js .slicknav_menu {    

    }
    .slicknav_btn {
        position: relative;
        display: inline-block;
        vertical-align: middle;
        height: auto;
        float: left;
        padding: 1rem 1rem;
        line-height: 1.125rem;
        cursor: pointer;
    }
    .mobile-logo {
        display: block;
        position: relative;
        top: 55px;
        height: 115px;
    }
    .mh-header {
        /* margin-bottom: 0;
        min-height: 140px; */
        margin-bottom: 0;
        padding: 0 0 80px 0;
    }
    .header-wrap {
        display:none;
    }

    .slicknav_nav ul {
        padding: 20px;
    }

    /* Make the whole header sticky, but NOT flex */
    .header-menu .slicknav_menu {
        position: sticky;
        top: 0;
        z-index: 1000;
        box-shadow: 0 2px 6px rgba(0,0,0,.06);
        padding: 0;               /* bar handles its own padding */
    }

    /* Only the top bar is flex (logo + hamburger) */
    .header-menu .slicknav_menu .sv-bar {
        display: flex;
        align-items: center;
        gap: .75rem;
        padding: .5rem .75rem;
    }

    /* Logo sizing */
    .header-menu .slicknav_menu .sv-brand img { height: 28px; display: block; padding-left: 20px;}

    /* Push hamburger to the right */
    .header-menu .slicknav_menu .sv-bar .slicknav_btn { margin-left: auto; }

    /* The dropdown should be a vertical list, full width */
    .header-menu .slicknav_nav {
    display: block;              /* reset any flex from earlier */
    width: 100%;
    border-top: 1px solid rgba(0,0,0,.08);
    }

    /* Nuke theme list/grid styles that cause columns */
    .header-menu .slicknav_nav, 
    .header-menu .slicknav_nav * {
    float: none !important;
    flex: none !important;
    }

    .header-menu .slicknav_nav > li {
    display: block;
    width: 100%;
    }

    .google-ad-unit {
        max-width: 728px;
        margin: 0 auto;
        min-height: 250px;
        text-align:center;
        padding-bottom: 0px;
        transition: min-height .8s linear;
    }

    .nav-container {
        display:none;
    }
}


/* on mobile make the thumbnails show at 100% */
@media only screen and (max-width: 768px) {
    .content-grid-thumb img {
        max-width: 100vw;
        width: 100%;
        border-radius: 10px;
    }
    .content-list-thumb img { 
        max-width: 100vw;
        width: 100%;
        border-radius: 10px;    }
    .content-lead-title {
        font-size: 1.5rem;
    }

    .google-ad-unit {
        max-width: 300px;
        margin: 0 auto;
        min-height: 250px;
        text-align:center;
        transition: min-height .8s linear;
        /* padding-bottom: 20px; */
    }
}
/* 
@media only screen and (min-width: 769px) {
	.home.mh-section.mh-group {
		min-height: 1000px;
	}
} */