@import "/css/base.css";
@import "/xhref/nav/navigation.css";
@import "/xhref/footer/footer.css";
/* ----------------------------------------------------------- */
/* --------------------- navigation NOT PULLING FROM CSS ---------------- */
/* ------------------------------------------------------------ */


.carrot_icontest {
  animation: flicker 1.5s infinite linear;
}

.caret_desktop_animation {
  display: flex;
  animation: flicker 1.5s infinite linear;
  position:fixed;
  top: 632px;
  left: 5vw;
  z-index: 50;
  background-color: #FACD60;
}

.hidecaret {
  display: none;
}

@keyframes flicker {
  0% {
    transform: translateY(0px);
  }

  20% {
    transform: translateY(10px);
  }

  30% {
    transform: translateY(15px);
  }

  60% {
    transform: translateY(10px);
  }

  80% {
    transform: translateY(15px);
  }

  95% {
    transform: translateY(2px);
  }

  100% {
    transform: translateY(0px);
  }
}

.stop_animation {
  animation: none;
}

/* ----------special index mobile navigation */
.nav-bar_desktop{
  background-color: #FACD60;
}

/*intro*/
.intro {
  height: fit-content;
  width: 85vw;
  margin-top: 100px;
  margin-bottom: 0vh;
  background-color: #FACD60;
}

.landing {
  padding: 30px;
  height: 100vh;
  background-color: #FACD60;
  box-shadow: 0px 5px 5px 1px rgba(216, 216, 216, .8);
  position: relative;
  z-index: 1;
}



/* design beliefs */
.standard_section {
  margin: 60px 0px 60px 0px;
  padding: 0px 30px;
  position: relative;
}

.design_beliefs {
  margin-top: 50px;
}

.section_heading_line {
  height: 15px;
  width: 40px;
  background-color: #FACD60;
  margin-top: 30px;
  margin-bottom: 30px;
}

.projects_line {
  margin-left: 5vw;
  margin-bottom: 0px;
}



/* lexicon */
.colorblock_section {
  padding: 60px 30px 30px 30px;
  position: relative;
  overflow: hidden;
}

.lexicon {
  height: 380vw;
  margin-bottom: 15vw;
}


.lexicon_play{
  position: relative;
  bottom: -3vw;
}

.lexicon-sound-machine-shell{
  height: 60vw;
  /* width: 90vw; */
  /* margin-top: 10vw; */
}


.flex-shell{
  display: flex;
  flex-direction: column;
}


.background_colorblock {
  margin-top: 10px;
  height: fit-content;
  width: 100%;
  background-color: white;
  position: absolute;
  top: 0px;
  right: 20px;
  z-index: -1;
  border-radius: 30px;
  /* box-shadow: 0px 1px 5px 1px rgb(216, 216, 216); */
}

.lexicon_introcaption {
  margin-bottom: 10px;
}

.caption_copy {
  max-width: 80vw;
}

.margin-top-mobile {
  margin-top: 10vw;
}

/* Four Oders of Design */
.four_orders_section {
  margin: 20px 0px 80px 0px;
  padding-left: 0px;
  position: relative;
}

.across_industries {
  width: 80vw;
  position: relative;
  margin-left: 30px;
}

.order {
  display: flex;
}

.orders_indent {
  margin-left: 30px;
}

.leadin_body_small {
  margin-bottom: 15px;
  max-width: 70vw;
}

.bold_numbers {
  margin-right: 20px;
}

.caption_italic {
  font-style: italic;
  margin-top: 15px;
  font-size: 15px;
}

.caption_bold {
  font-weight: bold;
  font-size: 15px;
}

/* Work */
.work_section {
  background-color: white;
  position: relative;
  z-index: -1;
  padding: 0px 30px 0px 30px;
  height: fit-content;
  flex: 3;
}

.overflowy_visible {
  margin-left: 0px;
}

.work_colorblock {
  margin-top: 10px;
  height: 900px;
  width: 100%;
  background-color: white;
  position: absolute;
  top: 0px;
  right: 20px;
  z-index: -1;
  border-radius: 30px;
  /* box-shadow: 0px 1px 5px 1px rgb(216, 216, 216); */
}

.work_copy {
  margin-bottom: 5vw;
}

.work {
  width: 80vw;
}

h4 {
  font-size: 1.35rem;
  font-weight: 600;
  margin: 0px 0px 10px 0px;
}

.project_name {
  font-size: 1rem;
  font-weight: 600;
  margin-top: 5px;
}

.project_headline {
  font-size: .8rem;
  font-weight: 300;
  margin-right: 30px;
  margin-bottom: 30px;
}

.project_gallery {
  height: 70vh;
}


/* ------------------- visible >768 ---------------*/

.background_yellow {
  background-color: #FACD60;
}

.background_white {
  background-color: white;
}

.show_768 {
  background-color: #FACD60;
  height: 250px;
  display: none;
}

.face_margin {
  background-color: #FACD60;
  height: 40px;
  display: none;
}

.face {
  display: none;
  height: 50px;
  position: relative;
  z-index: -1;
  background-color: #FACD60;
  font-size: 1.5rem;
  font-weight: 400;
  margin-left: 60px;
}

.mask_faceonscroll {
  display: none;
  height: 30vh;
  width: 50%;
  position: absolute;
  z-index: 1;
  top: 100px;
  left: 0px;
  background-color: #FACD60;
}

.shell_designbeliefs {
  background-color: white;
  display: flex;
  flex: 3 0 auto;
  flex-direction: column;
}

.yellow_filler {
  display: none;
  height: 1200px;
  background-color: #FACD60;
  position: absolute;
  top: 101vh;
  left: 0px;
  width: 100%;
  z-index: -2;
}

/* ----------special index mobile navigation just for the main.css */




.nav_links_desktop {
  display: none;
  justify-content: flex-end;
  font-size: 1.5rem;
  position: relative;
  z-index: 5;
  background-color: #FACD60;

}

.nav_flex_768 {
  display: none;
  justify-content: space-between;
  align-items: baseline;
  padding: 45px 5vw 5px 5vw;
  background-color: #FACD60;
  letter-spacing: .03rem;
}

.desktop_navigation {
  text-decoration: none white;
  font-size: 1rem;
  font-weight: 500;
  color: #323535;
  margin-left: 45px;
}

.desktop_navigation:hover {
  text-decoration: underline 5px white;
  text-underline-offset: 10px;
  color: white;
}

.nav_line {
  height: 1.5px;
  background-color: #fff1bc;
  margin: 0px 5vw 0px 5vw;
  width: calc(100vw - 10vw);
  border-collapse: collapse;
  position: absolute;
}

.carrot_icon_desktop {
  display: none;
}


.vert_navbar_shell {
  display: none;
  height: 30px;
  position: relative;
  z-index: 1;
}

.vertical_navbar {
  /* height: 30px; */
  width: 100vw;
  display: flex;
  justify-content: flex-end;
}

.vertical_nav_links {
  margin-top: 90px;
  margin-right: 5vw;
  background-color: white;
  display: flex;
  align-items: center;
}

.vert_nav_link {
  margin-left: 15px;
  font-size: 1rem;
  font-weight: 500;
  color: #323535;
  text-decoration: none;
  letter-spacing: .05rem;
  background-color: white;
  padding-left: 15px;
}

.vert_nav_link:hover {
  text-decoration: underline 5px;
  text-underline-offset: 10px;
}

.part2_flex_768 {
  position: relative;
  /* height: fit-content; */
}

.vertical_line {
  display: none;
  height: 5px;
  width: 400px;
  background-color: #FACD60;
  transform: rotate(90deg);
  transform-origin: left;
  position: absolute;
  margin-top: -40px;
}

.projects_heading {
  display: none;
  margin-left: 5vw;
  position: relative;
  z-index: 10;
  width: 100px;
}

  /* ---------------breakpoint project gallery for >768 ----------------------------------*/
  .projects_heading {
    display: flex;
  }

  .project_gallery {
    height: fit-content;
    padding: 0 0px 0px 0px;
    margin-top: 10vw;
  }
  
.project_gallery_768 {
  display: grid;
  margin-top: 30px;
  padding: 5vw 5vw 5vw 5vw;
  gap: .25rem;
  grid-template-columns: repeat(6, minmax(10vw, 1fr));
  grid-auto-rows: minmax(20px, 1fr);
  box-shadow: 0px 10px 15px 10px rgba(216, 216, 216, .25);
}

.one-one {
  grid-column: span 1;
  grid-row: span 1;
}
.one-two {
  grid-column: span 1;
  grid-row: span 2;
}
.one-three {
  grid-column: span 1;
  grid-row: span 3;
}
.two-two {
  grid-column: span 2;
  grid-row: span 2;
}

.two-three {
  grid-column: span 2;
  grid-row: span 3;
}
.two-four {
  grid-column: span 2;
  grid-row: span 4;
}
.three-two {
  grid-column: span 3;
  grid-row: span 2;
}
.three-three {
  grid-column: span 3;
  grid-row: span 3;
}
.three-four {
  grid-column: span 3;
  grid-row: span 4;
}
.four-three {
  grid-column: span 4;
  grid-row: span 3;
}
.four-four {
  grid-column: span 4;
  grid-row: span 4;
}
.six-four {
  grid-column: span 6;
  grid-row: span 4;
}


.gallery-thumbnail {
  background-color: #e4e4e4;
  height: 100%;
  width: 100%;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: .90;
  cursor: pointer;
}


.fade_out {
  opacity: 20%;
}

.black_and_white {
  opacity: 30%;
  filter: grayscale(100%);
}

/* --------white background desktop nav--------------- */

/* ///-------------------stick nav------------------------//// */
.desktop-nav-white{
  margin-top: -150px;
  margin-bottom: 100px;
  margin-left: -5vw;
  width: 100vw;
  position: absolute;
  z-index: 100;
}


.desktop-pin-links{
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-right: 5vw;
  background-color: white;
  height: 42px;
}







/* --------work navigation ----------------------- */

.work_gallery_shell {
  display: block;
}

.work_navbar_shell {
  display: none;
  justify-content: flex-start;
  position: relative;
  z-index: 200;
}

.work_nav_links {
  display: none;
  justify-content: flex-start;
  height: 42px;
  align-items: center;
  padding-left: 5vw;
    width: fit-content;
}

.work_nav_link {
  display: none;
  margin-right: 1.5rem;
  font-size:.875rem;
  font-weight: 400;
  color: #323535;
  cursor: pointer;
  opacity: 25%;
  white-space: nowrap;
}

.work_nav_link:hover {
  opacity: 100%;
}

.work_nav_link-active {
  opacity: 100%;
}



/* ------------------------- breakpoints -------------------------   */

@media (min-width: 480px) {
.intro {
  width: 90vw;
  margin-top: 70px;
}

.landing {
  height: 90vh;
}
}


@media (min-width: 768px) {
  .landing {
    height: 70vh;
  }

  .nav_flex_768 {
    display: flex;
  }

  .name_hide_over768 {
    display: none;
  }

  .carrot_icon_desktop {
    display: flex;
    position: relative;
    top: 565px;
    left: 5vw;
    z-index: 20;
    height: 0px;
  }

  .vertical_navbar {
    display: flex;
  }

  .vert_nav_mask {
    display: flex;
  }

  .background_colorblock {
    display: none;
  }

  .intro {
    width: 90vw;
    margin-top: 100px;
  }

  .work_colorblock {
    display: none;
  }

  .flex_768 {
    display: flex;
    position: relative;
    background-color: #FACD60;
    z-index: -1;
  }
 
  .part2_flex_768 {
    display: flex;
    position: relative;
    /* height: fit-content; */
    margin: 0px 5vw;
  }

  .show_768 {
    display: block;
  }

  .vert_navbar_shell {
    display: flex;
  }

  .face {
    display: block;
  }

  .landing {
    height: 100vh;
    flex: 1.25;
    padding-left: 5vw;
    box-shadow: none;
    overflow: visible;
    max-width: 250px;
  }

  .colorblock_section {
    background-color: white;
    padding: 200px 5vw 30px 5vw;
  }

  .standard_section {
    flex: 2.4;
    padding: 0;
    margin-top: 0;
    position: relative;
    z-index: -2;
    overflow: hidden;
  }

  .face_margin {
    display: block;
  }

  .mask_faceonscroll {
    display: block;
  }

  .shell_designbeliefs {
    height: fit-content;
    padding: 60px 60px 60px 60px;
    margin: 0px;
    position: relative;
    z-index: 5;
    flex: 1;
  }

  .rag_control {
    max-width: 520px;
  }

  .yellow_filler {
    display: block;
  }

  .design_beliefs {
    margin-top: 25px;
  }

  .lexicon {
    height: fit-content;
    margin-bottom: 0vw;
  }

  .lexicon_shell {
    max-width: 60%;
    margin-top: 50px;
  }

  .lexicon_flex {
    display: flex;
    width: 100%;
    margin-bottom: 4rem;
  }

  .lexicon-tag {
    margin-right: 30px;
    width: 45vw;
    max-width: 70vw;
  }

  .flex {
    display: flex;
    justify-content: flex-end;
  }

  .four_orders_section {
    margin-top: 54px;
    margin-bottom: 0px;
    padding-right: 60px;
    position: relative;
    width: 30vw;
  }

  .order {
    display: flex;
    width: 100%;
  }

  .across_industries {
    width: 60vw;
    margin-left: 5vw;
    /* margin-bottom: 60px; */
  }

  .work_copy {
    margin-bottom: 0;
  }

  .work {
    width: 100%;
  }



  .orders_indent {
    margin-left: 0;
  }

  .work_section {
    padding: 100px 0px 0px 0px;
    margin-bottom: 0;
  }

  .overflowy_visible {
    margin-left: 60px;
  }

  .vertical_line {
    display: flex;
  }
  
  .project_gallery_768 {
    margin-top: 15px;
    padding: 2vw 32vw 5vw 5vw;
    grid-auto-rows: minmax(80px, 1fr);
  }

}


@media (min-width: 900px) {
  .intro {
    width: 90vw;
    margin-top: 110px;
  }
  .lexicon-tag {
    width: 53vw;
  }
  .across_industries {
    width: 75%;
  }
}

@media (min-width: 980px) {
.work_navbar_shell {
  display: flex;
}
.work_nav_links {
  display: flex;
}
.work_nav_link {
  display: flex;
}
}


@media (min-width: 1140px) {
  .landing {
    flex: 1.25;
    max-width: 450px;
    padding-left: 5vw;
  }

  .nav_flex_768 {
    padding-left: 5vw;
    padding-right: 5vw;
  }

  .nav_line {
    margin: 0px 40px 0px 40px;
  }

  .lexicon-tag {
    width: 45vw;
    margin-right: 60px;
  }

  .across_industries {
    width: 600px;
  }

  .rag_control {
    max-width: 600px;
  }

  .intro {
    width: 90vw;
    margin-top: 110px;
  }
}
@media (min-width: 1200px) {
  .intro {
    width: 85vw;
    margin-top: 110px;
  }
}


@media (min-width: 1440px) {

  .landing {
    flex: 1.25;
    max-width: 600px;
  }
  .intro {
    width: 80vw;
    margin-top: 120px;
  }
  .lexicon-tag {
    /* margin-bottom: 5vh; */
    margin-right: 90px;
  }

  .across_industries {
    width: 800px;
  }

  .project_gallery {
    margin-top: 15vw;
  }
}

@media (min-width: 1600px) {
  .caret_desktop_animation {
    top: 750px;
  }
  .intro {
    width: 80vw;
    margin-top: 150px;
  }
  .landing {
    flex: 1.25;
    max-width: 900px;
  }

  .lexicon_shell {
    margin-top: 70px;
  }

  .lexicon-tag {
    margin-right: 5vw;
    width: 40vw;
  }

  .across_industries {
    width: 1200px;
  }

  .vertical_line {
    margin-left: -50px;
  }
}