@media (max-width: 1400px) {
    html{
        font-size: 15px;
    }
    .nav-link {
        font-size: 1.15rem;
    }
}


@media (max-width: 1200px) {
    .ratio-spot {
        --bs-aspect-ratio: calc(4 / 10.36 * 100%);
        overflow: hidden;
    }
    .nav-link {
        font-size: 1.1rem;
    }
}

@media (max-width: 992px) {
    
    #top_nav{
        background-color: #D9EAFA;
    }
    .ratio-spot {
        --bs-aspect-ratio: calc(3 / 4 * 100%);
        overflow: hidden;
    }

    #nav_team{
        float: left;
    }

    #nav-header{
        background-color: #D9EAFA;
    }

    #nav-header .collapsibleNavClass{
        padding-bottom: 20px;
    }
    
    #nav-header .dropdown:hover .dropdown-menu .dropdown-item strong, #nav-header .dropdown .dropdown-menu.show .dropdown-item strong{
        width: 100%;
    }

    blockquote {
        padding: 10px 4rem;
        margin: 20px 15px;
    }
    main>section:first-of-type{
        margin-top: 10px;
    }
    section.right-side{
        border: 0;
    }
    aside.left-side{
        /* display: none; */
    }
    section.featured {
        display: grid;
        grid-template-areas:
            "c1"
            "c2"
            "c3";
        grid-gap: 15px;
    }
    .card.style-1 .card-title {
        font-size: 1.4rem;
        line-height: 1.6;
        padding: 0;
    }
    .left .card.style-2 .card-body {
        border-top-width: 1px !important;
        border-right-width: 0 !important;
        border-top-left-radius: .5rem !important;
        border-bottom-right-radius: 0 !important;
        border-top-right-radius: 0 !important;
    }
}

@media (max-width: 767px) {

    html{
        font-size: 14px;
    }
    .card.style-1 .card-title {
        font-size: 1.4rem;
        line-height: 1.6;
        padding: 20px 0;
    }
    .left .card.style-2 .card-body {
        border-top-width: 0 !important;
        border-right-width: 1px !important;
        border-bottom-right-radius: .5rem !important;
        border-top-left-radius: 0 !important;
        border-top-right-radius: 0 !important;
    }
    .sq-image{
        padding-bottom: 70%;
    }
    .sq-image.style-1{
        position: static;
        padding-bottom: 0 !important;
        height: auto;
    }
    .sq-image.style-1 img{
        position: static;
        height: auto;
    }

    #season-input{
        background-position: calc(100% - 14px) calc(12px), calc(100% - 5px) calc(12px), calc(100% - 2px) 2px;
    }
}


@media (max-width: 576px) {
    
    blockquote {
        padding: 10px 3rem;
        text-align: center;
    }

    #season-input{
        background-position: calc(100% - 14px) calc(12px), calc(100% - 5px) calc(12px), calc(100% - 2px) 2px;
    }
}


@media (min-width: 768px) {
    
}

/* medium and up screens */
@media (min-width: 992px) {
    
    .position-lg-absolute{
        position: absolute !important;
    }

    #top_nav .collapsibleNavClass {
        display: flex !important;
        grid-column-gap: 10px;
        justify-content: center;
    }
    
    #nav_team{
        text-align: left;
    }

    #nav-header ul>li:last-child>a {
        padding-left: 0;
    }
    
    #nav-search .search-btn , .search-from .search-btn{
        /* left: 20px; */
        height: 100%;
    }
    #nav-header .dropdown .dropdown-menu.show {
        display: flex;
        /* padding-top: 25px; */
        background-color: transparent;
        padding-top: 34px;
        border: 0;
        width: 100%;
        margin-top: 0;
    }
    #nav-header ul:hover .dropdown .dropdown-menu.show {
        display: none;
    }
    #nav-header .dropdown:hover .dropdown-menu{
        display: flex;
        padding-top: 34px;
        background-color: transparent;
        border: 0;
        width: 100%;
        margin-top: 0;
    }
    #nav-header ul:hover .dropdown .dropdown-menu:hover , #nav-header ul:hover .dropdown:hover .dropdown-menu {
        display: flex;
    }
    #nav-header .dropdown:hover .dropdown-menu .dropdown-item, #nav-header .dropdown .dropdown-menu.show .dropdown-item{
        width: auto;
    }
    .dropdown-menu .dropdown-item{
        padding: .25rem .25rem;
    }
    .navbar-expand-lg .navbar-nav .dropdown-menu {
        top: 80%;
        right: 0;
    }
    
    .border-lg-0 {
        border: 0 !important;
    }

    .rounded-lg-0 {
        border-radius: 0 !important;
    }
}

@media (min-width: 1200px) {

    .position-xl-relative{
        position: relative !important;
    }
}
@media (min-width: 1800px) {

    body{
        background-image: none !important;
    }
}