/* ----------------- MEDIA QUERIES ----------------- */
/*                  STANDARD SIZES                   */
/* ------------------------------------------------- */
/*
    MIN WIDTHS
    ----------
    240, 320, 480, 540, 640, 800, 720, 768, 960, 1024, 1136, 1280, 1334, 1920, 2048, 2560, 2732
    
    MIN HEIGHTS
    -----------
    320, 360, 400, 480, 540, 600, 640, 720, 750, 768, 800, 960, 1024, 1080, 1136, 1280, 1440, 1536, 2560, 2048


/* DEVICES GENERALIZATION RESPONSIVE SETTINGS */
/* START SMALL WORK TO BIG FOLLOWING CSS PATTERNS OF CASCADING STYLES */


@media screen and (max-width : 321px) /* Smartphones (landscape) ----------- */
{
/* Styles */
    .Desktop-Content-Container-Left,
    .Desktop-Content-Container-Right
    {
        width: 0% !important;
        display: none !important;
    }

    .Center-Narrow-Content-Pane {
        width: 100% !important;
    }

    /* DNN OVERRIDES */
    .console-large div {
        margin: 10px;
        width: 100%;
        height: auto !important;
        padding: 0px;
        cursor: pointer;
        text-align: center;
        float: left;
    }

    .console-large h3 {
        width: 100%;
    }
}
}

@media screen and (max-width : 480px) /* Smartphones (portrait) ----------- */
{
/* Styles */
    .Desktop-Content-Container-Left,
    .Desktop-Content-Container-Right
    {
        width: 0% !important;
        display: none !important;
    }

    .Center-Narrow-Content-Pane {
        width: 100% !important;
    }

    /* DNN OVERRIDES */
    .console-large div {
        margin: 10px;
        width: 100%;
        height: auto !important;
        padding: 0px;
        cursor: pointer;
        text-align: center;
        float: left;
    }

    .console-large h3 {
        width: 100%;
    }

    .Content {
        margin-top: 0;
    }

    .Center-Full .Header-Full-Background-Center, .Center-Full .Header-Full-Background-Image-Center, .Center-Full .Header-Top-Sticky-Center-Area, .Center-Full .Header-Main-Area-Center, .Center-Full .Center-Narrow-Content-Pane, .Center-Full .Footer-Bottom-Center, .Center-Full .Copyright-Container-Center {
        width: 100% !important;
    }

    .Wide-Banner-Wrapper {
        margin-top: 0;
    }
}


@media screen and (min-width : 481px) and (max-width : 768px)
{
    .Desktop-Content-Container-Left,
    .Desktop-Content-Container-Right
    {
        width: 0% !important;
        display: none !important;
    }

    .Center-Narrow-Content-Pane {
        width: 100% !important;
    }

    .Center-Full .Header-Full-Background-Center, .Center-Full .Header-Full-Background-Image-Center, .Center-Full .Header-Top-Sticky-Center-Area, .Center-Full .Header-Main-Area-Center, .Center-Full .Center-Narrow-Content-Pane, .Center-Full .Footer-Bottom-Center, .Center-Full .Copyright-Container-Center {
        width: 100% !important;
    }

    .Content {
        margin-top: 0;
    }

    .Wide-Banner-Wrapper {
        margin-top: 0;
    }
}

@media screen and (min-width : 767px) and (max-width : 1024px)
{
    .Desktop-Content-Container-Left,
    .Desktop-Content-Container-Right
    {
        width: 0% !important;
        display: none !important;
    }

    .Center-Narrow-Content-Pane {
        width: 100% !important;
    }

    .Center-Full .Header-Full-Background-Center, .Center-Full .Header-Full-Background-Image-Center, .Center-Full .Header-Top-Sticky-Center-Area, .Center-Full .Header-Main-Area-Center, .Center-Full .Center-Narrow-Content-Pane, .Center-Full .Footer-Bottom-Center, .Center-Full .Copyright-Container-Center {
        width: 100% !important;
    }

    .Content {
        margin-top: 0;
    }

    .Wide-Banner-Wrapper {
        margin-top: 0;
    }
}

@media screen and (min-width : 1025px)
{
    .ServeBoxContent-Container
    {
        width: 25%;
    }
}


@media screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) /*  MOST Tablets (landscape) ----------- */
{
/* Styles */
}

@media screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) /*  MOST Tablets (portrait) ----------- */
{
/* Styles */
}



/* GENERALIZED RESPONSIVE SETTINGS (MOST CODING WILL GO HERE) */
@media (min-width: 768px) {
    /* WIDTHS FOR ALL ITEMS SHOULD BE 100% THIS FILLS THE SURFACE AREA THIS IS THE MAX WIDTH OF TABLETS */
}

@media (min-width: 1136px) {
    /* WIDTHS FOR ALL ITEMS SHOULD BE 100% THIS FILLS THE SURFACE AREA THIS IS THE MAX WIDTH OF TABLETS */
}

@media screen and (min-width : 1224px) /* Desktops and laptops ----------- */
{
/* Styles */
}

@media (min-width: 1280px) {
    /* WIDTHS ARE NOW BECOMING LARGE AND LIMITING THE VIEWPORT IS SUGGESTED  */
}

@media screen and (min-width : 1824px) /* Large screens ----------- */
{
/* Styles */
}