.heart {
  height: 1.5vh;
  width: 1.5vh;
  background-color: black;
  transform: rotate(-45deg);
  margin-right: 1vh; }

.heart::before,
.heart::after {
  content: '';
  background-color: black;
  height: 1.5vh;
  width: 1.5vh;
  position: absolute;
  border-radius: 50%; }

.heart::before {
  top: -.75vh; }

.heart::after {
  left: .75vh; }

.contact {
  display: inline;
  margin: 0 8px; }

.contact:hover {
  cursor: pointer; }

.row.contact_container {
  display: block;
  margin: 0 auto;
  width: fit-content;
  position: absolute;
  top: 90%;
  left: calc(50% + 80px);
  left: 47%; }

.title_icon {
  display: inline-block; }

a {
  font-weight: 800; }

#toggle_nav {
  display: None; }

.toggle_nav_container {
  display: None; }

.small_nav_menu {
  display: None; }

.content {
  margin-bottom: 10vh;
  scrollbar-width: none; }

.content.home {
  height: unset; }

.content::-webkit-scrollbar, .scroll_window::-webkit-scrollbar {
  display: none; }

.scroll_item {
  position: absolute;
  top: 0; }

.scroll > img {
  height: 100%;
  margin-right: 20px; }

.scroll {
  display: inline-flex;
  width: 100vw; }

.scroll_window {
  position: relative;
  overflow: scroll;
  bottom: 0;
  margin-right: 20vw; }

.subtitle.work:hover {
  cursor: pointer;
  font-style: italic; }

.creative p.subtitle {
  display: inline-block; }

.tokiha_logo {
  background-image: url("../img/design/tokiha/tokiha_logo-24.png");
  background-size: contain; }

.pj_album_art {
  width: 65vh;
  height: 65vh;
  position: fixed;
  top: 50%;
  /* Firefox */
  left: -moz-calc(50% + 80px);
  /* WebKit */
  left: -webkit-calc(50% + 80px);
  /* Opera */
  left: -o-calc(50% + 80px);
  /* Standard */
  left: calc(50% + 80px);
  transform: translate(-50%, -50%);
  background-size: contain;
  z-index: -1; }

.pj_album_desc {
  font-size: 3vh;
  font-weight: 400;
  font-variant-caps: all-small-caps;
  position: absolute;
  top: 85%;
  left: calc(50% + 80px);
  transform: translate(-50%, 0);
  bottom: 20px;
  width: fit-content;
  text-align: center; }

div .tokiha_bg_img {
  overflow: hidden;
  background-image: url("../img/design/tokiha/camp.jpg");
  background-size: cover;
  height: 30vw;
  filter: blur(10px);
  box-shadow: inset 0 0 0 200px rgba(255, 255, 255, 0.5); }

div .frosted_glass::before {
  content: ' ';
  background: inherit;
  filter: blur(10px); }

.frosted_glass {
  background: inherit;
  overflow: hidden;
  position: absolute; }

.row.bio h1 {
  font-size: 2.5rem; }

.coming_soon p {
  visibility: hidden;
  font-variant: all-petite-caps;
  font-size: 2.2rem; }

body {
  overflow: hidden; }

.title .label {
  text-align: center;
  font-size: 3.5vh;
  font-weight: 400;
  font-variant-caps: all-small-caps; }

.subtitle {
  font-size: 3vh;
  font-weight: 300;
  font-variant-caps: all-small-caps; }

.subtitle.current {
  font-weight: 400; }

.contributors {
  font-size: 2.5vh;
  font-weight: 800; }

.pj_title:hover .three.columns.coming_soon p {
  visibility: visible; }

h2, a {
  text-decoration: none;
  color: #222; }

.home p {
  font-size: 2.2rem; }

.photo_frame {
  object-fit: none;
  object-position: center;
  width: 100%;
  max-height: 550px;
  overflow: hidden;
  margin-bottom: 1.5rem; }

.photo_frame img, .innod_pattern img {
  width: 100%; }

.innod_pattern div .six.columns.square {
  width: 28vw;
  height: 28vw;
  display: block;
  margin: 0 auto;
  overflow: hidden; }

.github_link img {
  vertical-align: middle; }

.pj_page {
  overflow-x: hidden; }

.pj_page h1 {
  font-size: 3.0rem; }

.pj_page h2 {
  font-size: 2.0rem;
  font-weight: 500;
  text-transform: uppercase; }

.pj_page h3 {
  font-size: 2.0rem;
  font-weight: 600; }

.design > .row.info_card, .design > .row.title_card {
  left: 50%;
  margin-bottom: 5%;
  text-align: center;
  padding: 5% 15%; }

div.row.bio {
  width: 40vw; }

.title_card {
  height: 15rem;
  border-style: dashed; }

.title_card h1 {
  font-family: "Playfair Display";
  font-weight: 500;
  font-size: 5.0rem;
  font-style: italic; }

.design > .full_image > img {
  width: 100%;
  overflow: hidden; }

.design > .innod_pattern {
  height: 60%;
  margin-bottom: 5%;
  width: 100%;
  overflow: hidden; }

.design .pj_title_square {
  text-align: center;
  border-style: dashed;
  padding: 5rem;
  vertical-align: middle; }

.design .pj_title_square h2 {
  margin: 0;
  padding: 0; }

.design .pj_title_square:hover {
  border-style: solid; }

@keyframes pulse-dot {
  0% {
    transform: scale(0.8); }
  50% {
    transform: scale(1); }
  100% {
    transform: scale(0.8); } }
/* Mobile + Extra small devices (phones, 600px and down) */
@media screen and (max-width: 600px) and (orientation: portrait) {
  .pj_frame::-webkit-scrollbar {
    display: none; }

  .content {
    overflow-y: scroll; }

  .pj_album_art_mini {
    height: 70vw;
    width: 70vw;
    background-size: contain; }

  .pj_frame {
    left: 50%;
    top: 10%;
    position: absolute;
    transform: translate(-50%, 0%);
    width: fit-content;
    height: 100%;
    text-align: center;
    overflow-y: scroll;
    scroll-behavior: smooth; }

  .pj_name h2 {
    font-size: 2.5rem;
    font-weight: 300;
    font-variant-caps: all-small-caps;
    margin-top: 0.8rem; }

  .pj_name h2:hover {
    font-weight: 400; }

  div.nav_wrapper {
    visibility: hidden;
    display: none; }

  span.small_nav_toggle_button {
    visibility: visible;
    z-index: 100; }

  .nav {
    display: inline-block;
    margin: 25px 25px 20px;
    pointer-events: none;
    -webkit-transition: 0.5s;
    transition: 0.5s; }

  #toggle_nav {
    position: absolute;
    left: -100%;
    top: -100%;
    display: block; }

  .toggle_nav_container {
    display: block; }

  .small_nav_menu {
    display: block; }

  #toggle_nav:checked ~ .content {
    opacity: 0; }
  #toggle_nav:checked ~ .pj_frame {
    opacity: 0; }
  #toggle_nav:checked ~ .toggle_nav_container .small_nav_toggle_button:before {
    transform: translateY(-50%) rotate(45deg) scale(1); }
  #toggle_nav:checked ~ .toggle_nav_container .small_nav_toggle_button:after {
    transform: translateY(-50%) rotate(-45deg) scale(1); }
  #toggle_nav:checked ~ .small_nav_menu {
    pointer-events: auto;
    left: 50%;
    top: 50%;
    margin: auto;
    position: absolute;
    transform: translate(-50%, -50%);
    z-index: 10; }
    #toggle_nav:checked ~ .small_nav_menu .small_nav_item {
      width: 100%;
      color: #000000;
      letter-spacing: 0;
      height: 40px;
      line-height: 40px;
      margin-top: 2vh;
      opacity: 1;
      transform: scaleY(1);
      transition: 0.5s, opacity 0.1s;
      text-decoration: None;
      display: block;
      text-align: center;
      float: unset; }
      #toggle_nav:checked ~ .small_nav_menu .small_nav_item:before {
        content: none; }
      #toggle_nav:checked ~ .small_nav_menu .small_nav_item:nth-child(1) {
        transition-delay: 0.08s; }
        #toggle_nav:checked ~ .small_nav_menu .small_nav_item:nth-child(1):before {
          transition-delay: 0.08s; }
      #toggle_nav:checked ~ .small_nav_menu .small_nav_item:nth-child(2) {
        transition-delay: 0.06s; }
        #toggle_nav:checked ~ .small_nav_menu .small_nav_item:nth-child(2):before {
          transition-delay: 0.06s; }
      #toggle_nav:checked ~ .small_nav_menu .small_nav_item:nth-child(3) {
        transition-delay: 0.04s; }
        #toggle_nav:checked ~ .small_nav_menu .small_nav_item:nth-child(3):before {
          transition-delay: 0.04s; }
      #toggle_nav:checked ~ .small_nav_menu .small_nav_item:nth-child(4) {
        transition-delay: 0.02s; }
        #toggle_nav:checked ~ .small_nav_menu .small_nav_item:nth-child(4):before {
          transition-delay: 0.02s; }
      #toggle_nav:checked ~ .small_nav_menu .small_nav_item:nth-child(5) {
        transition-delay: 0s; }
        #toggle_nav:checked ~ .small_nav_menu .small_nav_item:nth-child(5):before {
          transition-delay: 0s; }

  .small_nav_item {
    position: relative;
    float: left;
    clear: both;
    color: transparent;
    font-size: 20px;
    letter-spacing: -6.2px;
    height: 7px;
    line-height: 7px;
    text-transform: uppercase;
    white-space: nowrap;
    transform: scaleY(0.2);
    width: 20px; }
    .small_nav_item:nth-child(1) {
      letter-spacing: -10px; }
    .small_nav_item:nth-child(2) {
      letter-spacing: -11px; }
    .small_nav_item:nth-child(3) {
      letter-spacing: -9px; }
    .small_nav_item:nth-child(n + 4) {
      opacity: 0; }
    .small_nav_item:before {
      position: absolute;
      content: '';
      top: 50%;
      left: 0;
      width: 100%;
      height: 2px;
      background-color: #000000;
      transform: translateY(-50%) scaleY(5); }

  .small_nav_toggle_button {
    position: absolute;
    display: inline-block;
    width: 20px;
    height: 20px;
    margin: 25px;
    background-color: transparent;
    border: none;
    cursor: pointer;
    border-radius: 100%; }
    .small_nav_toggle_button:before, .small_nav_toggle_button:after {
      position: absolute;
      content: '';
      top: 50%;
      left: 0;
      width: 100%;
      height: 2px;
      background-color: black;
      border-radius: 5px; }
    .small_nav_toggle_button:before {
      transform: translateY(-50%) rotate(45deg) scale(0); }
    .small_nav_toggle_button:after {
      transform: translateY(-50%) rotate(-45deg) scale(0); }

  .small_nav_menu {
    display: inline-block;
    margin: 25px 25px 20px;
    pointer-events: none; }

  .content {
    position: relative;
    transition: 0.5s; }

  .category {
    position: relative; }

  div#home_row_left, div#home_row_right {
    float: left;
    font-size: 3vh;
    padding: 0.5vh 2vh;
    /* max-width: 300px; */
    min-width: 250px;
    width: 35vw; }

  .home h1.fancy {
    font-size: 3.5rem; }

  h1.fancy {
    font-size: 5.0rem; } }
/* END: Mobile + Extra small devices (phones, 600px and down) */
html, body {
  height: 100%; }

p, ol, ul, h1, h2, h3, h4 {
  font-family: 'Josefin Sans', sans-serif;
  font-weight: 300;
  font-size: 1.7rem; }

.pj_page ol, .pj_page ul {
  padding-left: 2em; }

div.navigation {
  position: absolute;
  min-width: 80px;
  background-color: white;
  box-shadow: 10px 0px 10px #888888;
  z-index: 10;
  padding: 100% 25px;
  top: 50%;
  transform: translateY(-50%); }

.nav_wrapper {
  position: relative;
  height: 100vh;
  overflow: hidden; }

div#home_row_left h1 {
  margin-top: 1.5rem;
  margin-bottom: 0.2vmin; }

#caption {
  margin-top: 3%; }

#title {
  position: fixed;
  top: 10vh;
  display: inline;
  width: 100%; }

h1.fancy {
  font-family: 'Playfair Display', serif;
  font-weight: 700; }

div.small_nav {
  content: url(../img/hamburger_menu.png);
  width: 10vh;
  padding: 1vh;
  top: 0;
  position: absolute; }

.header_img {
  /*height: 200px;*/
  /*width: auto;*/
  width: 100%;
  /*content: url(../img/needs.jpg);*/
  /*display: block;*/
  /*margin: auto;*/
  /*margin-top: 30px;*/
  margin-bottom: 20px; }

.img_info {
  color: white;
  position: relative;
  margin-bottom: 30;
  bottom: 40px;
  left: 20px; }

img.display_img {
  width: 100%; }

img.center_img {
  display: block;
  margin-left: auto;
  margin-right: auto; }

img #home {
  width: 10vh; }

@media screen and (min-width: 600px) {
  .pj_frame .content {
    width: 55%; }

  .row.video {
    background: black; }

  .content iframe {
    display: block;
    margin: 0 auto; }

  .pj_frame .content {
    overflow-y: hidden; }

  h3.comp_photo_title {
    text-align: center; }

  img.comp_photo_tile {
    width: 100%;
    height: 100%; }

  .creative .row.creative_projects {
    text-align: center;
    position: absolute;
    top: 13vh;
    left: calc(50% + 80px);
    transform: translate(-50%);
    width: 100%; }

  .row.pj_title {
    text-align: center; }

  .pj_name {
    width: fit-content;
    height: 20vh;
    position: relative;
    left: 50%;
    transform: translate(-50%, 0); }

  .pj_name h6 {
    display: inline;
    position: relative;
    top: -5vh;
    margin-right: 1.5rem;
    font-size: 3rem;
    font-family: 'Playfair Display';
    font-weight: 300;
    text-align: center;
    color: rgba(34, 34, 34, 0.6); }

  .pj_list:hover .pj_title .pj_name h6 {
    color: rgba(255, 255, 255, 0.3); }

  .pj_list .pj_title:hover .pj_name h6 {
    font-style: italic;
    color: #222222; }

  .category .title.label h1 {
    text-align: center;
    display: inline-block; }

  .category .title.label {
    position: absolute;
    top: 8vh;
    left: calc(50% + 80px);
    transform: translate(-50%); }

  .pj_name h2 {
    font-size: 16vh;
    font-family: 'Playfair Display';
    font-weight: 400;
    text-align: center;
    color: rgba(34, 34, 34, 0.6);
    display: inline; }

  .pj_list:hover .pj_title .pj_name h2 {
    color: rgba(255, 255, 255, 0.3); }

  .pj_list:hover .pj_title:hover .pj_name h2 {
    font-weight: 600;
    font-style: italic;
    cursor: pointer;
    color: #222222; }

  .title h1 {
    font-size: 2.5rem;
    text-align: center; }

  .content.pj_page .title h1 {
    margin-bottom: 3px; }

  .subtitle {
    text-align: center; }

  .home h1.fancy {
    font-size: 4.0rem; }

  h1.fancy {
    font-size: 4.5rem; }

  div.small_nav {
    visibility: hidden;
    display: none; }

  ul.navigation {
    /* background-color:black; */
    /* background-color: white; */
    /* box-shadow: 10px 0px 10px #888888; */
    /* z-index: 10; */
    list-style: none;
    /* padding: 5% 4%; */
    /* height: 100%; */
    /* max-width: 150px; */
    text-decoration: none;
    margin: 0;
    /* display: block; */
    /* position: absolute; */
    /* float: left; */
    /* top: 50%; */
    /* transform: translateY(-50%); */ }

  .nav_item img {
    width: 6vh; }

  .nav_item.tooltip img {
    animation: pulse-dot 1.25s cubic-bezier(0.455, 0.03, 0.515, 0.955) -0.4s infinite; }

  .current img {
    filter: blur(5px); }

  li.nav_item {
    padding-bottom: 2vh;
    padding-top: 2vh;
    text-align: center;
    margin: 0; }

  div#nav_buttons {
    /* position: absolute; */
    /* height: 100vh; */
    /* top: 50%; */
    /* float: left; */
    /* transform: translateY(-50%); */
    /* background-color: white; */
    /* box-shadow: 10px 0px 10px #888888; */
    /* z-index: 10; */
    /* padding: 5% 4%; */
    /* max-width: 150px; */
    /* height: 100%; */ }

  div.nav_button_img {
    position: relative; }

  div.nav_label {
    z-index: 100;
    position: relative;
    left: 0;
    text-align: center;
    opacity: 0;
    margin: 0;
    font-weight: 300;
    color: black; }

  div.nav_label:hover {
    opacity: 0; }

  .nav_item:hover > div#home {
    opacity: 0; }

  .nav_button_img:hover > div#home {
    opacity: 0; }

  .nav_item:hover > div.nav_label {
    opacity: 1; }

  .nav_button_img:hover > div.nav_label {
    opacity: 1; }

  div.content.home {
    height: unset;
    width: 53vw; }

  .content {
    position: absolute;
    top: 50%;
    /* Firefox */
    left: -moz-calc(50% + 80px);
    /* WebKit */
    left: -webkit-calc(50% + 80px);
    /* Opera */
    left: -o-calc(50% + 80px);
    /* Standard */
    left: calc(50% + 80px);
    transform: translate(-50%, -50%);
    min-width: 400px;
    width: fit-content;
    height: fit-content;
    overflow-y: scroll; }

  .content.pj_page {
    top: 50%;
    left: -moz-calc(50% + 80px);
    left: -webkit-calc(50% + 80px);
    left: -o-calc(50% + 80px);
    left: calc(50% + 80px);
    transform: translate(-50%, -45%);
    min-width: 400px;
    width: 80vw;
    max-width: 950px;
    height: 100%;
    box-sizing: border-box;
    overflow-y: scroll; }

  .content.pj_page::after {
    content: '';
    display: block;
    padding-bottom: 100px; }

  .content.creative {
    width: 100%;
    transform: translate(-40%, -45%); }

  div#home_row_left {
    float: left;
    text-align: left;
    font-size: 2vmax;
    padding: 0.5vh 2vh;
    max-width: 600px;
    min-width: 300px;
    width: 60vmin; }

  div#home_row_right {
    float: right;
    text-align: right;
    font-size: 2vmax;
    padding: 0.5vh 2vh;
    max-width: 600px;
    min-width: 300px;
    width: 60vmin; } }

/*# sourceMappingURL=mimilei.css.map */