@media screen and (max-width: 960px) {
  .hide-on-960 {
    display: none;
  }
  .logo,
  .show-about-buro,
  .projects-list .projects-list-back {
    font-size: 3.22rem;
    top: 13px;
  }
  .logo {
    left: 17px;
  }
  .show-about-buro,
  .projects-list .projects-list-back {
    right: 17px;
  }
  .controller,
  .project-name {
    font-size: 1.35rem;
    bottom: 13px;
  }
  .controller {
    right: 17px;
  }
  .project-name {
    left: 17px;
  }
  .projects-list ul {
    margin-top: 67px;
  }
  .projects-list li {
    padding: 11px 16px 9px;
    font-size: 1.35rem;
  }
  .projects-list li .title,
  .projects-list li .categories {
    line-height: 1;
  }
  .slider-content .projects-slider-arrow-left,
  .slider-content .projects-slider-arrow-right {
    font-size: 1.35rem;
  }
  .about-buro .col {
    padding: 21px 17px 41px;
    font-size: 1.35rem;
    line-height: 16px;
  }
  .about-buro .col p + p {
    padding-top: 18px;
  }
  .about-buro .col-2 .newsletter input {
    font-size: 1.35rem;
  }
  .about-buro .col-2 .newsletter .join button {
    font-size: 1.35rem;
  }
}
@media screen and (max-width: 840px) {
  body {
    overflow: visible;
  }
  .about-buro {
    height: auto !important;
    bottom: auto !important;
  }
  .slider-content .projects-slider-arrow-left,
  .slider-content .projects-slider-arrow-right {
    display: none !important;
  }
}
@media screen and (max-width: 680px) {
  .projects-list li .categories {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .project-name .categories {
    display: none !important;
  }
}
@media screen and (max-width: 540px) and (orientation: portrait) {
  .loading .title--main {
    display: none;
  }
  .loading .title--alternative {
    display: inline-block;
  }
  .about-buro .col {
    font-size: 1.6rem;
    line-height: 1.2;
  }
  .about-buro .col-2 .mob-title,
  .about-buro .col-2 .newsletter .join button,
  .about-buro .col-2 .newsletter input {
    font-size: 1.6rem;
  }
}
@media screen and (max-width: 540px) {
  .loading .title {
    font-size: 2.1rem;
  }
  .loading .lbl {
    font-size: 1.3rem;
  }
  .site-box {
    height: 55%;
    max-height: 405px;
    padding: 0;
  }
  .slider-content {
    height: 100%;
    padding: 0;
  }
  .slider-content .projects-slider-arrow-left,
  .slider-content .projects-slider-arrow-right {
    display: none !important;
  }
  .slider-content .projects-slide.fullscreen {
    height: 100%;
    display: block !important;
    min-height: 100%;
    padding: 0;
  }
  .slider-content .projects-slide.fullscreen .space {
    display: block;
    height: 100%;
  }
  .projects-list li .title {
    width: 100%;
  }
  .projects-list li .categories {
    display: none;
  }
  .show-about-buro {
    display: none;
  }
  .about-buro {
    display: block;
  }
  .about-buro .col-1 .mob-title {
    display: block;
    font-size: 3.22rem;
    line-height: 1;
    padding: 30px 0 24px;
  }
  .about-buro .col-2 .mob-title {
    display: block;
    font-size: 1.35rem;
    line-height: 1;
    padding: 0 0 19px;
  }
  .about-buro .col {
    width: 100%;
    padding: 22px 17px;
  }
  .about-buro .col-1 {
    padding-bottom: 27px;
  }
  .about-buro .col-1:after {
    bottom: 0;
    right: auto;
    left: 0;
    top: auto;
    width: 100%;
    height: 1px;
  }
  .about-buro .col-2 {
    padding: 24px 0;
  }
  .about-buro .col-2 .part-1,
  .about-buro .col-2 .part-2 {
    width: 100%;
    float: none;
    padding: 0 17px;
  }
  .about-buro .col-2 .part-1 {
    position: relative;
    margin-top: 22px;
    padding-top: 22px;
  }
  .about-buro .col-2 .part-1:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 1px;
    width: 100%;
    background-color: #000;
  }
  .about-buro .col-2 .part-1 .mob-top {
    font-size: 3.22rem;
    text-transform: uppercase;
    line-height: 1;
    margin: 50px 0 0;
    display: inline-block;
  }
  .about-buro .col-2 .newsletter input {
    width: 100%;
  }
  .controller .play {
    display: none;
  }
}