@media all and (max-width: 724px) {
  body {
    margin: 0px;
    font-size: 12px;
  }
  .animated-underline {
    display: none;
  }
  .nav-container {
    position: relative;
  }
  .nav-container .hamburger-container {
    padding: 15px;
    position: relative;
    display: block;
  }
  .nav-container .hamburger-container img {
    width: 30px;
    height: auto;
    display: block;
    transition: all 0.4s ease-in-out;
  }
  .nav-container .hamburger-container .top-line {
    position: absolute;
    top: 15px;
  }
  .nav-container .hamburger-container .top-line.rotate {
    top: 20px;
    transform: rotate(135deg);
  }
  .nav-container .hamburger-container .bottom-line {
    top: 23px;
    position: absolute;
  }
  .nav-container .hamburger-container .bottom-line.rotate {
    top: 20px;
    transform: rotate(45deg);
  }
  .nav-container .hamburger-container .hamburger-button {
    background-color: transparent;
    box-shadow: none;
    border: 0px;
    padding: 0px;
    cursor: pointer;
  }
  .nav-container .nav-content {
    display: none;
  }
  .nav-container .nav-content .nav-link-container {
    display: block;
    text-align: center;
    width: 100%;
    padding-left: 0px;
    padding-top: 34px;
    height: 22px;
  }
  .nav-container .nav-content .nav-link-container .nav-underline {
    display: none;
  }
  .nav-container .nav-content .nav-link-container:first-child {
    padding-left: 0px;
    padding-top: 34px;
  }
  .page-container {
    margin: 1.25em;
  }
  .page-container .background-container {
    top: 1.25em;
    left: 1.25em;
    right: 1.25em;
    bottom: 1.25em;
  }
  .home-container {
    display: block;
    position: relative;
    height: 88vh;
  }
  .home-container .image-container {
    display: block;
    text-align: center;
    padding-left: 0px;
    padding-top: 2.0833em;
    width: auto;
    margin-right: -1.3333em;
    height: 40vh;
  }
  .home-container .image-container img {
    object-fit: contain;
    width: 90%;
  }
  .home-container .title-container {
    display: block;
    text-align: left;
    bottom: 2em;
    width: auto;
    position: relative;
    padding-left: 0px;
    margin-left: 1.25em;
    margin-top: 3.25em;
  }
  .home-container .title-container .title {
    margin-top: 0px;
    font-size: 1.333em;
  }
  .home-container .title-container .subtitle {
    font-size: 2.5em;
    padding: 0px;
    line-height: 1.4em;
  }
  .home-container .title-container .link-container a {
    font-size: 1.333em;
  }
  .close-button-container {
    right: 1.5em;
    top: 1.2em;
  }
  .close-button-container .close-button {
    height: 3.918em;
    width: 3.75em;
  }
  .close-button-container .close-button img {
    width: 2.5em;
  }
  .close-button-container .close-button .top-line {
    position: absolute;
    top: 15px;
  }
  .close-button-container .close-button .top-line.rotate {
    top: 20px;
    transform: rotate(135deg);
  }
  .close-button-container .close-button .bottom-line {
    top: 15px;
    position: absolute;
  }
  .close-button-container .close-button .bottom-line.rotate {
    top: 20px;
    transform: rotate(45deg);
  }
  .work-container {
    position: relative;
    padding-bottom: 0px;
  }
  .work-container .work-list-container .projects-container {
    text-align: left;
    display: block;
    padding-top: 3em;
  }
  .work-container .work-list-container .projects-container .project {
    padding-top: 2.5em;
  }
  .work-container .work-list-container .projects-container .project:first-child {
    padding-top: 0px;
  }
  .work-container .work-list-container .projects-container .project .project-content {
    display: table;
    padding: 0px 1.471em;
    line-height: normal;
  }
  .work-container .work-list-container .projects-container .project .project-content .project-number {
    font-size: 1.5em;
    padding-top: .2em;
  }
  .work-container .work-list-container .projects-container .project .project-content .project-name {
    font-size: 1.5em;
    letter-spacing: 0px;
    line-height: 1.2em;
    display: table-cell;
    vertical-align: top;
    padding-left: 0.5167em;
  }
  .work-container .work-list-container .projects-container .project .project-content .project-name .brand-name {
    letter-spacing: 0px;
    line-height: 1em;
  }
  .work-container .work-list-container .projects-container .project .opaque {
    opacity: 1;
  }
  .work-container .work-list-container .projects-container .project .full-opaque {
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
  }
  .work-container .hidden-details {
    position: relative;
  }
  .work-container .hidden-details .project-details-container {
    display: none;
    padding-bottom: 2em;
  }
  .work-container .hidden-details .project-details-container .project-page {
    padding-top: 5em;
    height: 100%;
    transform: translateY(3em);
    opacity: 0;
    transition: all 0.5s ease-in-out;
  }
  .work-container .hidden-details .project-details-container .project-page:first-child {
    padding-top: 1.5em;
  }
  .work-container .hidden-details .project-details-container .project-page .project-details-table {
    display: block;
    width: 100%;
    position: relative;
  }
  .work-container .hidden-details .project-details-container .project-page .project-details-table .project-image-container {
    display: block;
    height: auto;
    width: 100vw;
    padding-top: 2em;
    margin-left: -1.25em;
    padding-left: 0em;
    padding-right: 0em;
  }
  .work-container .hidden-details .project-details-container .project-page .project-details-table .project-image-container img {
    width: auto;
    height: auto;
  }
  .work-container .hidden-details .project-details-container .project-page .project-details-table .desktop-project-image-container {
    display: none !important;
  }
  .work-container .hidden-details .project-details-container .project-page .project-details-table .mobile-project-image-container {
    display: block;
  }
  .work-container .hidden-details .project-details-container .project-page .project-details-table .project-content-container {
    display: table-cell;
    vertical-align: top;
    width: 100%;
    padding-right: 1em;
    padding-left: 1em;
    padding-top: 1.6667em;
  }
  .work-container .hidden-details .project-details-container .project-page .project-details-table .project-content-container .project-name-label {
    font-size: 1.5em;
    letter-spacing: -0.017em;
  }
  .work-container .hidden-details .project-details-container .project-page .project-details-table .project-content-container .project-name {
    font-size: 1.6em;
    letter-spacing: -0.01em;
    line-height: 1.3em;
    padding-top: 2px;
  }
  .work-container .hidden-details .project-details-container .project-page .project-details-table .project-content-container .client-table {
    display: table;
    padding-top: 1.6333em;
  }
  .work-container .hidden-details .project-details-container .project-page .project-details-table .project-content-container .client-table .column {
    display: table-cell;
  }
  .work-container .hidden-details .project-details-container .project-page .project-details-table .project-content-container .client-table .column .label {
    font-size: 1.333em;
    letter-spacing: -0.017em;
  }
  .work-container .hidden-details .project-details-container .project-page .project-details-table .project-content-container .client-table .column .content {
    font-size: 1.533em;
    line-height: 1.533em;
    letter-spacing: -0.0233em;
  }
  .work-container .hidden-details .project-details-container .project-page .project-details-table .project-content-container .client-table .right-column {
    padding-left: 4.17em;
  }
  .work-container .hidden-details .project-details-container .project-page .project-details-table .project-content-container .project-section-header {
    font-size: 1.503em;
    letter-spacing: -0.0233em;
  }
  .work-container .hidden-details .project-details-container .project-page .project-details-table .project-content-container .project-description {
    padding-top: 0.6667em;
    font-size: 1.2em;
    letter-spacing: 0.0416em;
  }
  .work-container .hidden-details .project-details-container .project-page.animate {
    transform: translateY(0px);
    opacity: 1;
  }
  .work-container .hidden-details .project-details-container .project-page:first-child {
    height: 100%;
  }
  .work-container .hidden-details .back-to-top-container {
    bottom: 1.2em;
    left: 1.2em;
    right: 0px;
  }
  .work-container .hidden-details .back-to-top-container button {
    margin-left: 1em;
    margin-bottom: 1em;
  }
  #dialogWrap {
    position: relative;
    height: 88vh;
  }     
  #dialogWrap #dialogText {
    font-size: 2.142em;
  }
  #dialogWrap #mainDialog {
    width: 25.714em;
  }
  #dialogWrap #passArea .wrong-password-container {
    padding-top: 1em;
  }
  #dialogWrap #passArea > * {
    margin: 5px auto;
  }
  .about-container {
    display: block;
    padding-top: 2.0833em;
    padding-bottom: 2.0833em;
  }
  .about-container .image-container {
    display: block;
    width: 71%;
    text-align: left;
    padding-left: 1.25em;
    padding-right: 0px;
    height: auto;
  }
  .about-container .about-content {
    display: block;
    padding-left: 1.5em;
    padding-right: 1.5em;
    width: auto;
  }
  .about-container .about-content .title-container {
    font-size: 2em;
    letter-spacing: -0.0292em;
    margin-top: 0px;
  }
  .about-container .about-content .title-container .name {
    display: block;
    padding-top: 1em;
  }
  .about-container .about-content .title-container .role {
    padding-top: 0.4em;
  }
  .about-container .about-content .description {
    padding-top: 0px;
    font-size: 1em;
    letter-spacing: 0;
    max-width: none;
  }
  .about-container .about-content .introduce-label {
    padding-top: 1.4em;
    font-size: 1.67em;
    letter-spacing: -0.02em;
  }
  .about-container .about-content .social-link-container {
    margin-top: 1.3833em;
  }
  .about-container .about-content .social-link-container a {
    font-size: 1.333em;
    letter-spacing: -0.0167em;
    text-decoration: none;
    padding-bottom: 0.1167emem;
    border-bottom: 1px solid black;
  }
  .ideas-container .logo-container {
    position: absolute;
    top: auto;
    bottom: 1.9289em;
    left: 1.1289em;
  }
  .ideas-container .idea-list-container {
    position: absolute;
    padding-left: 2.0833em;
    padding-right: 2.0833em;
    padding-bottom: 35vh;
  }
  .ideas-container .idea-list-container .idea-table {
    display: table;
  }
  .ideas-container .idea-list-container .idea-table .idea-number {
    font-size: 2em;
    letter-spacing: -0.002em;
    display: table-cell;
    vertical-align: top;
    padding-right: 0.3571em;
    padding-top: 0.1em;
  }
  .ideas-container .idea-list-container .idea-table .right-column {
    display: table-cell;
    vertical-align: top;
  }
  .ideas-container .idea-list-container .idea-table .idea-content {
    opacity: 1;
  }
  .ideas-container .idea-list-container .idea-table .idea-content .idea-title {
    font-size: 2em;
    letter-spacing: -0.002em;
    display: inline-block;
    line-height: 1em;
  }
  .ideas-container .idea-list-container .idea-table .idea-brief-description {
    font-size: 1.143em;
    letter-spacing: 0;
    padding-top: 1.071em;
    padding-right: 0em;
  }
  .ideas-container .idea-list-container .idea-table .idea-link {
    border: 0px;
    border-bottom: 1px solid black;
    background-color: transparent;
    box-shadow: none;
    text-align: left;
    padding: 0px;
    padding-bottom: 5px;
    margin-top: 0.714em;
    padding-top: 5px;
    cursor: pointer;
  }
  .ideas-container .idea-list-container .idea-table .idea-link a {
    font-size: 1.143em;
    letter-spacing: -0.0143em;
  }
  .ideas-container .idea-list-container .idea-table:first-child {
    padding-top: 31vh;
  }
  .ideas-container .idea-blogpost {
    position: absolute;
    max-width: none;
    left: 0px;
    right: 0px;
    margin: auto;
    display: none;
    transform: translateY(1.786em);
    opacity: 0;
    transition: all 0.5s ease-in-out;
    margin-top: 2.5em;
    margin-bottom: 2.5em;
    padding-left: 1.667em;
    padding-right: 1.667em;
    font-size: 1.143em;
    letter-spacing: 0;
    padding-top: .5em;
  }
  .ideas-container .idea-blogpost .image-container {
    position: relative;
    width: 100%;
  }
  .ideas-container .idea-blogpost .image-container img {
    width: 100%;
    height: auto;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.32);
  }
  .ideas-container .idea-blogpost .idea-content {
    padding-top: 0px;
  }
  .ideas-container .idea-blogpost .idea-title {
    font-size: 1.886em;
    letter-spacing: -0.0023em;
    line-height: 1.2285em;
    text-align: left;
    padding-top: 0.7em;
  }
  .ideas-container .idea-blogpost .idea-subtitle {
    font-size: 1.329em;
    letter-spacing: -0.1px;
    line-height: 1.371em;
    padding-top: 1em;
  }
  .ideas-container.animate {
    opacity: 1;
    transform: translateY(0px);
  }
}