/*--------------------------------------------------------------
## Mixins
--------------------------------------------------------------*/
/*--------------------------------------------------------------
## Variables
--------------------------------------------------------------*/
/* Webfont */
@font-face {
  font-family: 'gilroyextrabold';
  src: url("../fonts/gilroy-extrabold-webfont.woff2") format("woff2"), url("../fonts/gilroy-extrabold-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal; }
/* Colors */
/* Breakpoints */
/* Sizes */
/* Padding */
/* Arrows */
.arr_left:before, .nav_project .nav__project_btn.prev:before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 59.95'%3E%3Ccircle cx='30' cy='29.97' r='30' fill='%23222'/%3E%3Cpath fill='%23fff' d='M14.94 29.07l11.95-11.95.7.71-10.74 10.74h27.53v1H16.84l11.53 11.52-.7.71-12.73-12.73z'/%3E%3C/svg%3E"); }

.arr_right:before, .nav_project .nav__project_btn.next:before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 59.95'%3E%3Ccircle cx='30' cy='29.97' r='30' fill='%23222'/%3E%3Cpath fill='%23fff' d='M44.38 29.07L32.43 17.12l-.7.71 10.74 10.74H14.94v1h27.54L30.95 41.09l.7.71 12.73-12.73z'/%3E%3C/svg%3E"); }

.arr {
  display: inline-block;
  text-indent: -100%;
  overflow: hidden;
  transition: transform 0.5s ease;
  width: 1.875rem;
  height: 1.875rem; }
  .arr:before {
    position: absolute;
    display: block;
    content: "";
    width: 100%;
    height: 100%; }
  @media screen and (min-width: 100em) {
    .arr {
      width: 3.75rem;
      height: 3.75rem; } }
  .arr:hover {
    transform: scale(0.9); }

/*--------------------------------------------------------------
## Work
--------------------------------------------------------------*/
.single-work .work__heading, .project__tags {
  font-size: 0.75rem; }
  .single-work .work__heading p, .project__tags p {
    font-size: 0.75rem; }
    @media screen and (min-width: 100em) {
      .single-work .work__heading p, .project__tags p {
        font-size: 1rem; } }
  .single-work .work__heading h1, .project__tags h1 {
    text-indent: 0;
    width: 65%; }
    @media screen and (min-width: 60em) {
      .single-work .work__heading h1, .project__tags h1 {
        width: auto;
        margin-bottom: 40px; } }
  @media screen and (min-width: 60em) {
    .single-work .work__heading, .project__tags {
      font-size: 0.75rem;
      max-width: 100%; } }

.project__tags {
  border-top: 1px solid #222;
  padding: 10px 0;
  max-width: 50%;
  margin-bottom: 0;
  color: #9B9B9B; }
  @media screen and (min-width: 60em) {
    .project__tags {
      border: 0;
      padding: 0;
      width: auto;
      margin-bottom: 40px;
      max-width: 100%; } }

#project {
  position: relative;
  top: 40px;
  padding: 10px;
  margin-bottom: 40px;
  display: flex;
  flex-wrap: wrap;
  width: 100%; }
  #project .project__media {
    opacity: 0.92;
    display: flex;
    flex-wrap: wrap;
    flex-grow: 1; }
  #project article {
    position: relative;
    /*margin-right: $padding-mobile;*/
    margin-bottom: 10px;
    flex-grow: 1; }
    #project article figure {
      top: 0;
      width: 100%;
      height: auto;
      margin: 0; }
      #project article figure img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: all 2s ease;
        display: block; }
      @media screen and (min-width: 60em) {
        #project article figure {
          -webkit-box-shadow: 0px 10px 40px -10px rgba(17, 17, 17, 0.75);
          -moz-box-shadow: 0px 10px 40px -10px rgba(17, 17, 17, 0.75);
          box-shadow: 0px 10px 40px -10px rgba(17, 17, 17, 0.75); }
          #project article figure:after {
            content: attr(data-description);
            position: absolute;
            font-size: 0.625rem;
            padding-top: 0.625rem; } }
    #project article figure.no__shadow {
      box-shadow: none; }
      #project article figure.no__shadow:hover img {
        transform: scale(1);
        transition-delay: 0.5s; }
    #project article p {
      font-size: 0.75rem; }
  #project article:nth-child(3n+2) {
    width: 45%;
    transform: scale(1); }
  #project article:nth-child(3n) {
    width: 45%;
    transform: scale(1); }
  #project article:nth-child(3n+1) {
    width: 100%;
    transform: scale(1); }
  @media screen and (min-width: 60em) {
    #project {
      position: absolute;
      z-index: 1;
      width: 70vw;
      right: 40px;
      padding: 40px;
      padding-top: 40px;
      padding-right: 0; }
      #project article:nth-child(3n+2) {
        width: calc(50% - 40px);
        margin-top: 120px;
        margin-bottom: 120px;
        margin-right: 40px;
        transform: scale(1); }
      #project article:nth-child(3n+2):last-child {
        margin-right: 0; }
      #project article:nth-child(3n) {
        width: calc(50% - 40px);
        margin-top: 120px;
        margin-bottom: 120px;
        margin-right: 0;
        transform: scale(1); }
      #project article:nth-child(3n+1) {
        width: 80%;
        margin-right: 0;
        margin-top: 120px;
        margin-bottom: 120px;
        transform: scale(1); }
      #project article:nth-child(3n+1):first-child {
        margin-top: 0; } }
  @media screen and (min-width: 100em) {
    #project {
      right: 60px;
      padding: 60px;
      padding-top: 120px;
      padding-right: 0; }
      #project article:nth-child(3n+2) {
        margin-right: 60px; } }
  @media screen and (max-height: 700px) and (min-width: 60em) {
    #project {
      padding-top: 60px; } }
  @media screen and (max-height: 700px) and (min-width: 100em) {
    #project {
      position: 60px; } }

@media screen and (min-width: 60em) {
  .header__page {
    width: 31vw; } }

.nav_project {
  position: relative;
  margin-top: 40px; }
  .nav_project .nav__project_btn {
    display: inline-block;
    width: 49%; }
    .nav_project .nav__project_btn span:first-of-type {
      color: #9B9B9B; }
    .nav_project .nav__project_btn span {
      display: block;
      font-size: 0.75rem;
      padding-left: 35px;
      top: -8px;
      position: relative; }
      @media screen and (min-width: 100em) {
        .nav_project .nav__project_btn span {
          font-size: 0.875rem;
          top: 1px;
          padding-left: 4.063rem; } }
    .nav_project .nav__project_btn span:nth-child(2) {
      line-height: 0.99; }
  .nav_project .nav__project_btn.next {
    text-align: right; }
  .nav_project .nav__project_btn.prev:before {
    position: absolute;
    top: -5px;
    display: block;
    content: "";
    transition: transform 0.5s ease;
    background-repeat: no-repeat;
    width: 1.875rem;
    height: 1.875rem; }
    @media screen and (min-width: 100em) {
      .nav_project .nav__project_btn.prev:before {
        width: 3.45rem;
        height: 3.45rem; } }
  .nav_project .nav__project_btn.prev:hover:before {
    transform: scale(0.9); }
  .nav_project .nav__project_btn.next {
    position: absolute;
    right: 10px; }
    .nav_project .nav__project_btn.next span {
      padding-right: 35px; }
      @media screen and (min-width: 100em) {
        .nav_project .nav__project_btn.next span {
          padding-left: 0;
          padding-right: 3.863rem; } }
    .nav_project .nav__project_btn.next span:nth-child(2) {
      line-height: 0.99; }
    .nav_project .nav__project_btn.next:before {
      position: absolute;
      right: 0;
      top: -5px;
      display: block;
      content: "";
      transition: transform 0.5s ease;
      background-repeat: no-repeat;
      width: 1.875rem;
      height: 1.875rem; }
      @media screen and (min-width: 100em) {
        .nav_project .nav__project_btn.next:before {
          width: 3.45rem;
          height: 3.45rem; } }
    .nav_project .nav__project_btn.next:hover:before {
      transform: scale(0.9); }

.nav_project.header {
  margin-top: 0px; }
  @media screen and (min-width: 60em) {
    .nav_project.header {
      display: block; } }

.nav_project.footer {
  display: block;
  padding: 10px;
  padding-top: 30px; }
  @media screen and (min-width: 60em) {
    .nav_project.footer {
      display: none; } }

.project__video {
  width: 100%;
  height: auto;
  display: block;
  margin: 0; }

#project.swipeshow-active {
  height: 100vw;
  width: 100vw;
  top: 70px;
  padding: 0; }
  #project.swipeshow-active article.slide {
    position: absolute;
    overflow: hidden; }
    #project.swipeshow-active article.slide a {
      pointer-events: none; }
      @media screen and (min-width: 60em) {
        #project.swipeshow-active article.slide a {
          pointer-events: auto; } }
    #project.swipeshow-active article.slide figure {
      height: 100vw; }
      #project.swipeshow-active article.slide figure .project__video {
        height: 100%; }
      #project.swipeshow-active article.slide figure video {
        padding: 5%; }
      #project.swipeshow-active article.slide figure img {
        object-fit: contain; }

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