/* ---- DESTOP FIRST MEDIA QUERIES ----
No media query for XX-Large Devices, since this is the default style 
XXL (Large TV Screen  with min-width:1280px)*/


/* --- X-Large Devices (Large Desktop Screen and TV up to 1280px) ---
--------------------------------------- */
@media only screen and (max-width:1280px){

}

/* --- Larges Devices (Medium Desktop Screen and Laptop up to 992px) ---
------------------------------------------- */
@media only screen and (max-width:992px){
    .container {
        max-width: 960px;
    }

    .navbar-toggler{
        display: block;
    }

    .navbar-expand{
        flex-direction: column;
        align-items: start;
        width: 100%;
        height: 100%;
        padding: 1rem 0;
        padding-right: 2rem;
        padding-left: 2rem;
        position: absolute;
        left: 0;
        
    }

    .navbar-collapse {
        display: none;
        flex-basis: 100%;
        flex-grow: 1;
        transform: translateY(-1200px);
        opacity: 0;
    }

   

    .navbar-collapse.expanded{
        width: 100%;
        height: 100%;
        transform: translateY(60px);
        opacity: 1;
        animation: expanding-navbar 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    }

    @keyframes expanding-navbar {
        from{
            opacity: 0;
            transform: translateY(-1140px);
        }
        to{
            opacity: 1;
            transform: translateY(60px);
        }
    }

    .navbar-collapse.collapsed{
        animation: collapsing-navbar 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    }

    @keyframes collapsing-navbar {
        from{
            opacity: 1;
            transform: translateY(60px);
        }
        to{
            opacity: 0;
            transform: translateY(-1140px);
        }
    }

    .navbar-nav{
        flex-direction: column;
        padding-right: 0;
        width: 100%;
    }

    .nav-search .nav-item {
        width: 100%;
    }

    .navbar-nav .nav-link {
        padding: 0.5rem 0;
    }

    .navbar-item{
        width: 100%;
    }

    .dropdown-menu{
        display: block;
        position: relative;
        width: 100%;
        border:none;
        border-left: 1px solid rgba(88, 88, 88, 0.616);
        border-radius: 0;
        padding: 0;
        height: 0;
        overflow: hidden;
        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }
    .dropdown:hover .dropdown-menu, 
    .dropdown.toggle .dropdown-menu{
        padding: 0.5rem 0;
        height: auto;
    }

    

    .dropdown .nav-link::after {
        position: absolute;
        right: 0;
    }

    .search-bar{
        order: 1;
    }

}

/* ---- Medium Devices (iPads and Tablets less then 768px) ----
------------------------------- */
@media only screen and (max-width:768px){

}

/* ---- Small Devices (Landscape Phone up to 576px) ----
------------------------------- */
@media only screen and (max-width:576px){

}

/* --- X-Small Devices (Mobile Phones up to 480px) ---
------------------------- */
@media only screen and (max-width:480px){
    .container {
        max-width: 460px;
        min-width: 320px;
    }
}


/* --- Smartphone and Touchscreen Devices --- 
---------------------------------------------- */
@media (hover:none) and (pointer:coarse){
    @media only screen and (max-width:992px){

        .dropdown.toggle .dropdown-menu{
            padding: 0.5rem 0;
            height: auto;
        }

        .dropdown.collapse .dropdown-menu{
            padding: 0;
            height: 0; 
        }


    }
}



/* --- Printer and Print preview --- 
------------------------------------- */
@media print{
    header, footer, aside, form{
        display: none;
    }
    article{
        width: 100%;
        padding: 0 !important;
        margin: 0 !important;
    }
    @page{
        margin: 0.5in;
    }
}

/* ------- Animation Remover ------- */
@media (prefers-reduced-motion: reduce) {
    *{
        transition: none !important;
        animation: none !important;
    }
}