/* thatfolk - 2023 */
@media (max-width: 767px) {
  .hidden-xs,
  tr.hidden-xs,
  th.hidden-xs,
  td.hidden-xs {
    display: none !important; } }
@media (min-width: 768px) and (max-width: 991px) {
  .hidden-sm,
  tr.hidden-sm,
  th.hidden-sm,
  td.hidden-sm {
    display: none !important; } }
@media (min-width: 992px) and (max-width: 1199px) {
  .hidden-md,
  tr.hidden-md,
  th.hidden-md,
  td.hidden-md {
    display: none !important; } }
@media (min-width: 1200px) {
  .hidden-lg,
  tr.hidden-lg,
  th.hidden-lg,
  td.hidden-lg {
    display: none !important; } }
a {
  cursor: pointer; }
  a:hover {
    text-decoration: none; }
  a:focus {
    text-decoration: none; }

.clearfix:before, .clearfix:after {
  content: "";
  display: table; }

.clearfix:after {
  clear: both; }

.clearfix {
  *zoom: 1; }

ul {
  display: block;
  list-style-type: disc;
  -webkit-margin-before: 0;
  -webkit-margin-after: 0;
  -webkit-margin-start: 0px;
  -webkit-margin-end: 0px;
  -webkit-padding-start: 0;
  margin: 0;
  padding: 0; }

*:focus {
  outline: 0; }

.relative {
  position: relative; }

.hidden {
  display: none; }

.fullWidth {
  width: 100%; }

.negativeIndent {
  text-indent: -999999px; }

.reverseFloat {
  float: right; }

.makeDiv {
  display: inline-block; }

.centeredImage {
  display: block;
  margin-left: auto;
  margin-right: auto; }

.italic {
  font-style: italic; }

.noMargin {
  margin: 0; }

.noMarginTop {
  margin-top: 0; }

.noMarginBottom {
  margin-bottom: 0; }

.noMarginLeft {
  margin-left: 0; }

.noMarginRight {
  margin-right: 0; }

.noPadding {
  padding: 0; }

.noPaddingTop {
  padding-top: 0; }

.noPaddingBottom {
  padding-bottom: 0; }

.noPaddingLeft {
  padding-left: 0; }

.noPaddingRight {
  padding-right: 0; }

.grayscale {
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
  /* For Webkit browsers */
  filter: gray;
  /* For IE 6 - 9 */
  -webkit-transition: all .4s ease;
  /* Transition for Webkit browsers */ }

.grayscale:hover {
  filter: grayscale(0%);
  -webkit-filter: grayscale(0%);
  filter: none; }

.invertscale {
  filter: invert(50%);
  -webkit-filter: invert(50%);
  /* For Webkit browsers */
  filter: gray;
  /* For IE 6 - 9 */
  -webkit-transition: all .4s ease;
  /* Transition for Webkit browsers */ }

.invertscale:hover {
  filter: invert(0%);
  -webkit-filter: invert(0%);
  filter: none; }

/* columns of same height styles */
.container-xs-height {
  display: table;
  padding-left: 0px;
  padding-right: 0px; }

.row-xs-height {
  display: table-row; }

.col-xs-height {
  display: table-cell;
  float: none; }

@media (min-width: 768px) {
  .container-sm-height {
    display: table;
    padding-left: 0px;
    padding-right: 0px; }

  .row-sm-height {
    display: table-row; }

  .col-sm-height {
    display: table-cell;
    float: none; } }
@media (min-width: 992px) {
  .container-md-height {
    display: table;
    padding-left: 0px;
    padding-right: 0px; }

  .row-md-height {
    display: table-row; }

  .col-md-height {
    display: table-cell;
    float: none; } }
@media (min-width: 1200px) {
  .container-lg-height {
    display: table;
    padding-left: 0px;
    padding-right: 0px; }

  .row-lg-height {
    display: table-row; }

  .col-lg-height {
    display: table-cell;
    float: none; } }
/* vertical alignment styles */
.col-top {
  vertical-align: top; }

.col-middle {
  vertical-align: middle; }

.col-bottom {
  vertical-align: bottom; }

.rowNo, .contNo, .colNo {
  padding-left: 0;
  padding-right: 0;
  margin-right: 0;
  margin-left: 0; }

@font-face {
  font-family: 'AktivGrotesk';
  src: url("../fonts/AktivGrotesk-Medium.woff2") format("woff2"), url("../fonts/AktivGrotesk-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap; }
@font-face {
  font-family: 'AktivGrotesk';
  src: url("../fonts/AktivGrotesk-Regular.woff2") format("woff2"), url("../fonts/AktivGrotesk-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap; }
@font-face {
  font-family: 'AktivGrotesk';
  src: url("../fonts/AktivGrotesk-Light.woff2") format("woff2"), url("../fonts/AktivGrotesk-Light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap; }
:root {
  scroll-behavior: auto; }

a {
  cursor: none;
  color: inherit;
  text-decoration: none; }
  a:hover {
    color: inherit; }
  a:active {
    color: inherit; }

p {
  margin: 0; }

.slick-slider *:focus {
  outline: 0; }

html {
  overflow-x: hidden; }

body {
  font-family: 'AktivGrotesk', arial, helvetica, sans-serif;
  font-size: 16px;
  color: #fff;
  background: #000;
  overflow-x: hidden; }

* {
  cursor: none; }
  @media (max-width: 1200px) {
    * {
      cursor: auto; } }

.cursor {
  position: fixed;
  pointer-events: none;
  margin-top: -5px;
  margin-left: -5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  z-index: 98;
  transition: transform .4s; }
  .cursor.active {
    transform: scale(1.5); }
  @media (max-width: 1200px) {
    .cursor {
      display: none; } }

.loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  z-index: 99; }
  .loading .bar {
    position: absolute;
    top: 50%;
    left: 0;
    width: 0;
    height: 1px;
    background: #fff; }
  .loading.play .bar {
    transition: 2s cubic-bezier(0.86, 0, 0.07, 1);
    width: 100%; }
  .loading.active {
    transition: 1s;
    opacity: 0;
    visibility: hidden; }

.button {
  display: inline-block;
  line-height: 56px;
  font-size: 14px;
  padding: 0 30px;
  background: rgba(255, 255, 255, 0.09);
  transition: .4s; }
  .button span {
    position: relative;
    top: -1px;
    font-size: 22px;
    display: inline-block;
    vertical-align: middle;
    margin-left: 5px;
    transition: .4s; }
  .button:hover {
    background: rgba(255, 255, 255, 0.07); }
    .button:hover span {
      transform: rotate(90deg); }

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  line-height: 90px;
  background: #000;
  z-index: 9; }
  header .logo {
    font-size: 20px; }
  header nav a {
    margin-left: 30px;
    font-size: 14px;
    transition: opacity .4s; }
    header nav a:hover {
      opacity: .5; }
  @media only screen and (max-width: 767px) {
    header nav {
      display: none;
      position: fixed;
      top: 83px;
      left: 0;
      width: 100%;
      padding: 34px 12px 10px 12px;
      text-align: left;
      line-height: normal;
      background: #000; }
      header nav a {
        display: block;
        font-size: 16px;
        margin-left: 0;
        margin-bottom: 24px; } }
  header .line {
    height: 1px;
    background: #fff;
    opacity: 0;
    transition: .4s; }
  header .menu {
    display: none;
    vertical-align: middle;
    position: relative;
    height: 26px;
    width: 26px;
    overflow: hidden; }
    header .menu span {
      width: 26px;
      height: 2px;
      background: #fff;
      position: absolute;
      left: 0;
      transition: .4s; }
      header .menu span:nth-of-type(1) {
        top: 4px; }
      header .menu span:nth-of-type(2) {
        top: 12px; }
      header .menu span:nth-of-type(3) {
        top: 20px; }
    @media only screen and (max-width: 767px) {
      header .menu {
        display: inline-block; } }
  header.scrolled .line {
    opacity: 1; }
  header.active .line {
    opacity: 1; }
  @media only screen and (max-width: 767px) {
    header.active nav {
      display: block; } }
  header.active .menu span:nth-of-type(1) {
    top: 12px;
    transform: rotate(45deg); }
  header.active .menu span:nth-of-type(2) {
    left: 100%; }
  header.active .menu span:nth-of-type(3) {
    top: 12px;
    transform: rotate(-45deg); }
  @media only screen and (max-width: 767px) {
    header {
      line-height: 80px; } }

footer {
  line-height: 80px; }
  footer .line {
    height: 1px;
    background: #fff; }
  footer .left {
    font-size: 12px; }
  footer .social a {
    display: inline-block;
    margin-left: 15px;
    transition: opacity .4s; }
    footer .social a:hover {
      opacity: .5; }

h1 {
  font-size: 60px;
  margin: 20px auto 0 auto;
  font-weight: 400;
  width: 80%; }
  @media (min-width: 992px) and (max-width: 1199px) {
    h1 {
      font-size: 50px;
      width: 100%; } }
  @media (min-width: 768px) and (max-width: 991px) {
    h1 {
      font-size: 50px;
      width: 100%; } }
  @media only screen and (max-width: 767px) {
    h1 {
      width: 100%;
      font-size: 30px; }
      h1 br {
        display: none; } }

h2 {
  font-size: 40px;
  margin: 0 0 50px 0;
  font-weight: 400; }
  @media only screen and (max-width: 767px) {
    h2 {
      font-size: 30px;
      margin: 0 0 40px 0; } }

h3 {
  font-size: 28px;
  margin: 0;
  font-weight: 400;
  line-height: 1.5;
  width: 80%; }
  @media (min-width: 992px) and (max-width: 1199px) {
    h3 {
      font-size: 22px; } }
  @media (min-width: 768px) and (max-width: 991px) {
    h3 {
      font-size: 22px; } }
  @media only screen and (max-width: 767px) {
    h3 {
      font-size: 20px;
      width: 90%; } }

h4 {
  font-size: 28px;
  margin: 0;
  font-weight: 400; }
  @media only screen and (max-width: 767px) {
    h4 {
      font-size: 20px; } }

.sub {
  font-size: 14px; }
  @media only screen and (max-width: 767px) {
    .sub {
      font-size: 11px; } }

.intro {
  padding: 350px 0 160px 0;
  text-align: center; }
  @media (max-width: 1700px) {
    .intro {
      padding: 320px 0 140px 0; } }
  @media (max-width: 1500px) {
    .intro {
      padding: 250px 0 120px 0; } }
  @media (max-width: 1300px) {
    .intro {
      padding: 200px 0 100px 0; } }
  @media (min-width: 768px) and (max-width: 991px) {
    .intro {
      padding: 300px 0 150px 0; } }
  @media only screen and (max-width: 767px) {
    .intro {
      padding: 200px 0 100px 0; } }

.about {
  margin-bottom: 220px; }
  .about img {
    width: 100%; }
  .about .line {
    height: 1px;
    background: #fff;
    margin: 200px 0 70px 0; }
  @media only screen and (max-width: 767px) {
    .about {
      margin-bottom: 90px;
      padding: 0 12px; }
      .about .line {
        width: 90%;
        margin: 60px 0 30px 0; } }

.work {
  margin-bottom: 160px; }
  .work .img {
    position: relative;
    padding-bottom: 65%;
    margin-bottom: 30px;
    overflow: hidden; }
    .work .img div {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      background-size: cover;
      background-position: center;
      transition: .4s; }
  .work .box {
    display: block;
    margin-bottom: 120px; }
    .work .box:hover .img div {
      transform: scale(1.05); }
  .work .sub {
    margin-bottom: 10px; }
  .work .button {
    margin-top: 20px; }
  .work .row {
    margin-left: -40px;
    margin-right: -40px; }
  .work .col-md-6 {
    padding-left: 40px;
    padding-right: 40px; }
  .work .col-md-6:first-of-type {
    padding-top: 80px; }
  @media only screen and (max-width: 767px) {
    .work {
      margin-bottom: 30px; }
      .work .col-md-6:first-of-type {
        padding-top: 0; }
      .work .box {
        margin-bottom: 60px; } }

.services {
  margin-bottom: 200px; }
  .services h2 {
    font-size: 34px; }
    @media only screen and (max-width: 767px) {
      .services h2 {
        font-size: 30px; } }
  .services h3 {
    font-size: 40px;
    margin: 0 0 20px 0; }
    @media only screen and (max-width: 767px) {
      .services h3 {
        font-size: 20px; } }
  .services .number {
    font-size: 24px;
    line-height: 60px;
    text-align: center;
    opacity: .5; }
    @media only screen and (max-width: 767px) {
      .services .number {
        font-size: 20px;
        line-height: 30px; } }
  .services .item {
    padding: 50px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.2); }
    .services .item:last-of-type {
      border-bottom: 1px solid rgba(255, 255, 255, 0.2); }
  .services .txt {
    width: 80%; }
    @media only screen and (max-width: 767px) {
      .services .txt {
        width: 100%; } }
  @media only screen and (max-width: 767px) {
    .services {
      margin-bottom: 90px; } }

.contact {
  text-align: center;
  margin-bottom: 220px; }
  .contact .sub {
    margin-bottom: 60px; }
  @media only screen and (max-width: 767px) {
    .contact {
      margin-bottom: 90px; }
      .contact .sub {
        margin-bottom: 30px; } }

.anim {
  position: relative;
  opacity: 0;
  top: 30px; }
  .anim.play {
    top: 0;
    opacity: 1;
    transition: 1s; }
    .anim.play.anim-del-2 {
      transition-delay: .2s; }
    .anim.play.anim-del-4 {
      transition-delay: .4s; }
    .anim.play.anim-del-6 {
      transition-delay: .6s; }
    .anim.play.anim-del-8 {
      transition-delay: .8s; }

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