:root {
    --primary-color: #FFD337;
}

body {
    font-family: "Readex Pro", sans-serif;
}

.fs-12px{
    font-size: 12px;
}

/* Header */
.logo-with-advertise {
    border-bottom: 1px solid #00000073;
}

.logo-with-advertise .logo {
    max-width: 120px;
}

.mobile-logo {
    width: 150px;
}

.offcanvas-header{
    height: 106px;
}
.navbar-site .offcanvas.offcanvas-end {
    max-width: 300px;
}

.navbar-site {
    background-color: #F9F9F9;
    border-bottom: 1px solid #D9D9D9;
}

.navbar-site li a {
    text-decoration: none ;
    color: #000;
    display: inline-block;
    transition: all .2s;
    font-size: 15px;
}

.navbar-site li a:hover{
    color: #000;
}

.social-media li a{
    border: 1px solid #D9D9D9;
    box-shadow: 0px 4px 4px -1px rgba(12, 12, 13, 0.1), 0px 4px 4px -1px rgba(12, 12, 13, 0.05);
    background: #FFFFFF;
    color: #5A5858;
    width: 40px;
    height: 40px;
    line-height: 40px;
    padding: 0;
    text-align: center;
    margin-left: 0;
    margin-right: 6px;
    border-radius: 12px;
    display: block;
}

.social-media li a:hover {
    transition: all .2s;
    box-shadow: 0px 4px 4px -1px rgba(12, 12, 13, 0.1) inset, 0px 4px 4px -1px rgba(12, 12, 13, 0.05) inset;
}

.social-media li::after,
.navbar-links-deskotp li:last-child::after{content: none;}

.form-search input {
    padding-right: 35px;
    font-size: 13px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.form-search button  {
    line-height: 0;
}

.form-control:focus {
    border-color: #ffd338;
    outline: 0;
    box-shadow: 0 0 0 .25rem rgb(255 211 56 / 18%);
}

.breadcrumb-item a { text-decoration: none;  color: #000; }


.popular-posts img{
    width: 100%;
    height: auto;
    object-fit: contain;
}


/* clubs */

.clubs .club-img{
    background: #FFFFFF;
    border: 1px solid #CAC4D0;
    box-shadow: 0px 4px 4px -1px rgba(12, 12, 13, 0.1), 0px 4px 4px -1px rgba(12, 12, 13, 0.05);
    border-radius: 16px;
}

/* Post */

.featured-posts{
    background-color: #FFD337;
    box-shadow: 0px 16px 32px -4px rgba(12, 12, 13, 0.1), 0px 4px 4px -4px #FFD337;
}

.post-data-time {
    min-height: 42px;
}

.post-data-time .date{
    color: #000000c2;
}

.post-data-details {
    color: #757575;
    font-size: 14px;
}

.post-data-more {
    background: #F9F9F9;
}

.btn-sticky {
    height: 36px;
    background: #fef5e7;
    color: #000;
    border-radius: 14px;
    padding: 6px 10px 6px 15px;
}

.btn-readmore {
    background: var(--primary-color);
    border: 0;
    padding: 10px 25px;
    border-radius: 7px;    
}

.posts .post-img {
    display: block;
    height: 100%;
}

.posts .post-img a {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    height: 100%;
}

.posts .post-img a img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
    height: 100%;    
}

/* mathces */
.mathces{
    max-height: 401px;
}

.mathces .tab-pane {
    max-height: 345px;
    overflow: auto;
}

.mathces .nav-tabs {
    border: 0;
    justify-content: space-between;
    margin-bottom: 15px;
    flex-wrap: nowrap;
    text-align: center;
}

.mathces .nav-tabs .nav-link {
    border: 1px solid #D9D9D9;
    border-radius: 5px;
    font-size: .93vw;
    padding: 8px 20px;
    color: #000 !important;
}

.mathces .nav-tabs .nav-link:hover,
.mathces .nav-tabs .nav-link.active{
    background: var(--primary-color);
    border: 1px solid var(--primary-color);
}

.match-info img{
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.match-time {color: #705200 ;font-size: 13px;}

.category-img img {
    height: 80px;
    object-fit: cover;
}

.category-img span {
    background: #F9F9F9;
    border: 1px solid #D9D9D9;
    box-shadow: 0px 4px 4px -1px rgba(12, 12, 13, 0.1), 0px 4px 4px -1px rgba(12, 12, 13, 0.05);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tending-post img{
    height: 70px;
    border-radius: 8px;
    object-fit: cover;
    
}


/* Single POst */

.single-post-content {
    color: #4e4c4c;
}

.single-post-tags ul {
    flex-wrap: wrap;
}

.single-post-tags a{
    background: #F5F5F5;
    transition: all .2s; 
    text-wrap-mode: nowrap; 
    margin-bottom: 10px;
    margin-bottom: 4px !important;
    display: inline-block;    
}

.single-post-tags a:hover{background: var(--primary-color);}

.pagination{
    direction: ltr;
}

.pagination span,
.pagination a {
    text-align: center;
    line-height: 25px;
    margin: 0 2px;
    border-radius: 3px;
    font-size: 16px;
    text-decoration: none;
    color: #000;
    background-color: var(--primary-color);
    padding: 8px 12px;
    opacity: .6;
}

.pagination span:hover,
.pagination a:hover,
.pagination .current{
    opacity: 1;
}

/* Footer */
.footer {
    background: #5A5858;
}

.footer-menu a, .footer-menu a:hover{
    color: #FFF;
    text-decoration: none; 
    display: block; 
    margin-left: 25px;
    font-size: 14px;
}

.footer .social-media a{
    background: #FFD94E;
    border: 1px solid #FFD94E;
    color: #000;
}

.primary-bg-color {
    background-color: var(--primary-color);
}

.btn-reset {
    outline: none;
    border: none;
    background: none;
}


.reset-list{
    padding: 0;
    margin: 0;
    list-style: none;
}

.font-s-14px{font-size: 14px;}
.font-s-12px{font-size: 12px;}

.arrow-between-side .slide-arrow {
    width: 35px;
    height: 35px;
    position: absolute;
    left: -25px;
    top: 50%;
    z-index: 999;
    background-color: #ffffff;
    box-shadow: 0px 4px 10px rgba(37, 47, 63, 0.1);
    transform: translateY(-50%);
    outline: 0;
    border: 1px solid gray;
    border-radius: 100%;
    transition: none;
}

/******************************* Responsive */

@media screen and (min-width: 1200px){
    .navbar-site li a {
        margin-left: 20px;
    }

    .navbar .nav-item:hover > .dropdown-menu {
        display: block;
        width: 200px;
        min-width: max-content;
    }

    .dropdown-submenu-left {
        right: 100% !important;
        left: auto !important;
        top: 0;
    }

    .dropdown-menu .dropdown-toggle::after {
        transform: rotate(90deg);
    }
}

@media screen and (max-width: 1200px){
    .mathces .nav-tabs .nav-link{
        padding: 5px 10px;
        font-size: 13px;        
    }

    .navbar-site .offcanvas{
        background-color: #F9F9F9 !important;
    }

    .navbar-site {
        background-color: var(--primary-color);
    }

    .dropdown-menu .dropdown-toggle::after {
        float: left;
        margin-top: 9px;
    }

    .sticky_posts {display: none;}
    
    .home .sidebar-category,
    .home .tending-post,
    .home .content-advertiser{
        display: none;
    }

    .post-template-default .content-advertiser{
        display: none;
    }
}

@media screen and (min-width: 768px) {
    .single-line {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

@media(max-width: 776px) {
    a.logo {
        width: 105px;
    }
    
    .sliderClubsWidth{
        width: 50px; 
        height: 50px; 
    }
    
    .mathces li{
        width: 33.3333%;
        text-align: center;        
    }

    .mathces li:first-child a {border-radius: 0 5px 5px 0 !important;}
    .mathces li:last-child a {border-radius: 5px 0 0  5px!important;}

    .mathces li:nth-child(2) a{border-radius: 0 !important;}

    .single-post .img img,
    .post-img img { width: 100%; }

    .sticky-post img {
        min-height: 350px;
        object-fit: cover;        
    }

    .single-post > .p-4,
    .posts .post{padding: 10px !important;}

    .post-img {margin-bottom: 10px;}

    .post-data-time .date {font-size: 12px;}

    .single-post-title h1,
    .post-data-heading {font-size: 17px;margin-bottom: 6px !important;}

    .single-post-title {margin-bottom: 10px !important;}

    .single-post-content,
    .post-data-details {font-size: 13px; margin-bottom: 15px;}

    .category-img img { height: 50px; }    

    .tending-post img {height: auto;margin-bottom: 10px;}

    footer.footer{text-align: center;}

    .footer .social-media {    justify-content: center !important; margin-top: 10px;}

    .breadcrumb-item,
    .breadcrumb-item a{font-size: 12px;}

    .breadcrumb-item+.breadcrumb-item { padding-right: 3px; }    

    .breadcrumb-item+.breadcrumb-item::before {padding-left: 3px;}
}