/*splash screen */

.intro {
  display: block;
  position: fixed;
  z-index: 999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  background-color: #0f0f0f; /* 365025 */
  transition: 1s;
    /*overflow: hidden;*/
}

.welcome-header {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: transparent;
  font-size: 7vw;
  text-transform: uppercase;
  -webkit-text-stroke: 3px #ecf0e9ff;
}


.welcome-note {
  position: relative;
  display: inline-block;
  bottom: -20px;
  opacity: 0;
}

.welcome-note.active {
  bottom: 0;
  opacity: 1;
  transition: ease-in-out 0.5s;
}

.welcome-note.fade {
  bottom: 150px;
  opacity: 0;
  transition: ease-in-out 0.5s;
}

@media (max-width: 767px) {
  .intro {
    display: none;
  }
}

.home-container {
  width: 100%;
  display: flex;
  overflow: auto;
  min-height: 100vh;
  align-items: center;
  flex-direction: column;
  justify-content: flex-start;
}
.home-hero {
  width: 100%;
  display: flex;
  /*padding: var(--dl-space-space-threeunits);*/
  position: relative;
  height: auto;
  align-items: center;
  flex-direction: column;
  overflow: hidden; /* <= added for parallax */
}

.home-container1 {
  width: 100%;
	max-width: var(--dl-size-size-maxwidth);
  display: flex;
  align-self: center;
  align-items: flex-start;
  flex-direction: column;
  justify-content: center;
}
.home-text {
  width: 680px;
  font-size: 3rem;
  font-style: normal;
  font-family: Lato;
  font-weight: 400;
}
.home-text02 {
  font-style: italic;
  font-family: Lato;
  font-weight: 400;
}
.home-banner {
  flex: 0;
  width: 100%;
  display: flex;
  padding: var(--dl-space-space-threeunits);
  align-self: flex-start;
  align-items: center;
  flex-direction: column;
  justify-content: space-between;
  scroll-margin-top: 52px;
}
.home-container2 {
  width: 100%;
  max-width: var(--dl-size-size-maxwidth);
  display: flex;
  align-items: stretch;
  /* flex-direction: column; */
  justify-content: space-between;
}
.home-text04 {
  color: #0f0f0f;
  font-size: 1.5rem;
  max-width: 85%;
  align-self: flex-start;
  font-style: normal;
  margin-top: var(--dl-space-space-twounits);
  text-align: left;
  font-family: Lato;
  font-weight: 400;
  line-height: 2;
  /* margin-bottom: var(--dl-space-space-twounits); */
}

.home-arrow {
  margin-top: -50px;
  top: 0px;
  align-self: flex-start;
  --webkit-transition: top 0.5s ease-out;
  --moz-transition: top 0.5s ease-out;
  --o-transition: top 0.5s ease-out;
  transition: top 0.5s ease-out;
}

.home-arrow:hover {
  position: relative;
  top: 50px;
  --webkit-transition: top 0.5s ease-out;
  --moz-transition: top 0.5s ease-out;
  --o-transition: top 0.5s ease-out;
  transition: top 0.5s ease-out;
}

.home-link {
  text-decoration: underline;
}
.home-areas-of-expertise {
  width: 100%;
  height: auto;
  display: flex;
  padding: var(--dl-space-space-threeunits);
  align-items: center;
  flex-direction: column;
}
.home-container3 {
  width: 100%;
	max-width: var(--dl-size-size-maxwidth);
  height: auto;
  display: flex;
  align-self: center;
  align-items: flex-start;
  flex-direction: row;
}
.home-text11 {
  width: 33%;
  color: #0f0f0f;
  margin-bottom: var(--dl-space-space-twounits);
}
.home-container4 {
  width: 67%;
  height: auto;
  display: flex;
  align-items: flex-start;
  margin-left: var(--dl-space-space-unit);
  margin-right: 0px;
  flex-direction: column;
  justify-content: flex-start;
}
.home-text12 {
  font-size: 2rem;
}
.home-text13 {
  font-size: 2rem;
  line-height: 2;
  margin-bottom: var(--dl-space-space-threeunits);
}
.home-text14 {
  font-size: 2rem;
}
.home-text15 {
  font-size: 2rem;
  line-height: 2;
  margin-bottom: var(--dl-space-space-threeunits);
}
.home-text18 {
  font-size: 2rem;
}
.home-text19 {
  font-size: 2rem;
  line-height: 2;
  margin-bottom: var(--dl-space-space-threeunits);
}
.home-text20 {
  font-size: 2rem;
}
.home-text21 {
  font-size: 2rem;
  line-height: 2;
  margin-bottom: var(--dl-space-space-threeunits);
}

.home-container5 {
  width: var(--dl-size-size-maxwidth);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.home-image {
  width: 25%;
  height: 322px;
  align-self: flex-start;
  object-fit: cover;
  flex-shrink: 0;
}
.home-container6 {
  width: 85%;
  display: flex;
  align-items: flex-start;
/*  padding-left: var(--dl-space-space-twounits);*/
  flex-direction: column;
  justify-content: space-between;
}

.home-navlink {
  color: #0f0f0f;
  width: auto;
  font-style: normal;
  transition: 0.3s;
  font-family: Lato;
  font-weight: 400;
  border-color: #0f0f0f;
  border-width: 2px;
  text-decoration: none;
  background-color: transparent;
}
.home-navlink:hover {
  color: var(--dl-color-gray-white);
  background-color: #0f0f0f;
}
@media(max-width: 1200px) {
  .home-container1 {
    width: 100%;
  }
  .home-text {
    color: var(--dl-color-gray-black);
  }
  .home-container2 {
    width: 100%;
  }
  .home-text04 {
    color: #0f0f0f;
    font-style: normal;
    font-family: Lato;
    font-weight: 400;
    line-height: 2;
  }
  .home-link {
    font-weight: 700;
    text-decoration: underline;
  }
  .home-container3 {
    width: 100%;
  }
  .home-container5 {
    width: 100%;
  }
  .home-image {
    height: 376px;
  }
}
@media(max-width: 991px) {
  .home-text04 {
    max-width: 100%;
    line-height: 1.5;
  }
  .home-areas-of-expertise {
    align-items: center;
  }
  .home-container3 {
    flex-direction: column;
  }
  .home-text11 {
    width: 100%;
  }
  .home-container4 {
    width: 100%;
    margin-left: 0px;
  }
  .home-text14 {
    font-size: 2rem;
  }

  .home-container5 {
    flex-direction: column;
  }
  .home-image {
    width: var(--dl-size-size-xxlarge);
    height: var(--dl-size-size-xxlarge);
  }
  .home-container6 {
    width: 100%;
    align-items: center;
    margin-right: 0px;
    padding-left: 0px;
    margin-bottom: var(--dl-space-space-threeunits);
  }
  .home-text22 {
    max-width: 100%;
  }
  .home-navlink {
    align-self: flex-start;
  }
}
@media(max-width: 767px) {
  .home-hero {
    align-items: center;
    padding-left: var(--dl-space-space-twounits);
    padding-right: var(--dl-space-space-twounits);
  }
  .home-text {
    width: auto;
    text-align: left;
  }
  .home-banner {
    padding-left: var(--dl-space-space-twounits);
    padding-right: var(--dl-space-space-twounits);
  }

  .home-areas-of-expertise {
    padding-left: var(--dl-space-space-twounits);
    padding-right: var(--dl-space-space-twounits);
  }
  .home-container3 {
    flex-direction: column;
  }

  .home-container6 {
    width: 100%;
    padding-left: 0px;
  }
  .home-text22 {
    padding-left: 0px;
    padding-right: 0px;
  }
  .home-navlink {
    align-self: flex-start;
  }
}



.assorted-portfolio {
  width: 100%;
}

.assorted-intro-text {
}

.branding {
  /* width: var(--dl-size-size-maxwidth); */
  display: flex;
}

.branding img {
  width: 100%;
  object-fit: cover;
}



/** **** WELCOME TEXT PARALLAX *****/

.image-container {
  position: relative;
  z-index: 2;
  width: 50%;
  height: auto;
  margin: 0 auto;
  overflow: hidden;
}

.image-container .image-container__inner img {
  margin-top: 100px;
  width: 100%;
  height: auto;
  object-fit: cover;
  /* transform: scale(1.2); */
  opacity: 0.95;
}
.image-container__inner {
  width: 100%;
  height: 100%;
}

.text-container {
  position: absolute;
  z-index: 1;
  top: 70%;
  left: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  transform: translateY(-50%);
}

.text-container__front {
  z-index: 3;
}

.text-container__front .parallax-text {
  color: transparent;
  -webkit-text-stroke: 3px #0f0f0f;
}

.parallax-text {
  position: relative;
  padding: 0px 40px;
  text-transform: uppercase;
  white-space: nowrap;
  color: #0f0f0f;
  margin: 0;
  font-size: 7vw;
}


@media (min-width: 2000px ) {
  .parallax-text {
    font-size: 5vw;
  }
}
.parallax-text:last-child {
  align-self: flex-end;
}


.big-header-text {
    font-size: 4vw;
    color: #0f0f0f;
    text-transform: uppercase;

}
.outline {
    color: transparent;
  -webkit-text-stroke: 3px #0f0f0f;
}

.case-study-row {
  align-items: center;
  text-align: center;
}

.hide-large {
  display: none;
}

.case-study-col {
  padding: 20px;
  display: block;
}

@media (max-width: 767px) {
  .home-hero {
    display: none;
  }

  /* .home-container2 {
    width: 100%;
  } */

  .home-arrow {
    display: none;
  }

  .mobile-intro {
    display: flex;
    /* margin-top: var(--dl-space-space-fourunits); */
  }

  .hide-large {
    display: block;
  }

.home-text04 h1 {
    line-height: 1;
    margin-top: var(--dl-space-space-unit);
    margin-bottom: var(--dl-space-space-unit);
  }

  #projects {
    padding-top: 0px;
  }
}

@media (max-width: 479px) {
  .home-text04 h1 {
      margin-top: var(--dl-space-space-threeunits);
    }
}



/* .h2-header {
  margin-bottom: var(--dl-space-space-twounits);
} */


/* filter styling */


.filter-container {
  padding-left: var(--dl-space-space-threeunits);
  padding-right: var(--dl-space-space-threeunits);
  margin: 0 auto;
  position: sticky;
  position: -webkit-sticky;
  top: 90px;
  z-index: 999;
  margin-bottom: var(--dl-space-space-threeunits);
  display: none;
}


.filter-bg {
  padding-top: var(--dl-space-space-twounits);
  padding-bottom: var(--dl-space-space-twounits);
  padding-left: var(--dl-space-space-threeunits);
  padding-right: var(--dl-space-space-threeunits);
  margin: 0 auto;
  background-color: #ffffff;
  /* box-shadow: 11px 23px 50px rgba(0,0,0,.15); */
  border-radius: 100px;
}


@media (min-width: 991px) {
.filter-container {
  display: flex;
}
}


label {
  align-items: center;
  color: #454545;
  font-size: 14px;
  padding: 7px 12px;
  border: 1px solid #454545;
  border-radius: 50px;
  transition: color 0.5s;
  margin-bottom: 10px;
  margin-right: 7px;
}

label:hover {
  color: #454545;
  border: 1px solid #454545;
}

input[type=checkbox] {
  margin: 1px;
}


.portfolio-content {
  width: 100%;
}


.show-small {
  display: none;
}

@media(max-width: 479px) {
  .home-hero {
    padding-top: var(--dl-space-space-twounits);
    padding-left: var(--dl-space-space-unit);
    padding-right: var(--dl-space-space-unit);
    padding-bottom: var(--dl-space-space-twounits);
  }
  .home-banner {
    padding-top: var(--dl-space-space-unit);
    padding-left: var(--dl-space-space-unit);
    padding-right: var(--dl-space-space-unit);
    padding-bottom: var(--dl-space-space-twounits);
  }


  .home-image {
    width: var(--dl-size-size-xlarge);
    height: var(--dl-size-size-xlarge);
  }

  .text-container {
    display: none;
}

.show-small {
  display: block;
  font-size: 3.5rem;
  text-transform: uppercase;
}

}

  /* The "show" class is added to the filtered elements */

.portfolio-content .show {
  display: block;
}


/*********** portfolio page css ***********/


.portfolio-container {
  width: 100%;
  display: flex;
  overflow: auto;
  min-height: 100vh;
  align-items: center;
  flex-direction: column;
  justify-content: flex-start;
}
.project-section {
  width: 100%;
  height: auto;
  display: flex;
  min-height: auto;
  align-items: flex-end;
  padding-top: var(--dl-space-space-threeunits);
  padding-right: var(--dl-space-space-threeunits);
  padding-bottom: var(--dl-space-space-threeunits);
  padding-left: var(--dl-space-space-threeunits);
  flex-direction: row;
  justify-content: center;
  border-top: solid 1px #f1f1f1;
}
.project-container {
  width: var(--dl-size-size-maxwidth);
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: center;
  column-gap: var(--dl-space-space-twounits);
}
.project-mockup {
  width: 50%;
  height: auto;
  display: flex;
/*  align-self: baseline; */
  align-items: flex-end;
  justify-content: flex-start;
}
.portfolio-image {
  width: 100%;
  align-self: flex-end;
  object-fit: cover;
  /* box-shadow: 11px 23px 50px rgba(0,0,0,.15); */
  /* border-radius: 15px; /*will probably need to remove later */ */
}
.portfolio-text {
  width: 50%;
  display: flex;
  align-self: flex-start;
  /* margin-top: var(--dl-space-space-twounits); */
  /* margin-left: var(--dl-space-space-twounits); */
  flex-direction: column;
}
.project-title {
  color: #0f0f0f;
  font-family: Lato;
  font-weight: 700;
}
.project-role {
  color: #0f0f0f;
  margin-top: var(--dl-space-space-halfunit);
  font-family: Lato;
  margin-bottom: var(--dl-space-space-halfunit);
}

.project-mockup {
  width: 50%;
  height: auto;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
}

.portfolio-link-auto {
  width: auto;
  font-family: Lato;
  border-color: #0f0f0f;
  border-width: 2px;
  text-decoration: none;
  background-color: transparent;
}

.portfolio-link-auto:hover {
  color: var(--dl-color-gray-white);
  background-color: #0f0f0f;
}

.portfolio-link {
  color: #0f0f0f;
  width: 125px;
  transition: 0.3s;
  font-family: Lato;
  border-color: #0f0f0f;
  border-width: 2px;
  text-decoration: none;
  background-color: transparent;
}

.portfolio-banner {
  width: 100%;
  padding: var(--dl-space-space-threeunits);
  background-color: #355025;
  color: #ffffff;
  border-top-left-radius: 50px;
  border-top-right-radius: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;

}

.content-container {
  width: 100%;
  max-width: var(--dl-size-size-maxwidth);
}

@media(max-width: 991px) {

  .project-container {
    flex-direction: column;
  }

  .portfolio-text {
    width: 100%;
    margin-left: 0px;
    margin-top: var(--dl-space-space-twounits);
  }

  .portfolio-container1 {
    width: 100%;
    flex-direction: column;
  }
  .project-mockup {
    width: 100%;
  }
}
@media(max-width: 767px) {

  .welcome-header {
  font-size: 10vw;
}

}
@media(max-width: 479px) {

}


/***** ABOUT  PAGE ******/
.section-header {
  padding-bottom: var(--dl-space-space-fourunits);
  padding-top: var(--dl-space-space-sixunits);
}
.section-row {
  padding-left: var(--dl-space-space-threeunits);
  padding-right: var(--dl-space-space-threeunits);
  display: flex;
  flex-direction: row;
  column-gap: var(--dl-space-space-twounits);
}

.section-row-fours {
  padding-left: var(--dl-space-space-threeunits);
  padding-right: var(--dl-space-space-threeunits);
  display: flex;
  flex-direction: row;
  column-gap: var(--dl-space-space-twounits);
}

.about-me-container {
  padding-top: var(--dl-space-space-fourunits);
  padding-bottom: var(--dl-space-space-fourunits);
  margin: 0 auto;
  width: 100%;
  max-width: var(--dl-size-size-maxwidth);
}


.section-row h2 {
  font-size: 4rem !important;
}


.col-half {
  display: block;
  width: 50%;
}

.col-one-third {
  display: block;
  width: 33%;
}
.col-two-thirds {
  display: block;
  width: 66%;
}
.col-one-fourth {
  display: block;
  width: 25%;
}

@media(max-width: 991px) {
  .col-one-fourth {
    display: block;
    width: 50%;
  }

}
@media(max-width: 767px) {
  .section-row h2 {
    font-size: 2.8rem !important;
  }

}

.about-padding {
  padding-left: var(--dl-space-space-threeunits);
  padding-right: var(--dl-space-space-threeunits);
}
.light-green-bg {
  width: 100%;
  background-color: var(--dl-color-success-lightgreen);
}


.expertise .no-top-space {
  padding-top: var(--dl-space-space-unit);
  padding-bottom: var(--dl-space-space-twounits);
  margin-top: 0px;
}



.expertise-bg {
  background-color: #355025;
  color: #ffffff;
  border-radius: 30px;
  padding-bottom: var(--dl-space-space-fourunits);
  padding-top: var(--dl-space-space-fourunits);
  padding-right: var(--dl-space-space-twounits);
  padding-left: var(--dl-space-space-twounits);
}

.expertise-bg p {
  font-size: 1.2rem !important;
}

.expertise-bg svg {
  fill: #ffffff;
}

.ultimate-bg {
  background-color: #355025;
  border-radius: 50px;
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-left: var(--dl-space-space-threeunits);
  margin-right: var(--dl-space-space-threeunits);
  overflow: hidden;
}

.ultimate-bg svg {
  fill: #ffffff;
}
.ultimate-bg-left {
  height: inherit;
}
.ultimate-bg-img {
  background-image: url(../img/about1-ultimate-1250x1250.jpg);
  background-position: left;
  background-size: cover;
  height: 750px;
  background-repeat: no-repeat;
}
.half-content-padding
 {
   padding: var(--dl-space-space-twounits);
   color: #ffffff;
 }

 /* .ultimate-img {
   border-top-left-radius: 50px;
   border-bottom-left-radius: 50px;
   height: fit-content;
 } */

 .collage-col1 {
   display: flex;
   flex-direction: column;
   align-items: flex-end;
 }



.collage-img {
  border-radius: 30px;
}

.collage-img1, .collage-img2, .collage-img3, .collage-img4, .collage-img5, .collage-img6 {
    position: relative;
    padding-bottom: var(--dl-space-space-twounits);
}

.collage-img1 {
  width: 60%;
  right: 0;
}

.collage-img3 {
  padding-top: var(--dl-space-space-fourunits);
  width: 90%;
}
.collage-img4 {
  width: 70%;
}

.collage-img5 {
  width: 50%;
}

.img-caption {
  position: absolute;
  color: #ffffff;
  bottom: 55px;
  left: 20px;
  font-size: 16px;
  line-height: 1rem !important;
  z-index: 500;
}

.road-img-background {
  min-height: 50vh;
  border-top-left-radius: 50px;
  border-top-right-radius: 50px;
  background-image: url(../img/about-road-2000x1200.jpg);
  background-position: center;
  background-size: cover;

}

.road-img-background h2 {
  color: #0f0f0f;
}

@media (max-width: 1450px) {
    .about-me-container01 {
    width: 100%;
  }
}
@media (max-width: 479px) {
  .collage-img1, .collage-img2, .collage-img3, .collage-img4, .collage-img5, .collage-img6 {
    width: 100%;
  }
  .road-img-background h2 {
    color: #ffffff;
  }

}

@media(max-width: 991px) {

  .ultimate-bg {
    flex-direction: column;
  }

  .ultimate-bg-img {
    background-position: top left;
    height: 450px;
  }

  .ultimate-bg .col-half {
    width: 100%;
  }
}

@media(max-width: 767px) {
  .expertise .no-top-space {
    padding-bottom: 0px;
  }

  .expertise-bg {
    padding: var(--dl-space-space-twounits);
    margin-bottom: var(--dl-space-space-twounits);
  }

  .collage-img3 {
    padding-top: 0px;
  }
  .ultimate-bg {
    margin-left: var(--dl-space-space-twounits);
    margin-right: var(--dl-space-space-twounits);
  }
  .about-padding {
    padding-left: var(--dl-space-space-twounits);
    padding-right: var(--dl-space-space-twounits);
  }
  .section-row {
    flex-direction: column;
    margin-top: 0px;
    padding-left: var(--dl-space-space-twounits);
    padding-right: var(--dl-space-space-twounits);
  }

  .section-header {
      padding-top: var(--dl-space-space-threeunits);
      padding-bottom: 0px;
  }

  .about-me-container {
    padding-bottom: var(--dl-space-space-twounits);
    padding-top: var(--dl-space-space-twounits);
  }

  .col-half {
    width: 100%;
  }
  .col-two-thirds {
    width: 100%;
  }
  .expertise-spacing {
    margin-bottom: var(--dl-space-space-unit);
  }
  .col-one-third {
    width: 100%;
  }
  .section-row .header-padding-right {
    padding-right: 0px;
  }

  .ultimate-bg-img {
    background-position: top left;
    height: 250px;
  }


}

.top-margin {
  margin: 0px;
}