boby.loading {
    pointer-events: none;
}

.mx-page-loader {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 888;
}
.preloader {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 99999;
  background: #fff;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.ve-dark .preloader {
  background: #000;
}
.ve-dark .sk-cube-grid .sk-cube {
  background-color: #999;
}
.sk-cube-grid {
  width: 70px;
  height: 70px;
}

.sk-cube-grid .sk-cube {
  width: 33%;
  height: 33%;
  background-color: #333;
  float: left;
  -webkit-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
  animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
}

.sk-cube-grid .sk-cube1 {
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}

.sk-cube-grid .sk-cube2 {
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
}

.sk-cube-grid .sk-cube3 {
  -webkit-animation-delay: 0.4s;
  animation-delay: 0.4s;
}

.sk-cube-grid .sk-cube4 {
  -webkit-animation-delay: 0.1s;
  animation-delay: 0.1s;
}

.sk-cube-grid .sk-cube5 {
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}

.sk-cube-grid .sk-cube6 {
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
}

.sk-cube-grid .sk-cube7 {
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}

.sk-cube-grid .sk-cube8 {
  -webkit-animation-delay: 0.1s;
  animation-delay: 0.1s;
}

.sk-cube-grid .sk-cube9 {
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}

@-webkit-keyframes sk-cubeGridScaleDelay {
  0%, 70%, 100% {
    -webkit-transform: scale3D(1, 1, 1);
    transform: scale3D(1, 1, 1);
  }
  35% {
    -webkit-transform: scale3D(0, 0, 1);
    transform: scale3D(0, 0, 1);
  }
}

@keyframes sk-cubeGridScaleDelay {
  0%, 70%, 100% {
    -webkit-transform: scale3D(1, 1, 1);
    transform: scale3D(1, 1, 1);
  }
  35% {
    -webkit-transform: scale3D(0, 0, 1);
    transform: scale3D(0, 0, 1);
  }
}


.mos-img img {display: none !important;}


.project-featured-video,
.project-featured-video .plyr {
    width: 100%;
    height: 100%;
}

.project-featured-video video {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

.project-featured-video .plyr--video .plyr__control.plyr__tab-focus,
.project-featured-video .plyr--video .plyr__control:hover,
.project-featured-video .plyr--video .plyr__control[aria-expanded="true"] {
    background: #000
}

.project-featured-video .plyr__control--overlaid {
    background: #000;
}

.project-featured-video .plyr__video-embed iframe {
    top: 0%;
    height: 100%;
    width: 100%;
}

.portfolio-showcase .plyr--full-ui.plyr--video .plyr__control--overlaid {
    display: none;
}

.project-title {
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    overflow: hidden;
    display: block
}

.project-title h1.big-title {
    margin: 0;
    display: block;
    font-size: 110px;
    line-height: 127px
}

.project-title h1 .tit_word {
    overflow: hidden;
    margin-top: -30px;
    padding-right: 10px
}

.project-title h1 .tit_word span {
    display: block
}

.project-details {
    display: block;
    width: 100%;
}

.project-details {
    display: block;
    width: 75%;
    margin: auto;
    overflow: hidden
}

.project-page-header.style_1 .project-details {
    overflow: visible
}

.project-meta {
    display: block;
    float: left;
    padding-left: 9px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.project-metas {
    margin-top: -30px;
    overflow: hidden
}

.project-meta.project-cats {
    width: 35%;
}

.project-meta.meta-summary {
    width: 65%;
}

.project-cat {
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -0.06em;
    margin-bottom: 25px;
    line-height: 40px
}

.project-meta.meta-summary h5,
.project-other h5,
.project-cat {
    color: rgba(25, 27, 29, .6);
}

.ve-dark .project-meta.meta-summary h5,
.project-page-header.dark .project-meta.meta-summary h5,
.ve-dark .project-other h5,
.project-page-header.dark .project-other h5,
.ve-dark .project-cat,
.project-page-header.dark .project-cat {
    color: hsla(0, 0%, 100%, .4)
}

.tt-line {
    overflow: hidden;
    padding-right: 5px
}

.project-title .tit_word,
.project-cat,
.summ_line,
.project-other h5 {
    overflow: hidden
}


.project-cat span,
.summ_line span,
.project-other span,
.project-title .tit_word span {
    display: block;
}



.next-project-section {
    overflow: hidden;
    margin-bottom: 0;
    position: relative
}

.next-project-section a {
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    padding-top: 150px;
    padding-bottom: 40px;
}

.next-project-section::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background: #f1f1f1;
    z-index: -1;
    width: 100%;
    height: 100%;
    -webkit-transition: height .8s cubic-bezier(.25, .74, .22, .99);
    -o-transition: height .8s cubic-bezier(.25, .74, .22, .99);
    transition: height .8s cubic-bezier(.25, .74, .22, .99)
}

.ve-dark .next-project-section::after {
    background: #101010;
}

.next-project-section:hover::after {
    height: 0%
}

.next-project-wrap,
.next-project-wrap h1 {
    color: #191b1d;
    display: block;
    float: left;
    width: 100%;
    position: relative;
    -webkit-transition: color .1s ease .1s;
    -o-transition: color .1s ease .1s;
    transition: color .1s ease .1s
}

.ve-dark .next-project-wrap,
.ve-dark .next-project-wrap h1 {
    color: #fff !important
}

.next-project-section:hover .next-project-wrap h1::before {
    background: #191b1d
}

.next-project-wrap span {
    display: block;
    margin-bottom: 20px;
    font-size: 16px;
    opacity: .6;
}

.next-project-wrap h1::after {
    content: "\eab8";
    font-family: 'IcoFont';
    display: block;
    float: right;
    text-align: right;
    font-weight: normal;
    font-size: 60px;
    -webkit-transition: 0;
    -o-transition: 0;
    transition: 0;
    -webkit-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease
}

.next-project-section:hover .next-project-wrap h1::after {
    -webkit-transform: translateX(10px);
    -ms-transform: translateX(10px);
    transform: translateX(10px);
    opacity: 0
}

.next-project-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2
}

.next-project-image img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
}

/*------------------------------------------------------------------
### Blog - List
-------------------------------------------------------------------**/
.blog-list .sl-project {
    padding: 20px 0px;
}
.blog-list .sl-project::before {
    display: none;
}
.blog-list .sl-project:hover {
    -webkit-transform: translateX(0px);
    -ms-transform: translateX(0px);
    transform: translateX(0px)
}
.post-date,
.post-category {
 display:inline-block;
 font-size:16px;
 font-weight:400;
 color:hsla(0,0%,100%,.4)
}
.blog-list .showcase-list-wrapper {
    max-width: 52%;
    margin-top: 50px
}
.post.mx-post .post-title h3,
.post.mx-post .post-title h2 {
    font-size: 36px;
    line-height: 50px;
    font-weight: 700;
    margin-bottom: 10px
}

.blog-list .post.mx-post {
    margin-bottom: 0px;
    padding-bottom: 10px;
}

.blog-list .post-date {
    font-size: 14px;
    color: rgba(25, 27, 29, .6);
}

.mx-blog.blog-list {
    margin-top: 50px;
}

.blog-list .post-summary {
    font-size: 16px;
    color: rgba(25, 27, 29, .6);
    display: block;
    float: left;
    line-height: 32px;
}

.blog-list .post-cat {
    font-size: 14px;
    display: inline-block;
}

.blog-list .post-cat::before {
    content: "";
    display: inline-block;
    width: 25px;
    height: 1px;
    background: hsla(0, 0%, 100%, .6);
    vertical-align: middle;
    margin: 0 9px;
}

body.light .blog-list .post-cat::before {
    background: #191b1d
}

.blog-list .post.mx-post::after {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: rgba(25, 27, 29, .2);
}

.ve-dark .blog-list .post.mx-post::after,
.blog-list.dark .post.mx-post::after {
    background: hsla(0, 0%, 100%, .4)
}

.blog-list .post.mx-post .post-image {
    display: none
}

.blog-list .post-images {
    position: fixed;
    width: 30%;
    -webkit-transform: translateY(50px) translateX(50px);
    -ms-transform: translateY(50px) translateX(50px);
    transform: translateY(50px) translateX(50px)
}

.blog-list .post-images .post-image {
    display: block;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden
}

.blog-list .post-images .post-image img {
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.ve-dark .blog-list .post-cat,
.blog-list.dark .post-cat,
.ve-dark .blog-list .post-summary,
.blog-list.dark .post-summary,
.ve-dark .blog-list .post-date,
.blog-list.dark .post-date {
    color: hsla(0, 0%, 100%, .4)
}


/*------------------------------------------------------------------
### Scroll Notice
-------------------------------------------------------------------**/

.scroll-notice {
    position: relative;
    display: inline-block;
    width: auto;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    cursor: pointer;
}

.scroll-notice span {
    display: block;
    position: absolute;
    width: auto;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 600;
    color: rgba(25, 27, 29, .6);
}

.ve-dark .scroll-notice span {
    color: hsla(0, 0%, 100%, .4)
}

.scroll-notice span::before {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    background: #191b1d;
    width: 40px;
    height: 1px;
    right: 120%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.ve-dark .scroll-notice span::after,
.ve-dark .scroll-notice span::before {
    background: #fff
}

.scroll-notice span::after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    background: #191b1d;
    width: 0px;
    height: 1px;
    left: -100%;
    -webkit-transform: translatey(-50%);
    -ms-transform: translatey(-50%);
    transform: translatey(-50%);
    float: left;
}

.ve-dark .scroll-notice span::after .ve-dark .scroll-notice span::before {
    background: #fff
}

/*------------------------------------------------------------------
## Showcase Transitions
-------------------------------------------------------------------**/

.trans-image {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
}

.trans-image-wrap,
.trans-image-wrap img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
}


/*------------------------------------------------------------------
# Showcase Layouts
-------------------------------------------------------------------**/

/*------------------------------------------------------------------
## Showcase Videos
-------------------------------------------------------------------**/

.portfolio-showcase.showcase-video {
    position: relative
}

.portfolio-showcase .plyr__controls {
    display: none
}

.plyr--full-ui input[type="range"] {
    color: #000
}

.portfolio-showcase .plyr--video .plyr__control.plyr__tab-focus,
.portfolio-showcase .plyr--video .plyr__control:hover,
.portfolio-showcase .plyr--video .plyr__control[aria-expanded="true"] {
    background: #000
}

.portfolio-showcase .plyr__control--overlaid {
    background: #000;
}

.portfolio-showcase .plyr__video-embed iframe {
    top: 0%;
    height: 100%;
    width: 100%;
}

.portfolio-showcase .plyr--full-ui.plyr--video .plyr__control--overlaid {
    display: none;
}


.portfolio-showcase .plyr {
    width: 100%;
    height: 100%;
    pointer-events: none
}

.portfolio-showcase .plyr__video-wrapper {
    width: calc((75vh - 2rem) * 1.77777778);
    min-width: 100%;
    height: 100%;
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
}

.showcase-video {
    width: 100%;
    height: 100%;
}

.showcase-video video {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: top;
    object-position: top
}


/*------------------------------------------------------------------
## Showcase Footer
-------------------------------------------------------------------**/

.showcase-footer {
    position: absolute;
    bottom: 7.5%;
    width: 83%;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    pointer-events: none
}

.showcase-footer-left,
.showcase-footer-right {
    display: block;
    float: left;
    width: 50%;
    height: 100%;
    pointer-events: all
}

.showcase-footer-right {
    text-align: right;
    float: right;
    pointer-events: all
}


/*------------------------------------------------------------------
### Plus Button
-------------------------------------------------------------------**/

.a-plus-button {
    position: relative;
    display: inline-block;
    cursor: pointer;
    width: 50px;
    height: 50px;
}

.a-plus-button::before {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 1px;
    background: #191b1d;
    left: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.a-plus-button::after {
    content: "";
    display: block;
    position: absolute;
    width: 1px;
    height: 50px;
    background: #191b1d;
    left: 50%;
    top: 0;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    -webkit-transition: -webkit-transform .6s ease;
    transition: -webkit-transform .6s ease;
    -o-transition: transform .6s ease;
    transition: transform .6s ease;
    transition: transform .6s ease, -webkit-transform .6s ease
}

.ve-dark .a-plus-button::before,
.ve-dark .a-plus-button::after,
.a-plus-button.light::after,
.a-plus-button.light::before {
    background: #fff
}

.a-plus-button a {
    display: block;
    width: 100%;
    height: 100%;
    white-space: nowrap;
    color: #191b1d;
    font-size: 12px;
    overflow: hidden;
    font-weight: 600;
}

.ve-dark .a-plus-button a,
.a-plus-button.light a {
    color: #fff
}

.a-plus-button a > span {
    display: inline-block;
    position: absolute;
    top: 30%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    left: 50%;
    overflow: hidden;
}

.a-plus-button a > span > span {
    display: block;
    -webkit-transform: translateY(100%);
    -ms-transform: translateY(100%);
    transform: translateY(100%);
    -webkit-transition: -webkit-transform .3s ease .3s;
    transition: -webkit-transform .3s ease .3s;
    -o-transition: transform .3s ease .3s;
    transition: transform .3s ease .3s;
    transition: transform .3s ease .3s, -webkit-transform .3s ease .3s;
}

.a-plus-button:hover a > span > span {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0)
}

.a-plus-button:hover::after {
    -webkit-transform: translateX(-50%) rotate(270deg);
    -ms-transform: translateX(-50%) rotate(270deg);
    transform: translateX(-50%) rotate(270deg);
}

/*------------------------------------------------------------------
## Fullscreen Wall
-------------------------------------------------------------------**/

.fullscreen-wall-showcase {
    position: absolute;
    width: 100%;
    height: 100%;
}

.fw-projects {
    position: absolute;
    top: 50%;
    left: 7.5%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    display: block;
    width: 70%;
    z-index: 1
}

.fw-projects .fwt-line {
    overflow: hidden
}

.fw-images {
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    pointer-events: none
}

.portfolio-showcase .fw-images .plyr__video-wrapper {
    width: calc((100vh) * 1.77777778)
}

.fw-images .fw-project-image,
.fw-images .fw-project-image img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: top;
    object-position: top;
}

.fw-images .fw-project-image {
    position: absolute;
    top: 0;
    right: 0;
}

.fw-project {
    display: inline-block;
    padding: 20px 0;
    cursor: pointer;
    overflow: hidden;
    padding-right: 5px
}



.fw-project a {
    text-decoration: none;
    color: #191b1d;
    display: inline-block;

}


.ve-dark .fw-project a,
.fullscreen-wall-showcase.dark .fw-project a {
    color: #fff
}

.fw-projects .fw-project-image {
    display: none
}

.fw-project .fw-project-category {
    display: none
}

.fw-project-title {
    font-size: 60px;
    font-weight: 700;
    letter-spacing: -0.06em;
    display: inline-block;
    -webkit-transition: opacity .3s ease;
    -o-transition: opacity .3s ease;
    transition: opacity .3s ease;
}

.fw-project.opdown .fw-project-title {
    opacity: .2
}

.fw-project.active.opdown .fw-project-title {
    opacity: 1;
}


.fw-project-image-wrap {
    position: absolute;
    top: 0;
    right: 0;
    width: 0%;
    height: 100%;
    overflow: hidden;
}

.fw-project::after {
    content: "/";
    display: inline-block;
    font-size: 60px;
    margin: 0 20px;
    font-weight: 700;
    color: rgba(25, 27, 29, .2);
}


.fwt-line .fw-project:last-child::after {
    display: none
}

.fw-cat {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.05em;
    color: rgba(25, 27, 29, .6);
    overflow: hidden
}

.ve-dark .fw-cat,
.fullscreen-wall-showcase.dark .fw-cat,
.ve-dark .fw-project::after,
.fullscreen-wall-showcase.dark .fw-project::after {
    color: hsla(0, 0%, 100%, .6)
}


/*------------------------------------------------------------------
## Fullscreen Carousel
-------------------------------------------------------------------**/


.portfolio-showcase.fullscreen-carousel-showcase {
    width: 100%;
    display: block;
    position: relative;
}

.swiper-slide.cs-project {
    height: 100vh;
    display: block;
    position: relative;
    border-right: 1px solid #e4e4e4;
    cursor: pointer
}

.cs-project .cs-project-image {
    display: none
}

.cs-images {
    position: fixed;
    display: block;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    z-index: -1
}

.cs-images .cs-project-image img,
.cs-images .cs-project-image {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}

.cs-project-dets {
    position: absolute;
    top: 50%;
    left: 10%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.cs-project-title {
    display: block;
    font-size: 50px;
    font-weight: 700;
    letter-spacing: -0.06em;
    max-width: 75%;
    line-height: 55px;
    margin-bottom: 10px;
}

.cs-project-cat {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.05em;
    color: #616161;
}

.cs-project-excerpt {
    display: block;
    overflow: hidden;
    max-height: 0;
    max-width: 70%;
    font-size: 14px;
    line-height: 28px;
    margin: 0;
    -webkit-transition: all .6s ease;
    -o-transition: all .6s ease;
    transition: all .6s ease
}

.cs-project.hovered .cs-project-excerpt {
    max-height: 100px;
    margin: 20px 0;
}

.cs-rpoject-button {
    display: none;
}

.swiper-slide.cs-project::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background: rgb(255 255 255 / 50%);
    width: 100%;
    height: 100%;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    z-index: -1;
    opacity: 0;
    -webkit-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}

.swiper-slide.cs-project.hovered::after {
    opacity: 1;

}



/*------------------------------------------------------------------
## Classic
-------------------------------------------------------------------**/
.portfolio-showcase.showcase-classic {
    width: 83%;
    display: block;
    margin: auto;
    position: relative;
    padding-top: 10%;
    overflow: hidden;
}

.sc-projects-wrapper {
    position: relative;
    width: 75%;
    float: right;
    overflow: hidden;
    height: 100%;
    display: block;
}

.sc-project-image {
    width: 45%;
    height: 100%;
}

.sc-project-image img {
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.sc-project {
    display: block;
    margin-bottom: 100px;
    float: left;
    width: 100%;
}

.sc-project:nth-child(even) {
    text-align: right;
}

.sc-project:nth-child(even) .sc-project-image {
    float: right
}

.sc-project-title {
    display: block;
    font-size: 40px;
    font-weight: 700;
    letter-spacing: -0.06em;

}

.sc-project-cat {
    font-size: 25px;
    font-weight: 700;
    letter-spacing: -0.05em;
    color: #8f8d8d;
}

.sc-project-meta {
    margin-top: 15px;
    padding-left: 15px;
    display: block;
    width: 100%;
}

.sc-project:nth-child(even) .sc-project-meta {
    float: right;
    padding-left: 0;
    padding-right: 15px
}

/*------------------------------------------------------------------
## List
-------------------------------------------------------------------**/

.portfolio-showcase.showcase-list {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden
}

.showcase-list-wrapper {
    position: relative;
    left: 25%;
    width: 100%;
    height: 100%;
    z-index: 4;
    margin-top: 250px
}

.portfolio-showcase.showcase-list .plyr {
    min-height: 500px
}

.sl-project {
    display: block;
    padding: 40px 0;
    cursor: pointer;
    z-index: auto;
    -webkit-transition: opacity .3s ease, -webkit-transform .3s ease;
    transition: opacity .3s ease, -webkit-transform .3s ease;
    -o-transition: transform .3s ease, opacity .3s ease;
    transition: transform .3s ease, opacity .3s ease;
    transition: transform .3s ease, opacity .3s ease, -webkit-transform .3s ease;
    position: relative;
}

.sl-project a {
    text-decoration: none;
    color: #191b1d;
    display: block;
    overflow: hidden
}

.showcase-list.dark .sl-project a,
.ve-dark .sl-project a {
    color: #fff
}

.sl-project.opdown {
    opacity: .1
}

.sl-project:hover {
    -webkit-transform: translateX(30px);
    -ms-transform: translateX(30px);
    transform: translateX(30px)
}

.sl-images {
    position: fixed;
    z-index: 0
}

.sl-images .sl-project-image {
    width: 50vw;
    position: absolute;
    top: 0;
    overflow: hidden;
    pointer-events: none;
    -webkit-transform: translateY(-50%) translateX(-50%);
    -ms-transform: translateY(-50%) translateX(-50%);
    transform: translateY(-50%) translateX(-50%);
    visibility: hidden
}

.sl-images .sl-project-image .sl-hover-wrap {
    width: 100%;
    height: 100%;
    -webkit-transform: scale(.7);
    -ms-transform: scale(.7);
    transform: scale(.7);
    overflow: hidden;
    -webkit-transition: -webkit-transform .6s cubic-bezier(0, 0.55, 0.45, 1);
    transition: -webkit-transform .6s cubic-bezier(0, 0.55, 0.45, 1);
    -o-transition: transform .6s cubic-bezier(0, 0.55, 0.45, 1);
    transition: transform .6s cubic-bezier(0, 0.55, 0.45, 1);
    transition: transform .6s cubic-bezier(0, 0.55, 0.45, 1), -webkit-transform .6s cubic-bezier(0, 0.55, 0.45, 1);
}

.sl-images .sl-project-image img {
    width: 100%;
    height: 100%;
    -webkit-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
    -webkit-transition: -webkit-transform .6s cubic-bezier(0, 0.55, 0.45, 1);
    transition: -webkit-transform .6s cubic-bezier(0, 0.55, 0.45, 1);
    -o-transition: transform .6s cubic-bezier(0, 0.55, 0.45, 1);
    transition: transform .6s cubic-bezier(0, 0.55, 0.45, 1);
    transition: transform .6s cubic-bezier(0, 0.55, 0.45, 1), -webkit-transform .6s cubic-bezier(0, 0.55, 0.45, 1);
}


.sl-images .sl-project-image.active .sl-hover-wrap {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1)
}

.sl-images .sl-project-image.active img {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1)
}

.sl-project-title {
    font-size: 100px;
    font-weight: 700;
    letter-spacing: -0.06em;
    position: relative;
    z-index: -1;
}


.sl-project::before {
    content: attr(data-index);
    position: absolute;
    left: 0;
    top: 20px;
    font-size: 16px;
    letter-spacing: 0;
    font-weight: 500;
    -webkit-transform: translateX(-150%);
    -ms-transform: translateX(-150%);
    transform: translateX(-150%);
    color: rgba(25, 27, 29, .6);
    opacity: 0
}

.sl-project-meta div {
    display: inline-block;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.05em;
    color: rgba(25, 27, 29, .6);
}

.showcase-list.dark .sl-project::before,
.ve-dark .sl-project::before,
.showcase-list.dark .sl-project-meta div,
.ve-dark .sl-project-meta div {
    color: hsla(0, 0%, 100%, .4)
}

.sl-project-cat::after {
    content: "/";
    display: inline-block;
    margin-left: 7px;
    opacity: .5;
}

.sl-project-meta {
    display: block;
    margin-top: 10px;
    margin-left: 5px;
    position: relative;
    z-index: -1
}

.sl-project:hover .sl-project-title,
.sl-project:hover .sl-project-meta {
    z-index: 5
}

.sl-scroll {
    display: block;
    position: relative;
    width: 100%;
    overflow: hidden
}

.portfolio-showcase.showcase-list .showcase-footer {
    position: fixed
}

/*------------------------------------------------------------------
## Fullscreen Slideshow
-------------------------------------------------------------------**/
.fullscreen-slider-showcase {
    display: block;
    position: relative;
    width: 100%;
    height: 100vh;

}

/* Avoid Chrome to see Safari hack */
@supports (-webkit-touch-callout: none) {

    .fullscreen-slider-showcase {
        /* The hack for Safari */
        height: -webkit-fill-available;
    }
}

.fullscreen-slider-showcase .slide-bgimg,
.fullscreen-slider-showcase .swiper-wrapper {
    -webkit-transition-timing-function: cubic-bezier(0.87, 0, 0.13, 1) !important;
    -o-transition-timing-function: cubic-bezier(0.87, 0, 0.13, 1) !important;
    transition-timing-function: cubic-bezier(0.87, 0, 0.13, 1) !important;
}

.fs-project.swiper-slide .fs-project-image {
    display: none
}

.fs-project {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    visibility: hidden;
    z-index: 2;
    pointer-events: none
}

.fs-project.active {
    visibility: visible
}

.fs-project-dets {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    display: block;
    width: 40%;
    left: 15%;
}

.fs-title {
    font-size: 80px;
    font-weight: 700;
    letter-spacing: -0.03em;
    margin-bottom: 30px;
    line-height: 100px;
    width: 100%;
    display: block;
    overflow: hidden
}

.fullscreen-slider-showcase.dark .fs-title,
.ve-dark .fullscreen-slider-showcase .fs-title {
    color: #fff
}

.fs-meta {
    display: inline-block;
    margin-left: 5px;
}

.fs-meta span {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.06em;
    color: rgba(25, 27, 29, .6);
    line-height: 25px;
}

.mos-img.fs-meta span {
    font-size: 17px;
    font-weight: 400;
    letter-spacing: 0.03em;
    color: rgba(25, 27, 29, 1);
    line-height: 25px;
    margin-top: 20px;
}

.fullscreen-slider-showcase.dark .fs-meta span,
.ve-dark .fullscreen-slider-showcase .fs-meta span {
    color: hsla(0, 0%, 100%, .5)
}


span.fs-year::before {
    content: "/";
    margin: 0 5px;
}

.fs-nav {
    display: block;
}

.fs-nav span {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.06em;
    display: inline-block;
    color: rgba(25, 27, 29, .6);
    cursor: pointer
}

.fs-nav span.swiper-pagination-progressbar-fill {
    background: #191b1d
}

.fullscreen-slider-showcase.dark .fs-nav span,
.ve-dark .fullscreen-slider-showcase .fs-nav span {
    color: hsla(0, 0%, 100%, .6)
}


span.fs-prog {
    width: 100px;
    height: 1px;
    background: rgba(25, 27, 29, .3);
    vertical-align: middle;
    margin-top: -1px;
    margin-left: 15px;
    margin-right: 15px;
    position: relative;
}

.fullscreen-slider-showcase.dark span.fs-prog,
.ve-dark .fullscreen-slider-showcase span.fs-prog {
    background: hsla(0, 0%, 100%, .2)
}

.fullscreen-slider-showcase.dark .swiper-pagination-progressbar.fs-prog .swiper-pagination-progressbar-fill,
.ve-dark .fullscreen-slider-showcase .swiper-pagination-progressbar.fs-prog .swiper-pagination-progressbar-fill {
    background: #fff
}

span.fs-prog-bar {
    background: #191b1d;
    width: 50%;
    height: 1px;
    position: absolute;
    left: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.fullscreen-slider-showcase.dark span.fs-prog-bar,
.ve-dark .fullscreen-slider-showcase span.fs-prog-bar {
    background: #fff
}

.fullscreen-slider-showcase.dark .swiper-pagination-progressbar.fs-prog .swiper-pagination-progressbar-fill,
.ve-dark .fullscreen-slider-showcase .swiper-pagination-progressbar.fs-prog .swiper-pagination-progressbar-fill {
    color: #fff
}

.fs-button {
    position: absolute;
    right: 20%;
    top: 32%;
    display: block;
    pointer-events: all
}

.fs-button a {
    text-decoration: none;
    color: #191b1d;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.05em;
    position: relative;
    display: block;
}

.fullscreen-slider-showcase.dark .fs-button a::after,
.ve-dark .fs-button a::after,
.fullscreen-slider-showcase.dark .fs-button a,
.ve-dark .fs-button a {
    color: #fff
}

.fs-button a::after {
    content: "\ea5d";
    font-family: IcoFont;
    font-size: 20px;
    vertical-align: middle;
    margin-left: 10px;
    margin-top: -1px;
    display: inline-block;
}

.fs-button,
.fs-meta,
.fs-fraction {
    overflow: hidden
}


.fs-tit-char {
    overflow: hidden;
    padding-right: 3px;
    margin-right: -3px
}

.fs-tit-char > span,
.fs-button > span,
.fs-meta > span,
.fs-fraction > span {
    display: block
}

.fs-images {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0
}

.fs-images .fs-project-image .fs-im-wrap {
    position: absolute;
    width: 100%;
    height: 100%
}

.fs-images .fs-project-image img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

.fs-fraction {
    display: block;
    position: absolute;
    left: 8.5%;
    top: 29.5%;
    overflow: hidden;
    z-index: 2
}

.fs-fraction span {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.06em;
    font-size: 15px;
    color: rgba(25, 27, 29, .6);
    display: block
}

.fullscreen-slider-showcase.dark .fs-fraction span,
.ve-dark .fs-fraction span {
    color: hsla(0, 0%, 100%, .4)
}

span.fs-tot::before {
    content: "/";
    margin-right: 5px;
}


.fs-img-wrap {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden
}

/*------------------------------------------------------------------
## Carousel
-------------------------------------------------------------------**/

.portfolio-showcase.carousel-showcase {
    width: 100%;
    height: 100vh
}

.cas-project-wrapper {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    position: absolute;
    top: 50%;
}

.cas-project {
    display: block;
    margin-right: 300px;
    width: 50vw;
    position: relative;
    height: 50vh;
}

.cas-project .cs-cat {
    display: none
}

.cas-project:last-child {
    margin-right: 0
}

.cas-headline {
    position: absolute;
    top: 50%;
    left: 8.5%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    max-width: 65vw;
    font-size: 60px;
    font-weight: 700;
    letter-spacing: -0.06em;
    line-height: 75px;
    padding-left: 5%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}



.cas-headline .cas-line {
    overflow: hidden;
    padding-right: 6px
}

.cas-headline .cas-line span {
    display: block
}

.cs-image {
    width: 100%;
    overflow: hidden;
    height: 100%;
}

.cs-image img {
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    height: 100%;
}


.cas-progress.swiper-pagination-progressbar {
    position: absolute;
    bottom: 5%;
    top: unset;
    width: 60%;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    height: 1px;
}

.cas-progress.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
    background: #191b1d;
}

.cas-titles {
    position: fixed;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
    height: 250px;
    overflow: hidden;
}

.cas-titles .cas-titles-wrap {
    display: block;
    position: relative;
    overflow: hidden;
    -webkit-transform: translateY(250px);
    -ms-transform: translateY(250px);
    transform: translateY(250px)
}

.cas-titles .cs-title {
    font-size: 150px;
    font-weight: 700;
    letter-spacing: -0.06em;
    white-space: nowrap;
    padding: 50px 0
}

.cas-titles .cs-title a {
    text-decoration: none;
    color: #191b1d;
    display: block;
    overflow: hidden
}

.cas-progress {
    display: block;
    position: fixed;
    bottom: 7.5%;
    width: 50%;
    height: 1px;
    background: rgba(25, 27, 29, .2);
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
}

.cas-progress span {
    position: absolute;
    left: 0;
    background: #191b1d;
    height: 100%;
    width: 0%;
}

.carousel-showcase.dark .cas-progress,
.ve-dark .cas-progress {
    background: hsla(0, 0%, 100%, .2)
}

.carousel-showcase.dark .cas-progressspan,
.ve-dark .cas-progress span {
    background: #fff
}

.cas-bg-text {
    font-size: 200px;
    font-weight: 700;
    letter-spacing: -0.07em;
    position: fixed;
    top: 10%;
    left: 0;
    white-space: nowrap;
    opacity: .02;
}

.ve-dark .cas-bg-text {
    opacity: .52;
}
.carousel-showcase.dark .cas-titles .cs-title a,
.ve-dark .cas-titles .cs-title a,
.carousel-showcase.dark .cas-headline,
.ve-dark .cas-headline {
    color: #fff
}

/*------------------------------------------------------------------
## SlideShow V1
-------------------------------------------------------------------**/
.portfolio-showcase.showcase-slideshow {
    width: 100%;
    height: 100vh;
    position: fixed;
    background: #fff;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
} 

/* Avoid Chrome to see Safari hack */
@supports (-webkit-touch-callout: none) {

    .portfolio-showcase.showcase-slideshow {
        /* The hack for Safari */
        height: -webkit-fill-available;
    }
}

.showcase-slideshow-wrapper {
    position: absolute;
    top: 50%;
    right: 10%;
    -webkit-transform: translatey(-50%);
    -ms-transform: translatey(-50%);
    transform: translatey(-50%);
    width: 35%;
    height: 68%;
}

.ss-project {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    visibility: hidden;

}

.ss-project.active {
    visibility: visible
}


.ss-project .ss1-image {
    display: none
}

.ss1-image img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.ss1-details {
    position: relative;
    top: 40%;
    left: 0;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 100%;
    overflow: hidden
}

.ss1-met-wrap {
    display: block;
    float: right;
    width: 60%;
}

.ss1-title {
    font-size: 100px;
    font-weight: 700;
    letter-spacing: -0.06em;
    float: left;
    width: 100%;
    display: block;
    line-height: 120px
}


.ss1-title .st-line {
    display: block;

}

.ss1-summary {
    float: left;
    width: 100%;
    margin-top: 50px;
    font-size: 14px;
    line-height: 25px;
}

.ss1-date {
    position: absolute;
    top: 0;
    right: 0;
}

.ss1-cat {
    display: block;
    font-size: 25px;
    line-height: 30px;
    font-weight: 700;
    letter-spacing: -0.05em;
    color: rgba(25, 27, 29, .6);
    margin-left: 100px;
    margin-bottom: 30px;
    float: left;
    overflow: hidden;
}
.ss1-cat span {
   position: relative;
   padding-right: 20px;
   margin-right: 6px;
}

.showcase-slideshow.dark .ss1-title,
.showcase-slideshow.dark .ss1-dots.swiper-pagination-bullets span,
.showcase-slideshow.dark .ss1-date,
.ve-dark .ss1-title,
.ve-dark .ss1-dots.swiper-pagination-bullets span,
.ve-dark .ss1-date {
    color: #fff
}

.showcase-slideshow.dark .ss1-cat,
.ve-dark .ss1-cat,
.showcase-slideshow.dark .ss1-summary,
.ve-dark .ss1-summary {
    color: hsla(0, 0%, 100%, .4)
}

.ss1-images {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.ss1-images .ss1-image-wrap img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.ss1-image-wrap {
    width: 100%;
    height: 100%;
}

.ss1-image-wrap.active {
    width: 100%
}


.ss1-image-wrapper {
    position: absolute;
    top: 0;
    left: 0;
}

.ss1-sl-image {
    -webkit-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease
}

.ss1-sl-image {
    position: absolute;
    top: 50%;
    left: 15%;
    -webkit-transform: translatey(-50%);
    -ms-transform: translatey(-50%);
    transform: translatey(-50%);
    width: 50%;
    height: 62%;
    overflow: hidden;
}

.ss1-sl-image .plyr__video-wrapper {
    width: calc((75vh) * 1.77777778) !important
}

.ss1-sl-image img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.ss1-images .swiper-wrapper {
    -webkit-transition-timing-function: cubic-bezier(0.51, 0.51, 0, 1.01);
    -o-transition-timing-function: cubic-bezier(0.51, 0.51, 0, 1.01);
    transition-timing-function: cubic-bezier(0.51, 0.51, 0, 1.01);
}

.ss1-dots.swiper-pagination-bullets {
    position: absolute;
    top: 50%;
    left: 8%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index: 3
}

.ss1-dots.swiper-pagination-bullets span {
    width: auto;
    height: auto;
    background: none !important;
    display: block;
    margin-bottom: 40px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: -0.04em;
    cursor: pointer;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

.ss1-dots.swiper-pagination-bullets span:last-child {
    margin-bottom: 0;
}

.ss1-fraction {
    position: absolute;
    right: 8%;
    bottom: 5%;
}

.ss1-fraction div {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.05em;
}

.ss1-curr::after {
    content: "";
    display: block;
    width: 1px;
    height: 30px;
    background: rgba(25, 27, 29, .6);
    margin: 10px auto;
}

.showcase-slideshow.dark .ss1-fraction div,
.ve-dark .ss1-fraction div {
    color: #fff
}

.showcase-slideshow.dark .ss1-curr::after,
.ve-dark .ss1-curr::after {
    background: hsla(0, 0%, 100%, .2)
}

.ss1-button {
    display: block;
    border-radius: 50px;
    background: #ebebeb;
    display: inline-block;
    position: absolute;
    right: 20%;
    bottom: 20%;
    overflow: hidden;
    white-space: nowrap
}

.ss1-button a {
    display: block;
    text-decoration: none;
    color: #191b1d;
    padding: 20px 40px;
}

.ve-dark .ss1-button {
    background: hsla(0, 0%, 100%, .2)
}

.ve-dark .ss1-button a {
    color: #fff
}

.ss1-button a::after {
    content: "\ea94";
    font-family: IcoFont;
    font-size: 20px;
    display: inline-block;
    vertical-align: middle;
}

.ss1-nav {
    position: absolute;
    bottom: 5%;
    left: 8%;
}

.ss1-nav i {
    font-size: 25px;
}

.ss1-prev::after {
    content: "";
    display: block;
    width: 1px;
    height: 20px;
    background: #191b1d;
    margin: 0 auto;
    margin-top: -16px;
}

.ss1-next::before {
    content: "";
    display: block;
    width: 1px;
    height: 20px;
    background: #191b1d;
    margin: 0 auto;
    margin-bottom: -16px;
}

.ss1-nav div {
    padding: 10px 0;
    cursor: pointer;
}

.showcase-slideshow.dark .ss1-nav div,
.ve-dark .ss1-nav div {
    color: #fff
}

.showcase-slideshow.dark .ss1-prev::after,
.showcase-slideshow.dark .ss1-next::before,
.ve-dark .ss1-prev::after,
.ve-dark .ss1-next::before {
    background: #fff;
    color: #fff
}

.tl-wrap,
.ssum-line {
    display: block;
    overflow: hidden
}

/*------------------------------------------------------------------
## SlideShow V2
-------------------------------------------------------------------**/

.ss2-project {
    position: absolute;
    width: 100%;
    height: 100%;
}

.portfolio-showcase.showcase-slideshow-v2 {
    position: relative;
    width: 100%;
    height: 100vh;
	margin-top: -50px; /*fira newline*/
}

.portfolio-showcase.showcase-slideshow-v2::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background: #191b1d;
    width: 100%;
    height: 100%;
    z-index: 3;
    opacity: 0;
    pointer-events: none;

}

.showcase-slideshow-2-wrapper {
    display: block;
    position: relative;
    max-width: 35%;
    height: 70%;
    top: 50%;
    left: 16%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.ss2-project-meta {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.ss2-project-image {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute
}

.ss2-project-image img {
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    height: 100%;
}

.ss2-project .ss2-project-image {
    display: none
}

.ss2-images {
    position: absolute;
    right: 8.5%;
    top: 50%;
    width: 35%;
    height: 70%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.slide-bgimg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: cover;
}

.ss2-project-title {
    font-size: 100px;
    font-weight: 700;
    letter-spacing: -0.06em;
    display: block;
    margin-bottom: 30px;
    line-height: 120px;
	margin-top: -15px; /*fira newline*/
}

.ve-dark .ss2-button a,
.showcase-slideshow-v2.dark .ss2-button a,
.showcase-slideshow-v2.dark .ss2-dots span.ss2-dot,
.ve-dark .ss2-dots span.ss2-dot,
.ve-dark .ss2-project-cat,
.showcase-slideshow-v2.dark .ss2-project-cat,
.ve-dark .ss2-project-title,
.showcase-slideshow-v2.dark {
    color: #fff
}

.ve-dark .ss2-overlay,
.showcase-slideshow-v2.dark .ss2-overlay {
    color: #131313
}

.ss2-project-cat {
    display: inline-block;
    margin-bottom: 25px;
    overflow: hidden;
    line-height: 35px;
    font-size: 25px;
    font-weight: 700;
    letter-spacing: -0.06em;
    color: rgba(25, 27, 29, .6)
}

.ve-dark .ss2-project-excerpt,
.showcase-slideshow-v2.dark .ss2-project-excerpt,
.ve-dark .ss2-project-cat,
.showcase-slideshow-v2.dark .ss2-project-cat {
    color: hsla(0, 0%, 100%, .4)
}

.ve-dark .ss2-back-texts,
.showcase-slideshow-v2.dark .ss2-back-texts {
    color: hsla(0, 0%, 100%, .01)
}

.ss2-project-cat span {
    display: block;
}

.ss2-project-excerpt {
    width: 60%;
	font-size: 15px; /*fira font-size: 14px;*/
	line-height: 24px; /*fira line-height: 28px;*/
    margin-left: 7px;
    color: rgba(25, 27, 29, 90%); /*fira color: rgba(25, 27, 29, .4);*/
	font-family: 'Roboto','Arial'; /*fira newline*/
}

.ss2-project-excerpt > div {
    display: block;
    overflow: hidden
}

.ss2-project-excerpt > div > span {
    display: block
}


.ss2-overlay {
    position: absolute;
    right: 0;
    top: 0;
    width: 25%;
    height: 100%;
    background: #ebebeb;
    z-index: -2;
}

.ve-dark .ss2-button,
.showcase-slideshow-v2.dark .ss2-button,
.ve-dark .ss2-overlay,
.showcase-slideshow-v2.dark .ss2-back-texts {
    background: #131313
}

.fullscreen-footer.ss2-footer {
    position: absolute;
    bottom: 8%;
    left: 7.5%;
    display: block;
    right: 7.5%;
}

.ss2-footer-left {
    position: absolute;
    left: 0;
    bottom: 30px
}

.ss2-footer-right {
    position: absolute;
    right: 0;
}

.ss2-dots {
    position: absolute;
    left: 8.5%;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
	display: none; /*fira newline*/
}

.ss2-dots span.ss2-dot {
    display: block;
    cursor: pointer;
    margin-left: 25px;
    opacity: .3;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: -0.05em;
    padding: 15px 0;
    background: none;
    width: 0;
    height: 0;
    border-radius: 0;
    -webkit-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
    margin-bottom: 20px;
}

.ss2-dot::after {
    content: "";
    display: inline-block;
    width: 0;
    height: 1px;
    background: #191b1d;
    vertical-align: middle;
    margin-top: -25px;
    margin-left: 20px;
    -webkit-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}

.ss2-dots span.ss2-dot:hover {
    opacity: .6
}

.ss2-dots span.ss2-dot.swiper-pagination-bullet-active {
    opacity: 1;
    margin-left: 0;
}

.ss2-dot.swiper-pagination-bullet-active::after {
    width: 20px;
}

.ss2-project .title-line {
    overflow: hidden
}

.ss2-project {
    visibility: hidden
}

.ss2-project.active {
    visibility: visible
}

.ss2-nav {
    position: absolute;
    bottom: 8%;
    right: 25%;
    -webkit-transform: translateX(-30%);
    -ms-transform: translateX(-30%);
    transform: translateX(-30%);
}

.ss2-nav div {
    display: inline-block;
    cursor: pointer;
    vertical-align: middle
}

.ss2-nav i {
    font-size: 25px;
    display: inline-block;
    vertical-align: middle;
}

.ss2-prev::after {
    content: "";
    display: inline-block;
    width: 15px;
    height: 1px;
    background: #191b1d;
    vertical-align: middle;
    margin-left: -15px;
}

.ss2-nav div.ss2-prev {
    margin-right: 15px;
}

.ss2-next::before {
    content: "";
    display: inline-block;
    width: 15px;
    height: 1px;
    background: #191b1d;
    vertical-align: middle;
    margin-right: -15px;
}

.ss2-nav div.ss2-next {
    margin-left: 15px;
}

.ss2-fract div {
    display: inline-block;
    font-size: 12px;
}

.ss2-fract .ss2-curr::after {
    content: '/';
    display: inline-block;
    margin-left: 4px;
}

.ss2-back-texts {
    position: absolute;
    top: 22%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    font-size: 220px;
    font-weight: 700;
    white-space: nowrap;
    color: rgba(25, 27, 29, .02);
    width: 100%;
    height: auto;
}

.ss2-back-text {
    position: absolute;
    top: 0;
    left: 0;
    visibility: hidden;
}

.ss2-back-text.active {
    visibility: visible
}

.ss2-back-text .bt-char {
    overflow: hidden
}

.ss2-back-text .bt-char span {
    display: block
}

.ss2-button {
    position: absolute;
    width: 150px;
    height: 150px;
	background: #ebebeb85; /*fira background: #ebebeb;*/
    border-radius: 50%;
	/*fira remove line bottom: 20%;*/
    left: 50%;
    -webkit-transform: translateX(-80%);
    -ms-transform: translateX(-80%);
    transform: translateX(-80%);
    z-index: 2;
}

.ss2-button a {
    text-decoration: none;
    color: #191b1d;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: auto;
    white-space: nowrap;
    display: block;
}

.ss2-button a::after {
    content: "\eac7";
    display: block;
    text-align: center;
    font-family: IcoFont;
    margin-top: 10px;
    font-size: 20px;
}

/*------------------------------------------------------------------
## Wall
-------------------------------------------------------------------**/

.project-image {
    display: none
}

.portfolio-showcase.showcase-wall {
    position: relative;
    width: 100%;
    height: 100vh;

}

.wall-projects {
    position: absolute;
    top: 57%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 100%;
}

.wall-projects-top,
.wall-projects-bottom {
    white-space: nowrap;
    display: inline-block;
    width: auto;

}

.wall-projects-top {
    margin-bottom: 30px;
    -webkit-transform: translateX(10%);
    -ms-transform: translateX(10%);
    transform: translateX(10%)
}

.wall-projects-bottom {
    float: right;
    -webkit-transform: translateX(-10%);
    -ms-transform: translateX(-10%);
    transform: translateX(-10%)
}

.wall-project {
    display: inline-block;
}


.wall-project a {
    text-decoration: none;
    color: #191b1d;
    display: block;
}

.showcase-wall.dark .wall-project a,
.ve-dark .wall-project a {
    color: #fff
}

.wall-project .project-title {
    font-size: 120px;
    font-weight: 700;
    letter-spacing: -0.07em;
    line-height: 125px;
    overflow: visible
}

.wall-project .project-title::after {
    content: "/";
    opacity: .3;
    margin: 0 30px;
}

.wall-project .project-title::before {
    content: attr(data-index);
    position: absolute;
    top: 0;
    left: 0;
    font-size: 20px;
    display: inline-block;
    line-height: 20px;
    width: 20px;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0;
    color: rgba(25, 27, 29, .6);
}

.showcase-wall.dark .wall-project .project-title::before,
.ve-dark .wall-project .project-title::before {
    color: hsla(0, 0%, 100%, .2)
}

.wall-project:last-child .project-title::after {
    display: none
}

#images-canvas {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}

.wall-projects.on-hover .wall-project {
    opacity: .2;
}

.wall-projects.on-hover .wall-project.hovered {
    opacity: 1;
}

.wall-images {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 30%;
    height: 70%;
    z-index: -2;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    display: block
}

.wall-image-fix {
    width: 100%;
    height: 100%;
    position: absolute;
    overflow: hidden;
    left: 0;
    visibility: hidden;
}


.wall-images img {
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: top;
    object-position: top
}

.showcase-wall .circular-button {
    position: relative;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
    display: block;
    left: 0;
    bottom: 0;
}

.wall-drag {
    position: absolute;
    width: 50%;
    height: 1px;
    bottom: 10%;
    background: rgba(25, 27, 29, .3);
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
}

.ve-dark .wall-drag,
.showcase-wall.dark .wall-drag {
    background: hsla(0, 0%, 100%, .2)
}

span.wall-prog {
    position: absolute;
    left: 0;
    width: 0%;
    height: 1px;
    background: #191b1d;
    z-index: 6;
}

.ve-dark span.wall-prog,
.showcase-wall.dark span.wall-prog {
    background: #fff
}

/*------------------------------------------------------------------
# Shortcodes
-------------------------------------------------------------------**/

/*------------------------------------------------------------------
##  Image Carousel
-------------------------------------------------------------------**/

.mx-image-carousel {
    position: relative;
    display: block;
    overflow: hidden;
    margin: 50px 0;
}

.ai-wrapper {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    width: auto;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding-left: 30px
}

.ai-image {
    display: block;
    margin-right: 30px;
    -ms-flex-preferred-size: 40vw;
    flex-basis: 40vw;
    min-width: 40vw;
    position: relative;
}

.ai-image img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}


/*------------------------------------------------------------------
## Embed Video
-------------------------------------------------------------------**/


.mx-embed-video {
    position: relative;
}

.mx-embed-video .plyr--full-ui input[type="range"] {
    color: #000
}

.mx-embed-video .plyr--video .plyr__control.plyr__tab-focus,
.mx-embed-video .plyr--video .plyr__control:hover,
..mx-embed-video plyr--video .plyr__control[aria-expanded="true"] {
    background: #000
}

.mx-embed-video .plyr__control--overlaid {
    background: #000;
}

.mx-embed-video .plyr__video-embed iframe {
    top: -50%;
    height: 200%;
}

.mx-embed-video .plyr--full-ui.plyr--video .plyr__control--overlaid {
    display: none;
}



.mx-embed-video .video-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 123px;
    height: 123px;
    background: rgba(0, 0, 0, 0.49);
    z-index: 1;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    border-radius: 50%;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    -webkit-transition: all .4s ease;
    -o-transition: all .4s ease;
    transition: all .4s ease;
    cursor: pointer;
}

.mx-embed-video .video-overlay:hover {
    width: 130px;
    height: 130px;
}


.mx-embed-video .play-button {
    position: absolute;
    top: 50%;
    left: 53%;
    z-index: 2;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 40px;
    width: 0;
    height: 0;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-left: 30px solid #fff;
    -webkit-transition: all .4s ease;
    -o-transition: all .4s ease;
    transition: all .4s ease;
}

.mx-embed-video .plyr__controls {
    opacity: 0;
}

.mx-embed-video.video-play .plyr__controls {
    opacity: 1;
}


.mx-embed-video.video-play .video-overlay {
    opacity: 0;
    pointer-events: none;
}

/*------------------------------------------------------------------
## Text Wrapper
-------------------------------------------------------------------**/

.text-wrapper {
    display: block;
    float: left;
    width: 100%
}

.text-wrapper .sub-title {
    font-size: 17px;
    letter-spacing: -0.3px;
    display: block;
    margin-bottom: 20px;
}


/*------------------------------------------------------------------
## Scroll Animationss
-------------------------------------------------------------------**/

.line-holder {
    overflow: hidden;
    display: block
}

.word-holder,
.char-holder {
    overflow: hidden;
    display: inline-block;
    vertical-align: middle
}

.has-anim {
    display: block;
    width: 100%
}

.img-anim-wrapper {
    display: block;
    position: relative;
    width: 100%;
    overflow: hidden;
}

.img-anim-ov {
    position: absolute;
    display: block;
    pointer-events: none;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: 1
}

.img-anim-wrapper img {
    -webkit-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2)
}

.single-image span {
    display: block;
    position: absolute;
}

.anim_line {
    display: block;
    overflow: hidden
}


/*------------------------------------------------------------------
# Responsive
-------------------------------------------------------------------**/

/*------------------------------------------------------------------
## Tablets
-------------------------------------------------------------------**/



@media (min-width: 450px) and (max-width: 900px) {

    body,
    html {
        overflow-x: hidden;
        width: 100%;
    }


    .c-col-4,
    .c-col-8,
    .c-col-9,
    .c-col-10 {
        width: 100%
    }

    .site-navigation.fullscreen ul ul li {
        font-size: 30px;
        line-height: 55px;
        letter-spacing: -0.05em
    }

    .sl-project-title {
      font-size: 60px;
      font-weight: 600;
      letter-spacing: -0.04em;
    }
    .aph-image {
        width: 75%
    }

    .aph-name {
        font-size: 100px;
        left: 0;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none;
        text-align: center;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
    }


    .aph-name.back {
        display: none
    }

    .aph-welc {
        display: none
    }

    .aph-name .name-back {
        opacity: 1;
        visibility: visible
    }

    .aph-details {
        top: unset;
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        transform: translateX(-50%);
        bottom: 15%;
        z-index: 99;
        width: 50%
    }

    .aph-sub-text {
        max-width: 100%;
        -webkit-transform: translateY(-100px);
        -ms-transform: translateY(-100px);
        transform: translateY(-100px);
        text-align: center
    }

    .mx-personal-head .circular-button {
        z-index: 10;
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        transform: translateX(-50%);
        bottom: 5%;
        left: 50%;
    }

    .ai-image {
        min-width: 70vw;
        -ms-flex-preferred-size: 70vw;
        flex-basis: 70vw
    }

    .showcase-slideshow-2-wrapper {
        max-width: 100%;
        width: 100%;
        left: 0;
        height: 100%;
    }

    .ss2-images {
        right: 0;
        width: 100%;
        height: 100%;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none;
        top: 0;
        z-index: -1
    }

    .ss2-project-title {
        font-size: 100px;
        line-height: 120px;
    }

    .ss2-project-meta {
        left: 10%;
        width: 80%
    }

    .ss2-back-texts {
        display: none
    }

    .ss2-dots {
        display: none
    }

    .ss2-project-excerpt {
        display: none
    }

    .ss2-nav {
        position: absolute;
        bottom: 5%;
        right: 5%;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none;
    }

    .ss2-button {
        bottom: 5%;
        opacity: .6
    }

    .portfolio-showcase.showcase-slideshow-v2 .plyr__video-wrapper {
        width: calc((100vh) * 1.77777778)
    }

    .fs-title {
        font-size: 80px;
        line-height: 95px
    }

    .fs-project-dets {
        width: 80%;
    }

    .fs-button {
        right: 10%;
        top: 30%
    }

    .showcase-slideshow-wrapper {
        width: 50%
    }

}


/*------------------------------------------------------------------
## Phone
-------------------------------------------------------------------**/

@media only screen and (max-width: 450px) {


    html,
    body {
        overflow-x: hidden
    }

    .hide_mobile {
        display: none
    }

    .hide_desktop {
        display: block
    }

    /* ------- ### Headings ------- **/

    h1.big-title {
        font-size: 50px;
        line-height: 65px;
        margin-bottom: 0;
        margin-bottom: 10px;
        padding-right: 0;
        margin-left: 0;
    }

    .heading-bg-text {
        font-size: 100px;
        -webkit-transform: translatex(-30%) translateY(30%);
        -ms-transform: translatex(-30%) translateY(30%);
        transform: translatex(-30%) translateY(30%);
    }



    /* ------- ## Showcase Layouts ------- **/
    /* ------- ### Showcase Carousel ------- **/



    .cas-headline {
        font-size: 30px;
        line-height: 45px;
        max-width: 70vw;
        padding-left: 0
    }

    .cas-project {
        width: 80vw;
        height: 60vh
    }

    .cas-titles .cs-title {
        font-size: 40px;
        padding: 20px 0
    }

    .cas-titles {
        height: 80px
    }

    .cas-titles .cas-titles-wrap {
        -webkit-transform: translateY(80px);
        -ms-transform: translateY(80px);
        transform: translateY(80px)
    }

    .cas-progress {
        display: none
    }

    /* ------- ### Fullscreen Slider ------- **/

    .fs-project-dets {
        width: 90%;
        left: 8.5%;
    }

    .fs-title {
        font-size: 65px;
        line-height: 70px;
        margin-bottom: 20px
    }

    span.fs-prog {
        width: 50px
    }

    .fs-button {
        position: absolute;
        left: 8.5%;
        top: 29.5%;
        display: block;
    }

    .fs-fraction {
        top: 22.5%
    }

    /* ------- ### Showcase List ------- **/

    .sl-project-title {
        font-size: 40px
    }

    .showcase-list-wrapper {
        left: 50%;
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        transform: translateX(-50%);
        margin-top: 150px;
        text-align: center
    }

    .sl-project {
        padding: 20px 0
    }

    .sl-project-meta div {
        font-size: 15px
    }

    .sl-project-title::before {
        display: none
    }

    .sl-project:hover {
        -webkit-transform: none;
        -ms-transform: none;
        transform: none
    }

    .sl-images .sl-project-image {
        width: 90vw;
    }


    /* ------- ### Testimonials ------- **/

    .testimonial-text {
        font-size: 25px;
        line-height: 34px
    }

    .a-testimonials.autoplay .a-testimonials-count {
        width: 50px
    }

    /* ------- ## ------- **/
    .ai-image {
        min-width: 100vw
    }


    /* ------- ### Fullscreen Slideshow ------- **/

    .ss1-sl-image {
        position: absolute;
        top: 0;
        left: 0;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    .showcase-slideshow-wrapper {
        position: absolute;
        top: 40%;
        right: unset;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        width: 100%;
        height: 100%;
        left: 50%;
    }

    .ss1-cat {
        margin-left: 0;
        font-size: 20px;
        float: unset;
        margin-bottom: 0;
    }

    .ss1-met-wrap {
        display: none
    }

    .ss1-title {
        font-size: 50px;
        line-height: 70px
    }

    .ss1-details {
        position: absolute;
        top: 30%;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        width: 80%;
        left: 10%;
        text-align: center;
    }

    .ss1-nav {
        display: none
    }

    .ss1-dots.swiper-pagination-bullets {
        bottom: 5%;
        left: 8%;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none;
        top: unset
    }

    .ss1-button {
        right: unset;
        left: 50%;
        bottom: 10%;
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        transform: translateX(-50%);
    }

    .ss1-sl-image .plyr__video-wrapper {
        width: calc((100vh) * 1.77777778) !important;
    }

    .project-featured-video .plyr__video-embed,
    .project-featured-video .plyr__video-wrapper--fixed-ratio {
        height: 100%;
        width: calc((100vh) * 1.77777778) !important
    }



    .fw-projects {
        width: 100%;
        left: 10%;
    }

    .fw-project-title {
        font-size: 30px
    }

    .fw-project {
        padding: 10px 0;
        display: block
    }

    .fw-project::after {
        font-size: 30px
    }

    .fw-project a {
        pointer-events: none
    }

    .aph-name {
        font-size: 60px;
        left: 0;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none;
        text-align: center;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
    }

    .aph-image {
        width: 100%
    }


    .aph-name.back {
        display: none
    }

    .aph-welc {
        display: none
    }

    .aph-name .name-back {
        opacity: 1;
        visibility: visible
    }

    .aph-details {
        top: unset;
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        transform: translateX(-50%);
        bottom: 0;
        z-index: 99
    }

    .aph-sub-text {
        max-width: 100%;
        -webkit-transform: translateY(-100px);
        -ms-transform: translateY(-100px);
        transform: translateY(-100px);
        text-align: center
    }

    .mx-personal-head .circular-button {
        display: none
    }


    .apc-product {
        height: 80%;
        width: 70vw
    }

    .apc-cats ul li::after {
        display: none
    }

    .apc-cats ul li {
        font-size: 30px;
        margin-bottom: 15px;
        display: block
    }


    .apc-cat-title {
        font-size: 30px
    }

    .apc-cat-quant {
        font-size: 12px;
        margin-left: 10px
    }

    .apc-cat-mark {
        font-size: 35px
    }

    .apcats-cat {
        padding: 25px 0
    }

    .ap-cta-det {
        left: 35px;
        top: 50% !important;
        bottom: unset !important;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
    }

    .ap-cta-title {
        font-size: 25px;
        margin: 10px 0
    }

    .showcase-slideshow-2-wrapper {
        max-width: 100%;
        width: 100%;
        left: 0;
        height: 100%;
    }

    .ss2-images {
        right: 0;
        width: 100%;
        height: 100%;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none;
        top: 0;
        z-index: -1
    }

    .ss2-project-title {
        font-size: 50px;
        line-height: 60px;
    }

    .ss2-project-meta {
        left: 10%;
        width: 80%
    }

    .ss2-back-texts {
        display: none
    }

    .ss2-dots {
        display: none
    }

    .ss2-project-excerpt {
        display: none
    }

    .ss2-nav {
        position: absolute;
        bottom: 5%;
        right: 5%;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none;
    }

    .ss2-button {
        bottom: 5%;
        opacity: .6
    }

    .portfolio-showcase.showcase-slideshow-v2 .plyr__video-wrapper {
        width: calc((100vh) * 1.77777778)
    }

    .fw-images {
        width: 100%
    }

    .wall-project .project-title {
        font-size: 60px;
        line-height: 60px
    }

    .wall-projects-top {
        margin-bottom: 0
    }

    .mx-works.column_2 .aw-works-sizer,
    .mx-works.column_2 .aw-project {
        width: 100%
    }

    .aw-project {
        margin-bottom: 50px;
        height: 300px
    }

    .aw-project-title {
        font-size: 25px;
        letter-spacing: -0.05em
    }

    ul.aw-cats li {
        font-size: 20px;
        letter-spacing: -0.05em;
        padding-bottom: 10px
    }

    .aw-categories {
        margin-bottom: 0
    }

    .aw-works-stamp {
        height: 35px
    }

    .mx-embed-video .video-overlay {
        width: 80px;
        height: 80px
    }

    .mx-embed-video .play-button {
        border-top: 10px solid transparent;
        border-bottom: 10px solid transparent;
        border-left: 15px solid #fff;
    }

    .wall-images {
        width: 84%
    }

}

@media (max-width: 768px) {
.showcase-slideshow-v2 .ss2-button a,
.showcase-slideshow-v2 .ss2-dots span.ss2-dot,
.showcase-slideshow-v2 .ss2-curr,
.showcase-slideshow-v2 .ss2-tot,
.showcase-slideshow-v2 .ss2-next,
.showcase-slideshow-v2 .ss2-prev,
.showcase-slideshow-v2 .ss2-project-cat,
.showcase-slideshow-v2 .ss2-project-title{
    color: #fff
}
.showcase-slideshow-v2 .ss2-next::before,.showcase-slideshow-v2 .ss2-prev::after {
  background: #fff;
}
.showcase-slideshow-v2 .ss2-button {
  background: #000;
}
}