/*-- -------------------------- -->
<---         Portfolio          -->
<--- -------------------------- -*/
@media only screen and (min-width: 0em) {
    #portfolio {
      position: relative;
    }
    #portfolio .triangles {
      position: absolute;
      -webkit-transform: rotate(191deg);
      transform: rotate(191deg);
      top: 15.25em;
      z-index: -1;
      right: -3em;
      width: 15em;
      pointer-events: none;
    }
    #portfolio .triangles .cls-1 {
      -webkit-animation-delay: .2s;
      animation-delay: .2s;
      -webkit-animation-duration: 2.73s;
      animation-duration: 2.73s;
    }
    #portfolio .triangles .cls-1:nth-of-type(3n+0) {
      -webkit-animation-delay: .17s;
      animation-delay: .17s;
      -webkit-animation-duration: 2.18s;
      animation-duration: 2.18s;
    }
    #portfolio .triangles .cls-2 {
      -webkit-animation-delay: .5s;
      animation-delay: .5s;
      -webkit-animation-duration: 2.73s;
      animation-duration: 2.73s;
    }
    #portfolio .triangles .cls-3 {
      -webkit-animation-delay: .1s;
      animation-delay: .1s;
      -webkit-animation-duration: 1.3s;
      animation-duration: 1.3s;
    }
    #portfolio .triangles .cls-3:nth-of-type(3n+0) {
      -webkit-animation-delay: .27s;
      animation-delay: .27s;
      -webkit-animation-duration: 2.38s;
      animation-duration: 2.38s;
    }
    #portfolio .triangles .cls-4 {
      -webkit-animation-delay: .5s;
      animation-delay: .5s;
      -webkit-animation-duration: 3.3s;
      animation-duration: 3.3s;
    }
    #portfolio .triangles .cls-4:nth-of-type(3n+0) {
      -webkit-animation-delay: 0s;
      animation-delay: 0s;
      -webkit-animation-duration: 3.1s;
      animation-duration: 3.1s;
    }
    #portfolio .triangles .cls-5 {
      -webkit-animation-delay: .32s;
      animation-delay: .32s;
      -webkit-animation-duration: 2.6s;
      animation-duration: 2.6s;
    }
    #portfolio .triangles .cls-6 {
      -webkit-animation-delay: .1s;
      animation-delay: .1s;
      -webkit-animation-duration: 2s;
      animation-duration: 2s;
    }
    #portfolio .cls-1,
    #portfolio .cls-2,
    #portfolio .cls-3,
    #portfolio .cls-4,
    #portfolio .cls-5,
    #portfolio .cls-6 {
      -webkit-animation-name: fade;
      animation-name: fade;
      -webkit-animation-timing-function: ease;
      animation-timing-function: ease;
      -webkit-animation-iteration-count: infinite;
      animation-iteration-count: infinite;
      -webkit-animation-fill-mode: forwards;
      animation-fill-mode: forwards;
      -webkit-animation-delay: 0s;
      animation-delay: 0s;
      -webkit-animation-duration: 2.3s;
      animation-duration: 2.3s;
      opacity: .2;
    }
    #portfolio .grid {
      display: -ms-grid;
      display: grid;
      -ms-grid-columns: 1fr 10px 1fr;
      grid-template-columns: 1fr 1fr;
      -ms-grid-rows: 1fr 10px 1fr 10px 1fr;
      grid-template-rows: 1fr 1fr 1fr;
      height: 20em;
      width: 100%;
      grid-gap: 0.5em;
      margin-top: 5em;
      position: relative;
    }
    #portfolio .grid > *:nth-child(1) {
      -ms-grid-row: 1;
      -ms-grid-column: 1;
    }
    #portfolio .grid > *:nth-child(2) {
      -ms-grid-row: 1;
      -ms-grid-column: 3;
    }
    #portfolio .grid > *:nth-child(3) {
      -ms-grid-row: 3;
      -ms-grid-column: 1;
    }
    #portfolio .grid > *:nth-child(4) {
      -ms-grid-row: 3;
      -ms-grid-column: 3;
    }
    #portfolio .grid > *:nth-child(5) {
      -ms-grid-row: 5;
      -ms-grid-column: 1;
    }
    #portfolio .grid > *:nth-child(6) {
      -ms-grid-row: 5;
      -ms-grid-column: 3;
    }
    #portfolio .grid:before {
      content: '';
      position: absolute;
      display: block;
      height: 100%;
      width: 50em;
      background: var(--primary);
      opacity: 1;
      top: 50%;
      left: 50%;
      -webkit-transform: translateX(-50%) translateY(-50%) rotate(10deg);
      transform: translateX(-50%) translateY(-50%) rotate(10deg);
      z-index: -1;
    }
    #portfolio .grid:after {
      content: '';
      position: absolute;
      display: block;
      width: 50em;
      top: -0.25em;
      bottom: -0.25em;
      border: 0.05em solid var(--primary);
      opacity: 1;
      left: 50%;
      -webkit-transform: translateX(-50%) rotate(10deg);
      transform: translateX(-50%) rotate(10deg);
      z-index: -1;
    }
    #portfolio .grid-item {
      position: relative;
    }
    #portfolio .grid-item img {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      -o-object-fit: cover;
         object-fit: cover;
    }
    #portfolio .item1 {
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
    }
    #portfolio .item2 {
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      -ms-grid-row: 1;
      -ms-grid-row-span: 2;
      grid-row: 1 / 3;
      grid-column: 2 / 3;
    }
    #portfolio .item3 {
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      -ms-grid-column: 1;
      -ms-grid-column-span: 2;
      grid-column: 1 / 3;
      -ms-grid-row: 3;
      grid-row: 3;
    }
    #portfolio .item4 {
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
    }
  }
  @media only screen and (min-width: 375px) {
    #portfolio .triangles {
      top: 2.85em;
      width: 35em;
      right: -7.75em;
    }
    #portfolio .grid {
      height: 27.5em;
    }
  }
  @media only screen and (min-width: 48em) {
    #portfolio {
      max-width: 100%;
    }
    #portfolio .triangles {
      right: -2.5em;
    }
    #portfolio h2,
    #portfolio p {
      width: 17.125em;
      margin-left: auto;
      margin-right: auto;
    }
    #portfolio p {
      width: 34.25em;
      margin-left: auto;
      margin-right: auto;
    }
    #portfolio .grid {
      height: 35em;
      width: 80%;
      margin-left: auto;
      margin-right: auto;
    }
    #portfolio .grid:before {
      width: 150em;
    }
    #portfolio .grid:after {
      width: 150em;
    }
  }
  @media only screen and (min-width: 64em) {
    #portfolio {
      padding-top: 5.15em;
      padding-left: 0;
      padding-right: 0;
      padding-bottom: 0;
    }
    #portfolio .triangles {
      width: 65.75em;
      top: -28.2em;
      right: -28.35em;
      opacity: .5;
    }
    #portfolio h2 {
      font-size: 2.4em;
      line-height: 1.16666667em;
      margin-bottom: 0.89583333em;
      width: 17.08333333em;
    }
    #portfolio .grid {
      -ms-grid-columns: 1fr 20px 1fr 20px 1fr;
      grid-template-columns: 1fr 1fr 1fr;
      -ms-grid-rows: 1fr 20px 1fr;
      grid-template-rows: 1fr 1fr;
      grid-gap: 1em;
      height: 35.2em;
    }
    #portfolio .grid > *:nth-child(1) {
      -ms-grid-row: 1;
      -ms-grid-column: 1;
      background-position: center 70%;
    }
    #portfolio .grid > *:nth-child(2) {
      -ms-grid-row: 1;
      -ms-grid-column: 3;
    }
    #portfolio .grid > *:nth-child(3) {
      -ms-grid-row: 1;
      -ms-grid-column: 5;
    }
    #portfolio .grid > *:nth-child(4) {
      -ms-grid-row: 3;
      -ms-grid-column: 1;
    }
    #portfolio .grid > *:nth-child(5) {
      -ms-grid-row: 3;
      -ms-grid-column: 3;
    }
    #portfolio .grid > *:nth-child(6) {
      -ms-grid-row: 3;
      -ms-grid-column: 5;
    }
    #portfolio .item1 {
      -ms-grid-column: 1;
      -ms-grid-column-span: 1;
      grid-column: 0.5;
      -ms-grid-row: 1;
      -ms-grid-row-span: 1;
      grid-row: 0.5;
    }
    #portfolio .item3 {
      -ms-grid-column: 1;
      -ms-grid-column-span: 1;
      grid-column: 0.5;
      -ms-grid-row: 2;
      -ms-grid-row-span: 1;
      grid-row: 0.66666667;
    }
    #portfolio .item5 {
      display: block;
      -ms-grid-column: 3;
      -ms-grid-column-span: 1;
      grid-column: 0.75;
      -ms-grid-row: 2;
      -ms-grid-row-span: 1;
      grid-row: 0.66666667;
    }
  }
  @media only screen and (min-width: 1500px) {
    #portfolio .triangles {
      top: -25.15em;
      right: -17.25em;
    }
  }
  @media only screen and (min-width: 1700px) {
    #portfolio .grid {
      max-width: 70em;
      margin-left: auto;
      margin-right: auto;
      position: relative;
      z-index: 2000;
    }
    #portfolio .triangles {
      top: -18.15em;
      right: -4.7em;
    }
  }