abbr,
address,
article,
aside,
audio,
b,
blockquote,
body,
canvas,
caption,
cite,
code,
dd,
del,
details,
dfn,
div,
dl,
dt,
em,
fieldset,
figcaption,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
html,
i,
iframe,
img,
ins,
kbd,
label,
legend,
li,
mark,
menu,
nav,
object,
ol,
p,
pre,
q,
samp,
section,
small,
span,
strong,
sub,
summary,
sup,
table,
tbody,
td,
tfoot,
th,
thead,
time,
tr,
ul,
var,
video {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  list-style: none;
  vertical-align: baseline;
  border: 0;
  outline: 0;
  background: 0 0;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

.container {
  width: 100%;
  display: flex;
  justify-content: center;
  position: relative;
}

/* .container {
  background-color: #000;
  border-radius: 40%;
} */
/* 
body:before {
  border: 4px solid red;
  content: "";
  width: 100vw;
  height: 100vh;
  display: block;
  position: fixed;
  border-radius: 40px;
  z-index: 99999;
} */

/* body::before {
  content: "";
  position: fixed;
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;
  border: 10px solid rgb(0, 0, 0);
  border-radius: 40px;
} */

nav ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

q:after,
q:before {
  content: "";
  content: none;
}

img {
  width: 100%;
  vertical-align: bottom;
  pointer-events: none;
  border-radius: 20px;
}

a {
  font-size: 100%;
  display: block;
  margin: 0;
  padding: 0;
  cursor: pointer;
  vertical-align: baseline;
  text-decoration: none;
  color: #000000;
  background: 0 0;
  /* border-radius: 4em; */
}

ins {
  text-decoration: none;
  color: #141414;
  background-color: #ff9;
}

mark {
  font-weight: 700;
  font-style: italic;
  color: #141414;
  background-color: #ff9;
}

del {
  text-decoration: line-through;
}

abbr[title],
dfn[title] {
  cursor: help;
  border-bottom: 1px dotted;
}

table {
  border-spacing: 0;
  border-collapse: collapse;
}

hr {
  display: block;
  height: 1px;
  margin: 1em 0;
  padding: 0;
  border: 0;
  border-top: 1px solid #ccc;
}

input,
select {
  vertical-align: middle;
}

::-moz-selection {
  color: rgb(0, 0, 0);
  background: #e6e6e6;
}

::selection {
  color: #000000;
  background: #e6e6e6;
}

.font-white {
  color: #f8f8fe;
}

.font-small {
  font-size: 1.2rem;
  letter-spacing: 2.4px;
  color: #777;
}

.none {
  display: none;
}

#js-pjax-cont .project-detail .txt,
#js-pjax-cont .project-detail .txt-sub strong,
#js-pjax-cont .project-lead-wrap .project-ttl,
#js-pjax-cont .project-lead-wrap .url,
.freight,
.page-about .big-type .page-about .txt-wrap .project-ttl .ttl em,
.projects .project .img .sp-ttl {
  font-family: "tt_interfacesregular";
  text-transform: uppercase;
  /* font-style: normal; */
}

/* Ovo .mail p je bilo gore medju ostalima, zbog fonta si stavio ovde*/

.mail p {
  font-family: "tt_interfacesregular";
  text-transform: uppercase;
}

#mask {
  border: 20px solid black;
  -webkit-border-radius: 40px; /* 60px */
  -moz-border-radius: 40px; /* 60px */
  border-radius: 40px; /* 60px */
  height: 100vh;
  width: 100vw;
  z-index: 100;
  position: fixed;
  overflow: hidden;
  margin: 0;
  padding: 0;
  pointer-events: none;
}

#bg-mask {
  border: 20px solid black;
  height: 100vh;
  width: 100vw;
  position: fixed;
  pointer-events: none;
  z-index: 100;
}

.fill-white {
  fill: #000000;
}

.fill-black {
  fill: #000;
  /* Boja prelaza */
}

.mt0 {
  margin-top: 0 !important;
}

img {
  pointer-events: none !important;
}

#custom-scroll {
  pointer-events: none;
}

#custom-scroll * {
  pointer-events: all;
}

html {
  font-size: 62.5%;
  /* font-size: 0.5rem; */
  overflow-x: hidden;
  overflow-y: scroll;
}

body {
  font-family: usual, "tt_interfacesregular", sans-serif;
  font-size: 62.5%;
  overflow: hidden;
  width: 100%;
  min-height: 100%;
  color: #000000;
  /* BOJA TEXTA NA HOME */
  background: #f8f8fe;
  /* BOJA POZADINE SAJTA! */
  -webkit-font-smoothing: antialiased;
  user-select: select none;
  /* border: 15px solid black; */
  margin: 0;
}

.js-footer-in.is-ready .is-hide,
.js-next-in.is-ready .is-hide,
.js-txt-in.is-ready .is-hide {
  -webkit-transform: rotateX(-25deg) rotateY(15deg) translate3d(60px, -10px, 0);
  transform: rotateX(-25deg) rotateY(15deg) translate3d(60px, -10px, 0);
  opacity: 0;
}

.js-footer-in .is-hide,
.js-next-in .is-hide,
.js-txt-in .is-hide {
  -webkit-transition: transform 0.8s ease, opacity 0.8s;
  transition: transform 0.8s ease, opacity 0.8s;
  -webkit-transform-origin: left bottom;
  transform-origin: left bottom;
  opacity: 1;
}

.js-footer-in .is-hide:nth-child(2),
.js-next-in .is-hide:nth-child(2),
.js-txt-in .is-hide:nth-child(2) {
  transition-delay: 0.1s;
}

.js-footer-in .is-hide:nth-child(3),
.js-next-in .is-hide:nth-child(3),
.js-txt-in .is-hide:nth-child(3) {
  transition-delay: 0.2s;
}

.js-footer-in .is-hide:nth-child(4),
.js-next-in .is-hide:nth-child(4),
.js-txt-in .is-hide:nth-child(4) {
  transition-delay: 0.3s;
}

.js-footer-in .is-hide:nth-child(5),
.js-next-in .is-hide:nth-child(5),
.js-txt-in .is-hide:nth-child(5) {
  transition-delay: 0.4s;
}

.js-footer-in .is-hide:nth-child(6),
.js-next-in .is-hide:nth-child(6),
.js-txt-in .is-hide:nth-child(6) {
  transition-delay: 0.5s;
}

.js-footer-in .is-hide:nth-child(7),
.js-next-in .is-hide:nth-child(7),
.js-txt-in .is-hide:nth-child(7) {
  transition-delay: 0.6s;
}

.op-none {
  opacity: 0;
}

#fv {
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  overflow: hidden;
  width: 100%;
  max-width: 2000px;
  height: 100%;
}

#fv .caption {
  font-size: 1.1rem;
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  margin: 8% 0 0 33%;
  letter-spacing: 0.6px;
}

#fv .main-type {
  position: absolute;
  top: 0;
  left: 0;
  width: 73%;
  margin: 8% 0 0 0;
}

#fv .main-type .img01 {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 58%;
  height: 52%;
  margin: 1% 0 0 0;
}

#fv .main-type .img02 {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 65%;
  height: 61%;
  margin: 11% 0 0 32%;
}

#fv .main-type:after {
  display: block;
  padding-top: 30%;
  content: "";
}

#fv h2 {
  font-family: "tt_interfacesregular";
  text-transform: uppercase;
  position: relative;
  float: left;
  overflow: hidden;
  width: 3%;
  height: 22%;
  margin: 33% 0 0 12%;
}

#fv h2 svg {
  width: 100%;
  height: 100%;
}

#fv .profile {
  display: none;
  position: relative;
  /* float: left; */
  text-align: center;
  /* width: 62%; */
  /* margin: 13% 0 0 18%; */
  /* OVE DVE IZNAD SU BILE UPALJENE PRE PROMENE */
  /* top je bilo 35, right je bilo 18 */
}

#fv .profile .txt00 {
  /* Let's talk header!   */
  font-family: "tt_interfacesregular";
  font-weight: 400;
  /* text-transform: uppercase; */
  font-size: 4.4rem; /* 15.5  */
  line-height: 110%;
  /* margin-top: 13%; */
  /* margin-top: 20%; */
  margin-bottom: 10%;
  /* letter-spacing: 2px; */
  /* -webkit-text-stroke: 2px white; */
}

#fv .profile .txt01 {
  font-family: "tt_interfacesregular";
  font-size: 2rem;
  text-align: left;
  font-weight: 100;
  line-height: 1.6;
  margin-bottom: 3.4%;
  /* letter-spacing: 1px */
}

#fv .profile .txt01-b {
  font-family: "tt_interfacesregular";
  /* text-transform: capitalize; */
  font-size: 5.2rem; /*  2.4rem, 4.4rem */
  /* font-size: 5.8rem; */
  text-align: center  ;
  font-weight: 400; /* 600 da bude bold */
  line-height: 120%; /* 110% */
  margin-top: 26%; /* 24% og, 36% new */
  -webkit-font-smoothing: antialiased;
  /* margin-top: 20%; */

  margin-bottom: 3.4%;

  /* letter-spacing: -0.8px; */
}

#fv .profile .txt02 {
  font-family: "tt_interfacesregular";
  font-size: 1.8rem;
  line-height: 2;
  letter-spacing: 0.8px;
  color: #66686e;
  /* Paragraph color */
  margin-bottom: 2rem;
  width: 55%;
}

#fv .profile .txt02 a {
  display: inline;
  text-decoration: underline;
}

/* width */
::-webkit-scrollbar {
  width: 0px;
}

/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px black;
  border-radius: 0px;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #a0a0a0;
  border-radius: 0px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #f8f8fe;
  width: 2px;
}

.scroll {
  position: fixed;
  z-index: 1;
  top: 0;
  right: 0;
  overflow: hidden;
  width: 11px;
  height: 100px;
  margin: 43% 7.6% 0 0;
}

.scroll.is-left {
  right: auto;
  left: 0;
  margin: 44% 0 0 7.6%;
}

.scroll:after,
.scroll:before {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 1px;
  height: 100%;
  content: "";
}

.scroll:before {
  z-index: 10;
  -webkit-animation: scroll 2.4s infinite normal;
  animation: scroll 2.4s infinite normal;
  background: #333;
}

.scroll:after {
  background: #cacaca;
}

@-webkit-keyframes scroll {
  0% {
    -webkit-transform: translate3d(0, -100%, 0);
  }

  15% {
    -webkit-transform: translate3d(0, -98%, 0);
  }

  85% {
    -webkit-transform: translate3d(0, 98%, 0);
  }

  100% {
    -webkit-transform: translate3d(0, 100%, 0);
  }
}

@keyframes scroll {
  0% {
    transform: translate3d(0, -100%, 0);
  }

  15% {
    transform: translate3d(0, -98%, 0);
  }

  85% {
    transform: translate3d(0, 98%, 0);
  }

  100% {
    transform: translate3d(0, 100%, 0);
  }
}

.js-nav-clip {
  position: fixed;
  z-index: 120;
  width: 100%;
}

.navbar {
  display: flex;
  justify-content: space-between;
  padding: 5px;
  width: 100%;
  /* max-width: 327px; */
  max-width: 435px;
  height: 61px; /* 73px */
  position: fixed;
  top: 40px;
  z-index: 99;
  border-radius: 14px; /* 25px */
  /* border: 1px solid #ddd; */
  /* background: rgba(239, 239, 242, 0.6); */
  /* background: rgba(223, 223, 226, 0.6); */
  background: rgba(248, 248, 254, 0.6);

  /*Ovo je boja pozadine*/
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  backdrop-filter: blur(15px);
  -moz-backdrop-filter: blur(15px);
  -o-backdrop-filter: blur(15px);
  -ms-backdrop-filter: blur(15px);
  transition: top 0.6s ease-in-out;
}

.navbar.navbar-off-screen-animation {
  top: -100%;
}

.navbar-divider {
  width: 1px;
  height: 100%;
  /* background-color: #dddddd; */
  background-color: rgba(223, 223, 226, 0);
  margin: 0 2px; /* 5px */
}

.navbar-link {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-basis: 33%;
  font-size: 2rem;
  border-radius: 12px; /* 20px */
  cursor: pointer;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: normal;
  font-weight: 600;
  line-height: 110%;
  letter-spacing: 2.64px;
  /* transition: ease-in-out 0.1s; */
  transition: background-color 0.3s ease-in-out;

  /* transition: linear 0.1s; */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.navbar-link.active {
  color: #000000; /* f8f8fe */
  background-color: #E1E1E7; /* 000, #c6c6c8 */
}

.navbar-link.active:hover {
  background-color: #E1E1E7; /* 000 */
  color: #000000; /* f8f8fe */
}

.navbar-link:hover {
  color: #000;
  background-color: #E1E1E7;
}

#progress {
  position: fixed;
  z-index: 200;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  -webkit-transition: transform 1.6s ease, opacity 1s;
  transition: transform 1.6s ease, opacity 1s;
  -webkit-transition-delay: 0.4s;
  transition-delay: 0.4s;
  pointer-events: none !important;
  justify-content: center;
  align-items: center;
}

#progress.is-hide {
  -webkit-transform: translate3d(0, -40px, 0);
  transform: translate3d(0, -40px, 0);
  opacity: 0;
}

#progress .num {
  font-family: "tt_interfacesregular";
  font-style: normal !important;
  /* text-transform: uppercase; */
  font-size: 2.6rem; /* 2.3rem */
  position: relative;
  z-index: 100;
  /* letter-spacing: 4px; */
  pointer-events: none !important;
  color: #f8f8fe;
}

#js-cusor {
  position: fixed;
  z-index: 100;
  top: -35px;
  left: -35px;
  width: 70px;
  height: 70px;
  pointer-events: none;
}

#js-cusor.is-in .arw {
  -webkit-transform: scale(1);
  transform: scale(1);
  opacity: 1;
}

#js-cusor .arw {
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transition: opacity 0.6s, transform 0.6s;
  transition: opacity 0.6s, transform 0.6s;
  -webkit-transform: scale(0);
  transform: scale(0);
  text-align: center;
  letter-spacing: 2px;
  pointer-events: none;
  opacity: 0;
  border: 1px solid #f8f8fe;
  border-radius: 100%;
  background: rgba(0, 0, 0, 0.5);
}

#js-cusor .arw:after {
  position: absolute;
  top: 32px;
  left: 31px;
  display: block;
  width: 4px;
  height: 4px;
  content: "";
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  border-top: 1px solid #f8f8fe;
  border-right: 1px solid #f8f8fe;
}

#js-layer {
  position: fixed;
  z-index: 170;
  top: 0;
  left: 0;
  display: table;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

#js-layer #panel01,
#js-layer #panel02,
#js-layer #panel03 {
  display: table-cell;
  pointer-events: none;
  background: #000000;
  /* Boja pozadine LOADERA */
}

#js-scroll {
  position: fixed;
  z-index: 10;
  top: 0;
  left: 0;
  overflow: hidden;
  width: 100%;
  pointer-events: none;
  will-change: transform;
}

#js-scroll * {
  pointer-events: visible;
}

.js-out-elm {
  display: inline-block;
}

.page-top {
  padding-top: 64vw;
}

.page-project {
  padding-top: 54.2vw;
  pointer-events: none;
}

.page-project * {
  pointer-events: visible;
}

.bg-black {
  background: rgb(255, 255, 255);
}

.txt-white {
  color: #f8f8fe;
}

.js-parallax {
  top: 0;
  left: 0;
  overflow: hidden;
  width: 100%;
  height: 100%;
}

.js-parallax img {
  position: absolute;
  z-index: 10;
  top: 0;
  left: 0;
  width: 100%;
  will-change: transform;
}

.project-ttl {
  font-family: "tt_interfacesregular";
  font-weight: 100;
  text-transform: uppercase;
  position: fixed;
  z-index: 100;
  overflow: hidden;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.project-ttl .ttl {
  font-family: "tt_interfacesregular";
  text-transform: uppercase;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  clip: rect(0, 0, 0, 0);
  width: 57%;
  height: 100%;
  text-align: center;
  margin: auto auto auto 20%;
  /* 36% */
  pointer-events: none;
  align-items: center;
}

.project-ttl .ttl.ff-white {
  color: #f8f8fe;
  /* Boja texta na thumbnailovima */
}

.project-ttl .ttl.is-current .name {
  color: #f8f8fe !important;
  /* Boja texta na thumbnailovima kada hoverujes na njih */
}

.project-ttl .ttl .name {
  position: relative;
  display: inline-block;
  overflow: hidden;
  -webkit-transition: color 1s;
  transition: color 1s;
  padding-left: 2%;
  width: 100%;
}

.project-ttl .ttl .name.is-out em span {
  -webkit-transform: translate3d(0, -100%, 0);
  transform: translate3d(0, -100%, 0);
}

.project-ttl .ttl .name.is-out em span:nth-child(2) {
  transition-delay: 0.02s;
}

.project-ttl .ttl .name.is-out em span:nth-child(3) {
  transition-delay: 0.04s;
}

.project-ttl .ttl .name.is-out em span:nth-child(4) {
  transition-delay: 0.06s;
}

.project-ttl .ttl .name.is-out em span:nth-child(5) {
  transition-delay: 0.08s;
}

.project-ttl .ttl .name.is-out em span:nth-child(6) {
  transition-delay: 0.1s;
}

.project-ttl .ttl .name.is-out em span:nth-child(7) {
  transition-delay: 0.12s;
}

.project-ttl .ttl .name.is-out em span:nth-child(8) {
  transition-delay: 0.14s;
}

.project-ttl .ttl .name.is-out em span:nth-child(9) {
  transition-delay: 0.16s;
}

.project-ttl .ttl .name.is-out em span:nth-child(10) {
  transition-delay: 0.18s;
}

.project-ttl .ttl .name.is-out em span:nth-child(11) {
  transition-delay: 0.2s;
}

.project-ttl .ttl .name.is-out em span:nth-child(12) {
  transition-delay: 0.22s;
}

.project-ttl .ttl .name.is-out em span:nth-child(13) {
  transition-delay: 0.24s;
}

.project-ttl .ttl .name.is-out em span:nth-child(14) {
  transition-delay: 0.26s;
}

.project-ttl .ttl em {
  font-size: 6rem;
  /* text na thumbnailovima */
  font-weight: 100;
  line-height: 1.2;
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.project-ttl .ttl em span {
  display: inline-block;
  -webkit-transition: transform 0.5s;
  transition: transform 0.5s;
}

.projects {
  position: relative;
  width: 94%; /* 76%, 88% */
  margin: 0 auto 10vw;  /* 30vw */
}

.projects .project {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 40vw; /* 36vw, 46vw */
  margin: 0 0 2% 0; /* 0 0 40% 0 */
  cursor: none;
  background: #000;
  -webkit-border-radius: 22px; /* 40px */
  -khtml-border-radius: 22px; /* 40px */
  -moz-border-radius: 22px; /* 40px */
  border-radius: 22px; /* 40px */
  transform: translateZ(0);
}

.projects .project:before {
  content: "";
  display: block;
  width: 20%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  background: #f8f8fe;
  /* Boja pozadine iza slika slika u indexu koja se pomera sa desne strane slike*/
  z-index: 10;
  -webkit-transition: transform 1s ease;
  transition: transform 1s ease;
  -webkit-transform: translate3d(100%, 0, 0);
  transform: translate3d(100%, 0, 0);
}

.projects .project.is-ready:before {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.projects .project.is-ready .img {
  -webkit-transform: scale(1.2);
  transform: scale(1);
  /* kada dolazi zoom 9 je kul */
}

.projects .project:hover .img {
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
  /* ovo je zoom, bilo je 1.2 */
}

.projects .project:hover .img img {
  opacity: 0.2;
}

.projects .project .img {
  position: relative;
  width: 100%;
  -webkit-transition: transform 1s ease;
  transition: transform 1s ease;
  -webkit-transform: scale(1);
  transform: scale(1);
  /* sa ovim se igraj 0.4*/
  height: 100%;
}

.projects .project .img img {
  -webkit-transition: opacity 1s;
  transition: opacity 1s;
}

.projects .project .img .panel-gray {
  position: absolute;
  z-index: 11;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transform: translate3d(0, -100%, 0);
  transform: translate3d(0, -100%, 0);
  background: #000000;
}

.footer {
  position: relative;
  overflow: hidden;
  /* padding: 0px 6% 60px 16%; */
  padding: 0px 0% 60px 0%;
  color: #000000;
  text-align: center;
  /* background: #f8f8fe; */
}

.footer .txt-large {
  font-family: "tt_interfacesregular";
  font-style: normal;
  font-weight: 100;
  /* text-transform: uppercase; */
  font-size: 7.8rem;
  line-height: 1;
  /* margin-bottom: 25%; */
  text-align: center;
  /* letter-spacing: 1px; */
  /* width: 70%; */
  /* margin-bottom: 280px; */
  -webkit-font-smoothing: antialiased;
}

.footer .txt-small {
  font-style: normal;
  font-size: 1.6rem;
  line-height: 1.9;
  margin-bottom: 20px;
  margin-top: 40px;
  letter-spacing: 1px;
  color: #000000;
  /* 666e69 siva */
}

.footer .contact-list {
  font-style: normal;
  position: relative;
  z-index: 1;
  margin-top: 80px;
}

.footer .contact-list dd {
  font-style: normal;
  display: inline-block;
  margin: 10px;
  vertical-align: middle;
}

.footer .contact-list dd a {
  font-family: "tt_interfacesregular";
  font-style: normal;
  /* text-transform: uppercase; */
  /* font-size: 7.8rem; */
  /* line-height: 8rem; */
  margin-bottom: 4rem;
  /* color: #66686e; */

  font-size: 1.8rem;
  font-weight: 500;
  text-transform: none;
  line-height: 1;
  display: inline-block;
  color: #000000;

  /* display: flex;
  justify-content: center;
  align-items: center; */
  /* flex-basis: 33%; */
  border-radius: 14px; /* 20px */
  cursor: pointer;
  /* text-transform: uppercase; */
  line-height: 110%;
  background-color: #E1E1E7; /* 000 */

  padding: 1.5rem; /* Adjust the padding value as needed, 5rem */


}

.footer .contact-list dd a::selection {
  color: #000000;
}

.footer .contact-list dd :hover {
  color: #000000;
}

.footer .contact-list .copy {
  /* float: right; */
  margin: 0;
}

.footer .contact-list .copy small {
  font-style: normal;
  /* text-transform: uppercase; */
  font-size: 1.5rem;
  /* 1.4rem */
  line-height: 1.9;
  margin-bottom: 20px;
  /* letter-spacing: 1px; */
  color: #66686e;
  /* width: 100%; */
}

#js-pjax-cont {
  position: relative;
  width: 100%;
  height: 100%;
  /* background-color: red; */
}

#js-pjax-cont .project-lead-wrap {
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  width: 54%;
  margin: 0 0 0 33%;
  padding: 10% 0 100px;
  /* padding: 18% 0 100px; */
  color: #fff;
}

#js-pjax-cont .project-lead-wrap .project-ttl {
  font-size: 7rem;
  line-height: 1.3;
  position: relative;
  overflow: visible;
  align-items: center;
  margin: 0 0 80px 0;
  /* margina texta na thumbnailovima projekata */
}

#js-pjax-cont .project-lead-wrap .txt {
  font-size: 1.5rem;
  line-height: 1.6;
  float: left;
  width: 68%;
  margin: 0 5% 40px 0;
  letter-spacing: 0.4px;
}

#js-pjax-cont .project-lead-wrap .credits {
  font-size: 1.4rem;
  line-height: 2.2;
  display: block;
  float: left;
  width: 100%;
  /* 27% */
  margin-bottom: 40px;
}

#js-pjax-cont .project-lead-wrap .url {
  font-size: 4.2rem;
  position: relative;
  display: block;
  float: left;
  clear: both;
  overflow: hidden;
  color: currentColor;
}

#js-pjax-cont .project-lead-wrap .url:before {
  position: absolute;
  bottom: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 2px;
  content: "";
  -webkit-transition: transform 1s cubic-bezier(0.62, 0.15, 0.24, 0.95);
  transition: transform 1s cubic-bezier(0.62, 0.15, 0.24, 0.95);
  background: currentColor;
}

#js-pjax-cont .project-lead-wrap .url:after {
  position: absolute;
  bottom: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 2px;
  content: "";
  -webkit-transition: transform 1s cubic-bezier(0.62, 0.15, 0.24, 0.95);
  transition: transform 1s cubic-bezier(0.62, 0.15, 0.24, 0.95);
  transition-delay: 0.2s;
  -webkit-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);
  background: currentColor;
}

#js-pjax-cont .project-lead-wrap .url:hover:before {
  -webkit-transform: translate3d(100%, 0, 0);
  transform: translate3d(100%, 0, 0);
}

#js-pjax-cont .project-lead-wrap .url:hover:after {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

#js-pjax-cont .main-img {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 54.2vw;
  background: #000000;
}

#js-pjax-cont .main-img img {
  -webkit-transform-origin: center top;
  transform-origin: center top;
  opacity: 0.2;
}

#js-pjax-cont .project-detail {
  position: relative;
  padding-top: 14%;
  pointer-events: none;
  background: #f8f8fe;
  /* boja pozadine na projekatima */
  z-index: -100;
}

#js-pjax-cont .project-detail .project-img {
  width: 70%;
  margin: 14% auto;
  padding: 6%;
  background: #222222;
  /* 48000F , eaeaea */
}

#js-pjax-cont .project-detail .project-img-2 {
  width: 70%;
  margin: 14% auto;
  padding: 6%;
  background: #1d2d88;
}

#js-pjax-cont .project-detail .project-img-3 {
  width: 80%;
  margin: 14% auto;
  padding: 6%;
  background: #000000;
}

#js-pjax-cont .project-detail .project-img-4 {
  width: 80%;
  margin: 14% auto;
  padding: 6%;
  background: #1633ff;
}

#js-pjax-cont .project-detail .project-img .project-img-2 .size-half {
  width: 43%;
}

#js-pjax-cont .project-detail .project-video {
  position: relative;
  overflow: hidden;
  width: 70%;
  height: 65vw;
  /* 43.4vw */
  margin: 14% auto;
  margin-bottom: 0%;
}

#js-pjax-cont .project-detail .project-video .video {
  position: absolute;
  /* top: -1px; */
  left: 0;
  width: 100%;
  border-radius: 20px;
}

#js-pjax-cont .project-detail .img-cuts-middle {
  position: relative;
  width: 100%;
  margin: 20% auto;
  background: #f8f8fe;
}

#js-pjax-cont .project-detail .img-cuts-middle .img-cuts-box {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  width: 100%;
  margin: 0 auto;
  padding: 0 15%;
  justify-content: space-between;
}

#js-pjax-cont .project-detail .img-cuts-middle .img-cuts-box .size-half {
  width: 46%;
  margin-top: 7%;
}

#js-pjax-cont
  .project-detail
  .img-cuts-middle
  .img-cuts-box
  .size-half:nth-of-type(2) {
  margin-top: -4%;
}

#js-pjax-cont .project-detail .img-cuts-middle .img-cuts-box .img {
  position: relative;
  z-index: 5;
  visibility: visible;
}

#js-pjax-cont .project-detail .img-cuts-middle .img-cut-bg {
  position: relative;
  z-index: 0;
}

#js-pjax-cont .project-detail .img-cuts-middle .img-cut-bg:before {
  display: block;
  padding-top: 56%;
  content: "";
}

#js-pjax-cont .project-detail .img-cut-fit {
  position: relative;
  height: 66vw;
  margin: 14% auto;
}

#js-pjax-cont .project-detail .img-cut-medium {
  width: 70%;
  margin: 14% auto;
  border-radius: 40px;
}

#js-pjax-cont .project-detail .img-cut-medium2 {
  width: 74%;
  margin: 14% auto;
  border-radius: 40px;
}

#js-pjax-cont .project-detail .txt {
  font-size: 3rem;
  line-height: 1.6;
  margin: 200px 0;
  padding: 16% 0;
  text-align: center;
}

#js-pjax-cont .project-detail .txt-sub {
  position: relative;
  overflow: hidden;
  width: 56%; /* 54% */
  margin: 14% auto 14% 15%;
  padding-left: 18vw;
}

#js-pjax-cont .project-detail .txt-sub0p {
  position: relative;
  overflow: hidden;
  width: 35%; /* 54% */
  /* margin: 14% auto 14% 15%; */
  margin: 14% auto 14% 14%;
  /* padding-left: 18vw; */
  font-size: 1.7rem;
  /* 1.8rem */
  font-weight: 100;
  line-height: 1.7;
  /* 1.8 */
  display: block;
  /* letter-spacing: 0.1px; */
  color: #303030; /* #4f4f4f */
  /* #242424 */
}

#js-pjax-cont .project-detail .txt-sub0h {
  font-size: 4.6rem;
  /* letter-spacing: -1.7px; */
  line-height: 1.28;
  margin: 200px 0;
  /* padding: 16% 0; */
  text-align: left;
  position: relative;
  overflow: hidden;
  width: 70%;
  /* 54% */
  margin: 14% auto 4% 14%;
  /* padding-left: 18vw; */
}

#js-pjax-cont .project-detail .txt-h {
  font-size: 8rem;
  font-family: "Interbold";
  font-weight: 400;
  font-style: normal;
  letter-spacing: -1.7px;
  line-height: 1.1;
  margin: 200px 0;
  color: #1d1d1f;
  /* padding: 16% 0; */
  text-align: left;
  position: relative;
  overflow: hidden;
  width: 70%;
  /* 54% */
  margin: 14% auto 4% 14%;
  /* padding-left: 18vw; */
}

#js-pjax-cont .project-detail .txt-sub .num {
  position: absolute;
  top: 8px;
  left: 0;
  display: inline-block;
  width: 120px;
  text-align: center;
  /* letter-spacing: 3px; */
}

#js-pjax-cont .project-detail .txt-sub .num:before {
  position: absolute;
  top: 8px;
  right: -5px;
  display: block;
  width: 10px;
  height: 1px;
  content: "";
  background: currentColor;
  color: #ababab;
}

#js-pjax-cont .project-detail .txt-sub strong {
  font-family: "tt_interfacesregular";
  text-transform: inherit;
  /* font-style: italic; */
  font-weight: 400;
  font-size: 2.7rem;
  /* letter-spacing: 2px; */
  line-height: 1.5;
  position: relative;
  display: block;
  width: 100%;
  margin: 0 6% 40px 0;
}

#js-pjax-cont .project-detail .txt-sub p {
  font-size: 1.7rem;
  /* 1.8rem */
  font-weight: 100;
  line-height: 1.7;
  /* 1.8 */
  display: block;
  width: 100%;
  /* letter-spacing: 0.1px; */
  color: #303030;
  /* #242424 */
}

#js-pjax-cont .project-detail .area-sp {
  position: relative;
  padding: 1px 0 0;
  color: #000000;
  background: #f8f8fe;
}

#js-pjax-cont .project-detail .area-sp .img-sp {
  position: absolute;
  top: 0;
  right: 0;
  width: 28%;
  margin: 3% 4% 0 0;
}

#js-pjax-cont .project-detail .area-sp .sp-captures {
  position: relative;
  z-index: 100;
  width: 65%;
  /* 70% */
  height: 46vw;
  /* 36% */
  margin: 0 auto;
}

#js-pjax-cont .project-detail .area-sp .sp-capture-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 30%;
}

#js-pjax-cont .project-detail .area-sp .img01 {
  margin-top: 0;
}

#js-pjax-cont .project-detail .area-sp .img02 {
  margin: 5% 0 0 35%;
}

#js-pjax-cont .project-detail .area-sp .img03 {
  margin: 10% 0 0 70%;
}

#js-pjax-cont .project-detail .content-half {
  width: 100%;
  margin: 0 auto;
  padding: 1px 0 0 0;
}

#js-pjax-cont .project-detail .content-quater {
  width: 100%;
  margin: 0 auto;
  padding: 0 16.5% 0;
}

#js-pjax-cont .project-detail .img-flex {
  display: flex;
  width: 70%;
  margin: 0 auto 10%;
  justify-content: space-between;
}

#js-pjax-cont .project-detail .img-flex:last-child {
  margin: 0 auto;
}

#js-pjax-cont .project-detail .half-img {
  width: 48%;
}

#js-pjax-cont .project-detail .onethird-img {
  width: 30%;
}

#js-pjax-cont .project-detail .quater-img {
  width: 24%;
  margin-top: 4%;
}

#js-pjax-cont .project-detail .quater-img:nth-of-type(2n) {
  margin-top: 0;
}

#js-pjax-cont .project-detail .next {
  position: relative;
  font-weight: 100;
  overflow: hidden;
  width: 100%;
  height: 52vw; /* 48vw je bilo, 60vw je za full screen! */
  /* margin-top: 14%; */
  pointer-events: visible;
  background: #000;
}

#js-pjax-cont .project-detail .next .next-txt {
  font-family: "tt_interfacesregular";
  text-transform: uppercase;
  font-weight: 100;
  font-weight: 100;
  /* font-style: italic; */
  font-size: 22rem;
  position: absolute;
  z-index: 13;
  top: 0;
  width: 100%;
  height: 260px;
  /* height: 20px; */
  margin: auto;
  text-align: center;
  letter-spacing: 0.6px;
  color: #f8f8fe;
  bottom: 0;
}

#js-pjax-cont .project-detail .next .writing {
  position: absolute;
  z-index: 10;
  top: 15vw;
  right: 0;
  left: 0;
  width: 50%;
  height: 17vw;
  margin: auto;
  fill: #333;
}

#js-pjax-cont .project-detail .next #next-panel-black {
  position: absolute;
  z-index: 12;
  display: table;
  width: 100%;
  height: 100%;
}

#js-pjax-cont .project-detail .next #next-panel-black .wrap {
  display: table-cell;
  overflow: hidden;
  height: 100%;
}

#js-pjax-cont .project-detail .next #next-panel-black .wrap span {
  display: block;
  height: 100%;
  background: #000;
}

#js-pjax-cont .project-detail .next .img {
  position: absolute;
  z-index: 11;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0.2;
}

#js-pjax-cont .project-detail .next .img img {
  position: relative;
  top: -1px;
}

.emoji {
  font-size: 3rem;
  font-size: normal;
  margin-left: 80px;
  vertical-align: middle;
}

.page-about {
  color: #000000;
  /* rgb(255, 50, 50); */
  /* background: #f8f8fe; */
}

.page-about .txt-wrap {
  width: 71%; /* 40%, 50% */
  margin: 0 0 20px 15%; /* margin: 0 0 200px 33%; */
  /* margin: 0 0 200px 25%; */
  padding-top: 200px;
}

.page-about .txt-wrap .hello {
  font-family: "tt_interfacesregular";
  text-transform: uppercase;
  font-size: 14rem;
  /* 8.5rem */
  font-weight: 100;
  line-height: 1.2;
  /* letter-spacing: 1px; */
  margin: -60px 0 150px -200px;
  /* 0 0 80px -80px */
  color: #000000;
}

.page-about .txt-wrap .txt-small {
  margin-bottom: 60px;
}

.page-about .txt-wrap .txt-large {
  /* font-family: 'tt_interfacesregular';  */
  font-size: 4.6rem; /* 2.8rem */
  /* font-size: 3.5rem; */
  /* font-weight: 400; */
  line-height: 1.28;  /* 1.55 */
  /* line-height: 1.45; */
  margin-bottom: 160px;
}

.page-about .txt-wrap .txt-large a {
  font-family: "tt_interfacesregular";
  position: relative;
  display: inline;
  -webkit-transition: opacity 0.4s;
  transition: opacity 0.4s;
  color: rgb(0, 0, 0);
}

.page-about .txt-wrap .txt-large a:hover {
  font-family: "tt_interfacesregular";
  opacity: 0.6;
}

.page-about .txt-wrap .mail {
  position: relative;
  /* margin: 0 0 0 -200px; */
  vertical-align: middle;
}

.mail-container {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.page-about .txt-wrap .mail p {
  font-size: 1.8rem;
  font-weight: 500;
  text-transform: none;
  line-height: 1;
  display: inline-block;
  color: #000000;

  /* display: flex;
  justify-content: center;
  align-items: center; */
  /* flex-basis: 33%; */
  border-radius: 14px; /* 20px */
  cursor: pointer;
  /* text-transform: uppercase; */
  line-height: 110%;
  background-color: #E1E1E7; /* 000 */

  padding: 1.5rem; /* Adjust the padding value as needed, 5rem */


  /*Ovo je boja pozadine*/
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  backdrop-filter: blur(15px);
  -moz-backdrop-filter: blur(15px);
  -o-backdrop-filter: blur(15px);
  -ms-backdrop-filter: blur(15px);
  transition: top 0.6s ease-in-out;
  -webkit-font-smoothing: antialiased;
}

.page-about .txt-wrap .mail span {
  display: inline-block;
  margin-top: -50px;
}

/* .page-about .txt-wrap .mail:before {
    position: absolute;
    bottom: 3px;
    left: 0;
    display: block;
    width: 0;
    height: 34px;
    content: '';
    -webkit-transition: width .8s;
    transition: width .8s;
    background: rgba(255, 255, 255, .4)
}

.page-about .txt-wrap .mail:hover:before {
    width: 362px
} */

.page-about .big-type {
  font-size: 36rem;
  /* 100rem */
  line-height: 1;
  position: absolute;
  padding-left: 8.6rem;
  z-index: 0;
  top: 0;
  left: 0;
  pointer-events: none !important;
  opacity: 0.08;
  /* .05 */
}

.sp-none {
  display: block !important;
}

.pc-none {
  display: none !important;
}

/* Custom cursor */
#cursor {
  width: 20px;
  height: 20px;
  background: #a0a0a0;
  margin: -10px 0 0 -10px;
  opacity: 0.08;
  border-radius: 50%;
  position: fixed;
  top: 0;
  left: 0;
  transition: all 150ms ease-out;
  /* 100ms */
  pointer-events: none;
  z-index: 100;
}

#cursor:after {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: #a0a0a0;
  content: "";
  opacity: 0;
  border-radius: 50%;
  transform: scale(0.5);
  transition: all 100ms ease-out;
}

#cursor.hover {
  opacity: 1;
  background: transparent;
}

/* #cursor.hover:after {
  opacity: 0.2;
  transform: scale(3.4);
} */

#cursor.hide {
  opacity: 0;
}

#cursor.hide:after {
  opacity: 0;
}

#fv .profile {
  /* JAKO BITNO */
  display: block;
  width: 82%; /* 71% */
  margin: 0px 0 0 9%;
    /* OVO GORE SVE  JE BILOO UPALJENO PRE PROMENE!*/
}

@media screen and (max-width: 1366px) {
  /* iPad Pro horizontal */
  body,
  html {
    overflow-x: hidden;
    overflow-y: scroll;
    min-height: 100%;
    -ms-overflow-style: touch;
    -webkit-overflow-scrolling: touch;
    -webkit-font-smoothing: antialiased;
    -webkit-font-smoothing: subpixel-antialiased;
  }

  #fv .heading {
    display: none;
  }

  #fv .profile {
    display: block;
    width: 51%;
    margin: 0px 0 0 12%;
  }

  #fv .profile .txt01 {
    font-size: 2.4rem;
    font-weight: normal;
    text-align: left;
    margin-top: 10%;
    margin-bottom: 8%;
    -webkit-font-smoothing: antialiased;
    /* letter-spacing: .4px */
  }

  #fv .profile .txt01-b {
    font-size: 2.7rem;
    /* text-transform: capitalize; */
    font-weight: normal;
    text-align: left;
    /* margin-top: 90%; */
    margin-bottom: 8%;
    -webkit-font-smoothing: antialiased;
    /* letter-spacing: 0.4px; */
  }

  #fv .profile .txt01 br {
    display: none;
  }

  #fv .profile .txt00 {
    font-family: "tt_interfacesregular";
    /* text-transform: uppercase; */
    text-align: left;
    font-size: 3rem;
    font-weight: 100;
    line-height: 1.2;
    margin-top: 25%;
    -webkit-font-smoothing: antialiased;
    /* margin-bottom: 20%; */
    /* letter-spacing: 1px; */
    user-select: none;
  }

  .page-about .txt-wrap .hello {
    font-family: "tt_interfacesregular";
    font-size: 6rem;
    -webkit-font-smoothing: antialiased;
    /* 8.5rem */
  }
}

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

  #fv .profile {
    display: block;
    width: 72%;
    margin: 0px 0 0 10%;
  }

  #fv .profile .txt00 {
    font-family: "tt_interfacesregular";
    /* text-transform: uppercase; */
    text-align: left;
    font-size: 4.6rem;
    font-weight: 100;
    line-height: 1.2;
    margin-top: 30%;
    margin-bottom: 20%;
    /* letter-spacing: 2px; */
    -webkit-font-smoothing: antialiased;
    user-select: none;
  }

  #fv .profile .txt01-b {
    font-size: 4.6rem;
    font-weight: 100;
    -webkit-font-smoothing: antialiased;
    /* letter-spacing: 0.4px; */
  }
}

@media screen and (max-width: 1024px) {
  /* iPad Pro vertical */

  #fv .profile {
    display: block;
    width: 82%;
    margin: 0px 0 0 4%;
  }
  
  #fv .profile .txt00 {
    font-family: "tt_interfacesregular";
    /* text-transform: uppercase; */
    text-align: left;
    font-size: 3.4rem;
    font-weight: 100;
    line-height: 1.2;
    margin-top: 30%;
    margin-bottom: 20%;
    /* letter-spacing: 2px; */
    -webkit-font-smoothing: antialiased;
    user-select: none;
  }

  #fv .profile .txt01-b {
    /* font-size: 2.4rem;  */
    font-size: 3.4rem; 
    font-weight: 100;
    -webkit-font-smoothing: antialiased;
    /* letter-spacing: 0.4px; */
  }

  .footer .contact-list .copy small {
    font-size: 1.4rem;
    /* 1.4rem */
    line-height: 1.9;
    margin-bottom: 20px;
    letter-spacing: 1px;
    -webkit-font-smoothing: antialiased;
  }

  #mask {
    border: none;
    border-radius: 0;
  }

  #bg-mask {
    border: none;
  }
}

@media screen and (max-width: 768px) {
  /* Mobile */

  #fv .profile .txt01-b {
    font-size: 2.4rem; 
    font-weight: 100;
    -webkit-font-smoothing: antialiased;
    /* letter-spacing: 0.4px; */
  }

  .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100vw;
  }

  .navbar {
    top: unset;
    bottom: 33px;
    transition: bottom 0.6s ease-in-out;
    max-width: 333px;
  }

  .navbar.navbar-off-screen-animation-mobile {
    bottom: -100%;
  }

  #js-pjax-cont .project-detail .project-video .video {
    position: absolute;
    /* top: -1px; */
    left: 0;
    width: 100%;
    border-radius: 20px;
  }

  .sp-none {
    display: none !important;
  }

  .pc-none {
    display: block !important;
  }

  #js-cusor {
    display: none !important;
  }

  body,
  html {
    overflow-x: hidden;
    overflow-y: scroll;
    min-height: 100%;
    -ms-overflow-style: touch;
    -webkit-overflow-scrolling: touch;
  }

  #js-scroll {
    position: relative;
  }

  #progress .num {
    font-family: "tt_interfacesregular";
    text-transform: uppercase;
    font-size: 2rem;
    position: relative;
    z-index: 100;
    /* letter-spacing: 5px; */
    pointer-events: none !important;
    color: #f8f8fe;
    -webkit-font-smoothing: antialiased;
  }

  #fv {
    position: relative;
  }

  #fv .caption {
    margin: 25% 0 0 10%;
  }

  #fv .main-type {
    position: relative;
    width: 100%;
    margin: 34% 0 0 0;
  }

  #fv .main-type .img01 {
    width: 92%;
    height: 56%;
    margin: 0;
  }

  #fv .main-type .img02 {
    width: 94%;
    height: 78%;
    margin: 19% 0 0 14%;
  }

  #fv .main-type:after {
    padding-top: 44%;
  }

  #fv .main-type span {
    font-size: 1rem;
    margin: 40% 0 0 62%;
    letter-spacing: 0.4px;
  }

  #fv h2 {
    display: none;
  }

  #fv .profile {
    display: block;
    width: 80%;
    margin: 50% 0 0 10%;
    /* 0 0 0 10%; */
  }

  #fv .profile .txt01 {
    font-size: 2.4rem;
    line-height: 1.4;
    font-weight: 100;
    text-align: left;
    margin-top: 40%;
    margin-bottom: 8%;
    /* letter-spacing: .4px */
    -webkit-font-smoothing: antialiased;
  }

  #fv .profile .txt01 br {
    display: none;
  }

  #fv .profile .txt00 {
    font-family: "tt_interfacesregular";
    /* text-transform: uppercase; */
    text-align: left;
    font-size: 3.4rem; /* 14.5rem ili 8rem */
    font-weight: 100;
    margin-top: 30%;
    /* margin-bottom: 60%; */
    /* letter-spacing: 2px; */
    user-select: none;
    -webkit-font-smoothing: antialiased;
  }

  #fv .profile .txt02 {
    font-family: "tt_interfacesregular";
    font-size: 1.8rem;
    line-height: 2;
    margin-top: 38%;
    margin-bottom: 4%;
    letter-spacing: 0.3px;
    width: auto;
    -webkit-font-smoothing: antialiased;
  }

  #fv .profile .txt02 br {
    display: none;
  }

  #fv .scroll {
    display: none;
  }

  .projects {
    width: 85%;
    margin-bottom: 20px;
  }

  #js-pjax-cont .project-detail .txt,
  #js-pjax-cont .project-detail .txt-sub strong,
  #js-pjax-cont .project-lead-wrap .project-ttl,
  #js-pjax-cont .project-lead-wrap .url,
  .freight,
  .page-about .big-type,
  .page-about .txt-wrap .mail p,
  .project-ttl .ttl em,
  .projects .project .img .sp-ttl {
    font-family: "tt_interfacesregular";
    /* text-transform: uppercase; */
    -webkit-font-smoothing: antialiased;
  }

  /* .projects .project {
        position: relative;
        overflow: hidden;
        width: 100%;
        height: 36vw;
        margin: 0 0 10% 0;
        cursor: none;
        background: #000
    }     */
  .projects .project:before {
    display: none;
  }

  .projects .sp-ttl {
    /* font-style: italic; */
    color: #f8f8fe;
    font-family: "tt_interfacesregular";
    font-size: 3rem;
    font-weight: normal;
    font-style: normal;
    position: relative;
    z-index: 12;
    top: 50%;
    display: block;
    width: 100%;
    margin: 0;
    -webkit-transform: translate3d(0, -21px, 0);
    transform: translate3d(0, -21px, 0);
    text-align: center;
    -webkit-font-smoothing: antialiased;
  }

  .projects .sp-ttl.is-white {
    color: #f8f8fe;
  }

  .page-top {
    padding-top: 60px;
  }

  #opening-type.is-ready .is-top {
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }

  #opening-type.is-ready .is-bottom {
    -webkit-transform: translate3d(0, 20px, 0);
    transform: translate3d(0, 20px, 0);
  }

  #opening-type p {
    font-size: 2.4rem;
  }

  .nav-right {
    margin: 10% 10% 0 0;
  }

  .nav-back {
    margin: 10% 0 0 10%;
    letter-spacing: 1.4px;
  }

  #js-layer {
    display: flex;
    flex-flow: column nowrap;
  }

  #js-layer #panel01,
  #js-layer #panel02,
  #js-layer #panel03 {
    display: block;
    width: 100%;
    height: 34%;
  }

  .projects .project {
    width: 100%;
    height: 50vw; /* 60vw */
    /* margin: 0 auto !important; */
    /* border-radius: 4%; */
    margin-top: 10px;
    margin-bottom: 30px;
  }

  .projects .project .img img {
    -webkit-transform: translate3d(0, 0, 0) !important;
    transform: translate3d(0, 0, 0) !important;
  }

  #js-pjax-cont {
    position: relative;
    width: 100%;
    height: 100%;
  }

  #js-pjax-cont .page-project {
    padding-top: 0;
  }

  #js-pjax-cont .project-lead-wrap {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0 10% 120px;
    background: #000;
  }

  #js-pjax-cont .project-lead-wrap .project-ttl {
    font-size: 5rem;
    line-height: 1.2;
    top: 20px;
    margin: 0 0 70px 0;
    color: #f8f8fe;
    font-weight: 100;
  }

  #js-pjax-cont .project-lead-wrap .txt {
    font-size: 1.5rem;
    width: 100%;
    margin: 0 0 20px 0;
  }

  #js-pjax-cont .project-lead-wrap .credits {
    font-size: 1.4rem;
    float: none;
    width: 100%;
    margin-bottom: 40px;
  }

  #js-pjax-cont .project-lead-wrap .url {
    font-size: 2.8rem;
  }

  #js-pjax-cont .scroll.is-left {
    display: none;
  }

  #js-pjax-cont .main-img {
    position: relative;
    height: 69.2vw;
  }

  #js-pjax-cont .main-img img {
    opacity: 0.7;
  }

  #js-pjax-cont .project-detail {
    padding-top: 100px;
  }

  #js-pjax-cont .project-detail .project-img .project-img-2 {
    width: 80%;
    padding: 0;
  }

  #js-pjax-cont .project-detail .project-img .project-img-2 .size-half {
    width: 43%;
  }

  #js-pjax-cont .project-detail .project-video {
    width: 80%;
    /* height: 50vw */
  }

  #js-pjax-cont .project-detail .img-cuts-middle {
    position: relative;
    width: 100%;
    margin: 20% auto;
    background: #f8f8fe;
  }

  #js-pjax-cont .project-detail .img-cuts-middle .img-cuts-box {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    width: 100%;
    margin: 0 auto;
    padding: 0 10%;
    justify-content: space-between;
  }

  #js-pjax-cont .project-detail .img-cuts-middle .img-cuts-box .size-half {
    width: 40%;
    margin-top: 7%;
  }

  #js-pjax-cont
    .project-detail
    .img-cuts-middle
    .img-cuts-box
    .size-half:nth-of-type(2) {
    margin-top: -4%;
  }

  #js-pjax-cont .project-detail .img-cuts-middle .img-cuts-box .img {
    position: relative;
    z-index: 5;
  }

  #js-pjax-cont .project-detail .img-cuts-middle .img-cut-bg {
    position: relative;
    z-index: 0;
  }

  #js-pjax-cont .project-detail .img-cuts-middle .img-cut-bg:before {
    display: block;
    padding-top: 56%;
    content: "";
  }

  #js-pjax-cont .project-detail .img-cut-fit {
    height: 65vw;
    /* 65vw */
    margin: 20% auto;
  }

  #js-pjax-cont .project-detail .img-cut-medium {
    width: 80%;
    margin: 20% auto;
    border-radius: 40px;
  }

  #js-pjax-cont .project-detail .img-cut-medium2 {
    width: 80%;
    margin: 20% auto;
    border-radius: 40px;
  }

  #js-pjax-cont .project-detail .txt {
    font-size: 3rem;
    line-height: 1.6;
    margin: 200px 0;
    padding: 16% 0;
    text-align: center;
  }

  #js-pjax-cont .project-detail .txt-sub {
    width: 85%; /* 850 */
    margin: 20% auto 20% 7.5%; /* posldnje je bilo 10% */
    padding-left: 0;
  }

  #js-pjax-cont .project-detail .txt-sub0h {
    font-size: 2.2rem;
    width: 85%; /* 850 */
    margin: 20% auto 20% 7.5%; /* posldnje je bilo 10% */
    padding-left: 0;
  }

  #js-pjax-cont .project-detail .txt-sub0p {
    width: 85%; /* 850 */
    margin: 20% auto 20% 7.5%; /* posldnje je bilo 10% */
    padding-left: 0;
  }

  #js-pjax-cont .project-detail .txt-sub .num {
    position: relative;
    top: 0;
    width: 100%;
    margin-bottom: 16px;
    text-align: left;
  }

  #js-pjax-cont .project-detail .txt-sub strong {
    font-family: tt_interfacesregular;
    font-style: normal;
    font-weight: 400;
    text-transform: none;
    font-size: 3rem;
    line-height: 1.4;
    margin: 0 0 36px 0;
  }

  #js-pjax-cont .project-detail .txt-sub p {
    font-size: 1.7rem;
    line-height: 1.6;
    /* 1.8 */
  }

  #js-pjax-cont .project-detail .area-sp {
    padding: 30px 0 0;
  }

  #js-pjax-cont .project-detail .area-sp .img-sp {
    width: 0%;
    /* 37% */
    margin: 8% -6% 0 0;
  }

  #js-pjax-cont .project-detail .area-sp .sp-captures {
    width: 80%;
    height: 80vw;
    /* 41vw*/
  }

  #js-pjax-cont .project-detail .area-sp .sp-capture-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 30%;
  }

  #js-pjax-cont .project-detail .area-sp .img01 {
    margin-top: 0;
  }

  #js-pjax-cont .project-detail .area-sp .img02 {
    margin: 5% 0 0 35%;
  }

  #js-pjax-cont .project-detail .area-sp .img03 {
    margin: 10% 0 0 70%;
  }

  #js-pjax-cont .project-detail .content-half {
    width: 100%;
    margin: 0 auto;
  }

  #js-pjax-cont .project-detail .content-quater {
    width: 100%;
    margin: 0 auto;
    padding: 0 16.5% 0;
  }

  #js-pjax-cont .project-detail .img-flex {
    width: 80%;
    margin: 0 auto 16%;
  }

  #js-pjax-cont .project-detail .img-flex:last-child {
    margin: 0 auto;
  }

  #js-pjax-cont .project-detail .next {
    height: 68vw;
    margin-top: 20%;
  }

  #js-pjax-cont .project-detail .next .writing {
    top: 22vw;
    width: 70%;
    height: 24vw;
  }

  #js-pjax-cont .project-detail .next #next-panel-black {
    display: none;
  }

  #js-pjax-cont .project-detail .next #next-panel-black .wrap span {
    height: 68vw;
  }

  .page-about {
    color: #000000;
    background: #f8f8fe;
  }

  .page-about .txt-wrap {
    width: 48%;
    margin: 0 0 200px 33%;
    padding-top: 440px;
    -webkit-font-smoothing: antialiased;
  }

  .page-about .txt-wrap .hello {
    font-family: "tt_interfacesregular";
    text-transform: uppercase;
    font-size: 4rem;
    font-weight: 400;
    margin: 0 0 80px -80px;
    -webkit-font-smoothing: antialiased;
  }

  .page-about .txt-wrap .txt-small {
    margin-bottom: 60px;
  }

  .page-about .txt-wrap .txt-large {
    font-family: "tt_interfacesregular";
    font-size: 3rem;
    font-weight: 400;
    line-height: 1.5;
    margin-bottom: 160px;
    -webkit-font-smoothing: antialiased;
  }

  .page-about .txt-wrap .txt-large a {
    position: relative;
    display: inline;
    -webkit-transition: opacity 0.4s;
    transition: opacity 0.4s;
    color: rgb(0, 0, 0);
  }

  .page-about .txt-wrap .txt-large a:hover {
    opacity: 0.6;
  }


  .page-about .txt-wrap .mail {
    position: relative;
    margin: 0 0 0 -80px;
    vertical-align: middle;
  }

  .page-about .txt-wrap .mail p {
    font-size: 1.5rem;
    line-height: 1;
    display: inline-block;
    color: #000000;
    -webkit-font-smoothing: antialiased;
  }

  .page-about .txt-wrap .mail span {
    display: inline-block;
    margin-top: -60px;
  }

  .page-about .txt-wrap .mail:before {
    position: absolute;
    bottom: 3px;
    left: 0;
    display: block;
    width: 0;
    height: 34px;
    content: "";
    -webkit-transition: width 0.8s;
    transition: width 0.8s;
    background: rgba(255, 255, 255, 0.4);
  }

  .page-about .txt-wrap .mail:hover:before {
    width: 472px;
  }

  .page-about .big-type {
    font-size: 80rem;
    line-height: 1;
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    pointer-events: none !important;
    opacity: 0.05;
  }

  #js-pjax-cont .project-detail .next .next-txt {
    font-family: "tt_interfacesregular";
    text-transform: uppercase;
    font-weight: 100;
    /* font-style: italic; */
    font-size: 10rem;
    letter-spacing: 0.1px;
  }

  .page-about .txt-wrap {
    width: 85%;
    /* margin: 0 auto 180px; */
    margin: 0 auto 0px;
    padding-top: 150px;
  }

  .page-about .txt-wrap .hello {
    font-family: "tt_interfacesregular";
    text-transform: uppercase;
    font-size: 6rem;
    margin: 0 0 90px 0vw;
  }

  .page-about .txt-wrap .txt-small {
    margin-bottom: 40px;
  }

  .page-about .txt-wrap .txt-large {
    font-family: "tt_interfacesregular";
    font-size: 1.8rem;
    line-height: 2.7rem;
    margin-bottom: 100px;
  }

  .page-about .txt-wrap .txt-large a:hover {
    opacity: 1;
  }

  .page-about .txt-wrap .mail {
    margin: 0;
  }

  .page-about .txt-wrap .mail p {
    font-size: 1.5rem;
    -webkit-font-smoothing: antialiased;
  }

  .page-about .txt-wrap .mail span {
    display: inline-block;
    margin-top: -20px;
  }

  .page-about .big-type {
    font-size: 60rem;
  }

  .footer {
    /* padding: 90px 0% 100px 10%; */
    padding: 100px 0% 100px 0%;
  }

  .footer .contact-list dd a {
    font-family: "tt_interfacesregular";
    /* text-transform: uppercase; */
    /* font-style: normal;
    font-size: 5.5rem;
    line-height: 10rem;
    margin-bottom: 1rem;
    color: #000000; */
    /* DA2016 */
  }

  .footer .txt-large {
    font-style: normal;
    font-size: 6rem;
    line-height: 7rem;
    width: 100%;
    margin-bottom: 60px;
  }

  .footer .txt-small {
    font-style: normal;
    font-size: 1.4rem;
    margin-bottom: 6rem;
  }

  .footer .contact-list {
    font-style: normal;
    float: none;
    margin-top: 0;
  }

  .footer .contact-list .copy {
    font-style: normal;
    float: none;
    width: 100%;
    margin-top: 30px;
  }
}