@font-face {
  font-family: "SR";
  src: url("../fonts/SR.woff2") format("woff2"),
    url("../fonts/SR.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "SB";
  src: url("../fonts/SB.woff2") format("woff2"),
    url("../fonts/SB.woff") format("woff");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

* {
  user-select: none;
  box-sizing: border-box;
  -webkit-user-drag: none;
}

html,
body {
  scroll-behavior: smooth;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

body {
  margin: 0;
  padding: 0;
  background-color: #f3f2ef;
  color: #121212;
  font-family: "SR", Helvetica, sans-serif;
  font-weight: normal;
  font-style: normal;
  scroll-behavior: smooth;
  overscroll-behavior-y: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  user-select: none;
  -webkit-user-select: none;
  overflow-x: hidden;
}

body::-webkit-scrollbar {
  display: none;
}

a {
  color: #121212;
}

a:hover {
  color: #121212;
}

a.active-link {
  text-decoration: underline !important;
}

::-moz-selection {
  color: #f3f2ef;
  background: #121212;
}

::selection {
  color: #f3f2ef;
  background: #121212;
}

body::-webkit-scrollbar {
  width: 0;
  display: none;
}

body::-webkit-scrollbar-track {
  background: transparent; 
}
 
body::-webkit-scrollbar-thumb {
  background: transparent; 
}

body::-webkit-scrollbar-thumb:hover {
  background: transparent; 
}

.scrollbar-hidden::-webkit-scrollbar {
  display: none;
}

.scrollbar-hidden {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.responsive {
  width: 100%;
}

h1 {
  font-size: 9.7vw;
  line-height: 100%;
  letter-spacing: -0.04em;
  margin: 0;
}

h2 {
  font-size: 8.3vw;
  line-height: 100%;
  letter-spacing: -0.04em;
  margin: 0;
}

h3 {
  font-size: 2.4vw;
  line-height: 100%;
  letter-spacing: -0.04em;
  margin: 0;
}

h4 {
  font-size: 1.5vw;
  line-height: 130%;
  letter-spacing: -0.02em;
  margin: 0;
}

h5 {
  font-size: 0.8vw;
  line-height: 130%;
  letter-spacing: -0.02em;
  margin: 0;
}

p {
  font-size: 1.5vw;
  line-height: 130%;
  letter-spacing: -0.02em;
  margin: 0;
}

@media (max-width: 1024px) {
  h1 {
    font-size: 9.2vw;
  }
  h2 {
    font-size: 8.4vw;
  }
  h3 {
    font-size: 2.3vw;
  }
  h4 {
    font-size: 2.1vw;
  }
  h5 {
    font-size: 1.2vw;
  }
  p {
    font-size: 2.1vw;
  }
}

@media (max-width: 560px) {
  h1 {
    font-size: 9.6vw;
  }
  h2 {
    font-size: 13.9vw;
  }
  h3 {
    font-size: 4.8vw;
  }
  h4 {
    font-size: 3.7vw;
  }
  h5 {
    font-size: 2.7vw;
  }
  p {
    font-size: 5.9vw;
  }
}

@media (max-width: 340px) {
  h1 {
    font-size: 8.8vw;
  }
}

/* HOMEPAGE STYLE ***********************************************************************/

body.home {
  width: 100%;
  height: 100vh;
  position: relative;
}

body.home .main-menu{
  animation: fading 0.7s ease 1.6s backwards;
}

.main-menu {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 20px 20px 0 20px;
  position: fixed;
  top: 0;
  z-index: 99;
  transition: top 0.3s;
  mix-blend-mode: difference;
}

.logo-studio {
  width: 25%;
  font-size: 0.8vw;
  font-family: "SB", Helvetica, sans-serif;
  font-weight: bold;
  font-style: normal;
  line-height: 80%;
  letter-spacing: -0.04em;
}

.logo-studio a,
.work-menu a,
.about-menu a,
.datacache-menu a {
  color: #f3f2ef;
  text-decoration: none;
}

.work-links a:hover,
.about-menu a:hover,
.datacache-menu a:hover {
  text-decoration: underline !important;
}

.work-menu a:nth-child(1):hover {
  text-decoration: none;
}

.work-menu,
.about-menu {
  width: 25%;
  display: flex;
  font-size: 0.8vw;
  font-family: "SR", Helvetica, sans-serif;
  font-weight: normal;
  font-style: normal;
  line-height: 80%;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}

.work-links {
  padding-left: 3px;
  display: block;
  color: #f3f2ef;
  transition: all 0.5s linear;
}

.work-links::before {
  content: "BY ";
  color: #f3f2ef;
}

.datacache-menu {
  width: 16.6666667%;
  font-size: 0.8vw;
  font-family: "SR", Helvetica, sans-serif;
  font-weight: normal;
  font-style: normal;
  line-height: 80%;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}

#timezone {
  width: 8.33333333%;
  font-size: 0.8vw;
  font-family: "SR", Helvetica, sans-serif;
  font-weight: normal;
  font-style: normal;
  line-height: 80%;
  text-align: right;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: #f3f2ef;
  cursor: default;
}

#timezone::before {
  content: "WET ";
}

.overlay,
span.open-mobileNav {
  display: none;
}

body.home .wrapper-container {
  width: 100%;
  position: fixed;
  bottom: 0;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

body.home .wrapper-container::-webkit-scrollbar {
  display: none;
}

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

.middle-section-home {
  width: 100%;
  animation: fading .5s ease .15s backwards;
}

.welcometo {
  text-align: center;
  width: fit-content;
  margin: auto;
  font-size: 0.8vw;
  font-family: "SR", Helvetica, sans-serif;
  font-weight: normal;
  font-style: normal;
  line-height: 80%;
  letter-spacing: -0.04em;
  padding-bottom: 5px;
}

.image-home {
  width: 33.32%;
  margin: auto;
  line-height: 0;
  padding-bottom: 5px;
}

.ohmana-bottomlogo {
  width: 100%;
  height: fit-content;
  padding: 12px 20px;
  overflow-y: hidden;
}

.ohmana-bottomlogo img{
  animation: fade-element-up 0.4s ease 1.5s backwards;
}

@media (max-width: 1024px) {
  body.home {
    width: 100%;
    height: 100%;
    position: relative;
  }
  body.home .wrapper-container {
    width: 100%;
    max-height: 100vh;
    position: absolute;
    bottom: 0;
  }
  .logo-studio,
  .datacache-menu,
  .work-menu,
  .about-menu,
  #timezone,
  .welcometo {
    font-size: 1.2vw;
  }
  .work-links {
    display: block;
  }
  .middle-section-home {
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 37vh);
  }
  .image-home {
    width: 50%;
    padding-bottom: 0;
  }
  .ohmana-bottomlogo {
    padding: 7px 10px;
    position: fixed;
    bottom: 0;
  }
}

@media (max-width: 560px) {
  .main-menu {
    width: fit-content;
    padding: 10px;
    z-index: 1000;
  }
  .work-menu,
  .about-menu,
  .datacache-menu,
  #timezone {
    display: none;
  }
  .logo-studio {
    width: fit-content;
    font-size: 2.7vw;
  }
  .overlay {
    height: fit-content;
    width: 100%;
    position: fixed;
    z-index: 998;
    left: 0;
    top: 0;
    overflow-x: hidden;
  }
  @keyframes mobileNav-slidedown {
    from {
      transform: translateY(-50px);
    }
    to {
      transform: translateY(0);
    }
  }
  .overlay-content {
    position: relative;
    width: 100%;
    height: fit-content;
    margin-top: 29px;
    transition: 0.3s;
  }
  body.home .open-mobileNav{
    animation: fading 0.7s ease 1.6s backwards;
  }
  .work-mobile-links {
    display: flex;
    justify-content: flex-start;
    align-items: baseline;
    width: 100%;
    border-bottom: 1px solid #121212;
    font-family: "SR", Helvetica, sans-serif;
    font-size: 2.7vw;
    font-weight: normal;
    font-style: normal;
    letter-spacing: -0.02em;
    line-height: 80%;
    text-transform: uppercase;
    padding: 11px 10px 10px 10px;
    background-color: #f3f2ef;
    animation: mobileNav-slidedown 0.2s ease-in-out;
  }
  .work-mobile-links a:nth-child(2),
  .work-mobile-links a:nth-child(3),
  .work-mobile-links a:nth-child(4) {
    padding: 0 2px;
  }
  .about-mobile-link {
    animation: mobileNav-slidedown 0.2s ease-in-out 0.1s backwards;
  }
  .datacache-mobile-link {
    animation: mobileNav-slidedown 0.2s ease-in-out 0.2s backwards;
  }
  a.about-mobile-link,
  a.datacache-mobile-link {
    width: 100%;
    background-color: #f3f2ef;
    padding: 10px;
    border-bottom: 1px solid #121212;
  }
  .overlay a {
    font-family: "SR", Helvetica, sans-serif;
    font-weight: normal;
    font-style: normal;
    letter-spacing: -0.02em;
    line-height: 80%;
    font-size: 2.7vw;
    text-transform: uppercase;
    text-decoration: none;
    color: #121212;
    display: block;
  }
  span.open-mobileNav {
    display: block;
  }
  span.open-mobileNav,
  .overlay .closebtn {
    font-size: 2.7vw;
    font-family: "SR", Helvetica, sans-serif;
    font-weight: normal;
    font-style: normal;
    letter-spacing: -0.02em;
    line-height: 80%;
    text-transform: uppercase;
    width: 100%;
    text-align: right;
    position: fixed;
    top: 0;
    padding: 10px;
    background-color: #f3f2ef;
    border-bottom: 1px solid #121212;
  }
  .middle-section-home {
    width: 100%;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -20vh);
  }
  .welcometo {
    font-size: 2.7vw;
    padding-bottom: 2px;
  }
  .image-home {
    width: 100%;
    padding: 0 10px;
  }
  .ohmana-bottomlogo {
    padding: 8px 10px;
    position: fixed;
    bottom: 0;
  }
}

/* WORKGRID PAGE STYLE ***********************************************************************/

body.workgrid .work-menu a {
  font-family: "SB", Helvetica, sans-serif;
  font-weight: bold;
  font-style: normal;
}

body.workgrid .work-links {
  display: block;
}

body.workgrid .work-links a {
  font-family: "SR", Helvetica, sans-serif;
  font-weight: normal;
  font-style: normal;
}

body.workgrid .work-links a:nth-child(1) {
  text-decoration: underline;
}

body.workgrid .work-wrapper {
  padding: 160px 15px 0 15px;
}

@keyframes fade-element {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.titles-workpage {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  padding: 0 5px;
  cursor: default;
  animation: fade-element 0.75s ease;
}

.titles-workpage h3 {
  width: 16.6666667%;
  font-family: "SB", Helvetica, sans-serif;
  font-weight: bold;
  font-style: normal;
}

.titles-workpage h2 {
  width: 66.6666667%;
  font-family: "SB", Helvetica, sans-serif;
  font-weight: bold;
  font-style: normal;
  line-height: 75%;
  text-align: center;
}

.work-list-wrapper {
  padding-top: 100px;
  display: flex;
  flex-wrap: wrap;
}

.work-grid-item {
  width: 33.3333333%;
  display: flex;
  flex-wrap: wrap;
  padding: 0 5px;
  cursor: pointer;
  color: #121212;
  transition: color 0.15s linear;
  overflow-y: hidden;
}

.work-item-header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 6px 0 5px 0;
  overflow-y: hidden;
}

@keyframes fade-element-up {
  from {
    opacity: 0;
    transform: translateY(100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.work-item-header h5 {
  animation: fade-element-up 0.3s ease 1.15s backwards;
}

.work-item-header h5,
.work-item-slider-header h5 {
  font-family: "SB", Helvetica, sans-serif;
  font-weight: bold;
  font-style: normal;
  text-transform: uppercase;
  line-height: 80%;
}

.work-item-header span,
.work-item-slider-header span {
  font-family: "SR", Helvetica, sans-serif;
  font-weight: normal;
  font-style: normal;
  padding-right: 3px;
  text-transform: capitalize;
  line-height: 80%;
}

.work-grid-item:hover {
  color: #0702ff;
  transition: color 0.15s linear;
}

.work-item-thumbnail {
  width: 100%;
  line-height: 70%;
  animation: fade-element-up 0.75s ease 0.4s backwards;
}

.work-item-thumbnail:hover img:nth-child(1) {
  display: none;
}

@keyframes grow-center {
  from {
    transform: scale(0.85);
    opacity: 0.7;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.work-item-thumbnail:hover img:nth-child(2) {
  display: block;
  border: solid 0.5px #121212;
  animation: grow-center 0.15s ease;
}

.work-item-thumbnail img:nth-child(2) {
  display: none;
}

.work-slide-wrapper-hide {
  width: 100%;
  display: none;
  animation: fade-element 0.55s linear;
}

.work-slide-container {
  width: 100%;
  display: flex;
}

body.workgrid .work-slide-container:hover .work-item-slider-header{
  color: #0702ff;
  transition: color .5s ease;
}

.work-info-wrapper {
  width: 33.3333333%;
  margin-left: 5px;
  cursor: default;
  padding-top: 1.3%;
}

.work-info-wrapper h5 {
  font-family: "SB", Helvetica, sans-serif;
  font-weight: bold;
  font-style: normal;
  text-transform: uppercase;
  line-height: 130%;
}

.work-info-wrapper span {
  font-family: "SR", Helvetica, sans-serif;
  font-weight: normal;
  font-style: normal;
  padding-right: 3px;
  text-transform: capitalize;
  line-height: 130%;
}

.work-item-slider-header {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  cursor: pointer;
  position: relative;
  z-index: -1;
  float: left;
  padding: 6px 0 5px 0;
  color: #121212;
  transition: color .5s ease;
}

.work-item-slider-header h5:nth-child(1) {
  width: 40%;
}

.work-item-slider-header h5:nth-child(2) {
  width: 9.5%;
  text-align: right;
}

body.workgrid .swiper-pagination {
  width: 15%;
  position: absolute;
  bottom: auto;
  right: 20%;
  left: auto;
  font-family: "SB", Helvetica, sans-serif;
  font-weight: bold;
  font-style: normal;
  font-size: 0.8vw;
  line-height: 80%;
  letter-spacing: -0.02em;
  text-align: right;
  margin: 0;
}

body.workgrid span.swiper-pagination-current:before {
  font-family: "SR", Helvetica, sans-serif;
  font-weight: normal;
  font-style: normal;
}

body.workgrid span.swiper-pagination-total {
  font-family: "SB", Helvetica, sans-serif;
  font-weight: bold;
  font-style: normal;
}

body.workgrid .swiper {
  width: 66.6666667%;
  height: 100%;
  margin: 0 5px;
}

body.workgrid .swiper-slide {
  text-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}

body.workgrid .swiper-slide img,
body.workgrid .swiper-slide video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body.workgrid .swiper-button-prev,
body.workgrid .swiper-button-next {
  width: 50%;
  height: 97%;
  top: 2.7%;
  color: transparent;
  margin: 0;
  outline: none;
}

body.workgrid .swiper-button-prev {
  left: 0;
  cursor: w-resize;
}

body.workgrid .swiper-button-next {
  right: 0;
  cursor: e-resize;
}

button {
  background-color: #f3f2ef;
  color: #121212;
  border-radius: 40px;
  padding: 8px 10px 7px 10px;
  font-family: "SB", Helvetica, sans-serif;
  font-weight: bold;
  font-style: normal;
  font-size: 0.8vw;
  line-height: 70%;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  border: 1px solid #121212;
  margin: 0.7% 5px 0 0;
  cursor: pointer;
  transition: all 0.3s linear;
}

button:hover {
  background-color: #121212;
  color: #f3f2ef;
  transition: all 0.3s linear;
}

button.active {
  background-color: #121212;
  color: #f3f2ef;
}

button a {
  text-decoration: none;
}

button a:hover {
  color: #f3f2ef;
  transition: all 0.3s linear;
}

body.workgrid .description-work p {
  margin-top: 20px;
}

.panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

.footer {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 200px 5px 20px 5px;
  color: #f3f2ef;
  mix-blend-mode: difference;
}

h5.creativestudio,
h5.copyright {
  width: 33.3333333%;
  font-family: "SR", Helvetica, sans-serif;
  font-weight: normal;
  font-style: normal;
  line-height: 100%;
  text-transform: uppercase;
  cursor: default;
}

.social-links {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  width: 33.3333333%;
  text-align: center;
}

.social-links a {
  font-family: "SR", Helvetica, sans-serif;
  font-weight: normal;
  font-style: normal;
  line-height: 100%;
  text-transform: uppercase;
  text-decoration: none;
  color: #f3f2ef;
}

.social-links a:hover {
  text-decoration: underline;
}

.email-footer::after {
  content: "/";
  font-family: "SR", Helvetica, sans-serif;
  font-weight: normal;
  font-style: normal;
  line-height: 100%;
  padding: 0 3px;
  color: #f3f2ef;
}

h5.copyright {
  text-align: right;
}

h5.copyright-mobile {
  display: none;
}

.hide {
  display: none;
}

@media (min-width: 1919px){
  .work-info-wrapper {
    padding-top: 1.05%;
  }
}

@media (max-width: 1024px) {
  body.workgrid .work-wrapper {
    padding: 130px 15px 0 15px;
  }
  .work-item-slider-header {
    padding: 5px 0 5px 0;
  }
  body.workgrid .swiper-pagination {
    font-size: 1.2vw;
    right: 17.5%;
  }
  body.workgrid .swiper-button-next,
  body.workgrid .swiper-button-prev {
    position: absolute;
    top: 50%;
    width: calc(var(--swiper-navigation-size) / 44 * 27);
    height: var(--swiper-navigation-size);
    margin-top: calc(0px - (var(--swiper-navigation-size) / 2));
    z-index: 10;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: transparent;
  }
  .work-slide-wrapper-hide {
    padding: 0;
}
  button {
    font-size: 1.2vw;
  }
  .footer {
    padding: 170px 5px 20px 5px;
  }
}

@media (max-width: 768px) {
  button {
    padding: 6px 7px 5px 7px;
  }
  body.workgrid .swiper-pagination {
    right: 17%;
  }
}

@media (max-width: 560px) {
  span.open-mobileNav,
  .overlay .closebtn {
    z-index: 2;
  }
  body.workgrid .work-wrapper {
    padding: 80px 7.5px 0 7.5px;
  }
  .work-list-wrapper {
    padding-top: 50px;
  }
  .work-grid-item {
    width: 50%;
    padding: 0 2.5px;
  }
  .work-item-header span,
  .work-item-slider-header span {
    display: none;
  }
  .work-item-header h5:nth-child(2),
  .work-item-slider-header h5:nth-child(2) {
    font-family: "SR", Helvetica, sans-serif;
    font-weight: normal;
    font-style: normal;
  }
  .work-item-slider-header {
    width: 100%;
    padding: 5px 2.5px 5px 2.5px;
  }
  .work-slide-container {
    flex-wrap: wrap;
    padding-bottom: 30px;
    order: 1;
  }
  body.workgrid .swiper {
    width: 100%;
    height: fit-content;
    margin: 0 2.5px;
  }
  body.workgrid .swiper-pagination {
    font-size: 2.7vw;
    display: flex;
    justify-content: flex-end;
    text-align: right;
    right: 0;
  }
  body.workgrid .swiper-pagination span {
    display: block;
  }
  body.workgrid span.swiper-pagination-total:before{
    padding-left: 2px;
  }
  .work-info-wrapper {
    width: 100%;
    padding-top: 4px;
    margin-left: 2.5px;
    margin-right: 2.5px;
    order: 2;
  }
  body.workgrid button {
    margin: 0.7% 2px 0 0;
  }
  body.workgrid .description-work p {
    margin-top: 10px;
  }
  button {
    font-size: 2.7vw;
    border: 0.75px solid #121212;
  }
  .footer {
    padding: 100px 2.5px 10px 2.5px;
  }
  .creativestudio {
    display: none;
  }
  .social-links {
    text-align: left;
    justify-content: left;
  }
  h5.copyright {
    display: none;
  }
  h5.copyright-mobile {
    font-family: "SR", Helvetica, sans-serif;
    font-weight: normal;
    font-style: normal;
    text-transform: uppercase;
    text-align: right;
    display: block;
  }
}

/* WORKIMAGE PAGE STYLE ***********************************************************************/

body.workimage .main-menu{
  z-index: 999999;
}

body.workimage .work-menu a {
  font-family: "SB", Helvetica, sans-serif;
  font-weight: bold;
  font-style: normal;
}

body.workimage .work-links {
  display: block;
}

body.workimage .work-links a {
  font-family: "SR", Helvetica, sans-serif;
  font-weight: normal;
  font-style: normal;
}

body.workimage .work-links a:nth-child(2) {
  text-decoration: underline;
}

body.workimage .work-wrapper {
  padding: 160px 15px 0 15px;
}

html.with-fancybox .work-wrapper,
body.is-using-mouse .work-wrapper{
  pointer-events: none;
}

.thumbnail-wrapper {
  position: relative;
  overflow: hidden;
  width: 8.33333333%;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  height: fit-content;
  cursor: pointer;
}

.thumbnail-wrapper img {
  overflow: hidden;
  z-index: 0;
  position: relative;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  object-fit: contain;
  padding: 4.5px 5px;
}

.thumbnail-wrapper img:nth-child(1) {
  animation: fade-element-up 0.75s ease 0.4s backwards;
}

@keyframes element-opacity {
  from {
    opacity: 0;
  }
  to {
    opacity: 0;
  }
}

.thumbnail-wrapper img:nth-child(2) {
  position: absolute;
  opacity: 0;
  transition: opacity 0.3s linear 1s;
  animation: element-opacity 0.75s ease 0.4s backwards;
}

.thumbnail-wrapper:hover img:nth-child(2) {
  opacity: 1;
  transition: 0.1s linear;
}

.fancybox__container {
  z-index: 999999;
  width: 65.5%;
  margin: 0;
  padding: 0;
  bottom: auto;
  right: auto;
  flex-direction: row;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.fancybox__backdrop {
  background: rgba(243, 242, 239, 0.97);
}

.fancybox__toolbar {
  background: transparent;
  padding: 0 5px;
  display: block;
  cursor: default;
  mix-blend-mode: difference;
}

.fancybox__toolbar__items--left {
  margin: 0;
  top: 10px;
  left: 12px;
  position: absolute;
}

.fancybox__toolbar__items--right {
  margin: 0;
  top: 10px;
  right: 12px;
  position: absolute;
}

.fancybox__counter {
  padding: 0;
  min-width: fit-content;
  width: fit-content;
  height: fit-content;
  font-family: "SR", Helvetica, sans-serif;
  font-weight: normal;
  font-style: normal;
  font-size: 0.8vw;
  line-height: 130%;
  letter-spacing: -0.02em;
  text-align: left;
  text-shadow: none;
  -webkit-font-smoothing: unset;
  color: #f3f2ef;
}

.fancybox__counter span:nth-child(1):after{
  content: " ";
}

.carousel__button{
  background: none !important;
  box-shadow: none !important;
  border-radius: 0;
  outline: 0;
  outline-style: none;
}

button.carousel__button.fancybox__button--close {
  margin: 0;
  width: fit-content;
  height: fit-content;
  color: #f3f2ef;
  opacity: 1;
  transition: opacity 0.15s linear;
}

button.carousel__button.fancybox__button--close:hover {
  background: none;
  opacity: .5;
  transition: opacity 0.15s linear; 
}

button.carousel__button.fancybox__button--close:after {
  content: "close";
  text-transform: capitalize;
  font-family: "SR", Helvetica, sans-serif;
  font-weight: normal;
  font-style: normal;
  font-size: 0.8vw;
  line-height: 130%;
  letter-spacing: -0.02em;
  text-align: right;
}

.fancybox__carousel{
  width: 66.5%;
  left: 50%;
  transform: translateX(-50%);
  overflow: hidden;
}

.fancybox__slide {
  padding: 0 !important;
}

.fancybox__image{
  width: 100% !important;
  height: 100% !important;
  transform: translate3d(0px, 0px, 0px) scale(1) !important;
  cursor: default;
}

.fancybox__content video {
  width: 100%;
  height: fit-content;
  object-fit: cover;
}

video::-webkit-media-controls-panel{
  display: none;
}

video::-webkit-media-controls {
  display: none;
}

.fancybox__carousel .fancybox__slide.has-map .fancybox__content,
.fancybox__carousel .fancybox__slide.has-pdf .fancybox__content,
.fancybox__carousel .fancybox__slide.has-video .fancybox__content,
.fancybox__carousel .fancybox__slide.has-html5video .fancybox__content {
  padding: 0;
  background: transparent;
  color: none;
  width: 100% !important;
  height: fit-content !important;
}

.fancybox__thumbs,
button.carousel__button.fancybox__button--zoom,
button.carousel__button.fancybox__button--slideshow,
button.carousel__button.fancybox__button--fullscreen,
button.carousel__button.fancybox__button--thumbs,
.carousel__button svg {
  display: none;
}

button.carousel__button.is-prev {
  width: 50%;
  height: 100%;
  margin: 0;
  left: 0 !important;
  cursor: w-resize;
  border: none;
  text-shadow: none;
  outline: none;
  background: transparent;
  border-radius: 0;
}

button.carousel__button.is-next {
  width: 50%;
  height: 100%;
  margin: 0;
  right: 0 !important;
  cursor: e-resize;
  border: none;
  text-shadow: none;
  outline: none;
  background: transparent;
  border-radius: 0;
}

button.carousel__button.is-prev:hover,
button.carousel__button.is-next:hover {
  background: none;
  border: none;
  text-shadow: none;
  outline: none;
}

@media (max-width: 1920px){
  .fancybox__container {
    width: 65.2%;
  }
}

@media (max-width: 1680px){
  .fancybox__container {
    width: 65%;
  }
}

@media (max-width: 1440px){
  .fancybox__container {
    width: 64.6%;
  }
}

@media (max-width: 1280px){
  .fancybox__container {
    width: 64.3%;
  }
}


@media (max-width: 1024px) {
  body.workimage .work-wrapper {
    padding: 130px 15px 0 15px;
  }
  .thumbnail-wrapper {
    width: 16.6666667%;
  }
  .thumbnail-wrapper img:nth-child(1) {
    opacity: 0;
    animation: none;
  }
  .thumbnail-wrapper img:nth-child(2) {
    opacity: 1;
    animation: fade-element-up 0.75s ease 0.4s backwards;
  }
  .fancybox__container {
    width: 100%;
    overflow: visible;
  }
  .fancybox__container:after{
    width: 100%;
    height: 100vh;
    content: "";
    background: rgba(243, 242, 239, 0.8);
    position: absolute;
    transform: scale(7);
  }
  .fancybox__toolbar {
    margin: 0 20px;
  }
  .fancybox__counter,
  button.carousel__button.fancybox__button--close:after {
    font-size: 1.2vw;
  }
  .fancybox__viewport {
    position: relative;
    width: auto;
    height: 100%;
    overflow: hidden;
    cursor: default;
    margin: 0 20px;
  }
  .fancybox__content video {
    pointer-events: none;
  }
  button.carousel__button.is-prev,
  button.carousel__button.is-next {
    display: none;
  }
  body.workimage .footer {
    padding: 170px 20px 20px 20px;
  }
}

@media (max-width: 560px) {
  body.workimage .work-wrapper {
    padding: 80px 7.5px 0 7.5px;
  }
  .titles-workpage {
    padding: 0 2.5px;
    justify-content: space-between;
  }
  .titles-workpage h2 {
    text-align: right;
  }
  .thumbnail-wrapper {
    width: 25%;
  }
  .fancybox__container {
    z-index: 999999;
  }
  .fancybox__toolbar{
    margin: 0 10px;
  }
  .fancybox__toolbar__items--left {
    top: 5px;
    left: 7px;
  }
  .fancybox__toolbar__items--right {
    top: 5px;
    right: 7px;
  }
  .fancybox__counter,
  button.carousel__button.fancybox__button--close:after {
    font-size: 2.7vw;
  }
  .fancybox__viewport {
    margin: 0 12px;
  }
  body.workimage .footer {
    padding: 100px 10px 10px 10px;
  }
}

/* ABOUT PAGE STYLE ***********************************************************************/

body.about {
  background-color: #121212;
}

body.about .about-menu a {
  font-family: "SB", Helvetica, sans-serif;
  font-weight: bold;
  font-style: normal;
}

.about-wrapper {
  width: 100%;
  min-height: 100vh;
  padding: 160px 20px 0 20px;
  position: relative;
}

.intro-about-section {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  position: relative;
}

@keyframes element-left {
  from {
    transform: translateX(-300px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.intro-about-section button {
  background-color: #121212;
  color: #f3f2ef;
  border-color: #f3f2ef;
  height: fit-content;
  position: relative;
  z-index: 99;
  animation: element-left 0.5s ease 0.45s backwards;
}

.intro-about-section button:hover {
  background-color: #f3f2ef;
  color: #121212;
  border-color: #f3f2ef;
  transition: all 0.3s linear;
}

.intro-about-section button.active {
  background-color: #f3f2ef;
  color: #121212;
  border-color: #f3f2ef;
  height: fit-content;
}

.images-about {
  width: 16.6666667%;
  height: fit-content;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  position: relative;
  left: 50%;
  transform: translateX(-77%);
  z-index: 1;
}

.fabio-portrait-about {
  position: relative;
  display: flex;
  overflow-x: hidden;
  -ms-overflow-style: none;
  scrollbar-width: none;
  cursor: help;
}

.raquel-portrait-about {
  position: relative;
  left: -1px;
  display: flex;
  overflow-x: hidden;
  -ms-overflow-style: none;
  scrollbar-width: none;
  cursor: help;
}

.fabio-portrait-about::-webkit-scrollbar,
.raquel-portrait-about::-webkit-scrollbar{
  display: none;
}

.fabio-portrait-about img:nth-child(1),
.raquel-portrait-about img:nth-child(1) {
  animation: fade-element-up 0.5s ease 0.5s backwards;
}

.fabio-portrait-about img:nth-child(2) {
  position: relative;
  top: -50%;
  left: -100%;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.raquel-portrait-about img:nth-child(2) {
  position: relative;
  top: -50%;
  left: -100%;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.show-about-images {
  opacity: 1 !important;
  transition: all 0.3s ease;
}

.intro-about-section-2 {
  width: 50%;
  margin: auto;
  animation: fade-element 1.5s ease;
}

.about-main-description {
  text-align: center;
  color: #f3f2ef;
  padding-top: 10px;
}

.about-main-description h5 {
  font-family: "SR", Helvetica, sans-serif;
  font-weight: normal;
  font-style: normal;
  font-size: 1vw;
}

.about-main-description h5 br {
  display: none;
}

.about-social-links {
  padding-top: 30px;
  color: #f3f2ef;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  position: relative;
  z-index: 99;
  animation: fade-element 1.5s ease;
}

.instagram-about-link h5,
.email-about-link h5 {
  font-family: "SB", Helvetica, sans-serif;
  font-weight: bold;
  font-style: normal;
}

.email-about-link {
  text-align: right;
}

.instagram-about-link h5 span,
.email-about-link h5 span {
  font-family: "SR", Helvetica, sans-serif;
  font-weight: normal;
  font-style: normal;
}

.instagram-about-link h5 a,
.email-about-link h5 a {
  color: #f3f2ef;
  font-family: "SB", Helvetica, sans-serif;
  font-weight: bold;
  font-style: normal;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
}

.instagram-about-link h5 a:hover,
.email-about-link h5 a:hover {
  text-decoration: underline;
}

.clients-section {
  width: 100%;
  display: block;
  text-align: center;
  color: #f3f2ef;
  padding-top: 30px;
}

.clients-section h5{
  font-family: "SR", Helvetica, sans-serif;
  font-weight: normal;
  font-style: normal;
  color: #f3f2ef;
  font-size: 1vw;
}

.clients-section span{
  font-size: 0.8vw;
}

.about-text-rolling-wrapper {
  width: 100%;
  height: 100vh;
  margin: 0;
  position: fixed;
  top: 0;
  left: 0;
  box-sizing: border-box;
  -ms-overflow-style: none;
  scrollbar-width: none;
  color: #f3f2ef;
  text-transform: uppercase;
  z-index: 0;
  cursor: default;
}

.about-text-rolling-wrapper::-webkit-scrollbar {
  display: none;
}

.marquee-vertical-about {
  width: 100%;
  top: 5em;
  text-align: center;
  position: relative;
  padding: 100vh 0;
  animation: marquee-vertical 35s linear infinite;
}

.animation-stops{
  animation-play-state: paused;
}

@keyframes marquee-vertical {
  0% {
    top: 12em;
  }
  100% {
    top: -200em;
  }
}

.marquee-vertical-about h5 {
  width: 50%;
  font-family: "SR", Helvetica, sans-serif;
  font-weight: normal;
  font-style: normal;
  text-transform: capitalize;
  margin: auto;
  padding-top: 10px;
  color: #f3f2ef;
}

.marquee-vertical-about h4 {
  width: 50%;
  font-family: "SR", Helvetica, sans-serif;
  font-weight: normal;
  font-style: normal;
  margin: auto;
  color: #f3f2ef;
}

body.about .footer {
  position: fixed;
  bottom: 0;
}

body.about .footer {
  color: #f3f2ef;
}

body.about .footer h5.copyright {
  position: absolute;
  right: 40px;
}

@media (max-width: 1920px) {
  @keyframes marquee-vertical {
    0% {
      top: 12em;
    }
    100% {
      top: -150em;
    }
  }
}

@media (max-width: 1680px) {
  @keyframes marquee-vertical {
    0% {
      top: 12em;
    }
    100% {
      top: -140em;
    }
  }
}

@media (max-width: 1440px) {
  @keyframes marquee-vertical {
    0% {
      top: 12em;
    }
    100% {
      top: -120em;
    }
  }
}

@media (max-width: 1280px) {
  @keyframes marquee-vertical {
    0% {
      top: 12em;
    }
    100% {
      top: -100em;
    }
  }
}

@media (max-width: 1024px) {
  .about-wrapper {
    padding: 130px 20px 0 20px;
    position: fixed;
  }
  .about-main-description h5,
  .clients-section h5 {
    font-size: 1.5vw;
  }
  .clients-section span{
    font-size: 1.2vw;
  }
  .images-about {
    transform: translateX(-87%);
  }
  .marquee-vertical-about {
    width: 100%;
  }
  @keyframes marquee-vertical {
    0% {
      top: 12em;
    }
    100% {
      top: -130em;
    }
  }
}

@media (max-width: 768px) {
  .images-about {
    transform: translateX(-96%);
  }
  @keyframes marquee-vertical {
    0% {
      top: 12em;
    }
    100% {
      top: -110em;
    }
  }
}

@media (max-width: 560px) {
  body.about .logo-studio {
    color: #f3f2ef;
    z-index: 9999;
  }
  body.about span.open-mobileNav,
  body.about .overlay .closebtn {
    color: #f3f2ef;
    background-color: #121212;
    border-bottom: 1px solid #f3f2ef;
    z-index: 1;
  }
  body.about .work-mobile-links {
    color: #f3f2ef;
    border-bottom: 1px solid #f3f2ef;
    background-color: #121212;
  }
  body.about .overlay a {
    color: #f3f2ef;
  }
  body.about a.about-mobile-link,
  body.about a.datacache-mobile-link {
    width: 100%;
    background-color: #121212;
    padding: 10px;
    border-bottom: 1px solid #f3f2ef;
  }
  .about-wrapper {
    padding: 80px 10px 0 10px;
  }
  .about-main-description h5 {
    font-size: 4.2vw;
  }
  .clients-section h5,
  .clients-section span{
    font-size: 3.2vw;
  }
  .about-main-description h5 br {
    display: block;
  }
  .images-about {
    width: 33.3333333%;
    transform: translateX(-98%);
    z-index: 1;
  }
  .raquel-portrait-about {
    left: 0;
  }
  .intro-about-section-2 {
    width: 100%;
  }
  .about-text-rolling-wrapper {
    z-index: -1000;
  }
  @keyframes marquee-vertical {
    0% {
      top: 12em;
    }
    100% {
      top: -80em;
    }
  }
  .marquee-vertical-about h5,
  .marquee-vertical-about h4 {
    width: 100%;
  }
  .marquee-vertical-about h5{
    padding-top: 5px;
  }
  body.about h5.creativestudio {
    display: block;
  }
  body.about h5.copyright-mobile {
    right: 20px;
    position: absolute;
  }
}

/* DATA_CACHE PAGE STYLE ***********************************************************************/

body.datacache .datacache-wrapper {
  padding: 160px 15px 0 15px;
}

body.datacache .datacache-menu a {
  font-family: "SB", Helvetica, sans-serif;
  font-weight: bold;
  font-style: normal;
}

.datacache-list-wrapper {
  width: 100%;
  padding-top: 100px;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
}

.datacache-item {
  width: 16.6666667%;
  padding: 0 5px;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  animation: fade-element 1s linear 0.5s backwards;
}

.datacache-item h5 {
  width: 100%;
  font-family: "SB", Helvetica, sans-serif;
  font-weight: bold;
  font-style: normal;
  text-transform: uppercase;
  line-height: 80%;
  cursor: default;
}

.datacache-item h5 span {
  font-family: "SR", Helvetica, sans-serif;
  font-weight: normal;
  font-style: normal;
  text-transform: capitalize;
}

.datacache-item img {
  max-width: 100%;
  height: 11.07rem;
  margin: 5px 0 30px 0;
  object-fit: cover;
}

@media (max-width: 1440px) {
  .datacache-item img {
    height: 9rem;
  }
}

@media (max-width: 1024px) {
  body.datacache .datacache-wrapper {
    padding: 130px 15px 0 15px;
  }
  .datacache-item img {
    height: 6rem;
  }
}

@media (max-width: 560px) {
  body.datacache .datacache-wrapper {
    padding: 80px 7.5px 0 7.5px;
  }
  .datacache-list-wrapper {
    padding-top: 60px;
  }
  .datacache-item {
    width: 33.3333333%;
    padding: 0 2.5px;
  }
  .datacache-item img {
    height: 5rem;
  }
}