﻿
/* ----------- iPad 1, 2, Mini and Air ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 1) {
    .document-counts .divcount {
        width: 90%;
    }
    .dashboard-icons-container-2 {
        width: 40%;
    }
    .dashboard-icons-container-4 {
        width: 60%;
    }
}

/* Portrait */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 1) {
    .document-counts .divcount {
        width: 90%;
    }
    .dashboard-icons-container-2 {
        width: 40%;
    }
    .dashboard-icons-container-4 {
        width: 60%;
    }
}

/* Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 1) {
    .document-counts .divcount {
        width: 90%;
    }
    .dashboard-icons-container-2 {
        width: 40%;
    }
    .dashboard-icons-container-4 {
        width: 60%;
    }
}

/* ----------- iPad 3, 4 and Pro 9.7" ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 2) {
    .document-counts .divcount {
        width: 90%;
    }
    .dashboard-icons-container-2 {
        width: 40%;
    }
    .dashboard-icons-container-4 {
        width: 60%;
    }
}

/* Portrait */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 2) {
    .content {
        height: 1500px !important;
    }
    .document-counts .divcount {
        width: 90%;
    }
    .dashboard-icons-container-2 {
        width: 40%;
    }
    .dashboard-icons-container-4 {
        width: 60%;
    }
}

/* Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 2) {
     .document-counts .divcount {
        width: 90%;
    }
    .dashboard-icons-container-2 {
        width: 40%;
    }
    .dashboard-icons-container-4 {
        width: 60%;
    }
}

/* ----------- iPad Pro 10.5" ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 834px) 
  and (max-device-width: 1112px)
  and (-webkit-min-device-pixel-ratio: 2) {
    .document-counts .divcount {
        width: 90%;
    }
    .dashboard-icons-container-2 {
        width: 40%;
    }
    .dashboard-icons-container-4 {
        width: 70%;
    }
}

/* Portrait */
/* Declare the same value for min- and max-width to avoid colliding with desktops */
/* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/
@media only screen 
  and (min-device-width: 834px) 
  and (max-device-width: 834px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 2) {
    .document-counts .divcount {
        width: 90%;
    }
    .dashboard-icons-container-2 {
        width: 40%;
    }
    .dashboard-icons-container-4 {
        width: 70%;
    }
}

/* Landscape */
/* Declare the same value for min- and max-width to avoid colliding with desktops */
/* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/
@media only screen 
  and (min-device-width: 1112px) 
  and (max-device-width: 1112px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 2) {
    .document-counts .divcount {
        width: 80%;
    }
    .dashboard-icons-container-2 {
        width: 40%;
    }
    .dashboard-icons-container-4 {
        width: 70%;
    }
}

/* ----------- iPad Pro 12.9" ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 1024px) 
  and (max-device-width: 1366px)
  and (-webkit-min-device-pixel-ratio: 2) {
    .document-counts .divcount {
        width: 90%;
    }
    .dashboard-icons-container-2 {
        width: 40%;
    }
    .dashboard-icons-container-4 {
        width: 60%;
    }
}

/* Portrait */
/* Declare the same value for min- and max-width to avoid colliding with desktops */
/* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/
@media only screen 
  and (min-device-width: 1024px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 2) {
    .document-counts .divcount {
        width: 90%;
    }
    .dashboard-icons-container-2 {
        width: 40%;
    }
    .dashboard-icons-container-4 {
        width: 65%;
    }
}

/* Landscape */
/* Declare the same value for min- and max-width to avoid colliding with desktops */
/* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/
@media only screen 
  and (min-device-width: 1366px) 
  and (max-device-width: 1366px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 2) {
    .document-counts .divcount {
        width: 80%;
    }
    .dashboard-icons-container-2 {
        width: 35%;
    }
    .dashboard-icons-container-4 {
        width: 50%;
    }
}


