/* ----------- Media Queries ------------- */



/* ----------- Galaxy S3 ----------- */

/* Portrait and Landscape */
@media screen 
  and (device-width: 320px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 2) {

}

/* Portrait */
@media screen 
  and (device-width: 320px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 2) 
  and (orientation: portrait) {

}

/* Landscape */
@media screen 
  and (device-width: 320px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 2) 
  and (orientation: landscape) {

}

/* ----------- Galaxy S4 ----------- */

/* Portrait and Landscape */
@media screen 
  and (device-width: 320px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) {

}

/* Portrait */
@media screen 
  and (device-width: 320px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) 
  and (orientation: portrait) {

}

/* Landscape */
@media screen 
  and (device-width: 320px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) 
  and (orientation: landscape) {

}

/* ----------- Galaxy S5 ----------- */

/* Portrait and Landscape */
@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) {

}

/* Portrait */
@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) 
  and (orientation: portrait) {
      html, body {
          width: 100%;
      }
      .card {
          width: 100% !important;
          margin: 0px;
      }
      footer a img {
          margin: 0px 8px 10px;
          width: 30px;
    }
}

/* Landscape */
@media screen 
  and (device-width: 640px) 
  and (device-height: 360px) 
  and (-webkit-device-pixel-ratio: 3) 
  and (orientation: landscape) {
    .card {
        margin-top: -50px;
        width: 47%;
    }
      label {
          font-size: 1.5rem;
      }
    footer a img {
        margin: 0px 8px 10px;
        width: 30px;
    }
    footer {
        margin-top: 0px;
    }  
}

/* ----------- Nexus 5x ----------- */
/* Portrait */
@media only screen
    and (device-width: 412px) 
    and (device-height: 732px)
    and (orientation:portrait) {
    html, body {     
        width: 99%;
    }
    .index-background-image {
        width: 97%;
    }
}

/* Landscape */
@media only screen
    and (device-width: 732px) 
    and (device-height: 412px)
    and (orientation:landscape) {
    html, body {     
        width: 100%;
    }
    .profilePicWrapper {
        margin-top: -100px;
    }
    footer a img {
        margin: -20px 3px 10px;
        width: 30px;
    }    
}

/* ----------- Nexus 6p ----------- */
/* Portrait */
@media only screen
and (min-width: 412px)
and (max-width: 435px)
and (min-height: 732px)
and (max-height: 773px)
and (orientation:portrait) {

}

/* Landscape */
@media only screen
    and (min-width: 412px)
    and (max-width: 732px)
    and (orientation:landscape){
    body {
        width: 100%;
    }
    footer a img {
        margin: 20px 3px 10px;
        width: 30px;
    } 
}

/* ----------- iPhone 4 and 4S ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Portrait */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
}

/* Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {

}

/* ----------- iPhone 5 and 5S ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Portrait */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
      body {
        width: 100%;
      }
      html {
        width: 100%;
      }
      .index-background-image {
          width: 100%;
          margin-left: 1%;
      }
      .card {
          width: 100%;
          margin: 0px;
      }
      h1 {
          font-size: 2rem;
          margin-bottom: 10px;
      }
      footer a img {
          margin: 10px 8px 10px;
          width: 28px;
    }
      footer a img:first-child {
          margin-left: -10px;
    } 
}

/* Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {
      html {
          width: 100%;
      }
      
      .card {
          margin-top: 3px;
      }
      .index-background-image {
          width: 94%;
      }
      footer a img {
          margin: 5px 3px 10px;
          width: 30px;
    } 
}

/* ----------- iPhone 6 ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2) { 

}

/* Portrait */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) { 
      .index-background-image {
          margin-left: 0%;
      }
      .card {
          width: 100%;
          max-width: none;
      }
      figure {
            width: 92%;
            margin: 1%;
      }
      footer a img {
          margin: 16px;
    }
}

/* Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) { 
      html {
          width: 100%;
      }
      .card {
          margin-top: -30px;
      }
      figure {
          width: 95%;
          margin: 1%;
      }
      .index-background-image {
          width: 100% !important;
      }
      footer a img {
          margin: 10px 3px 10px;
          width: 30px;
      }
}

/* ----------- iPhone 6+ ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3) { 

}

/* Portrait */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: portrait) { 
      .card {
          margin: 10px auto;
      }
}

/* Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 
      h1 {
          font-size: 2.5rem;
          width: 75%;
          margin-top: -30px;
      }
      figure img {
          display: inline-block;
          padding: 6px;
          background: white;
          margin: 18px 10px 0px;
      }
      .allCodePenDivs {
          display: -webkit-flex;
          display: flex;
          flex-wrap: wrap;
      }
      .allCodePenDivs > a {
          width: 44%;
          margin: 2%;
      }
}

* ----------- HTC One ----------- */

/* Portrait and Landscape */
@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) {

}

/* Portrait */
@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) 
  and (orientation: portrait) {

}

/* Landscape */
@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) 
  and (orientation: landscape) {

}

/* ----------- iPad mini ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 1) {

}

/* Portrait */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 1) {

}

/* Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 1) {

}

/* ----------- iPad 1 and 2 ----------- */
/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 1) {

}

/* Portrait */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 1) {

}

/* Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 1) {

}

/* ----------- iPad 3 and 4 ----------- */
/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Portrait */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 2) {
      h1 {
          font-size: 2.5rem;
          width: 75%;
          margin-top: -30px;
      }
      .card {
          max-width: none;
          width: 60%;
      }
      figure img, figcaption {
          display: inline-block;
          padding: 6px;
      }
      figcaption {
          margin-left: 10px;
      }
      .allCodePenDivs {
          display: -webkit-flex;
          display: flex;
          flex-wrap: wrap;
      }
      .allCodePenDivs > a {
          width: 44%;
          margin: 2%;
      }
      footer a img {
          margin: 40px 10px 10px;
          width: 60px;
      }
}

/* Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 2) {
      h1 {
          font-size: 2.5rem;
          width: 75%;
          margin-top: -30px;
      }
      .allCodePenDivs {
          display: -webkit-flex;
          display: flex;
          flex-wrap: wrap;
      }
      .allCodePenDivs > a {
          width: 44%;
          margin: 2%;
      }
      figure img, figcaption {
          display: inline-block;
          padding: 6px;
      }
      figcaption {
          margin-left: 10px;
      }
       footer a img {
          margin: 40px 10px 10px;
          width: 60px;
      }
}

/* ----------- iPad Pro ----------- */
/* Portrait */
@media only screen 
  and (min-device-width: 1024px) 
  and (max-device-width: 1366px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 2) {
      .card {
          max-width: none;
          width: 65%;
          margin-top: 70px;
      }
       footer a img {
          margin: 40px 10px 20px;
          width: 60px;
      }
      .inputFormat {
          width: 179%;
          height: 99%;
          margin: 0% 0% 14.5% -25%;
      }
}

/* Landscape */
@media only screen 
  and (min-device-width: 1024px) 
  and (max-device-width: 1366px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 2) {
      .card {
          max-width: none;
          width: 50%;
          margin-top: 70px;
      }
      footer a img {
          margin: 40px 10px 20px;
          width: 60px;
      }
}

/* ----------- Galaxy Tab 10.1 ----------- */

/* Portrait and Landscape */
@media 
  (min-device-width: 800px) 
  and (max-device-width: 1280px) {

}

/* Portrait */
@media 
  (max-device-width: 800px) 
  and (orientation: portrait) { 

}

/* Landscape */
@media 
  (max-device-width: 1280px) 
  and (orientation: landscape) { 

}

/* ----------- Asus Nexus 7 ----------- */

/* Portrait and Landscape */
@media screen 
  and (device-width: 601px) 
  and (device-height: 906px) 
  and (-webkit-min-device-pixel-ratio: 1.331) 
  and (-webkit-max-device-pixel-ratio: 1.332) {

}

/* Portrait */
@media screen 
  and (device-width: 601px) 
  and (device-height: 906px) 
  and (-webkit-min-device-pixel-ratio: 1.331) 
  and (-webkit-max-device-pixel-ratio: 1.332) 
  and (orientation: portrait) {

}

/* Landscape */
@media screen 
  and (device-width: 601px) 
  and (device-height: 906px) 
  and (-webkit-min-device-pixel-ratio: 1.331) 
  and (-webkit-max-device-pixel-ratio: 1.332) 
  and (orientation: landscape) {

}

/* ----------- Kindle Fire HD 7" ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 800px) 
  and (max-device-width: 1280px) 
  and (-webkit-min-device-pixel-ratio: 1.5) {

}

/* Portrait */
@media only screen 
  and (min-device-width: 800px) 
  and (max-device-width: 1280px) 
  and (-webkit-min-device-pixel-ratio: 1.5) 
  and (orientation: portrait) {
}

/* Landscape */
@media only screen 
  and (min-device-width: 800px) 
  and (max-device-width: 1280px) 
  and (-webkit-min-device-pixel-ratio: 1.5) 
  and (orientation: landscape) {

}

/* ----------- Kindle Fire HD 8.9" ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 1200px) 
  and (max-device-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 1.5) {

}

/* Portrait */
@media only screen 
  and (min-device-width: 1200px) 
  and (max-device-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 1.5) 
  and (orientation: portrait) {
}

/* Landscape */
@media only screen 
  and (min-device-width: 1200px) 
  and (max-device-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 1.5) 
  and (orientation: landscape) {

}

/* ----------- Non-Retina Screens ----------- */
@media screen 
  and (min-device-width: 1200px) 
  and (max-device-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 1) { 
}

/* ----------- Retina Screens ----------- */
@media screen 
  and (min-device-width: 1200px) 
  and (max-device-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (min-resolution: 192dpi) { 
}