/*!
Theme Name: Ducpnm
Theme URI: https://them.es/starter
Author: Ducpnm Team
Author URI: https://Ducpnm.vn
Description: Ducpnm.vn - A creative web design & development agency
Version: 2.4.4
Requires at least: 5.0
Tested up to: 5.7
Requires PHP: 7.2
License: GPL version 2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0
Tags: custom-background, custom-colors, featured-images, flexible-header, microformats, post-formats, rtl-language-support, theme-options, translation-ready, accessibility-ready
Text Domain: Ducpnm
*/

/* Don't overwrite this file. Compile "/assets/main.(less|scss)" to "/assets/css/main.css" */

/* From http://codex.wordpress.org/CSS */

@font-face {
  font-family: "Plus";
  src: url("assets/fonts/PlusJakartaSans-Medium.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Plus";
  src: url("assets/fonts/PlusJakartaSans-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Plus";
  src: url("assets/fonts/PlusJakartaSans-Light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Plus";
  src: url("assets/fonts/PlusJakartaSans-Bold.woff") format("woff");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

:root {
  --heading-font: "Plus", sans-serif;
  --body-font: "Plus", sans-serif;
  --small-shadow: 0 10px 50px 0 rgb(231 230 236 / 53%);
  --medium-shadow: 0 5px 20px 0 rgb(39 40 40 / 15%);
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--heading-font);
  font-weight: bold !important;
  color: var(--dark);
}
ul {
  margin-bottom: 0 !important;
}
a:hover {
  text-decoration: none !important;
}

body {
  font-family: var(--body-font) !important;
  font-weight: normal !important;
  color: var(--gray-dark) !important;
}

strong {
  font-family: var(--body-font);
  font-weight: bold !important;
  color: var(--dark) !important;
}

.alignnone {
  margin: 5px 20px 20px 0;
}

.aligncenter,
div.aligncenter {
  display: block;
  margin: 5px auto 5px auto;
}

.alignright {
  float: right;
  margin: 5px 0 20px 20px;
}

.alignleft {
  float: left;
  margin: 5px 20px 20px 0;
}

a img.alignright {
  float: right;
  margin: 5px 0 20px 20px;
}

a img.alignnone {
  margin: 5px 20px 20px 0;
}

a img.alignleft {
  float: left;
  margin: 5px 20px 20px 0;
}

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

.wp-caption {
  max-width: 96%; /* Image does not overflow the content area */
  padding: 5px 3px 10px;
  text-align: center;
}
.wp-caption.alignnone {
  margin: 5px 20px 20px 0;
}
.wp-caption.alignleft {
  margin: 5px 20px 20px 0;
}
.wp-caption.alignright {
  margin: 5px 0 20px 20px;
}
.wp-caption img {
  border: 0 none;
  height: auto;
  margin: 0;
  max-width: 98.5%;
  padding: 0;
  width: auto;
}
.wp-caption p.wp-caption-text {
  font-size: 11px;
  line-height: 17px;
  margin: 0;
  padding: 0 4px 5px;
}

.gallery-item {
  display: inline-block;
  text-align: left;
  vertical-align: top;
  width: 50%;
}

.gallery-item a,
.gallery-item a:hover,
.gallery-item a:focus {
  -webkit-box-shadow: none;
  box-shadow: none;
  background: none;
  display: inline-block;
  max-width: 100%;
}

.gallery-item a img {
  display: block;
  -webkit-transition: -webkit-filter 0.2s ease-in;
  transition: -webkit-filter 0.2s ease-in;
  transition: filter 0.2s ease-in;
  transition: filter 0.2s ease-in, -webkit-filter 0.2s ease-in;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.gallery-item a:hover img,
.gallery-item a:focus img {
  -webkit-filter: opacity(60%);
  filter: opacity(60%);
}

.gallery-caption {
  display: block;
  text-align: left;
  padding: 0 10px 0 0;
  margin-bottom: 0;
}

.gallery-columns-1 .gallery-item {
  max-width: 100%;
}

.gallery-columns-2 .gallery-item {
  max-width: 50%;
}

.gallery-columns-3 .gallery-item {
  max-width: 33%;
}

.gallery-columns-4 .gallery-item {
  max-width: 25%;
}

.gallery-columns-5 .gallery-item {
  max-width: 20%;
}

.gallery-columns-6 .gallery-item {
  max-width: 16.66%;
}

.gallery-columns-7 .gallery-item {
  max-width: 14.28%;
}

.gallery-columns-8 .gallery-item {
  max-width: 12.5%;
}

.gallery-columns-9 .gallery-item {
  max-width: 11.11%;
}

.gallery-columns-6 .gallery-caption,
.gallery-columns-7 .gallery-caption,
.gallery-columns-8 .gallery-caption,
.gallery-columns-9 .gallery-caption {
  display: none;
}

.bypostauthor {
  font-weight: bold;
}

/* Text meant only for screen readers. */
.py-100 {
  padding: 100px 0;
}
.py-200 {
  padding: 200px 0;
}

.screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px);
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
}

.screen-reader-text:focus {
  background-color: #f1f1f1;
  border-radius: 3px;
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
  clip: auto !important;
  color: #21759b;
  display: block;
  font-size: 14px;
  font-size: 0.875rem;
  font-weight: bold;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000; /* Above WP toolbar. */
}

.wyswyg .align-full {
  position: relative;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  width: calc(100vw - var(--scrollbarWidth));
}

.wyswyg section {
  position: relative;
}

.btn-primary:hover,
.wp-block-button .wp-block-button__link:hover {
  background-color: #3754db !important;
  border-color: #3754db !important;
}

@keyframes wRotateAnimation {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(360deg);
  }
}

@media (min-width: 1200px) {
  .container,
  .container-lg,
  .container-md,
  .container-sm,
  .container-xl {
    max-width: 1280px !important;
  }
}

.rounded-10 {
  border-radius: 0.6rem;
}

.rounded-16 {
  border-radius: 1rem;
}

#hero {
  overflow: hidden;
  width: 100%;
  height: auto;
  position: relative;
  z-index: 0;
}
#hero-styles {
  position: relative;
  width: 100%;
  height: auto;
  top: 0;
  left: 0;
  right: 0;
  display: block;
  margin: 0 auto;
  overflow: hidden;
  z-index: 2;
}
#hero-caption {
  display: table;
  width: 100%;
  max-width: 1280px;
  padding: 180px 60px 180px 60px;
  margin: 0 auto;
  height: 100%;
  position: relative;
  text-align: left;
  box-sizing: border-box;
  text-align: center;
}
#hero #hero-caption .inner {
  vertical-align: bottom;
}
.light-content .hero-title {
  color: #fff;
  -webkit-text-stroke: 1px #fff;
}
.inner {
  display: table-cell;
  vertical-align: middle;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
@media only screen and (max-width: 1024px) {
  #hero-caption {
    padding: 180px 50px 180px 50px;
  }
  #hero-caption,
  #hero-image-parallax,
  #hero-bg-image {
    transform: none !important;
  }
  .hero-title,
  .light-content h1.hero-title {
    font-size: 60px;
    line-height: 70px;
  }
  #main-page-content {
    padding: 0 50px;
  }
  #portfolio-wrap,
  #portfolio-wrap.boxed {
    box-sizing: border-box;
    padding: 0 30px;
  }
}

.text-align-center .hero-title,
#hero.has-image .hero-title {
  text-align: center;
}
.light-content .hero-title {
  color: #fff;
  -webkit-text-stroke: 1px #fff;
}
.light-content h1,
.light-content h2,
.light-content h3,
.light-content h4,
.light-content h5,
.light-content h6 {
  color: #fff !important;
}
.hero-title {
  font-size: 80px;
  line-height: 90px;
  color: #000;
  -webkit-text-stroke: 1px #000;
  font-weight: 600;
  position: relative;
  margin-left: -3px;
  margin-top: 19px;
  margin-bottom: 0px;
  transform: translateY(10vh);
  -webkit-transform: translateY(10vh);
  opacity: 0;
}

.hero-title span,
.light-content h1.hero-title span {
  color: transparent !important;
}
#hero.has-image .hero-subtitle:before,
.text-align-center .hero-subtitle:before {
  left: 50%;
  margin-left: -10px;
}
.light-content .hero-subtitle:before {
  background-color: #fff;
}
.hero-subtitle:before {
  content: "";
  position: absolute;
  width: 20px;
  height: 2px;
  background-color: #000;
  left: 0;
  margin-left: 0px;
  top: -20px;
}
#main-content {
  position: relative;
  opacity: 1;
  z-index: 10;
  -webkit-transition: all 0.4s ease-in-out 0s;
  transition: all 0.4s ease-in-out 0s;
}
#main-page-content.portfolio-page {
  width: 100%;
  max-width: none;
  padding: 0;
}

#main-page-content {
  position: relative;
  box-sizing: border-box;
  padding: 0 60px;
  max-width: 1280px;
  margin: 0 auto;
  margin-bottom: 0;
  transform: translateY(15vh);
  -webkit-transform: translateY(15vh);
}
.light-content p {
  color: #999;
}

.has-text-align-center {
  text-align: center;
}
p {
  font-size: 14px;
  margin-bottom: 10px;
  line-height: 28px;
  color: #777;
}
.light-content b,
.light-content strong {
  font-weight: 600 !important;
  color: #fff !important;
}
.light-content a.link,
.light-content p a {
  color: #fff;
  position: relative;
  display: inline-block;
}

.light-content a.link::before,
.light-content p a::before {
  content: "";
  position: absolute;
  bottom: 0px;
  left: 0;
  width: 100%;
  height: 2px;
  background: rgba(0, 0, 0, 1);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.2s ease-out;
}

.light-content a.link::before,
.light-content p a::before {
  background: rgba(255, 255, 255, 1);
}
.light-content a.link:hover::before,
p a:hover::before {
  transform: scaleX(1);
  transform-origin: left;
}

#portfolio-wrap.boxed {
  max-width: 1220px;
  padding: 0;
}
#portfolio-wrap {
  position: relative;
  margin: 0 auto;
  width: 100%;
  max-width: none;
  padding: 0 50px px;
  box-sizing: border-box;
  min-height: 50vh;
}
#portfolio {
  position: relative;
  margin: 0 auto;
  padding: 0;
  padding-bottom: 100px;
  box-sizing: border-box;
  -webkit-transition: height 0.5s ease-out;
  transition: height 0.5s ease-out;
  overflow: hidden;
  flex-wrap: wrap;
  display: flex;
}
#portfolio-wrap.boxed .item {
  height: 380px;
}

#portfolio .item {
  display: block;
  position: relative;
  box-sizing: border-box;
  z-index: 0;
  width: calc(50% - 40px);
  height: 28vw;
  margin: 60px 20px;
}
@media only screen and (max-width: 1466px) {
  .item:nth-child(1) .item-appear,
  .item:nth-child(2) .item-appear {
    opacity: 1;
    -webkit-transition: translateY(0px) scaleY(1);
    transform: translateY(0px) scaleY(1);
  }
}
.item-appear.active {
  opacity: 1;
  -webkit-transition: translateY(0px);
  transform: translateY(0px);
}
.item-appear {
  /* display: block; */
  /* position: absolute; */
  box-sizing: border-box;
  z-index: 0;
  width: 100%;
  height: 100%;
  -webkit-transition: translateY(220px);
  -webkit-transition: transform 1s cubic-bezier(0.165, 0.84, 0.44, 1),
    opacity 1s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: transform 1s cubic-bezier(0.165, 0.84, 0.44, 1),
    opacity 1s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.item-content {
  width: 100%;
  height: 100%;
  position: relative;
}
.item-wrap {
  width: 100%;
  height: 100%;
  position: absolute;
}
.item-wrap-image {
  width: 100%;
  height: 100%;
  position: relative;
  border-radius: 3px;
  -webkit-clip-path: inset(8px 8px 8px 8px);
  clip-path: inset(8px 8px 8px 8px);
  -webkit-transition: 1s cubic-bezier(0.075, 0.82, 0.165, 1);
  -moz-transition: 1s cubic-bezier(0.075, 0.82, 0.165, 1);
  transition: 1s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.item-image {
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  position: relative;
  display: block;
  z-index: 100;
  cursor: pointer;
  background-color: #000;
  overflow: hidden;
}
.item-image::after {
  content: "";
  opacity: 0;
  width: 100%;
  height: 60%;
  position: absolute;
  bottom: 0;
  left: 0;
  pointer-events: none;
  background: -moz-linear-gradient(
    top,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.5) 100%
  );
  background: -webkit-linear-gradient(
    top,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.5) 100%
  );
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.5) 100%
  );
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 );
  -webkit-transition: all 0.6s ease-in-out;
  transition: all 0.6s ease-in-out;
}
.below-caption .item-caption {
  z-index: 10;
  position: absolute;
  bottom: -60px;
  height: 60px;
  padding-top: 15px;
  box-sizing: border-box;
  width: 100%;
  cursor: default;
  text-align: center;
}
.below-caption .item-title {
  font-size: 20px;
  line-height: 30px;
  margin: 0;
  font-weight: 700;
  display: block;
  position: relative;
}
.below-caption .item-cat {
  display: block;
  font-size: 12px;
  font-weight: 500;
  opacity: 0.3;
  line-height: 20px;
  overflow: hidden;
}
.below-caption .item-cat span {
  position: relative;
  display: block;
  width: auto;
  -webkit-transition: -webkit-transform 0.2s;
  transition: transform 0.2s;
  transform-origin: 100% 0%;
}
.below-caption .item-cat span::before {
  position: absolute;
  top: 100%;
  width: 100%;
  left: 0;
  content: attr(data-hover);
}
.item:hover .item-wrap-image {
  -webkit-clip-path: inset(0 0 0 0);
  clip-path: inset(0 0 0 0);
}
.below-caption .item:hover .item-cat span,
.below-caption .item.above .item-cat span {
  -webkit-transform: translateY(-100%);
  transform: translateY(-100%);
  transform-origin: 0% 0%;
}
#magic-cursor {
  position: absolute;
  left: 0;
  top: 0;
  width: 30px;
  height: 30px;
  pointer-events: none;
  z-index: 10000;
  -webkit-transition: opacity 0.2s ease-in-out 0.5s;
  transition: opacity 0.2s ease-in-out 0.5s;
}
.light-content #ball,
#ball.over-movie,
#ball.with-icon {
  border: 2px solid #fff;
  border-color: #fff !important;
}

#ball {
  position: fixed;
  transform: translate(-50%, -50%);
  width: 30px;
  height: 30px;
  border: 2px solid #000;
  border-radius: 50%;
  pointer-events: none;
  opacity: 1;
  box-sizing: border-box;
}
.light-content #ball:before,
.light-content #ball:after {
  color: #fff;
}
.light-content #ball:before {
  color: #fff;
}
#ball:before {
  font-family: FontAwesome;
  content: "\f053";
  font-size: 6px;
  width: 4px;
  height: 8px;
  line-height: 8px;
  text-align: center;
  position: absolute;
  left: -12px;
  top: 9px;
  color: #000;
  opacity: 0;
  transition: all 0.1s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}
.light-content #ball-loader {
  border-bottom: 2px solid #fff;
}
#ball-loader {
  width: 40px;
  height: 40px;
  position: absolute;
  background-color: transparent;
  border-right: 2px solid transparent;
  border-bottom: 2px solid #000;
  border-left: 2px solid transparent;
  border-top: 2px solid transparent;
  border-radius: 50px;
  box-sizing: border-box;
  opacity: 0;
  transform: translate(-9px, -9px) rotate(0deg);
  -webkit-animation: rotating 0.8s ease-in-out infinite;
  animation: rotating 0.8s ease-in-out infinite;
  -webkit-transition: opacity 0.2s ease-in-out 0s;
  transition: opacity 0.2s ease-in-out 0s;
}
.light-content #ball:before,
.light-content #ball:after {
  color: #fff;
}

#ball:after {
  font-family: FontAwesome;
  content: "\f054";
  font-size: 6px;
  width: 4px;
  height: 8px;
  line-height: 8px;
  text-align: center;
  position: absolute;
  right: -10px;
  top: 9px;
  color: #000;
  opacity: 0;
  transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}
#ball,
#ball.over-movie,
#ball.with-icon {
  border: 2px solid #fff;
  border-color: #fff !important;
}

#ball i {
  color: white;
}
#ball.with-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: transparent !important;
  padding: 2rem 3.5rem;
  z-index: 99999;
}
header .logoNav {
  justify-content: space-between;
}

#main {
  margin-top: 0 !important;
  background-color: black !important;
}

#menu-header-menu {
  flex-direction: row;
  gap: 1.5rem;
}
#menu-header-menu a {
  color: #8B8B8B !important ;
}
#menu-header-menu a {
  color: #fff;
  position: relative;
  display: inline-block;
  transition: transform 0.2s ease-out;
}

#menu-header-menu a:hover, #menu-header-menu li.active a {
  color: white !important;
}
#menu-header-menu a:hover::before,
#menu-header-menu li.active a::before {
  transform: scaleX(1);
  transform-origin: left;
}

footer.portfolio {
  position: relative;
  width: 100%;
  height: 140px;
  z-index: 900;
  box-sizing: border-box;
  text-align: center;
  bottom: 0;
  left: 0;
  overflow: hidden;
  background-color: rgb(15, 16, 16) !important;
}

@media only screen and (max-width: 1466px) {
  #footer-container {
    padding: 0 60px;
    margin: 40px auto;
  }
}
#footer-container {
  padding: 0 80px;
  margin: 50px auto;
  height: 40px;
  opacity: 0;
  position: absolute;
  width: 100%;
  box-sizing: border-box;
  bottom: 0;
  left: 0;
}

.copyright-wrap {
  position: relative;
  float: left;
  color: white;
  width: 270px;
  height: 180px;
  box-sizing: border-box;
  pointer-events: initial;
  transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}
.copyright-icon {
  float: left;
  width: 30px;
  height: 40px;
  font-size: 12px;
  line-height: 40px;
  text-align: left;
  margin-right: 0px;
  transform: scale(1);
  transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}
.copyright-icon i {
  font-size: 13px;
}
.copyright-icon:after,
.copyright-text:after {
  content: "";
  clear: both;
  display: table;
}
.copyright-text {
  float: left;
  font-size: 12px;
  font-weight: 600;
  line-height: 40px;
}
.copyright-wrap .copyright {
  display: inline-block;
  width: 100%;
  text-align: left;
}

.copyright {
  height: auto;
  line-height: 30px;
  position: relative;
  width: auto;
  margin: 0 auto;
  margin-top: 10px;
  text-align: center;
  bottom: 0;
  display: table;
}

.copyright p {
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 0;
  line-height: 30px;
  box-sizing: border-box;
  padding-top: 5px;
  position: relative;
  height: 40px;
  float: left;
  z-index: 2;
  -webkit-transition: background 0.4s ease-in-out 0s;
  transition: background 0.4s ease-in-out 0s;
}
.copyright-wrap .copyright p {
  opacity: 0;
  transform: translateY(10px);
  -webkit-transform: translateY(10px);
  transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}

#backtotop.active {
  opacity: 1;
  visibility: visible;
}

#backtotop {
  width: 40px;
  height: 40px;
  position: absolute;
  left: 50%;
  margin-left: -20px;
  line-height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  visibility: hidden;
}
#backtotop .parallax-element {
  font-size: 22px;
  display: block;
  height: 40px;
  width: 40px;
  line-height: 40px;
  text-align: center;
  cursor: pointer;
}
#backtotop .parallax-element i {
  color: #fff;
}

footer .socials-wrap {
  margin-top: 0px;
}
.socials-wrap {
  position: relative;
  float: right;
  color: #fff;
  width: 280px;
  height: 180px;
  box-sizing: border-box;
  pointer-events: initial;
  transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.socials-icon {
  float: right;
  width: 30px;
  height: 40px;
  font-size: 12px;
  line-height: 40px;
  text-align: right;
  margin-left: 10px;
  transform: scale(1);
  transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}
.socials-icon:after,
.socials-text:after {
  content: "";
  clear: both;
  display: table;
}
.socials-text {
  float: right;
  font-size: 12px;
  font-weight: 600;
  line-height: 40px;
}
.socials-wrap .socials {
  display: inline-block;
  width: 100%;
  text-align: right;
}
.socials-wrap .socials li {
  opacity: 0;
  transform: translateY(10px);
  -webkit-transform: translateY(10px);
  transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}

.socials li {
  margin-right: 0px;
  margin-left: 10px;
  list-style: none;
  color: #999;
  font-size: 15px;
  margin-bottom: 0;
  line-height: 40px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 40px;
  width: 40px;
  float: right;
  z-index: 2;
  -webkit-transition: background 0.4s ease-in-out 0s;
  transition: background 0.4s ease-in-out 0s;
}
.copyright-wrap:hover .copyright-icon {
  transform: scale(0);
  width: 0;
  margin: 0;
  overflow: hidden;
}
.copyright-wrap:hover .copyright p {
  transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0.1s;
  opacity: 1;
  transform: translateY(0px);
  -webkit-transform: translateY(0px);
}
.copyright-wrap:hover {
  transform: translateY(-50px);
  -webkit-transform: translateY(-50px);
}

.socials-wrap:hover {
  transform: translateY(-50px);
  -webkit-transform: translateY(-50px);
}
.socials-wrap:hover .socials-icon {
  transform: scale(0);
  width: 0;
  margin: 0;
  overflow: hidden;
}
.socials-wrap:hover .socials li:nth-child(1) {
  transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0.3s;
  opacity: 1;
  transform: translateY(0px);
  -webkit-transform: translateY(0px);
}
.socials-wrap:hover .socials li:nth-child(2) {
  transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0.2s;
  opacity: 1;
  transform: translateY(0px);
  -webkit-transform: translateY(0px);
}

.socials-wrap:hover .socials li:nth-child(3) {
  transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0.15s;
  opacity: 1;
  transform: translateY(0px);
  -webkit-transform: translateY(0px);
}
.socials li a {
  color: white;
  font-size: 12px;
  font-weight: 600;
  display: block;
  height: 40px;
  width: 40px;
  line-height: 40px;
  text-align: center;
  -webkit-transition: opacity 0.2s ease-in-out;
  transition: opacity 0.2s ease-in-out;
}
.socials li:last-child {
  margin-left: 0px;
}
.socials {
  height: auto;
  line-height: 30px;
  position: relative;
  width: auto;
  margin: 0 auto;
  margin-top: 10px;
  text-align: center;
  bottom: 0;
  display: table;
  transform: translateX(15px);
  -webkit-transform: translateX(15px);
}

/* Homepage  */

.banner .background {
  height: 100vh;
  background-image: url(/wp-content/uploads/2024/06/bo-do-hoa-duoi.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: relative;
}
.banner .background .content {
  position: absolute;
  bottom: 0;
  width: 100%;
  left: 0;
}

.banner .socials-wrap {
  height: max-content;
}

.weare {
  height: 136vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url(/wp-content/uploads/2024/08/Group-34.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  z-index: 2;
}
.weare .content p {
  color: white;
  margin-bottom: 0;
  font-weight: bold;
  font-size: 3rem;
  line-height: 1.3;
}

@media screen and (max-width: 991px) {
  .weare {
    height: 70vh;
  }
  .weare .content p {
    font-size: 1.4rem;
  }
}

@media (max-width: 480px) {
  html:before {
    position: absolute;
    display: none;
    content: "adaptive:extra-narrow";
  }
  .not-extra-narrow {
    display: none;
  }
}
@media (min-width: 481px) and (max-width: 767px) {
  html:before {
    position: absolute;
    display: none;
    content: "adaptive:narrow";
  }
  .not-narrow {
    display: none;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  html:before {
    position: absolute;
    display: none;
    content: "adaptive:regular";
  }
  .not-regular {
    display: none;
  }
}
@media (min-width: 1024px) {
  html:before {
    position: absolute;
    display: none;
    content: "adaptive:wide";
  }
  .not-wide {
    display: none;
  }
} /*! normalize.css v3.0.2 | MIT License | git.io/normalize */
html {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block;
}
audio,
canvas,
progress,
video {
  display: inline-block;
  vertical-align: baseline;
}
audio:not([controls]) {
  display: none;
  height: 0;
}
[hidden],
template {
  display: none;
}
a {
  background-color: transparent;
}
a:active,
a:hover {
  outline: 0;
}
abbr[title] {
  border-bottom: 1px dotted;
}
b,
strong {
  font-weight: bold;
}
dfn {
  font-style: italic;
}
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}
mark {
  background: #ff0;
  color: #000;
}
small {
  font-size: 80%;
}
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sup {
  top: -0.5em;
}
sub {
  bottom: -0.25em;
}
img {
  border: 0;
}
svg:not(:root) {
  overflow: hidden;
}
figure {
  margin: 1em 40px;
}
hr {
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  height: 0;
}
pre {
  overflow: auto;
}
code,
kbd,
pre,
samp {
  font-size: 1em;
}
button,
input,
optgroup,
select,
textarea {
  color: inherit;
  font: inherit;
  margin: 0;
}
button {
  overflow: visible;
}
button,
select {
  text-transform: none;
}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  cursor: pointer;
}
button[disabled],
html input[disabled] {
  cursor: default;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}
input {
  line-height: normal;
}
input[type="checkbox"],
input[type="radio"] {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto;
}
input[type="search"] {
  -webkit-appearance: textfield;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}
legend {
  border: 0;
  padding: 0;
}
textarea {
  overflow: auto;
}
optgroup {
  font-weight: bold;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
td,
th {
  padding: 0;
}
html {
  overflow: hidden;
  overflow-y: scroll;
  -webkit-overflow-scrolling: auto;
  width: 100%;
  font-size: 14px;
  background-color: #e8e5e2;
}
body {
  width: 100%;
}
#application {
  position: relative;
  overflow: hidden;
  width: 100%;
}
.scroll-indicator {
  display: none;
  position: fixed;
  left: 4.16667%;
  bottom: 4.16667%;
}
.button-close {
  position: fixed;
  right: 8.33333%;
}
.region-main {
  position: relative;
  width: 100%;
}
html {
  font-size: 14px;
}
@media (min-width: 1440px) and (min-height: 650px) {
  html {
    font-size: 14px;
  }
}
@media (min-width: 1024px) {
  .loading-home {
    background-color: #fe5733;
  }
  .scroll-indicator {
    display: block;
  }
  .button-close {
    right: 4.16667%;
  }
}
*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.ir {
  display: block;
  font: 0/0 a;
  text-shadow: none;
  color: transparent;
}
.is-hidden {
  opacity: 0;
  visibility: hidden;
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul {
  margin: 0;
  padding: 0;
}
h1,
h2,
h3,
h4,
h5,
h6,
strong {
  font-weight: normal;
}
.smooth {
  position: relative;
  width: 100%;
  background-color: #1e1e1e;
  z-index: 0;
}
.smooth.is-active .smooth__scroll {
  will-change: top;
  position: fixed;
}
.smooth__scroll {
  width: 100%;
}
.button {
  overflow: visible;
  margin: 0;
  padding: 0;
  text-decoration: none;
  border: none;
  outline: none;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.button:hover {
  text-decoration: none;
}
.button:focus {
  outline: none;
}
.list,
.list--horizontal {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.list--horizontal .list__item {
  display: inline-block;
  vertical-align: top;
}
.page {
  position: relative;
  width: 100%;
	padding: 0;
}
.letter {
  display: none;
  width: 8.57143rem;
  height: 8.57143rem;
}
@media (min-width: 1024px) {
  .letter {
    display: block;
  }
}
.button-close {
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  -khtml-font-smoothing: antialiased;
  -apple-font-smoothing: antialiased;
  font-smooth: always;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  height: 1.21429rem;
  color: #e8e5e2;
  font-size: 0.85714rem;
  line-height: 1.21429rem;
  z-index: 2;
  opacity: 0;
}
.button-close__color {
  position: absolute;
  top: 0;
  left: 0;
}
.button-close__color--light {
  position: relative;
  color: #e8e5e2;
}
.button-close__color--dark {
  color: #1e1e1e;
}
.button-close__lines {
  position: absolute;
  bottom: -2px;
  right: 0;
  overflow: hidden;
  width: 100%;
  height: 100%;
}
.button-close__lines span {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 2px;
  border-bottom: 2px solid #fe5733;
}
.button-close__lines span:last-child {
  -webkit-transform: translate3d(-150%, 0, 0);
  transform: translate3d(-150%, 0, 0);
}
.button-close__lines-wrapper {
  width: 100%;
  height: 100%;
}
.button-visit-website {
  display: inline-block;
  position: relative;
}
.button-visit-website__label {
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  -khtml-font-smoothing: antialiased;
  -apple-font-smoothing: antialiased;
  font-smooth: always;
  -moz-osx-font-smoothing: grayscale;
  color: #1e1e1e;
  font-size: 0.85714rem;
  line-height: 1.21429rem;
}
.button-visit-website__lines {
  position: absolute;
  bottom: -2px;
  right: 0;
  overflow: hidden;
  width: 100%;
  height: 100%;
}
.button-visit-website__lines span {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 2px;
  border-bottom: 1px solid #fe5733;
}
.button-visit-website__lines span:last-child {
  -webkit-transform: translate3d(-150%, 0, 0);
  transform: translate3d(-150%, 0, 0);
}
.button-visit-website__lines-wrapper {
  width: 100%;
  height: 100%;
}
.button-project-featured {
  position: relative;
  left: 8.33333%;
  margin-bottom: 1.57143rem;
  width: 91.66667%;
  -webkit-perspective: 600px;
  perspective: 600px;
}

@media screen and (max-width: 991px) {
  .button-project-featured {
    left: 0;
  }
  .project-featured {
    align-items: center;
	  margin-bottom: 5rem;
  }
  .project-featured__title .char {
    font-size: 2.5rem !important;
  }
}
.button-project-featured__container {
  position: relative;
  padding-bottom: 65.25%;
  overflow: hidden;
  background-color: #222222;
  -webkit-filter: blur(0);
  filter: blur(0);
}
.button-project-featured__container .button-project-featured__media {
  transition: all 0.3s linear;
}
.button-project-featured__container:hover .button-project-featured__media {
  transform: translate3d(0, 0, 0) scale(0.98, 0.98) !important;
}
.button-project-featured__media {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  will-change: transform;
  -webkit-filter: blur(0);
  filter: blur(0);
}
.button-project-featured__video,
.button-project-featured__img {
  display: block;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #aaa;
}
.button-project-featured__placeholder {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: all 0.3s linear;
}
.button-project-featured__canvas {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.button-project-featured__placeholder:hover {
}
@media (min-width: 1024px) {
  .button-project-featured {
    position: absolute;
    top: 50%;
    left: unset;

    right: 0;
    width: 63%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
  }
}
.button-basic {
  color: #1e1e1e;
  -webkit-transition: color 150ms cubic-bezier(0.39, 0.58, 0.57, 1);
  transition: color 150ms cubic-bezier(0.39, 0.58, 0.57, 1);
}
.button-basic--jobs {
  white-space: nowrap;
}
.button-basic:hover {
  color: #fe5733;
}
.button-next {
  position: relative;
  width: 10rem;
  text-align: left;
}
.button-next__label {
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  -khtml-font-smoothing: antialiased;
  -apple-font-smoothing: antialiased;
  font-smooth: always;
  -moz-osx-font-smoothing: grayscale;
  display: block;
  margin-bottom: 0.35714rem;
  font-size: 0.85714rem;
  color: #686868;
}
.button-next__title {
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  -khtml-font-smoothing: antialiased;
  -apple-font-smoothing: antialiased;
  font-smooth: always;
  -moz-osx-font-smoothing: grayscale;
  font-size: 1.57143rem;
  color: #e8e5e2;
}
.button-next__arrow {
  position: relative;
  top: -0.07143rem;
  display: inline-block;
  margin-left: 0.14286rem;
  font-size: 1rem;
}
@media (min-width: 768px) {
  .button-next {
    width: 100%;
  }
}
.button-showreel {
  display: none;
  width: 17.85714rem;
  margin-left: -1.92857rem;
  font-size: 0.85714rem;
  color: #1e1e1e;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.button-showreel:hover {
  color: #1e1e1e;
}
.button-showreel em {
  font-style: normal;
}
.button-showreel .icon-arrow {
  margin-right: 0.92857rem;
}
.button-showreel__canvas {
  display: block;
}
.button-showreel__label {
  display: inline-block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 5.57143rem;
  width: 12.14286rem;
  height: 0.92857rem;
  overflow: hidden;
  margin: auto 0;
}
.button-showreel__label strong {
}
.button-showreel__label > span {
  display: inline-block;
  overflow: hidden;
}
@media (min-width: 1024px) {
  .button-showreel {
    display: inline-block;
  }
}
.button-play {
  position: relative;
  display: block;
  width: 2.42857rem;
  height: 2.42857rem;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.66);
  -webkit-transition: background-color 0.35s;
  transition: background-color 0.35s;
}
.button-play:hover {
  background-color: rgba(255, 255, 255, 0.85);
}
.button-play__icon {
  display: block;
  margin: auto;
  font-size: 0;
  color: transparent;
}
.button-play__icon--play {
  width: 0.85714rem;
  height: 0.78571rem;
  margin-left: 0.92857rem;
  background-image: url(../assets/img/icons/icon-play.svg);
  background-repeat: no-repeat;
  background-size: 100% auto;
}
.button-play__icon--pause {
  position: absolute;
  top: 0.85714rem;
  left: 0.85714rem;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  width: 0.71429rem;
  visibility: hidden;
  opacity: 0;
}
.button-play__icon--pause:before,
.button-play__icon--pause:after {
  content: "";
  display: inline-block;
  width: 0.21429rem;
  height: 0.71429rem;
  background-color: #1e1e1e;
}
@media (min-width: 768px) {
  .button-play {
    width: 7.14286rem;
    height: 7.14286rem;
  }
  .button-play__icon--play {
    width: 2.42857rem;
    height: 2.28571rem;
    margin-left: 2.64286rem;
  }
  .button-play__icon--pause {
    top: 2.5rem;
    left: 2.85714rem;
    width: 1.57143rem;
  }
  .button-play__icon--pause:before,
  .button-play__icon--pause:after {
    width: 0.5rem;
    height: 2.14286rem;
  }
}
.button-link {
  position: relative;
  display: inline-block;
  color: inherit;
  text-decoration: none;
}
.button-link__lines {
  position: absolute;
  bottom: 0;
  right: 0;
  overflow: hidden;
  display: block;
  width: 100%;
  height: 100%;
}
.button-link__lines-wrapper {
  display: block;
  width: 100%;
  height: 100%;
}
.button-link__lines-wrapper span {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 2px;
  border-bottom: 1px solid #fe5733;
}
.button-link__lines-wrapper span:last-child {
  -webkit-transform: translate3d(-150%, 0, 0);
  transform: translate3d(-150%, 0, 0);
}
@media (min-width: 1024px) {
  .button-link__lines {
    position: absolute;
    bottom: 0.13em;
  }
}
.icon-arrow {
  display: inline-block;
  vertical-align: middle;
  width: 2.42857rem;
  height: 2.42857rem;
}
.logo-header-small {
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  -khtml-font-smoothing: antialiased;
  -apple-font-smoothing: antialiased;
  font-smooth: always;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  width: 10.35714rem;
  color: #1e1e1e;
  font-size: 1.14286rem;
  line-height: 1.14286rem;
}
.logo-header-small--white {
  color: #e8e5e2;
}
.logo-header-small--white .logo-header-small__logo path {
  fill: #e8e5e2;
}
.logo-header-small__logo {
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.78571rem;
  width: 2.64286rem;
  height: 2.71429rem;
}
.logo-header-small__logo path {
  fill: #1e1e1e;
}
.logo-header-small__label {
  display: inline-block;
  vertical-align: middle;
  max-width: 6.64286rem;
}
@media (min-width: 768px) {
  .logo-header-small {
    width: 2.64286rem;
  }
}
.site-header {
  z-index: 5;
  position: absolute;
  left: 8.33333%;
  top: 8.33333%;
  width: 28.57143rem;
  height: 6.42857rem;
}
.site-header .button-logo {
  position: absolute;
  left: 0;
  top: 0;
}
.site-header .signature-header {
  display: none;
}
@media (min-width: 1024px) {
  .site-header {
    left: 4.16667%;
    top: 4.16667%;
  }
  .site-header .signature-header {
    display: block;
    position: absolute;
    left: 12.85714rem;
    top: 0rem;
  }
}
.scroll-indicator {
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  -khtml-font-smoothing: antialiased;
  -apple-font-smoothing: antialiased;
  font-smooth: always;
  -moz-osx-font-smoothing: grayscale;
  height: 0.92857rem;
  font-size: 0.85714rem;
  line-height: 1.21429rem;
  z-index: 1;
  opacity: 0;
}
.scroll-indicator__color {
  position: absolute;
  top: 0;
  left: 0;
}
.scroll-indicator__color--light {
  position: relative;
  color: #e8e5e2;
}
.scroll-indicator__color--dark {
  color: #1e1e1e;
}
.scroll-indicator__progress {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 0.57143rem;
}
.scroll-indicator__label {
  position: relative;
  display: inline-block;
}
.scroll-indicator__label > span {
  position: relative;
  display: inline-block;
  will-change: transform;
}
@media (min-width: 1024px) {
  .scroll-indicator {
    display: inline-block;
  }
}
.video-player {
  position: relative;
}
.video-player__video {
  display: block;
  width: 100%;
  height: auto;
}
.video-player__video:focus {
  outline: none;
}
.video-player__controls {
  position: absolute;
  top: 0;
  left: 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.video-player__cover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.section-header {
  position: relative;
  margin: 0 auto;
}
.section-header .logo-superherocheesecake {
  position: relative;
  left: 8.33333%;
}
.section-header .button-showreel {
  position: absolute;
  left: 33.33333%;
}
.section-header__content {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  padding-top: 8.57143rem;
}
.section-header__mask {
  z-index: 6;
  position: absolute;
  top: 0;
  right: 0;
  width: 101%;
  height: 100%;
  overflow: hidden;
  background-color: #fe5733;
}
.section-header__mask-logo-small {
  position: absolute;
  left: 8.33333%;
}
@media (min-width: 768px) {
  .section-header__content {
    padding-top: 14.28571rem;
  }
  .section-header__mask-logo-small {
    left: 4.16667%;
  }
}
@media (min-width: 1024px) {
  .section-header .logo-superherocheesecake {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 16.66667%;
    margin: auto 0;
  }
}
@media (min-width: 1440px) {
  .section-header__content {
    max-width: 102.85714rem;
  }
}
.section-intro {
  margin-top: 2.28571rem;
  margin-bottom: 9.5rem;
}
.section-intro__content {
  margin-left: 8.33333%;
  margin-right: 12.5%;
}
.section-intro__title {
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  -khtml-font-smoothing: antialiased;
  -apple-font-smoothing: antialiased;
  font-smooth: always;
  -moz-osx-font-smoothing: grayscale;
  font-size: 1.28571rem;
  line-height: 2rem;
  letter-spacing: -0.013em;
}
.section-intro__title-bold {
}
@media (min-width: 1024px) {
  .section-intro {
    margin-top: 0;
    margin-top: -6.07143rem;
    margin-bottom: 11.85714rem;
  }
  .section-intro__content {
    max-width: 63.92857rem;
    margin: 0 16.66667% 0 16.66667%;
  }
  .section-intro__title {
    font-size: 3.14286rem;
    line-height: 4.07143rem;
    letter-spacing: -0.009em;
  }
}
@media (min-width: 1245px) {
  .section-intro {
    max-width: 102.85714rem;
    margin-left: auto;
    margin-right: auto;
  }
}
.section-about {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  position: relative;
  left: 0;
  right: 0;
  margin: 0 auto;
  padding-bottom: 5.71429rem;
}
.section-about .list-about {
  -webkit-box-ordinal-group: 2;
  -webkit-order: 1;
  -ms-flex-order: 1;
  order: 1;
}
.section-about .content-about {
  -webkit-box-ordinal-group: 1;
  -webkit-order: 0;
  -ms-flex-order: 0;
  order: 0;
}
@media (min-width: 1440px) {
  .section-about {
    max-width: 102.85714rem;
  }
}
@media (min-width: 1024px) {
  .section-about {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    padding-bottom: 7.14286rem;
  }
  .section-about .list-about {
    -webkit-box-ordinal-group: 1;
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
  }
  .section-about .content-about {
    -webkit-box-ordinal-group: 2;
    -webkit-order: 1;
    -ms-flex-order: 1;
    order: 1;
  }
}
.section-projects-featured {
  position: relative;
  left: 0;
  right: 0;
  margin: 0 auto;
  padding: 4rem 0;
  background-color: black;
}
@media (min-width: 1440px) {
  .section-projects-featured {
    padding: 60px 0;
    max-width: 102.85714rem;
  }
}
.prowrap {
  background-color: black;
  position: relative;
}
.section-project-header {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background-color: #1e1e1e;
}
.section-project-header .video-header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.section-project-header .heading-project-header {
  position: absolute;
  left: 41.66667%;
  bottom: 15%;
}
.section-project-header__img-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.section-project-header__content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.section-project-header__img {
  position: absolute;
}
@media (min-width: 1024px) {
  .section-project-header .heading-project-header {
    position: absolute;
    left: 50%;
    bottom: 20%;
  }
}
.section-project-info {
  -webkit-box-ordinal-group: 1;
  -webkit-order: 0;
  -ms-flex-order: 0;
  order: 0;
  position: relative;
  left: 0;
  right: 0;
  margin: 0 auto;
  padding-top: 5.28571rem;
  padding-bottom: 2.35714rem;
  background-color: #e8e5e2;
}
.section-project-info__content {
  margin: 0 auto;
}
.section-project-info__inner {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  position: relative;
  width: 100%;
}
.section-project-info__heading {
  display: block;
  position: relative;
  margin-bottom: 1.92857rem;
  width: 100%;
  font-size: 3.21429rem;
  line-height: 3rem;
}
@media (min-width: 1024px) {
  .section-project-info {
    padding-top: 14.28571rem;
    padding-bottom: 14.28571rem;
  }
  .section-project-info__content {
    max-width: 102.85714rem;
  }
  .section-project-info__inner {
    left: 25%;
    width: 50%;
  }
  .section-project-info__heading {
    margin-bottom: 7.14286rem;
    font-size: 5rem;
    line-height: 4.85714rem;
  }
}
.section-project-result {
  position: relative;
  padding-top: 4.28571rem;
  z-index: 10;
}
@media (min-width: 1024px) {
  .section-project-result {
    padding-top: 15.71429rem;
  }
}
.section-project-footer {
  position: relative;
  padding-top: 3.71429rem;
  padding-bottom: 4.28571rem;
  background-color: #e8e5e2;
}
.section-project-footer .list-project-footer {
  margin-left: 8.33333%;
}
@media (min-width: 1024px) {
  .section-project-footer {
    padding-top: 8.57143rem;
    padding-bottom: 12.71429rem;
  }
  .section-project-footer .list-project-footer {
    margin-left: auto;
  }
  .section-project-footer__content {
    width: 66.66667%;
    max-width: 68.57143rem;
    margin: 0 auto;
  }
}
.section-project-next {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background-color: #1e1e1e;
}
.section-project-next__img {
  position: absolute;
}
.section-project-next__content {
  position: relative;
  margin-left: 50%;
}
.section-project-next__progress {
  display: block;
  width: 100%;
  height: 2px;
  overflow: hidden;
  margin-top: 0.78571rem;
  background-color: #686868;
}
.section-project-next__progress-bar {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #e8e5e2;
  -webkit-transform-origin: center left;
  transform-origin: center left;
  will-change: transform;
}
.section-about-header {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
  min-height: 86vh;
  overflow: hidden;
  background-color: #e8e5e2;
}
.section-about-header__content-wrapper {
  position: relative;
  left: 8.33333%;
  width: 83.33333%;
}
.section-about-header__content-wrapper .about-section-title {
  margin-bottom: 0.64286rem;
}
.section-about-header__content {
  padding: 7.85714rem 0;
  margin-top: 5vh;
}
.section-about-header__heading {
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  -khtml-font-smoothing: antialiased;
  -apple-font-smoothing: antialiased;
  font-smooth: always;
  -moz-osx-font-smoothing: grayscale;
  display: block;
  margin-bottom: 1.07143rem;
  font-size: 2.57143rem;
  line-height: 2.85714rem;
}
.section-about-header__subheading {
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  -khtml-font-smoothing: antialiased;
  -apple-font-smoothing: antialiased;
  font-smooth: always;
  -moz-osx-font-smoothing: grayscale;
  font-size: 1.57143rem;
  line-height: 2.07143rem;
}
@media (max-width: 374px) {
  .section-about-header__heading {
    font-size: 2.28571rem;
    line-height: 2.57143rem;
  }
  .section-about-header__subheading {
    font-size: 1.35714rem;
    line-height: 1.78571rem;
  }
}
@media (min-width: 768px) {
  .section-about-header__content {
    max-width: 46.78571rem;
  }
  .section-about-header__heading {
    font-size: 3.85714rem;
    line-height: 4rem;
  }
  .section-about-header__subheading {
    font-size: 2.28571rem;
    line-height: 3rem;
  }
}
@media (min-width: 1024px) {
  .section-about-header {
    min-height: 90vh;
  }
  .section-about-header__content-wrapper {
    left: 0;
    width: 100%;
    max-width: 102.85714rem;
    margin-left: auto;
    margin-right: auto;
  }
  .section-about-header__content-wrapper .about-section-title {
    position: absolute;
    top: 1.57143rem;
    left: 12.5%;
  }
  .section-about-header__content {
    position: relative;
    left: 30%;
    width: 70%;
  }
}
@media (min-width: 1680px) {
  .section-about-header__content {
    max-width: 60rem;
  }
  .section-about-header__heading {
    font-size: 4.92857rem;
    line-height: 5.14286rem;
  }
  .section-about-header__subheading {
    font-size: 3.14286rem;
    line-height: 4.14286rem;
  }
}
.section-about-values .about-section-title {
  position: relative;
  left: 8.33333%;
  margin-bottom: 0.71429rem;
}
.section-about-values__content {
  position: relative;
  left: 8.33333%;
  width: 83.33333%;
  padding-bottom: 5rem;
}
.section-about-values__item {
  margin-bottom: 5rem;
}
.section-about-values__item-title {
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  -khtml-font-smoothing: antialiased;
  -apple-font-smoothing: antialiased;
  font-smooth: always;
  -moz-osx-font-smoothing: grayscale;
  margin-bottom: 1rem;
  font-size: 2.28571rem;
  line-height: 3rem;
}
.section-about-values__item-content {
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  -khtml-font-smoothing: antialiased;
  -apple-font-smoothing: antialiased;
  font-smooth: always;
  -moz-osx-font-smoothing: grayscale;
  font-size: 0.92857rem;
  line-height: 2rem;
  color: #686868;
}
@media (min-width: 1024px) {
  .section-about-values {
    position: relative;
    max-width: 102.85714rem;
    margin-left: auto;
    margin-right: auto;
  }
  .section-about-values .about-section-title {
    position: absolute;
    top: 0.85714rem;
    left: 12.5%;
  }
  .section-about-values__content {
    position: relative;
    left: 30%;
    width: 60%;
    padding-bottom: 6.42857rem;
  }
  .section-about-values__list {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    max-width: 51.07143rem;
  }
  .section-about-values__item {
    width: 40%;
    max-width: 20.71429rem;
    margin-right: 20%;
  }
  .section-about-values__item:nth-child(2n) {
    margin-right: 0;
  }
  .section-about-values__item-title {
    margin-bottom: 2rem;
  }
  .section-about-values__item-content--smaller {
    max-width: 18.21429rem;
  }
}
.section-about-video {
  padding-bottom: 9.35714rem;
}
.section-about-video__video {
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
}
@media (min-width: 1024px) {
  .section-about-video {
    max-width: 102.85714rem;
    padding-bottom: 13.14286rem;
    margin-left: auto;
    margin-right: auto;
  }
  .section-about-video__content {
    width: 75%;
    max-width: 77.14286rem;
    margin: 0 auto;
  }
}
.section-about-clients .about-section-title {
  position: relative;
  left: 8.33333%;
  margin-bottom: 2.14286rem;
}
.section-about-clients__content {
  position: relative;
  left: 8.33333%;
  width: 83.33333%;
  padding-bottom: 5.71429rem;
}
.section-about-clients__list {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  max-width: 51.07143rem;
}
.section-about-clients__item {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  width: 50%;
  min-height: 3.57143rem;
  margin-bottom: 3.57143rem;
}
.section-about-clients__logo--nespresso {
  width: 6.42857rem;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
@media (min-width: 1024px) {
  .section-about-clients {
    position: relative;
    max-width: 102.85714rem;
    margin-left: auto;
    margin-right: auto;
  }
  .section-about-clients .about-section-title {
    position: absolute;
    top: 0.85714rem;
    left: 12.5%;
  }
  .section-about-clients__content {
    position: relative;
    left: 30%;
    width: 60%;
    padding-bottom: 7.85714rem;
  }
  .section-about-clients__item {
    width: 6.42857rem;
    margin-right: calc(33.33% - 8.57143rem);
    margin-bottom: 5rem;
  }
  .section-about-clients__item:nth-child(4n) {
    margin-right: 0;
  }
}
.section-about-services .about-section-title {
  position: relative;
  left: 8.33333%;
  margin-bottom: 1rem;
}
.section-about-services__content {
  position: relative;
  left: 8.33333%;
  width: 83.33333%;
  padding-bottom: 5.35714rem;
}
.section-about-services__intro {
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  -khtml-font-smoothing: antialiased;
  -apple-font-smoothing: antialiased;
  font-smooth: always;
  -moz-osx-font-smoothing: grayscale;
  margin-bottom: 4.71429rem;
  font-size: 0.92857rem;
  line-height: 2rem;
  color: #686868;
}
.section-about-services__group {
  margin-bottom: 3.71429rem;
}
.section-about-services__heading {
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  -khtml-font-smoothing: antialiased;
  -apple-font-smoothing: antialiased;
  font-smooth: always;
  -moz-osx-font-smoothing: grayscale;
  margin-bottom: 1.28571rem;
  font-size: 1.71429rem;
  line-height: 2rem;
}
.section-about-services__item {
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  -khtml-font-smoothing: antialiased;
  -apple-font-smoothing: antialiased;
  font-smooth: always;
  -moz-osx-font-smoothing: grayscale;
  font-size: 0.92857rem;
  line-height: 2rem;
  color: #686868;
}
@media (min-width: 1024px) {
  .section-about-services {
    position: relative;
    max-width: 102.85714rem;
    margin-left: auto;
    margin-right: auto;
  }
  .section-about-services .about-section-title {
    position: absolute;
    top: 0.28571rem;
    left: 12.5%;
  }
  .section-about-services__content {
    position: relative;
    left: 30%;
    width: 60%;
    max-width: 55.35714rem;
    padding-bottom: 15rem;
  }
  .section-about-services__intro {
    max-width: 42.42857rem;
    margin-bottom: 6.57143rem;
    font-size: 1.28571rem;
    line-height: 2.5rem;
  }
  .section-about-services__columns {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }
  .section-about-services__group {
    width: 12.5rem;
    margin-bottom: 0;
  }
  .section-about-services__group:first-child {
    width: 13.21429rem;
  }
  .section-about-services__heading {
    min-height: 4rem;
    margin-bottom: 2.28571rem;
  }
  .section-about-services__item {
  }
}
.section-about-team {
  position: relative;
}
.section-about-team .about-section-title {
  position: absolute;
  left: 8.33333%;
  margin-bottom: 1rem;
}
.section-about-team__content {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 130.13333%;
  height: 0;
  padding-bottom: 119.46667%;
}
.section-about-team__column {
  position: relative;
  left: -14.54918%;
  width: 17.62295%;
  margin: 0 3.68852%;
}
.section-about-team__column--first {
  margin-top: 25.81967%;
}
.section-about-team__column--second {
  margin-top: 14.34426%;
}
.section-about-team__column--fourth {
  margin-top: 8.60656%;
}
.section-about-team__column--fifth,
.section-about-team__column--sixth {
  display: none;
}
.section-about-team__image--wrapper {
  width: 100%;
  height: 0;
  padding-bottom: 130.23256%;
  margin-bottom: 2rem;
}
.section-about-team__image {
  display: block;
  width: 100%;
}
@media (min-width: 1024px) {
  .section-about-team {
    max-width: 102.85714rem;
    max-height: 63.14286rem;
    margin-left: auto;
    margin-right: auto;
  }
  .section-about-team .about-section-title {
    top: 6.57143rem;
    left: 12.5%;
  }
  .section-about-team__content {
    position: relative;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 125.83333%;
    max-width: 129.42857rem;
    padding-bottom: 61.38889%;
  }
  .section-about-team__column {
    left: -1.65563%;
    width: 12.91391%;
    margin: 0 1.87638%;
  }
  .section-about-team__column--first {
    margin-top: 23.17881%;
  }
  .section-about-team__column--second {
    margin-top: 11.5894%;
  }
  .section-about-team__column--fourth {
    margin-top: 7.72627%;
  }
  .section-about-team__column--fifth {
    display: block;
    margin-top: 3.86313%;
  }
  .section-about-team__column--sixth {
    display: block;
    margin-top: 11.5894%;
  }
  .section-about-team__image--wrapper {
    width: 100%;
    height: 0;
    padding-bottom: 123.93162%;
    margin-bottom: 25.64103%;
  }
}
.section-about-awards {
  position: relative;
  padding-top: 9.64286rem;
  background-color: #1e1e1e;
}
.section-about-awards .about-section-title {
  position: relative;
  left: 8.33333%;
  margin-bottom: 1rem;
}
.section-about-awards__content {
  position: relative;
  left: 8.33333%;
  width: 83.33333%;
}
.section-about-awards__heading {
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  -khtml-font-smoothing: antialiased;
  -apple-font-smoothing: antialiased;
  font-smooth: always;
  -moz-osx-font-smoothing: grayscale;
  margin-bottom: 1rem;
  font-size: 2.28571rem;
  line-height: 3rem;
  color: #fff;
}
.section-about-awards__body {
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  -khtml-font-smoothing: antialiased;
  -apple-font-smoothing: antialiased;
  font-smooth: always;
  -moz-osx-font-smoothing: grayscale;
  margin-bottom: 4.28571rem;
  font-size: 0.92857rem;
  line-height: 2rem;
  color: #686868;
}
.section-about-awards__logos {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin-bottom: 1.42857rem;
}
.section-about-awards__logo-item {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  width: 50%;
  min-height: 3.57143rem;
  margin-bottom: 3.57143rem;
}
.section-about-awards__logo-image {
  display: block;
}
.section-about-awards__logo-image--fwa {
  width: 6.42857rem;
}
.section-about-awards__logo-image--awwwards {
  width: 3.71429rem;
}
.section-about-awards__logo-image--cannes {
  width: 3.35714rem;
}
.section-about-awards__logo-image--css {
  width: 2.42857rem;
}
.section-about-awards__logo-image--webby {
  width: 6.28571rem;
}
.section-about-awards__recent-title {
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  -khtml-font-smoothing: antialiased;
  -apple-font-smoothing: antialiased;
  font-smooth: always;
  -moz-osx-font-smoothing: grayscale;
  margin-bottom: 1.42857rem;
  font-size: 1.28571rem;
  line-height: 1.92857rem;
  color: #fff;
}
.section-about-awards__recent-item {
  font-size: 0.78571rem;
  line-height: 1.5rem;
  color: #686868;
}
.section-about-awards__recent-link {
  color: inherit;
  text-decoration: none;
}
.section-about-awards__recent-type {
}
.section-about-awards__recent-count {
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  -khtml-font-smoothing: antialiased;
  -apple-font-smoothing: antialiased;
  font-smooth: always;
  -moz-osx-font-smoothing: grayscale;
  display: block;
  padding-top: 1.64286rem;
  border-top: 1px solid rgba(104, 104, 104, 0.5);
  margin-top: 2.5rem;
  margin-bottom: 9rem;
  font-size: 4.57143rem;
  line-height: 5.35714rem;
  color: #fff;
}
.section-about-awards__visual {
  width: 83.33333%;
  max-width: 38rem;
  margin-left: auto;
  margin-right: auto;
}
.section-about-awards__image-wrapper {
  position: relative;
  height: 0;
  padding-bottom: 100%;
  margin-bottom: -43%;
  z-index: 1;
  overflow: hidden;
}
.section-about-awards__image {
  position: absolute;
  top: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  width: auto;
  height: 100%;
}
@media (min-width: 1024px) {
  .section-about-awards {
    padding-top: 10.35714rem;
    margin-bottom: 0;
  }
  .section-about-awards .about-section-title {
    position: absolute;
    top: 0.92857rem;
    left: 12.5%;
  }
  .section-about-awards__content-wrapper {
    position: relative;
    max-width: 102.85714rem;
    margin-left: auto;
    margin-right: auto;
  }
  .section-about-awards__content {
    left: 30%;
    width: 60%;
    max-width: 51.07143rem;
  }
  .section-about-awards__heading {
    margin-bottom: 1.85714rem;
    font-size: 3.78571rem;
    line-height: 4rem;
  }
  .section-about-awards__body {
    margin-bottom: 6.42857rem;
    font-size: 1.28571rem;
  }
  .section-about-awards__logos {
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
  }
  .section-about-awards__logo-item {
    width: auto;
    margin-bottom: 3.57143rem;
  }
  .section-about-awards__recent {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin-bottom: 12.85714rem;
  }
  .section-about-awards__recent-title {
    margin-bottom: 1.07143rem;
  }
  .section-about-awards__recent-item {
    line-height: 1.64286rem;
  }
  .section-about-awards__recent-count {
    display: block;
    padding-top: 0;
    padding-left: 8.57143rem;
    border-top: 0;
    border-left: 1px solid rgba(104, 104, 104, 0.5);
    margin: 0;
    font-size: 3.85714rem;
    line-height: 7.85714rem;
  }
  .section-about-awards__visual {
    width: 75%;
    max-width: none;
    margin: 0 auto;
  }
  .section-about-awards__image-wrapper {
    padding-bottom: 49.35%;
    margin-bottom: -25%;
  }
}
.section-about-footer {
  position: relative;
  padding-top: calc(35% + 9.5rem);
  padding-bottom: 9.5rem;
  background-color: #e8e5e2;
}
.section-about-footer__content {
  position: relative;
  left: 8.33333%;
  width: 87.5%;
}
.section-about-footer__title {
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  -khtml-font-smoothing: antialiased;
  -apple-font-smoothing: antialiased;
  font-smooth: always;
  -moz-osx-font-smoothing: grayscale;
  margin-bottom: 2.21429rem;
  font-size: 2.28571rem;
  line-height: 2.5rem;
  letter-spacing: -0.016em;
}
.section-about-footer__title-bold {
  display: block;
  letter-spacing: -0.008em;
}
.section-about-footer__copy {
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  -khtml-font-smoothing: antialiased;
  -apple-font-smoothing: antialiased;
  font-smooth: always;
  -moz-osx-font-smoothing: grayscale;
  font-size: 1.14286rem;
  line-height: 1.92857rem;
  color: #686868;
}
.section-about-footer__copy .button-link {
  color: #1e1e1e;
}
@media (min-width: 645px) {
  .section-about-footer {
    padding-top: 25.85714rem;
  }
}
@media (min-width: 1024px) {
  .section-about-footer {
    padding-top: calc(18% + 12.5rem);
    padding-bottom: 11.28571rem;
  }
  .section-about-footer .list-about-footer {
    margin-left: auto;
  }
  .section-about-footer__content-wrapper {
    max-width: 102.85714rem;
    margin-left: auto;
    margin-right: auto;
  }
  .section-about-footer__content {
    left: 30%;
    width: 70%;
    max-width: 51.07143rem;
  }
  .section-about-footer__title {
    margin-bottom: 3.64286rem;
    font-size: 3.85714rem;
    line-height: 4rem;
    letter-spacing: 0;
  }
  .section-about-footer__title-bold {
    letter-spacing: 0;
  }
  .section-about-footer__copy {
    font-size: 1.28571rem;
    line-height: 2.14286rem;
  }
}
@media (min-width: 1440px) {
  .section-about-footer {
    padding-top: 31.92857rem;
  }
}
.logo-header {
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  -khtml-font-smoothing: antialiased;
  -apple-font-smoothing: antialiased;
  font-smooth: always;
  -moz-osx-font-smoothing: grayscale;
  color: #ffffff;
  font-size: 1.92857rem;
  line-height: normal;
}
.logo-header__logo {
  display: inline-block;
  vertical-align: middle;
  margin-right: 1.42857rem;
  width: 4.5rem;
  height: 4.71429rem;
}
.video-header {
  overflow: hidden;
  background-color: #aaa;
}
.video-header__video {
  position: absolute;
}
.video-header__poster {
  position: absolute;
}
.signature-header {
  display: block;
}
.signature-header__copy {
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  -khtml-font-smoothing: antialiased;
  -apple-font-smoothing: antialiased;
  font-smooth: always;
  -moz-osx-font-smoothing: grayscale;
  display: block;
  padding-bottom: 2.21429rem;
  width: 4.28571rem;
  color: #e8e5e2;
  font-size: 0.85714rem;
  line-height: 1.21429rem;
}
.signature-header--dark .signature-header__copy {
  color: #1e1e1e;
}
.signature-header__mask {
  position: relative;
  display: block;
  overflow: hidden;
}
.signature-header__word {
  position: relative;
  display: inline-block;
}
.signature-header__line {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.1);
}
.signature-header--dark .signature-header__line {
  background-color: #dcdbd9;
}
.logo-superherocheesecake {
  width: 95.83333%;
}
.logo-superherocheesecake svg {
  width: 100%;
  height: 100%;
}
@media (min-width: 768px) {
  .logo-superherocheesecake {
    width: 95.83333%;
  }
}
@media (min-width: 1024px) {
  .logo-superherocheesecake {
    width: 87.5%;
  }
}
.list-about {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
  -ms-flex-align: start;
  align-items: flex-start;
  -webkit-align-content: flex-start;
  -ms-flex-line-pack: start;
  align-content: flex-start;
  margin: 0 auto;
  padding-top: 2.5rem;
  width: 83.33333%;
  border-top: 1px solid #dcdbd9;
}
.list-about__item {
  display: inline-block;
  margin-bottom: 1.78571rem;
  width: 100%;
  height: auto;
  color: #1e1e1e;
  font-size: 0.85714rem;
}
.list-about__item--jobs {
  margin: 1.14286rem 0 0 auto;
  padding: 2.85714rem 0 0;
  border-top: 1px solid #dcdbd9;
}
@media (min-width: 1024px) {
  .list-about {
    padding-top: 3.78571rem;
  }
  .list-about {
    margin-left: 16.66667%;
    margin-right: 12.5%;
    width: 29.16667%;
  }
  .list-about__item {
    width: 42%;
    margin-bottom: 3.57143rem;
  }
  .list-about__item--jobs {
    margin: 9.14286rem 0 0 auto;
    padding: 3.57143rem 0 0;
  }
}
.content-about {
  margin: 0 auto;
  padding-top: 4.57143rem;
  width: 83.33333%;
  border-top: 1px solid #cfcdcb;
}
.content-about__title {
  margin-bottom: 2.5rem;
  color: #1e1e1e;
  font-size: 1.21429rem;
  line-height: 2.07143rem;
}
.content-about__content p {
  margin-bottom: 1.07143rem;
  color: #686868;
  font-size: 1rem;
  line-height: 2.07143rem;
}
.content-about__outro {
  margin-bottom: 3.57143rem;
  color: #1e1e1e;
  font-size: 1rem;
  line-height: 2.07143rem;
}
@media (min-width: 1024px) {
  .content-about {
    width: 29.16667%;
    padding-top: calc(1px + 3.78571rem);
    border-top: 0;
    margin: 0;
  }
}
.about-item {
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  -khtml-font-smoothing: antialiased;
  -apple-font-smoothing: antialiased;
  font-smooth: always;
  -moz-osx-font-smoothing: grayscale;
  color: #1e1e1e;
  font-size: 0.85714rem;
  line-height: 1.21429rem;
}
.about-item--email {
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
  word-wrap: break-word;
}
.about-item__label {
  margin-bottom: 0.14286rem;
  color: #686868;
}
.about-item__label--jobs {
  margin-left: -0.07143rem;
}
.about-item__label div {
  font-size: 1rem;
  letter-spacing: -1px;
  -webkit-transform: scale(0.82);
  transform: scale(0.82);
  -webkit-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
  will-change: transform;
}
@media (min-width: 425px) {
  .about-item--address {
    width: 100%;
  }
}
@media (min-width: 1024px) {
  .about-item--address {
    width: 8.57143rem;
  }
}
@media (min-width: 1245px) {
  .about-item--address {
    width: 100%;
  }
}
.list-social__item {
  margin-right: 0.71429rem;
}
.list-projects-featured__item {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  width: 100%;
  margin-bottom: 0;
}

.list-projects-featured__letter {
  position: absolute;
}
.list-projects-featured__letter--top-right {
  top: 2.28571rem;
  left: 91.66667%;
}
.list-projects-featured__letter--bottom-left {
  bottom: 0;
  left: 25%;
}
@media (min-width: 1024px) {
  .list-projects-featured__item {
    height: 46.85714rem;
  }
}
.project-featured {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  width: 100%;
  height: 100%;
  z-index: 2;
  background-color: black;
  padding-bottom: 3rem;
}
.project-featured__title {
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  -khtml-font-smoothing: antialiased;
  -apple-font-smoothing: antialiased;
  font-smooth: always;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  left: -0.35714rem;
  margin-bottom: 1.14286rem;
  width: 100%;
  color: white;
  font-size: 3.21429rem;
  line-height: 3rem;
}

.project-featured__title .char {
  transition: all 0.3s linear 0.1s;
  font-weight: bold;
  font-size: 75px;
}

.project-featured__view .viewChar {
  transition: all 0.3s linear;
  opacity: 0;
}

.project-featured__type {
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  -khtml-font-smoothing: antialiased;
  -apple-font-smoothing: antialiased;
  font-smooth: always;
  -moz-osx-font-smoothing: grayscale;
  position: absolute;
  top: 0;
  left: 0;
  width: 6.42857rem;
  margin-left: 8.33333%;
  color: white;
  font-size: 1rem;
  line-height: 1.42857rem;
}
.project-featured__type {
  transition: all 0.3s linear 0.4s;
  opacity: 1;
}
.project-featured__type.active {
  opacity: 0 !important;
}
.project-feature__description {
  position: relative;
}
.project-featured__paragraph {
  position: relative;
  margin-left: 41.66667%;
  width: 41.66667%;
  color: white;
  font-size: 1rem;
  line-height: 1.42857rem;
  font-weight: 300;
}
.project-featured__paragraph {
  opacity: 1;
  transition: all 0.3s linear 0.5s;
}
.project-featured__paragraph.active {
  opacity: 0 !important;
}
.project-featured__line {
  opacity: 0;
  transform: translate3d(0px, 0px, 0px) scale(1, 1);
  opacity: 0;
  transform-origin: 0% 50% 0px;
  transition: all 0.3s linear;
}
.project-featured__line.active {
  opacity: 1 !important;
  display: block !important;
  transform: translate3d(95px, 0px, 0px) scale(0.2, 1);
}
.project-featured__view-copy {
  opacity: 0;
  color: white;
}
.project-featured__view-copy.active {
  opacity: 1 !important;
}

@media (min-width: 768px) {
  .project-featured__view {
    display: block;
    position: absolute;
    top: 50%;
    height: 2.78571rem;
    width: 100%;
    margin-left: 8.33333%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 1;
  }
  .project-featured__line {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 8.33333%;
    height: 1px;
    background-color: white;
    will-change: transform;
  }
  .project-featured__view-copy {
    font-weight: normal;
    -webkit-font-smoothing: antialiased;
    -khtml-font-smoothing: antialiased;
    -apple-font-smoothing: antialiased;
    font-smooth: always;
    -moz-osx-font-smoothing: grayscale;
    position: absolute;
    width: 12.85714rem;
    margin-left: 8.33333%;
    padding: 0;
    padding-left: 1.42857rem;
    font-size: 1.57143rem;
    line-height: 2.78571rem;
    will-change: left;
  }
}
@media (min-width: 1024px) {
  .project-featured {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    display: block;
    height: auto;
  }
  .project-featured__info {
    display: block;
    position: absolute;
    top: 50%;
    width: 100%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 1;
  }

  .project-featured__info.active {
    opacity: 0;
  }
  .project-featured__title {
    position: relative;
    left: -0.71429rem;
    font-size: 7.85714rem;
    line-height: 7.42857rem;
  }
  .project-featured__description {
    position: absolute;
    margin-top: 2.5rem;
  }
  .project-featured__type {
    margin-left: 0;
    width: 12.5%;
  }
  .project-featured__paragraph {
    position: relative;
    width: 13.92857rem;
    margin-top: 2.5rem;
    padding: 0;
    margin-left: 16.66667%;
  }
}
.heading-project-header {
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  -khtml-font-smoothing: antialiased;
  -apple-font-smoothing: antialiased;
  font-smooth: always;
  -moz-osx-font-smoothing: grayscale;
  color: #e8e5e2;
  font-size: 2.57143rem;
  line-height: 2.85714rem;
}
.section-project-header__img {
  width: 100%;
}
@media (min-width: 1024px) {
  .heading-project-header {
    font-size: 7.14286rem;
    line-height: 6.42857rem;
  }
}
@media (min-width: 1323px) {
  .heading-project-header {
    font-size: 9.28571rem;
    line-height: 8.57143rem;
  }
}
@media (min-width: 1680px) {
  .heading-project-header {
    font-size: 11.85714rem;
    line-height: 11.21429rem;
  }
}
.content-project-info {
  -webkit-box-ordinal-group: 2;
  -webkit-order: 1;
  -ms-flex-order: 1;
  order: 1;
  position: relative;
  left: 8.33333%;
  width: 83.33333%;
  margin-bottom: 2.71429rem;
}
.content-project-info__title {
  width: 100%;
  margin-bottom: 1.07143rem;
  color: #1e1e1e;
  font-size: 1.21429rem;
  line-height: 2.07143rem;
}
.content-project-info__content p {
  margin-bottom: 2.14286rem;
  color: #686868;
  font-size: 1rem;
  line-height: 2.14286rem;
}
.content-project-info__content p:last-child {
  margin-bottom: 0;
}
@media (min-width: 1024px) {
  .content-project-info {
    -webkit-box-ordinal-group: 3;
    -webkit-order: 2;
    -ms-flex-order: 2;
    order: 2;
    width: 66.667%;
    margin-bottom: 0;
  }
  .content-project-info__title {
    margin-bottom: 3.21429rem;
    font-size: 1.71429rem;
    line-height: 2.14286rem;
  }
  .content-project-info__content p {
    margin-bottom: 2.71429rem;
  }
}
.list-project-info {
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  -khtml-font-smoothing: antialiased;
  -apple-font-smoothing: antialiased;
  font-smooth: always;
  -moz-osx-font-smoothing: grayscale;
  -webkit-box-ordinal-group: 3;
  -webkit-order: 2;
  -ms-flex-order: 2;
  order: 2;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: stretch;
  -webkit-align-items: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
  -webkit-align-content: flex-start;
  -ms-flex-line-pack: start;
  align-content: flex-start;
  position: relative;
  left: 8.33333%;
  width: 83.33333%;
}
.list-project-info__item {
  display: block;
  margin-bottom: 1.42857rem;
  width: 48%;
  color: #686868;
  font-size: 0.85714rem;
  line-height: 1.21429rem;
}
.list-project-info__item--link {
  width: 100%;
  margin-bottom: 3.92857rem;
}
.list-project-info__label {
  margin-bottom: 0.35714rem;
  color: #1e1e1e;
}
@media (min-width: 1024px) {
  .list-project-info {
    -webkit-box-ordinal-group: 2;
    -webkit-order: 1;
    -ms-flex-order: 1;
    order: 1;
    left: 0;
    width: 22%;
    margin-right: 8.333%;
  }
  .list-project-info__item {
    width: 100%;
    margin-bottom: 2.85714rem;
  }
  .list-project-info__item--link {
    margin-bottom: 5rem;
  }
}
.list-project {
  display: block;
  position: relative;
  left: 0;
  right: 0;
  margin: 0 auto;
  font-size: 0;
}
.list-project__item {
  display: block;
  margin-bottom: 4.28571rem;
  -webkit-perspective: 600px;
  perspective: 600px;
}
.list-project__item--text {
  margin-top: -2.14286rem;
}
.list-project__item:last-child {
  margin-bottom: 0;
}
@media (min-width: 1024px) {
  .list-project__item {
    margin-bottom: 7.14286rem;
  }
  .list-project__item--text {
    margin-top: -4.14286rem;
  }
}
.project-img {
  display: block;
  position: relative;
  left: 8.33333%;
  width: 83.33333%;
  text-align: center;
  background-color: #222222;
}
.project-img--wide {
  left: 0;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}
.project-img__img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 100%;
  background-color: #333;
  will-change: transform;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.project-img__placeholder {
  display: block;
  position: relative;
  width: 100%;
  height: 56.25%;
}
.project-img__canvas {
  position: absolute;
  top: 0;
  left: 0;
}
@media (min-width: 1024px) {
  .project-img {
    left: auto;
    width: 66.66667%;
    max-width: 68.57143rem;
    margin: 0 auto;
  }
  .project-img--wide {
    width: 100%;
    max-width: 100%;
  }
}
.project-video {
  display: block;
  position: relative;
  left: 8.33333%;
  width: 83.33333%;
  text-align: center;
  -webkit-perspective: 600px;
  perspective: 600px;
}
.project-video--wide {
  left: 0;
  width: 100%;
}
.project-video__video {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-color: #333;
}
.project-video__placeholder {
  display: block;
  position: relative;
  width: 100%;
  height: 56.25%;
}
.project-video__canvas {
  position: absolute;
  top: 0;
  left: 0;
}
@media (min-width: 1024px) {
  .project-video {
    left: auto;
    width: 66.66667%;
    max-width: 68.71429rem;
    margin: 0 auto;
  }
}
.project-copy {
  display: block;
  position: relative;
  left: 8.33333%;
  width: 83.33333%;
}
.project-copy h2 {
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  -khtml-font-smoothing: antialiased;
  -apple-font-smoothing: antialiased;
  font-smooth: always;
  -moz-osx-font-smoothing: grayscale;
  margin-bottom: 1.07143rem;
  color: #e8e5e2;
  font-size: 1.21429rem;
  line-height: 2rem;
  text-align: left;
}
.project-copy p {
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  -khtml-font-smoothing: antialiased;
  -apple-font-smoothing: antialiased;
  font-smooth: always;
  -moz-osx-font-smoothing: grayscale;
  margin-bottom: 2.71429rem;
  color: #e8e5e2;
  font-size: 1rem;
  line-height: 2.14286rem;
}
.project-copy p:last-child {
  margin-bottom: 0;
}
@media (min-width: 1024px) {
  .project-copy {
    left: auto;
    width: 50%;
    max-width: 51.28571rem;
    margin: 0 auto;
  }
  .project-copy h2 {
    font-size: 1.57143rem;
    line-height: 2.5rem;
    text-align: center;
  }
}
.list-project-footer {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
  -ms-flex-align: start;
  align-items: flex-start;
  -webkit-align-content: flex-start;
  -ms-flex-line-pack: start;
  align-content: flex-start;
  padding-top: 4.85714rem;
  width: 83.33333%;
  border-top: 1px solid #dcdbd9;
}
.list-project-footer__item {
  display: inline-block;
  margin-bottom: 1.78571rem;
  width: 100%;
  height: auto;
  color: #1e1e1e;
  font-size: 0.85714rem;
}
.list-project-footer__item:nth-last-child(1) {
  margin-bottom: 0;
}
@media (min-width: 1024px) {
  .list-project-footer {
    width: 50rem;
  }
  .list-project-footer__item {
    margin-bottom: 3.57143rem;
    width: 16.66667rem;
  }
  .list-project-footer__item--phone,
  .list-project-footer__item--jobs {
    width: 8.33333rem;
  }
}
.project-footer-item {
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  -khtml-font-smoothing: antialiased;
  -apple-font-smoothing: antialiased;
  font-smooth: always;
  -moz-osx-font-smoothing: grayscale;
  width: 80%;
  min-height: 2.57143rem;
  color: #1e1e1e;
  font-size: 0.85714rem;
  line-height: 1.21429rem;
}
.project-footer-item--email {
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
  word-wrap: break-word;
}
.project-footer-item__label {
  margin-bottom: 0.14286rem;
  color: #686868;
}
.project-footer-item__label div {
  font-size: 1rem;
  letter-spacing: -1px;
  -webkit-transform: scale(0.82);
  transform: scale(0.82);
  -webkit-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
  will-change: transform;
}
@media (min-width: 425px) {
  .project-footer-item--address {
    width: 100%;
  }
}
@media (min-width: 1024px) {
  .project-footer-item {
    width: 100%;
  }
  .project-footer-item--address {
    width: 8.57143rem;
  }
}
@media (min-width: 1245px) {
  .project-footer-item--address {
    width: 100%;
  }
}
.about-section-title {
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  -khtml-font-smoothing: antialiased;
  -apple-font-smoothing: antialiased;
  font-smooth: always;
  -moz-osx-font-smoothing: grayscale;
  font-size: 1rem;
  line-height: 2rem;
}
.about-section-title--light {
  color: #fff;
}
.about-section-title--light .about-section-title__line {
  background-color: #686868;
}
.about-section-title__line {
  display: inline-block;
  width: 1.42857rem;
  height: 1px;
  margin-left: 0.5rem;
  background-color: #cfcdcb;
  vertical-align: middle;
}
@media (min-width: 1024px) {
  .about-section-title {
    font-size: 1.07143rem;
  }
  .about-section-title__line {
    margin-left: 0.35714rem;
  }
}
.overlay {
  position: fixed;
  left: 0;
  z-index: 1;
}
.overlay-banner {
  position: fixed;
  bottom: 0;
  width: 100%;
  background: #1e1e1e;
  font-style: normal;
  font-weight: 400;
  font-size: 1.21429rem;
  line-height: 2.07143rem;
  color: #e8e5e2;
  will-change: transform;
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
}
.overlay-banner .button-link {
  font-size: 0.85714rem;
  line-height: 2.07143rem;
}
.overlay-banner__container {
  padding: 2.85714rem 0;
}
.overlay-banner__content {
  margin-left: 8.33333%;
  margin-right: 12.5%;
}
.overlay-banner__column:nth-child(1) {
  margin: 0 0 1.42857rem;
}
.overlay-banner__column:nth-child(2) {
  text-align: right;
}
@media (min-width: 1024px) {
  .overlay-banner__content {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
  }
  .overlay-banner__column:nth-child(1) {
    max-width: 38.35714rem;
    margin: 0;
  }
  .overlay-banner__column:nth-child(2) {
    text-align: right;
  }
  .overlay-banner__content {
    max-width: 63.92857rem;
    margin: 0 16.66667% 0 16.66667%;
  }
}
@media (min-width: 1245px) {
  .overlay-banner__container {
    max-width: 102.85714rem;
    margin-left: auto;
    margin-right: auto;
  }
}
.overlay-vimeo {
  top: 0;
  width: 100vw;
  height: 100vh;
  display: none;
}
.overlay-vimeo.is-visible {
  display: block;
}
.overlay-vimeo__background {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  background: #1e1e1e;
  opacity: 0.95;
  will-change: transform;
}
.overlay-video__player-container {
  position: relative;
  height: calc(100% - 16.66667%);
  width: calc(100% - 16.66667%);
  margin: 8.33333%;
  overflow: hidden;
  will-change: transform;
}
.overlay-video__player {
  position: relative;
  height: 100%;
  width: 100%;
  max-width: 77.14286rem;
  margin: 0 auto;
  will-change: transform;
}
.overlay-video__player iframe {
  height: 100%;
  width: 100%;
}
.overlay-vimeo__button-close {
  position: absolute;
  top: 3.57143rem;
  right: 4.64286rem;
}
@media (min-width: 1024px) {
  .overlay-video__player-container {
    position: relative;
    height: calc(100% - 360px);
    width: calc(100% - 300px);
    margin: 10.71429rem 12.85714rem;
  }
}
.page-home {
  z-index: 5;
  background-color: #e8e5e2;
}
@media (min-width: 768px) {
  .page-home .logo-header-small__label {
    display: none;
  }
}
.page-generic {
  z-index: 5;
  background-color: #e8e5e2;
}
@media (min-width: 768px) {
  .page-generic .logo-header-small__label {
    display: none;
  }
}
.page-project {
  z-index: 10;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #1e1e1e;
}
.page-about {
  background-color: #e8e5e2;
}

.headerBG img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.headerBG {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  transition: transform 2s ease, opacity 2s ease;

  z-index: 999999;
}

.homeContent {
  position: relative;
  z-index: 1;
}

.banner {
  height: 200vh;
  position: relative;
}

.banner .wrap {
  height: 100%;
}

.banner .background {
  position: fixed;
  left: 0;
  z-index: 0;
  width: 100%;
  top: 0px;
}

footer {
  background-color: #0d0523 !important;
  padding: 0 2rem;
  position: relative;
  z-index: 2;
}
footer .top {
  padding: 2rem 0;
  gap: 5rem;
  align-items: center;
}
footer .top .content {
  color: white;
}

footer .title h2 {
  color: white;
  font-size: 10rem;
  align-items: center;
  gap: 2rem;
}
footer .title span {
  color: #27ffd9;
  margin-bottom: 3rem;
}
footer .contact ul,
footer .contact ul li {
  padding: 0;
  list-style-type: none;
  color: white;
  font-size: 1.4rem;
}
footer .contact ul {
  gap: 2rem;
}
footer .socials-wrap {
  height: max-content;
}

footer .linewrap {
  padding: 3rem 0;
  border-top: 1px solid #8e8e8e;
}
footer .bottom {
  background-image: url(/wp-content/uploads/2024/07/MDCREATIVE.png);
  background-position: 10px;
  background-size: cover;
  background-repeat: no-repeat;
}

@media screen and (max-width: 991px) {
  footer .title h2 {
    font-size: 3rem;
    gap: 1rem;
  }
  footer .title span {
    margin-bottom: 1rem;
  }
  footer .contact ul,
  footer .contact {
    flex-direction: column;
  }
  .socials-wrap .socials li {
    opacity: 1;
  }
  .socials-wrap .socials {
    margin-top: 0;
  }
  .socials-wrap {
    display: flex;
    width: 100%;
    gap: 1rem;
    transform: unset !important;
  }
  .socials li {
    float: left;
    transform: unset !important;
  }
  .socials li:last-child {
    margin-left: 10px;
  }
	.project-featured__title > div{
		display: flex !important;
		gap: 1.5rem;
	}
  .socials-text {
    width: 32%;
  }
  .socials-wrap {
    margin-bottom: 2rem;
  }

  footer .socials-icon {
    margin-left: -10px;
  }
  footer .socials-wrap {
    margin-top: 1rem;
  }
  .copyright-wrap {
    display: none;
  }
  footer.portfolio .socials-wrap {
    display: none;
  }
  #portfolio-wrap.boxed .item {
    height: 280px;
  }
	#portfolio .item {
		width: 100%;
	}
}

#hero {
  overflow: hidden;
  width: 100%;
  height: auto;
  position: relative;
  z-index: 0;
}

#hero.has-image {
  z-index: 2;
  height: 100vh;
}

#hero.error {
  height: calc(100vh - 140px);
}

#hero.post-hero {
  height: 50vh;
  -webkit-transition: height 0.5s ease-in-out 0s;
  transition: height 0.5s ease-in-out 0s;
}

.load-post-page #hero.post-hero {
  z-index: 2;
  height: 100vh;
}

#hero.has-map {
  pointer-events: none;
}

.transition #hero {
  opacity: 1 !important;
  transform: translate3d(0px, 0px, 0px) !important;
  -webkit-transform: translate3d(0px, 0px, 0px) !important;
}

#hero-styles {
  position: relative;
  width: 100%;
  height: auto;
  top: 0;
  left: 0;
  right: 0;
  display: block;
  margin: 0 auto;
  overflow: hidden;
  z-index: 2;
}

#hero.has-image #hero-styles,
#hero.error #hero-styles {
  position: fixed;
  height: 100vh;
}

#hero-caption {
  display: table;
  width: 100%;
  max-width: 1280px;
  padding: 180px 60px 180px 60px;
  margin: 0 auto;
  height: 100%;
  position: relative;
  text-align: left;
  box-sizing: border-box;
}

#hero.has-image #hero-caption,
#hero.error #hero-caption {
  padding: 20px;
}

.load-post-page #hero.post-hero #hero-caption {
  padding: 180px 60px 180px 60px;
}

#hero.post-hero #hero-caption {
  -webkit-transition: padding 0.5s ease-in-out 0s;
  transition: padding 0.5s ease-in-out 0s;
  padding: 180px 60px 0px 60px;
}

#hero #hero-caption .inner {
  display: table-cell;
  vertical-align: bottom;
}

#hero.has-image #hero-caption .inner,
#hero.post-hero #hero-caption .inner,
#hero.error #hero-caption .inner {
  vertical-align: middle;
}

#hero-bg-wrapper {
  position: absolute;
  width: 100%;
  height: 100vh;
  z-index: 1;
  margin: 0 auto;
  left: 0;
  top: 0;
  right: 0;
  -webkit-transition: filter 0.6s ease-in-out;
  transition: filter 0.6s ease-in-out;
  overflow: hidden;
}

#hero-bg-image::after {
  content: "";
  width: 100%;
  height: 60%;
  position: absolute;
  bottom: 0;
  left: 0;
  pointer-events: none;
  background: -moz-linear-gradient(
    top,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.5) 100%
  );
  background: -webkit-linear-gradient(
    top,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.5) 100%
  );
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.5) 100%
  );
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 );
}

#hero-image-parallax {
  position: absolute;
  width: 100%;
  height: 100%;
}

#hero-bg-image {
  background-size: cover;
  position: absolute;
  background-position: center center;
  width: 100%;
  height: 100%;
  opacity: 0.8;
  z-index: 0;
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
}

.load-project-page #hero-bg-image,
.load-next-project #hero-bg-image {
  opacity: 0.8;
  -webkit-transform: scale(1);
  transform: scale(1);
}

.hero-title {
  font-size: 80px;
  line-height: 90px;
  color: #000;
  -webkit-text-stroke: 1px #000;
  font-weight: 600;
  position: relative;
  margin-left: -3px;
  margin-top: 19px;
  margin-bottom: 0px;
  transform: translateY(10vh);
  -webkit-transform: translateY(10vh);
  opacity: 0;
}

.light-content .hero-title {
  color: #fff;
  -webkit-text-stroke: 1px #fff;
}

.text-align-center .hero-title,
#hero.has-image .hero-title {
  text-align: center;
}

.hero-title span,
.light-content h1.hero-title span {
  color: transparent !important;
}

.load-next-project .hero-title {
  transform: translateY(0) !important;
  -webkit-transform: translateY(0) !important;
  opacity: 1 !important;
}

#hero.has-image .hero-title {
  transform: translateY(10vh);
  -webkit-transform: translateY(10vh);
  opacity: 0;
}

.hero-subtitle {
  font-size: 12px;
  font-weight: 600;
  line-height: 20px;
  margin-bottom: 0px;
  width: 100%;
  z-index: 10;
  opacity: 0;
  position: relative;
  transform: translateY(18vh);
  -webkit-transform: translateY(18vh);
}

.text-align-center .hero-subtitle,
#hero.has-image .hero-subtitle {
  text-align: center;
  color: white;
}

.hero-subtitle:before {
  content: "";
  position: absolute;
  width: 20px;
  height: 2px;
  background-color: #000;
  left: 0;
  margin-left: 0px;
  top: -20px;
}

.light-content .hero-subtitle:before {
  background-color: #fff;
}

#hero.has-image .hero-subtitle:before,
.text-align-center .hero-subtitle:before {
  left: 50%;
  margin-left: -10px;
}

.load-next-project .hero-subtitle {
  transform: translateY(10vh);
  -webkit-transform: translateY(10vh);
}

.scroll-down-wrap {
  opacity: 0;
  transform: translateY(50px) scale(0.8);
  -webkit-transform: translateY(50px) scale(0.8);
  visibility: visible;
}

.scroll-down-wrap,
.scroll-down-wrap.no-border {
  position: absolute;
  bottom: 60px;
  left: 0;
  width: 60px;
  margin-left: 5px;
  z-index: 101;
  left: 50%;
  margin-left: -26px;
}

.scroll-down-wrap.no-border .section-down-arrow {
  display: inline-block;
  width: 49px;
  height: 49px;
  color: #000 !important;
  border: 2px solid #000;
  text-align: center;
  line-height: 50px;
  border-radius: 100px;
  font-size: 25px;
  -webkit-border-radius: 100px;
  transition: opacity 0.4s ease;
  -webkit-transition: opacity 0.4s ease;
  overflow: hidden;
  margin-left: 0px;
  left: 0;
  opacity: 0.6;
}

.light-content .scroll-down-wrap.no-border .section-down-arrow {
  color: #fff !important;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
}

.scroll-down-wrap.no-border .section-down-arrow,
.slider-down-arrow.no-border {
  border: none !important;
  overflow: visible;
  text-align: center;
  opacity: 1;
  height: auto;
  bottom: 13px;
  -webkit-animation: nudgeMouse 2.4s cubic-bezier(0.25, 0.46, 0.45, 0.94)
    infinite;
  animation: nudgeMouse 2.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
}

.nectar-scroll-icon-path {
  fill: transparent;
  stroke-width: 2px;
  stroke-dashoffset: 120;
  stroke-dasharray: 120;
  -webkit-animation: mouse-scroll-btn-roll-out 0.55s
    cubic-bezier(0.5, 0.1, 0.07, 1);
  animation: mouse-scroll-btn-roll-out 0.55s cubic-bezier(0.5, 0.1, 0.07, 1);
}

.nectar-scroll-icon {
  width: 30px;
  height: 45px;
  text-align: center;
  cursor: pointer;
  position: relative;
  z-index: 100;
}

.scroll-down-wrap.no-border .section-down-arrow:after,
.slider-down-arrow.no-border:after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  display: block;
  width: 30px;
  height: 45px;
  margin-left: -15px;
  border: 2px solid rgba(0, 0, 0, 0.5);
  border-radius: 30px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  z-index: 62;
}

.light-content .scroll-down-wrap.no-border .section-down-arrow:after,
.light-content .slider-down-arrow.no-border:after {
  border: 2px solid rgba(255, 255, 255, 0.5);
}

.scroll-down-wrap.no-border:hover .section-down-arrow:before,
.slider-down-arrow.no-border:hover:before {
  background-color: rgba(0, 0, 0, 1);
}

.light-content .scroll-down-wrap.no-border:hover .section-down-arrow:before,
.light-content .slider-down-arrow.no-border:hover:before {
  background-color: rgba(255, 255, 255, 1);
}

.scroll-down-wrap.no-border:hover .nectar-scroll-icon-path,
.slider-down-arrow.no-border:hover .nectar-scroll-icon-path {
  stroke-dashoffset: 0;
  -webkit-animation: mouse-scroll-btn-roll-over 0.55s
    cubic-bezier(0.5, 0.1, 0.07, 1);
  animation: mouse-scroll-btn-roll-over 0.55s cubic-bezier(0.5, 0.1, 0.07, 1);
}

@-webkit-keyframes mouse-scroll-btn-roll-over {
  0% {
    stroke-dashoffset: 120;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes mouse-scroll-btn-roll-over {
  0% {
    stroke-dashoffset: 120;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

@-webkit-keyframes mouse-scroll-btn-roll-out {
  0% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: -120;
  }
}

@keyframes mouse-scroll-btn-roll-out {
  0% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: -120;
  }
}

.scroll-down-wrap.no-border .section-down-arrow:before,
.slider-down-arrow.no-border:before {
  position: absolute;
  content: "";
  display: block;
  left: 50%;
  margin-left: -1px;
  top: 22px;
  background-color: rgba(0, 0, 0, 0.5);
  width: 2px;
  height: 6px;
  border-radius: 10px;
  transition: background-color 0.55s cubic-bezier(0.5, 0.1, 0.07, 1);
  -webkit-animation: trackBallSlide 2.4s cubic-bezier(0, 0, 0.725, 1) infinite;
  animation: trackBallSlide 2.4s cubic-bezier(0, 0, 0.725, 1) infinite;
}

.light-content .scroll-down-wrap.no-border .section-down-arrow:before,
.light-content .slider-down-arrow.no-border:before {
  background-color: rgba(255, 255, 255, 0.5);
}

@-webkit-keyframes trackBallSlide {
  0% {
    opacity: 1;
    -webkit-transform: scaleY(1) translateY(-10px);
    transform: scaleY(1) translateY(-10px);
  }
  45% {
    opacity: 0;
    -webkit-transform: scaleY(0.5) translateY(13px);
    transform: scaleY(0.5) translateY(13px);
  }
  46% {
    opacity: 0;
    -webkit-transform: scaleY(1) translateY(-10px);
    transform: scaleY(1) translateY(-10px);
  }
  65%,
  100% {
    opacity: 1;
    -webkit-transform: scaleY(1) translateY(-10px);
    transform: scaleY(1) translateY(-10px);
  }
}

@keyframes trackBallSlide {
  0% {
    opacity: 1;
    -webkit-transform: scaleY(1) translateY(-10px);
    transform: scaleY(1) translateY(-10px);
  }
  45% {
    opacity: 0;
    -webkit-transform: scaleY(0.5) translateY(13px);
    transform: scaleY(0.5) translateY(13px);
  }
  46% {
    opacity: 0;
    -webkit-transform: scaleY(1) translateY(-10px);
    transform: scaleY(1) translateY(-10px);
  }
  65%,
  100% {
    opacity: 1;
    -webkit-transform: scaleY(1) translateY(-10px);
    transform: scaleY(1) translateY(-10px);
  }
}

@keyframes nudgeMouse {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  45% {
    -webkit-transform: translateY(8px);
    transform: translateY(8px);
  }
  65%,
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@-webkit-keyframes nudgeMouse {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  45% {
    -webkit-transform: translateY(8px);
    transform: translateY(8px);
  }
  65%,
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

#main-contenter figure {
  width: 100%;
  margin: 0;
}

#main-contenter figure img {
  width: 100%;
  height: auto;
}

.wp-block-grenada-gutenberg-container {
  display: flex;
}

.wp-block-grenada-gutenberg-container .two_third {
  flex-direction: column;
  color: white;
  width: 65.33% !important;
}
.wp-block-grenada-gutenberg-container.general {
  width: 1280px;
  padding: 0 60px !important;
  margin: 0 auto;
}

.wp-block-grenada-gutenberg-container .one_third {
  width: 30.6% !important;
  margin-right: 4%;
}
.wp-block-grenada-gutenberg-container .one_third h4 {
  font-size: 24px;
  line-height: 36px;
  color: white;
  margin-left: -1px;
}
.wp-block-grenada-gutenberg-container .two_third p {
  color: #999;
  font-size: 14px;
}

.wp-block-grenada-gutenberg-container .two_third p a {
  color: white;
  position: relative;
  padding-bottom: 4px;
}

.wp-block-grenada-gutenberg-container .two_third p a::before {
  content: "";
  position: absolute;
  bottom: 0px;
  left: 0;
  width: 100%;
  height: 2px;
  background: rgba(255, 255, 255, 1);

  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.2s ease-out;
}

.wp-block-grenada-gutenberg-container .two_third p a:hover::before {
  transform: scaleX(1);
  transform-origin: left;
}

#main {
  padding-bottom: 0 !important;
}

@media screen and (max-width: 991px) {
  #hero-caption {
    height: 80%;
  }
  .wp-block-grenada-gutenberg-container.general {
    flex-direction: column;
    padding: 0 15px !important;
    width: 100% !important;
  }
  .wp-block-grenada-gutenberg-container .two_third,
  .wp-block-grenada-gutenberg-container .one_third {
    width: 100% !important;
  }
  .wp-block-grenada-gutenberg-container .one_third h4 {
    margin-bottom: 20px;
  }
  #main-contenter figure {
    padding: 0;
  }
}

#content-scroll {
  height: 100vh;
}

#hero-bg-image,
#hero-image-parallax,
#hero-caption {
  transition: all 0.1s ease-in;
}

.image-changing {
  position: fixed;
  transition: all 0.5s ease-out;
  display: none;
  background-position: center;
  background-size: cover;
  backdrop-filter: opacity(0.8);
  background-repeat: no-repeat;
  transform: scale(1.05, 1.05);
}
.image-changing::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: black;
  opacity: 0.2;
}
.image-changing::after {
  content: "";
  width: 100%;
  height: 60%;
  position: absolute;
  bottom: 0;
  left: 0;
  pointer-events: none;
  background: -moz-linear-gradient(
    top,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.5) 100%
  );
  background: -webkit-linear-gradient(
    top,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.5) 100%
  );
  /* background: linear-gradient( to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100% ); */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 );
}

.image-changing.active {
  width: 100vw !important;
  height: 100vh !important;
  left: 0 !important;
  top: 0 !important;
}

.overlay-thumb {
  display: none;
  position: fixed;
  width: 100vw;
  height: 100vh;
  background: black;
  z-index: 999999;
  left: 0;
  top: 0;
  animation: showoverlay 0.5s ease;
  opacity: 1;
}

.overlay-thumb.active {
  display: block;
}

@keyframes showoverlay {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.mini-cart {
  display: none !important;
}
.elementor-widget-wgl-header-side_pane {
  width: 169px;
}

#main {
  transform: unset !important;
}

.loading {
  position: fixed;
  width: 100vw;
  height: 100vh;
  left: 0;
  top: 0;
  background-color: #0d0523;
  z-index: 999999999;
  transition: all 0.3s linear;
}

.loading .range {
  width: 25%;
  margin-top: 2rem;
  background-color: #403f54;
  height: 3px;
  position: relative;
}
.loading .range .actual {
  position: absolute;
  width: 50%;
  height: 100%;
  background-color: #27ffd9;
  left: 0;
  top: 0;
} /* Vector 13 */

.loading.hide {
  opacity: 0;
}

.weare span {
  position: relative;
}
.weare span img {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  transition: all 0.3s linear;
  z-index: -1;
}
.weare span:hover > img {
  opacity: 1;
  z-index: 1;
}

.home {
  background-color: black;
	padding: 0;
}


.hover-image::after {
    content: '';
    position: fixed; /* Sử dụng fixed để hình ảnh luôn đi theo con trỏ */
    display: none;
    width: 200px; /* Điều chỉnh kích thước ảnh */
    height: 400px;
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none;
    transform: translate(-50%, -50%); /* Để hình ảnh xuất hiện ngay giữa con trỏ */
    z-index: 1000;
}

.hover-image.active::after {
    display: block;
	z-index: 999999999;
}


.hover-image::after {
    background-image: var(--hover-image-url);
    left: var(--hover-x);
    top: calc(var(--hover-y) - 75px);
}

 .singlenav #menu-header-menu  a{
	color: white !important;
}


.mobile {
	display:none;
}
.project-featured__title > div{
	display:flex !important;
	gap: .7rem;
	flex-wrap: wrap;
}
@media screen and (max-width: 991px){
	.mobile {
	display:block;
}
	.desk {
	display:none;
}
	
	.banner .background {
  background-image: url(/wp-content/uploads/2024/11/mobile-anh-trang-dau.png);

}

}

/* 
--------------------------------------------------------
codepen layout
--------------------------------------------------------


/* 
--------------------------------------------------------
openbtn
--------------------------------------------------------
*/
.openbtn {
    width: 50px;
    height: 50px;
    border-radius: 5px;
    cursor: pointer;
    position: relative;
}

.openbtn span {
    position: absolute;
    background: #fff;
    display: inline-block;
    border-radius: 3px;
    right: 14px;
    height: 3px;
    transition: all .4s;
}

.openbtn span:nth-of-type(1) {
    top: 15px;
    width: 45%;
}

.openbtn span:nth-of-type(2) {
    top: 23px;
    width: 35%;
}

.openbtn span:nth-of-type(3) {
    top: 31px;
    width: 20%;
}

.openbtn.active span:nth-of-type(1) {
    width: 45%;
    top: 18px;
    left: 14px;
    transform: translateY(6px) rotate(-135deg);
}

.openbtn.active span:nth-of-type(2) {
    opacity: 0;
}

.openbtn.active span:nth-of-type(3) {
    width: 45%;
    top: 30px;
    left: 14px;
    transform: translateY(-6px) rotate(135deg);
}
.m-menu.active {
    right: 0;
}
.m-menu{
	padding: 1.5rem
	
}

.m-menu {
    width: 100vw;
    height: 100vh;
    position: fixed;
    background: #100133;
    top: 0;
    right: -100vw;
    z-index: 99999999999;
    transition: all .3s linear;
	    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.m-menu .navbar-brand img{
	height: 65px;
}
.m-menu .closeMenu{
	background-color: transparent;
	outline:none;
	border: none;
	color: white;
	font-size: 2rem;
}

.contactMenu{
	margin: 3rem 0;
	color: #D6ECE8;
}

.contactMenu h3{
	font-weight: 400 !important;
	color: #F6EB0F;
	font-size: 2.3rem;
}
.contactMenu span{
	font-size: 2rem;
}

#menu-mobile-menu  .parallax-element, 
#menu-mobile-menu  .parallax-wrap{
	transform: unset !important;
}
#menu-mobile-menu, #menu-mobile-menu li{
	list-style: none;
	margin-bottom: 1.4rem;
}
#menu-mobile-menu li a{
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 1.6rem;
	color: white;
	padding: 0;
	padding-bottom: .7rem;
	border-bottom: 1px solid white;
}

.shareMenu {
	display:flex;
	align-items: center;
	color: white;
	gap: 2rem;
}


.shareMenu .socials{
	margin: 0;
}