html,
body {
  font-family: "proxima-nova", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: max(15px, 0.885vw);
  line-height: 1.2;
  width: 100%;
  height: 100%;
  margin: 0;
  color: #080808;
  scroll-behavior: smooth;
  opacity: 1;
}

*,
::after,
::before {
  box-sizing: border-box;
}


#load-screen {
    position: fixed;
    z-index: 9;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 1;
    pointer-events: none;
    transition: opacity 0.66s ease-in-out;
    background: white;
}

#load-screen.end {
  opacity: 0;
}

img.mobile {
  display: block;
}

img.tab-dk {
  display: none;
}

.sent-box {
  background: #080808;
  color: white;
  padding: 20px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.sent-box h3 {
  margin-bottom: 0;
}

.sent-box img {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 10px;
}

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1;
  margin: 0;
}

.img-responsive {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 3px;
}

.img-responsive.pad-dk {
  display: none;
}

.icon {
  width: max(0.677vw, 13px);
  margin-left: max(0.36vw, 7px);
}

.mobile-links .icon {
  width: max(0.88vw, 15px);
}

.wid-100 {
  width: 100%;
}

.min-100h {
  min-height: 100vh;
}

.center {
  justify-content: center;
}

.video-container {
  position: relative;
  width: 100%;
}

.video-wrap {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
}

.video-wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

a {
  font-weight: 500;
  color: #0B0B0B;
  text-decoration: none;
}

a.inactive {
  opacity: .35;
  cursor: default;
}

a.inactive::after {
  content: none !important;
}

p a {
  color: #FF5858;
  text-decoration: underline;
  transition: color .25s ease-in-out;
}

p a:hover {
  color: #00a8b4;
}

b {
  font-weight: 600;
}

p {
  line-height: 1.5;
  margin-top: 0;
  margin-bottom: max(1.042vw, 20px);
}

p:last-child {
  margin-bottom: 0;
}

.txt-center {
  text-align: center;
}

.txt-right {
  text-align: right;
}

.big-p {
  line-height: 1.25em;
  margin-top: 0;
  margin-bottom: max(1.562vw, 30px);
}

.caption {
  font-size: max(0.677vw, 0.812em);
  color: #ACACAC;
}

p.caption {
  margin-top: 0;
  margin-bottom: 20px;
}

a.caption {
  font-weight: 600;
}

.wh {
  color: #fff;
}

.gr {
  color: #ACACAC;
}

.blk {
  color: #080808;
}

.bl {
  color: #C1FFF3;
}

.cyan {
  color: #a6eef3;
}

label {
  color: #FF5858;
}

.h1-bar {
  position: relative;
}

.h1-bar::after {
  position: absolute;
  z-index: -1;
  content: '';
  width: 105%;
  height: max(3.125vw, 12px);
  bottom: 10px;
  left: -2.5%;
  background: #a6eef3;
}

.mar-auto {
  margin-left: auto;
  margin-right: auto;
}

.mar-y-auto {
  margin-top: auto;
  margin-bottom: auto;
}

.mar-btm {
  margin-bottom: max(1.562vw, 20px);
}

.big-mar-btm {
  margin-bottom: max(3.125vw, 20px);
}

ul {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
}

.inline li {
  display: inline-block;
  margin-right: max(0.521vw, 10px);
}

.tab {
  position: relative;
  margin: 0;
}

.tab.last li:last-child {
  padding-bottom: 0;
}

.tab li {
  padding: max(1.042vw, 20px) 0;
  border-top: 1px solid #080808;
}

.tab.wh li {
  border-top: 1px solid #ACACAC;
}

.flex {
  display: flex;
  flex-wrap: wrap;
}

.flex-inl {
  display: inline-flex;
  flex-wrap: wrap;
}

.flex-column {
  flex-direction: column;
}

.flex-ver {
  flex-direction: column;
  align-items: flex-start;
}

.flex-end {
  flex-direction: column;
  align-items: end;
}

.flex-middle {
  align-items: center;
}

.slf-middle {
  align-self: center;
}

.slf-end {
  align-self: flex-end;
}

.main-wrapper {
  width: 100%;
  padding: max(6.1458vw, 93px) max(1.562vw, 20px) max(1.562vw, 20px); 
}

.wrapper {
  width: 100%;
  padding: max(3.125vw, 20px) max(1.562vw, 20px);
}

.wrapper.last {
  padding-bottom: 0;
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin-left: min(-0.781vw, -10px);
  margin-right: min(-0.781vw, -10px);
  row-gap: max(1.562vw, 20px);
}

.row.no-gap {
  gap: 0;
}

.row-end {
  justify-content: space-between;
}

.col-empty {
  display: none;
}

.col,
.col-6,
.col-12 {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  flex-basis: 100%;
  padding-left: max(0.781vw, 10px);
  padding-right: max(0.781vw, 10px);
}

.col {
  flex-basis: 0;
  flex-grow: 1;
  max-width: 100%;
}

.col-6 {
  max-width: 50%;
}

.col-12 {
  max-width: 100%;
}

nav {
  position: fixed;
  z-index: 10;
  width: 100%;
  height: auto;
  padding: max(1.562vw, 26px) max(1.562vw, 20px);
  justify-content: space-between;
  align-items: center;
  background: #fff;
  transition: transform .4s ease-in-out;
  border-bottom: 1px solid #080808;
}

#menu {
  display: none;
}

#menu li,
#mobile-menu a {
  position: relative;
  overflow: hidden;
}

#menu li a {
  transition: color .4s ease-in-out;
}

#menu li a::after,
#mobile-menu a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background: transparent;
  transition: background .4s ease-in-out, width .4s ease-in-out;
}

#menu li a:hover::after,
#mobile-menu a:hover::after {
  background: #080808;
  width: 100%;
}

.language.active {
  opacity: .66;
  transition: width .4s ease-in-out;
  pointer-events: none;
}

.language.active::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: #080808;
  opacity: .66;
} 

#mobile-menu .language {
  margin-right: max(0.521vw, 10px);
}

.btn {
  position: relative;
  cursor: pointer;
  overflow: hidden;
  border: 1px solid #080808;
  z-index: 1;
  background: #a6eef3;
  transition: background .4s ease-in-out, top .4s ease-in-out;
}

.btn-drk {
  display: inline-flex;
  border: 1px solid #fff;
  margin-left: max(1.042vw, 10px);
}

.btn-lht {
  position: relative;
  display: inline;
  border: 1px solid #080808;
  margin: 0 max(0.521vw, 10px) max(1.042vw, 15px) 0;
  overflow: hidden;
}

.btn-lht::after {
  position: absolute;
  content: '';
  display: block;
  z-index: -1;
  top: 0;
  right: 100%;
  width: 100%;
  height: 100%;
  background-color: #FFEA32;
  transition: right .5s ease-in-out;
}

.btn-lht:hover::after {
  right: 0;
}

.btn,
.btn-drk,
.btn-lht {
  border-radius: 50px;
  font-size: max(1.042vw, 1.2em);
  font-weight: 700;
}

.btn-drk,
.btn-lht {
  padding:  max(0.365vw, 7px) max(0.885vw, 17px) max(0.315vw, 6px) max(0.885vw, 17px);
}

#burger {
  position: fixed;
  z-index: 12;
  top: max(1.042vw, 15px);
  right: max(1.042vw, 20px);
  transition: transform .6s ease-in-out, opacity .4s ease-in-out;
}

.btn-grp {
  position: relative;
  display: flex;
  overflow: hidden;
  padding:  max(0.365vw, 7px) max(0.885vw, 17px) max(0.315vw, 6px) max(0.885vw, 17px);
  font-weight: 700;
}

.btn::after {
  position: absolute;
  content: '';
  display: block;
  z-index: -1;
  top: 100%;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  transition: top .5s ease-in-out;
}

.btn.nav-open::after {
  top: 0;
}

.a-anim,
.c-anim {
  transition: transform .5s ease-in-out;
}

.a-anim.active,
.c-anim.active {
  transform: translateY(-150%);
}

.b-anim,
.d-anim {
  position: absolute;
  text-align: center;
  width: 100%;
  left: 50%;
  transform: translate(-50%, 200%);
  transition: top .5s ease-in-out, transform .5s ease-in-out;
}

.b-anim.active,
.d-anim.active {
  top: 0;
  transform: translate(-50%, max(.38vw, 21%));
}

.abs-top {
  z-index: -1;
  position: absolute;
  left: max(1.562vw, 20px);
  top: 15%;
}

.abs-mid {
  z-index: -1;
  position: absolute;
  top: 70%;
  right: max(1.562vw, 20px);
}

.abs-btm {
  display: none;
  position: absolute;
  left: max(1.562vw, 30px);
  bottom: max(1.562vw, 30px);
}

img.abs-top,
img.abs-mid {
  width: 200px;
  height: auto;
}

.brand {
  position: relative;
  font-size: max(1.042vw, 1.2em);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  z-index: -1;
}

#mobile-menu {
  display: block;
  position: fixed;
  z-index: 11;
  min-width: 250px;
  height: auto;
  top: max(0.521vw, 10px);
  right: max(0.521vw, 10px);
  border-radius: 6px;
  margin: 0;
  padding: max(3.645vw, 60px) max(1.562vw, 40px) max(1.562vw, 30px);
  background: #a6eef3;
  clip-path: polygon(0% 0%, 100% 0%, 100% 99.7%, 0% 99.7%);
  transition: clip-path .55s cubic-bezier(.8, 0, .1, 1), -webkit-clip-path .55s cubic-bezier(.8, 0, 0, 1);
}

#mobile-menu.hidden {
  clip-path: polygon(100% 0%, 100% 0%, 100% 0%, 100% 0%);
}

ul.mobile-list {
  margin-bottom: max(1.562vw, 30px);
}

ul.mobile-list li:not(:last-child) {
  margin: 0;
  padding-bottom: max(0.781vw, 15px);
}

.mobile-links {
  position: relative;
}

#home,
#about {
  display: inline-flex;
  flex-direction: column;
  justify-content: space-between;
}

#contact {
  display: inline-flex;
  flex-direction: column;
}

#CV {
  padding-top: max(1.562vw, 15px);
}

#project,
#case-study {
  display: inline-flex;
  flex-direction: column;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: 1;
}

h1 {
  position: relative;
  font-size: 2.4em;
  font-weight: 700;
  margin: 0 0 max(1.562vw, 20px);
  padding-bottom: max(2.083vw, 20px);
  border-bottom: 1px solid #080808;
}

h1.avg.border {
  padding-bottom: max(1.042vw, 15px);
  margin-bottom: max(1.042vw, 15px);
  border-bottom: 1px solid #080808;
}

h2,
h1.sml,
h1.avg,
.preview-txt {
  font-size: 2em;
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 0;
}

h1.sml {
  margin-bottom: 10px;
  padding-bottom: 0;
  border-bottom: none;
}

h1.projects {
  border-bottom: none;
  padding-top: max(1.562vw, 30px);
  padding-bottom: 0;
}

h2,
#home h1.sml {
  margin-bottom: max(1.562vw, 15px);
}

.reg-marquee h2 {
  margin: 0;
  line-height: 1;
}

h2.big {
  padding-bottom: 10px;
  border-bottom: 1px solid #080808;
}

h2.big.wh {
  border-bottom: 1px solid #ACACAC;
}

h3,
h2.sml {
  margin: 0 0 max(0.26vw, 5px) 0;
  line-height: 1;
}

h2.sml,
h3,
.big-p,
.mobile-links {
  font-size: clamp(1.8em, calc(1.6vh + 0.833vw), 1.666vw);
  font-weight: 700;
}

h3.sml {
  font-size: max(1.146vw, 20px);
}

.myImg {
  display: none;
}

.project,
.blk-box {
  width: 100%;
  border-radius: 3px;
  transition: top 1s ease-in-out, left 1s ease-in-out, opacity 1s ease-in-out;
}

.project {
  border: 1px solid #080808;
  padding: max(1.042vw, 10px);
  align-items: center;
}

a.preview {
  position: relative;
}

a.preview::before {
  content: '';
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(8, 8, 8, .5);
  opacity: 0;
  transition: opacity .4s ease-in-out;
}

.preview-txt {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  text-align: center;
  transform: translate(-50%, -50%);
  opacity: 0;
  color: #fff;
  transition: opacity .4s ease-in-out;
}

a.preview:hover::before {
  opacity: 1;
}

a.preview:hover .preview-txt {
  opacity: 1;
}

.featured {
  background: #080808;
}

.project .col-12 {
  padding: max(0.521vw, 10px);
}

.blk-box {
  background: #080808;
  color: #fff;
  padding: max(1.562vw, 20px);
}

.note {
  position: relative;
  font-size: max(1.146vw, 14px);
  font-weight: 600;
  margin-bottom: max(0.521vw, 10px);
}

.reg-marquee,
.about-marquee-1,
.about-marquee-2 {
  cursor: default;
  overflow: hidden;
  position: relative;
}

.reg-marquee {
  padding: max(3.13vw, 40px) 0;
  margin: 0 min(-1.562vw, -20px) max(6.25vw, 20px);
  background: #080808;
  color: #fff;
}

.about-marquee-1,
.about-marquee-2 {
  margin-bottom: max(1.042vw, 20px);
  padding-bottom: 1px;
}

.about-marquee-1::before,
.about-marquee-2::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 8;
  background: linear-gradient(90deg, #080808 0, rgba(8, 8, 8, 0) 10%, rgba(8, 8, 8, 0) 90%, #080808 100%);
}

.project-marquee {
  overflow: hidden;
  display: inline-flex;
}

form {
  position: relative;
  width: 100%;
}

input,
textarea {
  font-size: 18px;
  font-weight: 600;
  width: 100%;
  padding: max(1.042vw, 10px) 12px;
  border: 1px solid #080808;
  border-radius: 3px;
  background: none;
  color: #141414;
}

textarea {
  margin: max(1.042vw, 10px) 0;
  resize: vertical;
}

@media (min-device-width : 768px) {

  #home {
    min-height: 100vh;
  }

  img.mobile {
    display: none;
  }

  img.tab-dk {
    display: block;
  }

  .img-responsive.mobile {
    display: none;
  }

  .img-responsive.pad-dk {
    display: block;
  }

  .sent-box {
    max-width: 400px;
  }

  #captcha {
    margin: max(1.042vw, 10px) 0;
  }

  #name,
  #email {
    margin-bottom: max(1.042vw, 10px);
  }

  h1 {
    font-size: max(9.876vw, 5em);
  }

  h2,
  h1.sml,
  .reg-marquee h2,
  .preview-txt {
    font-size: clamp(2.5em, calc(2.5vh + 1.302vw), 2.604vw);
  }

  h1.avg,
  h2.big,
  .reg-marquee h2 {
    font-size: clamp(4em, calc(4vh + 2.083vw), 4.1666vw);
  }

  .pad-3 {
    max-width: 25%;
    flex-basis: 25%;
  }

  .pad-4 {
    max-width: 33.3333%;
    flex-basis: 33.3333%;
  }

  .pad-6 {
    max-width: 50%;
    flex-basis: 50%;
  }

  .pad-9 {
    max-width: 75%;
    flex-basis: 75%;
  }

  form {
    margin: 0 0 20px 0;
  }

  .h1-bar::after {
    height: max(3.125vw, 20px);
    bottom: max(1.042vw, 20px);
  }

  .pad-mar-btm {
    margin-bottom: 20px;
  }
  
}

@media (min-device-width: 810px) and (orientation:landscape) {

  #home,
  #about,
  #project,
  #contact,
  #case-study {
    min-height: 100vh;
  }

}

@media (min-width: 1200px) {

  .btn,
  .btn-drk,
  .btn-lht{
    font-size: max(0.781vw, 1em);
  }

  .reg-marquee {
    margin: 0 min(-1.562vw, -20px) max(3.125vw, 40px);
  }

  .sent-box {
    max-width: 600px;
    padding: max(3.125vw, 20px);
  }

  .pad-mar-btm {
    margin-bottom: 0;
  }

  .btn:hover::after {
    top: 0;
  }

  h1 {
    font-size: clamp(5.5em, calc(7vh + 3.802vw), 7.604vw);
  }

  #menu {
    display: inline-flex;
    margin: 0;
  }

  #menu li {
    margin: 0 max(3.125vw, 60px) 0 0;
    padding: max(0.208vw, 4px) 0;
  }

  #menu li.language {
    margin: 0 max(.365vw, 7px) 0 0;
    padding-left: 1px;
    padding-right: 1px;
  }

  #burger {
    top: max(1.354vw, 26px);
    right: max(0.833vw, 15px);
    transform: translateX(200%);
    transition: transform .6s ease-in-out;
  }

  #mobile-menu {
    position: fixed;
    top: max(0.833vw, 16px);
    transform: translateX(200%);
    transition: clip-path .4s ease-in-out, -webkit-clip-path .4s ease-in-out, transform .6s ease-in-out
  }

  nav.scrolled {
    transform: translateY(-100%);
  }

  #burger.scrolled,
  #mobile-menu.scrolled {
    transform: translateX(0);
  }

  .myImg {
    display: initial;
  }

  .col-empty {
    display: block;
    max-width: 33.3333333%;
    flex-basis: 33.3333333%;
  }

  .dk {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
  }

  .dk-2 {
    flex-basis: 16.666667%;
    max-width: 16.666667%;
  }

  .dk-3 {
    flex-basis: 25%;
    max-width: 25%;
  }

  .dk-4 {
    flex-basis: 33.333333%;
    max-width: 33.333333%;
  }

  .dk-6 {
    flex-basis: 50%;
    max-width: 50%;
  }

  .dk-8 {
    flex-basis: 66.666666%;
    max-width: 66.666666%;
  }

  .dk-12 {
    flex-basis: 100%;
    max-width: 100%;
  }

  .abs-btm {
    display: block;
  }

  .tab li:last-child {
    padding-bottom: 0;
  }

  form {
    margin: 0;
  }

}

@media (min-width: 1440px) {

  .sent-box {
    max-width: 1000px;
  }

  .dk-4 {
    flex-basis: 33.333333%;
    max-width: 33.333333%;
  }

}