/* //// Navigation Blend Mode  //// */

.top-border {
  -webkit-transform: translateZ(0);
  mix-blend-mode: difference !important;
  -webkit-filter: grayscale(1);
          filter: grayscale(1);
}


/* //// Introduction  //// */

.project-intro-container {
  position: relative;
  width: 100%;
  height: auto;

  background-color: #151515;
}

.project-intro-grid {
  position: relative;
  width: 100vw;
  height: 83%;

  min-height: 0;
  min-width: 0;

  display: grid;
  grid-template-columns: repeat(16, 1fr);
  grid-template-rows: repeat(8, 1fr);

  background-color: yellow;
}


.project-intro {
  grid-column: 1 / span 9;
  grid-row: 2 / span 4;
  overflow: hidden;
  position: relative;
  -webkit-box-pack: justify;
          justify-content: space-between;
}


.project_no-container {
  grid-column: 1;
  grid-row: 6;
  align-self: center;
}


.client-container {
  grid-column: 2 / span 3;
  grid-row: 6;
  align-self: center;
}

.field-container {
  grid-column: 4 / span 4;
  grid-row: 6;
  align-self: center;
}


/* //// Content //// */

.project-content-container {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
  background-color: white;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
}


/* -- Project Info -- */

.project-info {
  grid-column: 2 /span 9;
  grid-row: 2 / span 5;
  color: black;
}

.project-additional_info {
  grid-column: 13 / span 2;
  grid-row: 2 / span 4;
}

.project-client {
  padding-bottom: 10px;
}

.project-deliverables {
  color: black !important;
  line-height: 2;
}

/*
.project-deliverables {
  grid-column: 13 / span 2;
  grid-row: 4;
  color: black !important;
  line-height: 2;
}
*/

/* -- Full Width Image -- */

.project-full_width-image {
  position: relative;

  background-color: white;

  display: -webkit-box;

  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-box-align: center;
          align-items: center;
}

.project-full_width-image img {
  width: 100%;
}


/* //// Introduction  //// */

.project-img-block {
     overflow-y:hidden;
}


.project-img-block img {
  width: 100%;
  max-width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
     overflow-y:hidden;
}

.project-img-block2 {
     overflow-y:hidden;
}

.project-img-block2 img {

  width: 100%;
  max-width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
     overflow-y:hidden;
}


.tubby img {
  position: relative;
    width: 100%;
    -o-object-fit: cover;
       object-fit: cover;
}

.tubby2 {
  position: relative;
}

.tubby2 img {
  position: relative;
    width: 80%;
    -o-object-fit: cover;
       object-fit: cover;

}

.project-content-block {
     overflow-y:hidden;
     width: 70%;

     bord/er: 1px red solid;
}

.project-content-block img {
  width: 100%;
  max-width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
     overflow-y: hidden;

}

/* EVO Homage Page Img */




.project-img-portrait-01 {
  grid-column: 11 / span 6;
  grid-row: 1 / span 9;
}

.project-img-portrait-02 {
  grid-column: 3 / span 6;
  grid-row: 6 / span 9;
}

.project-img-portrait-03 {
  grid-column: 3 / span 5;
  grid-row: 6 / span 7;
}



.project-img-full {
  grid-column: 1 / span 16;
  grid-row: 1 / span 8;
}

.project-img-half-left-01 {
  grid-column: 1 / span 9;
  grid-row: 1 / span 5;
}

.project-img-half-right {
  grid-column: 9 / span 8;
  grid-row: 1 / span 5;
}

.project-img-square {
  grid-column: 1 / span 16;
  grid-row: 1 / span 7;
  display: flex;
  justify-content: center;
  align-content: center;
}

.square-img-block {
  height: 100%;
  max-height: 100%;
  position: relative;
}

.digital_container {
  position: relative;
  width: 100%;

  display: flex;
  flex-direction: column;
  align-items: center;
}

.digital_container img {
  margin: 10px;
  max-width: 65%;
}



/* -- Web Project Settings -- */

.website-container {
  position: relative;
  width: 100%;
  height: auto;

  display: flex;
  justify-content: center;
  align-content: center;
  flex-direction: column;

  background-color: #eeeeee;
}

.website-container-2 {
  position: relative;
  width: 100%;
  height: auto;

  display: flex;
  flex-direction: column;
  align-items: center;


  background-color: #f2f2f2;
}

.img-stroke img {
  border: 1px solid #313131;
}

.web-page-title {
  position: relative;
  padding-left: 16.666vw;
  padding-bottom: 50px;

}

.web-page-title2 {
  position: relative;
  padding-bottom: 50px;
}
/* -- Logo Settings -- */

.mobile-logo-container {
  position: relative;
  width: 100%;
  height: 100%;

  display: flex;
  flex-direction: column;
  align-items: center;
  grid-column: 1 / span 16;
  grid-row: 1 / span 6;
}

.project-logo-container {
  position: relative;
  width: 100%;
  height: 100%;

  display: flex;
  justify-content: space-evenly;
  align-items: center;
}




.full-line {
position: relative;
width: 100%;
max-width: 100%;
height: 2px;
margin-top: 5px;
background-color: black;
}

/* -- Outro -- */

.outro-separator {
  position: relative;
  height: 15vw;
  width: 100vw;
  background-color: white;
}

.project-outro-container {
  position: relative;
  width: 100vw;
  height: 100vh;

  display: -webkit-box;

  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-box-align: center;
          align-items: center;
  overflow: hidden;
}

.outro-image img {
  width: 100%;
}


@media only screen and (max-width: 576px) {

  .project-intro-container {
    width: 100%;
    height: 30vh;
  }

  .mobile-intro-flex-settings {
    display: -webkit-box !important;
    display: flex !important;
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: normal !important;
            flex-direction: column !important;
  }

  .project-name{
    padding-top: 20px;
    width: 100%;
    height: 50px;

  }
  .project-info {
    width: 100%;
    height: auto;

  }

  .project-intro {
    padding-top: 15vw;
    width: 75%;
  }

  .client-container {
    padding-bottom: 30px;
  }

    .project-intro, .project_no-container, .client-container, .field-container {
      align-self: auto;
    }

    .project_no-container, .field-container {
      display: none;
    }

  .grid-auto {
    position: relative;
    width: 100%;
    height: 100%;

    display: -webkit-box;
    display: flex;

    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    flex-direction: row;
    -webkit-box-pack: justify;
    justify-content: space-between;
  }

  .project-additional_info {
    position: relative;
    width: 100%;
    height: auto;
    display: flex;
    padding-bottom: 40px;
  }

 .project-client {
   position: relative;
   width: 55% !important;
 }


  .mobile-logo-container {
    position: relative;
    width: 100%;
    height: auto;

    display: flex;
    flex-direction: column;
    justify-content: flex-end!important;
  }

  .project-logo-container {
    position: relative;
    width: 100%;
    margin: 40px 0;
  }

  .logo-description-container {
    position: relative;
    width: 100%!important;
  }

  .logo-description .heading--m {
    font-size: 14px;
    font-weight: 400;
  }

  .project-img-portrait_mobile {
    width: 45%;
  }

  .digital_container {
    position: relative;
    width: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .digital_container img {
    max-width:100%;
  }

  .web-page-title {
    padding-bottom: 20px;
    padding-left: 20px;
  }
}