@media only screen and (min-width : 600px) {

  /**
  #EAF97D;
  #179AFF;
  ***** NAVIGATION *****
  **/

  .nav-link {
    font-size: 2em;
  }

  .nav-item:nth-child(2) .nav-link::after {
    left: calc(50% - 12px);
  }

  .nav-item:nth-child(2) .nav-link::before {
    left: calc(50% - 12px);
  }

  /**
  ***** PORTFOLIO *****
  **/

  .wrapper {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
  }

  .tech-list {
    display: flex;
    position: relative;
    margin-left: -10px;
  }

  .tech-list::before {
    content: '';
    position: absolute;
    top: -10px;
    left: 0;
    border-bottom: 10px solid #0578DD;
    border-left: 10px solid transparent;
  }

  .project:nth-child(3n+4) .tech-list{
    transform: translateX(40px);
  }

  .project:nth-child(3n+4) .tech-list::before{
    display: none;
  }
}




/* Tablets (portrait and landscape) ----------- */
@media only screen and (min-width : 768px) {

  /*
  ***** COMMON STYLES *****
  */
  .wrapper {
    max-width: 768px;
  }
  /*
  ***** HEADER *****
  */

  header {
    min-height: 80vh;
  }

  .question {
    position: absolute;
    top: 80px;
    left: 10%;
    z-index: 2
  }

  .quest-bar {
    margin-top: 80px;
  }

  .quest-link {
    font-size: 2.2em;
  }

  .quest-item:nth-child(2) .quest-link {
    font-size: 1.4em;
  }

  .quest-item:nth-child(2)::after {
    font-size: 15.1em;
    top: -141px;
  }

  .quest-item:nth-child(2) .quest-link::after {
    left: calc(50% - 15px);
    border-top: 30px solid #EAF97D;
    border-left: 16px solid transparent;
    border-right: 16px solid transparent;
  }

  .quest-item:nth-child(2) .quest-link::before {
    left: calc(50% - 15px);
    width: 32px;
  }

  .navbar {
    position: relative;
    margin-top: 80px;
  }

  .quest-bar {
    padding-bottom: 0px;
    margin-bottom: 54px;
    background-color: #179AFF;
  }

  .hamburger {
    display: none;
  }

  /** NAVIGATION **/

  .menu {
    right: inherit;
    left: 0;

  }

  .menu-button {
    transform: translateX(-30%);
    text-align: left;
  }

  .menu-button:hover {
    transform: translateX(0);
  }

  .menu-button::after {
    transform: skewX(30deg) translateX(-10%);
  }

  .page-logo {
    margin-left: 10px;
  }

  /*
  ***** MAIN *****
  */

  article {
    padding-top: 100px;
    padding-bottom: 100px;
  }

  article .title {
    font-size: 2.2em;
    font-weight: 800;
    margin-left: 40px;;
    max-width: 50%;
  }

  /** TEXT ARTICLES **/
  .path-of-web, .path-of-tech {
    padding-left: 120px;
    padding-right: 100px;
  }

  /** PORTFOLIO **/
  .vertical-text {
    line-height: 58px;
    font-size: 2.35em;
  }

  .vertical-text::after {
    left: -100px
  }

  .project:nth-child(3n-1) {
    margin-left: 15%;
    width: 75%;
  }

  .project:nth-child(3n-1) .tech-list {
    margin-left: -10px;
  }

  .project:nth-child(3n+4) .tech-list{
    transform: translateX(58px);
    margin-left: 0;
  }

  .portfolio-end-phrase {
    font-size: 2em;
    text-align: right;
    padding-top: 40px;
    padding-bottom: 40px;
  }

  /** MORE INFO AND SOCIALS **/
  .more-info .wrapper {
    padding: 0 110px;
  }

  .more-info h3.title {
    max-width: none;
    width: 100%;
    text-align: center;
  }

  .more-info-list {
    flex-flow: row;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: center;
  }

  .more-info-list li {
    min-width: 50%;
    display: flex;
    align-items: center;
  }

  .more-info-list li:first-child {
    height: 33%;
    width: 100%;
    min-height: 0;
    margin-bottom: 30px;
  }

  .socials-about {
    margin-top: 150px;
  }

  .socials-about li:first-child {
    margin-bottom: 10px;
  }

  /** CONTACT **/
  .contact {
    margin-top: 68px;
    font-weight: 600
  }

  /*
  ***** FOOTER *****
  */

  footer .title {
    padding-top: 80px;
    padding-bottom: 80px;
  }

  footer .title, .outer-links{
    padding-left: 110px;
  }

  .links-list li {
    min-width: 30%;
  }

  /**
  ***** CHANGE STATE CLASSES JS *****
  **/

  .menu.sticky-top {
    top: 269px;
  }

}


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


    /*
    ***** COMMON STYLES *****
    */
      .wrapper {
        max-width: 1336px;
      }
    /*
    ***** HEADER *****
    */
    header {
      min-height: 60vh;
    }

    .question, .answer {
      font-size: 2.8em;
    }

    .answer {
      padding-bottom: 80px;
    }

    .quest-bar {
      margin-top: 140px;
    }

    .quest-link {
      font-size: 3em;
    }

    .quest-item:nth-child(2) .quest-link {
      font-size: 2em;
    }

    .quest-item:nth-child(2)::after {
      font-size: 20.4em;
      top: -189px;
    }

    .quest-item:nth-child(2) .quest-link::after {
      left: calc(50% - 20px);
      border-top: 40px solid #EAF97D;
      border-left: 21px solid transparent;
      border-right: 22px solid transparent;
    }

    .quest-item:nth-child(2) .quest-link::before {
      left: calc(50% - 20px);
      width: 43px;
    }

    .quest-bar {
      padding-bottom: 0px;
      margin-bottom: 70px;
      background-color: #179AFF;
    }

    /*
    ***** MAIN *****
    */

    .exclamation-phrase {
      margin-right: 68%;
    }

    /** PORTFOLIO **/

    .projects .title {
      max-width: calc(92% - 180px);
      font-size: 4em;
    }

    .vertical-text {
      line-height: 180px;
      font-size: 4em;
    }

    .projects-list {
      width: calc(92% - 180px);
      flex-flow: row-reverse;
      flex-wrap: wrap;
      justify-content: space-between;
      box-sizing: border-box;
      padding-left: 8%;
      padding-right: 2%
    }

    .project {
      width:  46%;
      transition: .3s all linear;
    }

    .project:nth-child(3n-1) {
      margin-left: initial;
      width: 46%;
    }

    .project:nth-child(2) {
      margin-top: 100px;
    }

    .project:nth-child(2n+3) {
      margin-top: -70px;
    }

    .project:nth-child(3n-1) .tech-list {
      margin-left: -10px;
    }

    .project:nth-child(3n+4) .tech-list{
      transform: translateX(0);
      margin-left: -10px;
    }

    .project:hover {
      transform: translate(20px, 0);
    }

    .tech-list {
      transition: .3s all linear;
    }

    .project:hover .tech-list {
      transform: translateX(-20px);
    }

    .tech-list::before {
      transition: .3s all linear;
      transform-origin: bottom left;
    }

    .project:hover .tech-list::before {
      transform: scale(3);
    }

    .portfolio-end-phrase {
      font-size: 2em;
      text-align: right;
      padding-top: 40px;
      padding-bottom: 40px;
    }

    .project:nth-child(3n+4) .tech-list::before{
      display: block;
    }

    /** MORE INFO AND SOCIALS **/

    .path-of-tech > .exclamation-phrase {
      margin-right: 50%;
    }

    .more-info {
      display: flex;
    }

    .more-info .wrapper {
      padding: 0 110px;
      align-items: baseline;
      flex-wrap: nowrap;
    }

    .socials-about {
      align-self: flex-end;
    }

    .icon, .link{
      display: block;
      transition: .2s all ease-out;
    }

    .icon:hover {
      transform: scale(1.5);
    }

    /** CONTACT **/
    .contact {
      width: auto;
      padding: 0;
    }

    .contact div{
      margin-top: 50px;
    }

    /*
    ***** FOOTER *****
    */

    .footer-content {
      flex-flow: row-reverse;
    }

    .outer-links{
      display: flex;
      justify-content: space-around;
      width: 100%;
      border-left: 150px solid #FFFFFF;
      border-top: 75px solid #F2F2F2;
      border-bottom: 75px solid #F2F2F2;
      padding-top: 0;
      padding-bottom: 0;
    }

    .links-list {
      flex-flow: column;
    }

    .link:hover {
      animation: .3s linear 0s 1 normal shake;
    }

    .copy {
      justify-content: center;
      margin-left: 20%;
      border: 10px solid #FFFFFF;
    }

    @keyframes shake {
      0% {transform: translateX(0)}
      20% {transform: translateX(-3px)}
      40% {transform: translateX(6px)}
      60% {transform: translateX(-4px)}
      80% {transform: translateX(2px)}
      100% {transform: translateX(0)}
    }
}