/* ! large screens */  
@media only screen and (min-width : 1824px) {  
    
}

/* ! desktops and laptops */  
@media only screen and (min-width : 1224px) {

}

/* ! small laptops & large tablets */

@media only screen and (min-width : 1024px) and (max-width : 1224px) {
  
}

/* ! iPads (portrait and landscape) */

@media only screen and (min-width : 768px) and (max-width : 1024px) {
  
  /* general */

  .heading i {
    font-size: 1.8em;
  }

  .heading h3 {
    font-size: 2.3em;
  }

  /* nav menu */

  nav ul.right {
    margin: 40px 20px;
  }

  nav img {
    width: 60px;
    height: 60px;
  }

  /* head */

  .head {
    width: 100%;
    padding: 8% 12%;
  }

  /* about */

  .about {
    padding: 20% 7.5% 10% 7.5%;
  }

  .about .me {
    display: block;
    padding: 15px 0;
  }

  .about .me .longDesc {
    margin-right: 0;
    padding-right: 0;
  }

  .about .me .myPic {
    margin: 50px 0 10px 0;
    padding: 0;
    text-align: center;
  }

  .about .me .myPic img {
    width: 275px;
    height: 100%;
  }

  /* experience */

  .experience {
    padding: 20% 7.5%;
  }

  .experience .timeline {
    padding: 10px 0;
  }

  .experience .card {
    margin-bottom: 125px;
  }

  .experience .card h4 {
    font-size: 2em;
  }

  /* contact */

  .contact {
    padding: 10% 7.5%;
  }

  .contact .contactForm {
    padding: 15px 0;
  }

  /* footer */

  .allContact {
    padding: 5% 2%;
  }
}

/* ! low-res tablets & landscape mobile */

@media (min-width: 480px) and (max-width: 768px) {

  /* general */

  .heading {
    margin: 15px 0;
  }

  .heading i {
    font-size: 1.5em;
  }

  .heading h3 {
    font-size: 1.9em;
  }

  /* nav menu */

  nav ul.left svg {
    margin: 5px 5px -1.8px 5px;
  }

  nav ul.right {
    display: none;
  }

  /* head */

  .head {
    padding: 5% 7.5%;
  }

  .head [role="doc-subtitle"] {
    width: auto;
    text-align: center;
    font-size: 0.8em;
  }

  h1.myName {
    text-align: center;
    font-size: 2.5em;
  }

  h2.myJob {
    text-align: center;
    font-size: 2.2em;
  }

  p.myDesc {
    text-align: center;
  }

  p.myDonations {
    text-align: center;
  }

  /* social icons */

  .inline {
    margin-bottom: 30px;
    padding: 15px 0;
  }

  .social {
    justify-content: center;
    margin-left: 15px;
    padding: 0;
  }

  .social img {
    vertical-align: middle;
    margin: 4px 10px 0px 10px;
    width: 30px;
    height: 100%;
  }

  /* about */

  .about {
    margin-top: 30px;
    padding: 5% 7.5%;
  }

  .about .me {
    display: block;
    padding: 15px 0 0 0;
  }

  .about .me .longDesc {
    margin: 0;
    padding: 0;
  }

  .about .me .myPic {
    margin: 30px 0 10px 0;
    padding: 0;
    text-align: center;
  }

  .about .me .myPic img {
    width: 250px;
    height: 100%;
  }

  .techSkills {
    align-items: center;
    justify-content: center;
    margin: auto;
  }

  .techSkills li {
    margin: 10px 15px 0 auto;
  }

  .techSkills li:last-child { margin-right: 0; }

  .techSkills li img {
    width: 40px;
    filter: brightness(180%);
  }

  /* experience */

  .experience {
    padding: 5% 7.5%;
  }

  .experience .timeline {
    padding: 10px 0;
  }

  .experience .card h4 {
    font-size: 1.5em;
  }

  /* contact */

  .contact {
    padding: 5% 7.5%;
  }

  .contact .contactForm {
    padding: 10px 0;
  }

  .contact .contactForm .whyContact p {
    width: 100%;
    min-width: 260px;
    font-size: 0.9em;
  }

  .contact .contactForm form textarea {
    min-width: 250px;
  }

  /* footer */

  .allContact {
    padding: 3% 2%;
  }

  .allContact p {
    font-size: 0.8em;
  }

}

/* ! smartphones (portrait and landscape) */  

@media only screen   
and (min-width : 320px) and (max-width : 480px) {

  /* general */

  .heading {
    margin: 0;
  }

  .heading i {
    font-size: 1.25em;
  }

  .heading h3 {
    font-size: 1.3em;
  }

  /* nav menu */

  nav ul.left svg {
    margin: 5px 5px -1.8px 5px;
  }

  nav ul>li {
    padding: 5px;
  }

  nav ul.right {
    display: none;
  }

  /* head */

  .head {
    padding: 0 2%;
  }

  main.landing {
    margin-top: 55px;
    padding: 10% 5%;
  }

  .head [role="doc-subtitle"] {
    margin: 0 auto;
    font-size: 0.9em;
  }

  h1.myName {
    font-size: 2.1em;
    text-align: center;
  }

  h2.myJob {
    font-size: 1.8em;
    text-align: center;
  }

  p.myDesc {
    margin-top: 20px;
    font-size: 0.9em;
    text-align: center;
    line-height: 20px;
  }

  p.myDonations {
    font-size: 0.9em;
    text-align: center;
    line-height: 20px;
  }

  /* social icons */

  .inline {
    margin-bottom: 30px;
    padding: 0;
  }

  .social {
    justify-content: center;
    margin-left: 15px;
    padding: 0;
  }

  .social img {
    margin: 4px 10px 0px 10px;
    width: 30px;
    height: 100%;
  }

  /* about */

  .about {
    padding: 5% 7.5%;
  }

  .about .me {
    display: block;
    padding: 15px 0 0 0;
  }

  .about .me .longDesc {
    margin: 0;
    padding: 0;
  }

  .about .me .longDesc p {
    font-size: 0.9em;
  }

  .about .me .myPic {
    margin: 30px 0 10px 0;
    padding: 0;
    text-align: center;
  }

  .about .me .myPic img {
    width: 200px;
    height: 100%;
  }

  .techSkills {
    align-items: center;
    justify-content: center;
    margin: auto;
  }

  .techSkills li {
    margin: 10px 15px 0 auto;
  }

  .techSkills li:last-child { margin-right: 0; }

  .techSkills li img {
    width: 30px;
    filter: brightness(180%);
  }

  /* experience */

  .experience {
    padding: 5% 7.5%;
  }

  .experience .timeline {
    padding: 10px 0;
  }

  .experience .card [role="doc-subtitle"].date {
    font-size: 0.9em;
  }

  .experience .card h4 {
    font-size: 1.1em;
  }

  .experience .card ul.rolePoints {
    font-size: 0.9em;
  }

  /* contact */

  .contact {
    padding: 2% 7.5%;
  }

  .contact .contactForm {
    padding: 15px 0;
  }

  .contact .contactForm .whyContact p {
    width: 100%;
    min-width: 260px;
    font-size: 0.9em;
  }

  .contact .contactForm form textarea {
    min-width: 250px;
  }

  /* footer */

  .allContact {
    padding: 5% 2%;
  }

  .allContact p {
    font-size: 0.7em;
  }
}
  
/* ! iPhone 4 */  
@media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-device-pixel-ratio:1.5) {  
    
}

@media only screen   
and (min-width : 320px) and (max-width : 480px) and (max-height : 615px) {
  nav ul>li {
    padding: 0px;
  }

  .optional {
    display: none;
  }

  main.landing {
    margin-top: 45px;
  }
}