/* ----------- 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) {
    .carousel {
        height: 400px;
    }
}

/* Portrait */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 1) 
  and (device-aspect-ratio: 3/4)
  {
    .carousel-item {
      /* height: 400px; */
    }
    .caption{
      font-size: 20px;
      font-weight: 400;
    }
    .under-caption{
      font-size: 10px;
      font-weight: 200;
    }
    .body-width-responsive{
      width: 40%;
      margin-top: 10px;
      margin-left: 10px;
    }
}

/* Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 1) 
  and (device-aspect-ratio: 4/3)
  {
    .carousel-item {
      /* height: 300px; */
    }
    .caption{
      font-size: 20px;
      font-weight: 400;
    }
    .under-caption{
      font-size: 12px;
      font-weight: 200;
    }
    .text-size{
      font-size: 12px;
    }
    .body-width-responsive{
      width: 40%;
      margin-top: 10px;
      margin-left: 10px;
    }
}

/* ----------- iPad 3, 4 and Pro 9.7" ----------- */
/*https://stackoverflow.com/questions/51249422/iphone-x-vs-ipad-media-queries*/

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 2) {
    .carousel {
        height: 400px;
    }
}

/* Portrait */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 2) 
  and (device-aspect-ratio: 3/4)
  {
    .carousel-item {
      /* height: 300px; */
    }
    .caption{
      font-size: 20px;
      font-weight: 400;
    }
    .under-caption{
      font-size: 12px;
      font-weight: 200;
    }
    .text-size{
      font-size: 12px;
    }
    .body-width-responsive{
      width: 40%;
      margin-top: 10px;
      margin-left: 10px;
    }
}

/* Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 2) 
  and (device-aspect-ratio: 4/3)
  {
    .carousel-item {
      /* height: 400px; */
    }
    .caption{
      font-size: 24px;
      font-weight: 400;
    }
    .under-caption{
      font-size: 15px;
      font-weight: 200;
    }

    .text-size{
      font-size: 20px;
    }
    .body-width-responsive{
      width: 40%;
      margin-top: 10px;
      margin-left: 10px;
    }
}

/* ----------- 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) {
    .carousel {
        height: 400px;
    }
}

/* 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) {
    .carousel-item {
      /* height: 400px; */
    }
    .caption{
      font-size: 24px;
      font-weight: 400;
    }
    .under-caption{
      font-size: 15px;
      font-weight: 200;
    }
    .body-width-responsive{
      width: 40%;
      margin-top: 10px;
      margin-left: 10px;
    }
}

/* 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) {
    .carousel-item {
      /* height: 400px; */
    }
    .caption{
      font-size: 24px;
      font-weight: 400;
    }
    .under-caption{
      font-size: 15px;
      font-weight: 200;
    }
    .body-width-responsive{
      width: 40%;
      margin-top: 10px;
      margin-left: 10px;
    }
}

/* ----------- 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) {
    .carousel {
        height: 400px;
    }
}

/* 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) {
    .carousel-item {
      /* height: 500px; */
    }
    .body-width-responsive{
      width: 40%;
      margin-top: 10px;
      margin-left: 10px;
    }
}

/* 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) {
    .max-width-responsive{
      max-width: 150px;
    }
    .body-width-responsive{
      width: 40%;
      margin-top: 10px;
      margin-left: 10px;
    }
}