﻿/* ----------------- 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 : 480px) /* Smartphones (portrait) ----------- */
{
    .FormButton-Container {
        display: block !important;
    }
}

@media screen and (min-width : 481px) and (max-width : 768px) {
    .FormButton-Container {
        display: block !important;
    }
}

@media screen and (min-width : 769px) and (max-width : 1024px) {
}

@media screen and (min-width : 1025px) {
}

@media screen and (min-device-width : 768px) and (max-device-width : 1024px) /* MOST Tablets (portrait and landscape) ----------- */
{
    /* Styles */
}

@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 */
}
