@font-face {
  font-family: "MadeTommySoftBold";
  src: url("../fonts/made_tommy_soft/MADETommySoftBold.otf") format("woff");
}

@font-face {
  font-family: "MadeTommySoftThin";
  src: url("../fonts/made_tommy_soft/MADETommySoftThin.otf") format("woff");
}

body {
  overflow: hidden;
}

object {
  width: 100vw;
  height: 100vh;
}

#hideAll {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: white;
  z-index: 99;
}

.preload-container {
  height: 100vh;
  margin: 0;
  z-index: 1;
  visibility: hidden;
}

.preload-container .preload-img {
  display: inline;
  padding: 0;
  height: 100%;
  overflow: hidden;
}

#preload-img1 {
  background-image: url('../img/man-holding-basketball.jpg');
  background-size: cover;
  height: 100%;
  background-attachment: fixed;
  z-index: 1;
}

#preload-img2 {
  background-image: url('../img/man-holding-basketball.jpg');
  background-size: cover;
  height: 100%;
  background-attachment: fixed;
}

#preload-img3 {
  background-image: url('../img/man-holding-basketball.jpg');
  background-size: cover;
  height: 100%;
  background-attachment: fixed;
}

.img-logo {
  width: 200px;
  position: absolute;
  height: auto;
  top: -40px;
  left: 0;
}

.preload-img-overlay {
  position: absolute;
  width: 100%;
  background-color: rgba(16,16,16,0.7);
  z-index: 1;
  height: 100%;
  float: left;
}

.preload-overlay {
  position: absolute;
  width: 100%;
  z-index: 2;
  color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  visibility: hidden;
}

.preload-overlay span {
  font-size: 3em;
  display: inline-block;
  font-family: MadeTommySoftBold;
}

.preload-overlay h1 {
  margin: 5px 0;
}

.preload-title {
  display: inline;
  font-size: 6vw;
  color: #ffffff;
}

.preload-title-text {
  overflow: hidden;
  margin: 10px 0;
  display: inline-block;
}

.preload-title-text-one {
  display: inline;
  position: relative;
  top: 0;
  animation: fade-in-title 3s;
  -webkit-animation: fade-in-title 3s;
  -moz-animation: fade-in-title 3s;
  float: left;
}

.preload-title-symbol {
  cursor: pointer;
  display: inline;
  top: 0;
  animation: fade-in 3.5s;
  -webkit-animation: fade-in 3.5s;
  -moz-animation: fade-in 3.5s;
  animation-delay: 500ms;
  -webkit-animation-delay: 500ms;
  -moz-animation-delay: 500ms;
  float: left;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  transform: translateX(100%);
  -webkit-transform: translateX(100%);
}

.preload-close-menu-symbol {
  display: inline;
  top: 0;
  animation: fade-in 1s;
  -webkit-animation: fade-in 1s;
  -moz-animation: fade-in 1s;
  float: left;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  transform: translateX(-100%);
  -webkit-transform: translateX(-100%);
}

.preload-open-menu-symbol {
  display: inline;
  top: 0;
  animation: fade-in 1s;
  -webkit-animation: fade-in 1s;
  -moz-animation: fade-in 1s;
  float: left;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  transform: translateX(100%);
  -webkit-transform: translateX(100%);
}

.preload-title-text-two {
  display: inline;
  position: relative;
  transform: translateY(110%);
  float: left;
  width: 100%;
}

.menu-title-text-two {
  display: inline;
  position: relative;
  transform: translateX(-100%);
  float: left;
  width: 100%;
}

.preload-title-text-two-animation {
  animation: fade-in-text 1s;
  -webkit-animation: fade-in-text 1s;
  -moz-animation: fade-in-text 1s;
  animation-delay: 1s;
  -webkit-animation-delay: 1s;
  -moz-animation-delay: 1s;
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
}

#preload-img1-container {
  width: 33.33%;
}

.preload-img1-container-animation {
  animation: close-preload1 1.5s;
  -moz-animation: close-preload1 1.5s;
  -webkit-animation: close-preload1 1.5s;
  animation-delay: 4s;
  transform-origin: 100% 50%;
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
}

#preload-img2-container {
  width: 33.33%;
}

.preload-img2-container-animation {
  animation: close-preload2 1.5s;
  -moz-animation: close-preload2 1.5s;
  -webkit-animation: close-preload2 1.5s;
  animation-delay: 4s;
  transform-origin: 100% 50%;
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
}

#preload-img3-container {
  width: 33.33%;
}

.preload-img3-container-animation {
  animation: close-preload3 1.5s;
  -moz-animation: close-preload3 1.5s;
  -webkit-animation: close-preload3 1.5s;
  animation-delay: 4s;
  transform-origin: 100% 50%;
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
}

#contact-page,
#about-page {
  display: none;
}

.client-slide-open-title,
.client-slide-info,
.client-slide-info-img {
  display: none!important;
}

.preload-img-container {
  overflow: hidden;
  height: 100%;
  display: inline
}

.client1 .client-slide-info-img {
  background-image: url('../img/person-wearing-black-round-analog-watch-on-left-wrist-while.jpg')
}

.client2 .client-slide-info-img {
  background-image: url('../img/person-wearing-black-round-analog-watch-on-left-wrist-while.jpg')
}

.client3 .client-slide-info-img {
  background-image: url('../img/person-wearing-black-round-analog-watch-on-left-wrist-while.jpg')
}

.client4 .client-slide-info-img {
  background-image: url('../img/person-wearing-black-round-analog-watch-on-left-wrist-while.jpg')
}

.client5 .client-slide-info-img {
  background-image: url('../img/person-wearing-black-round-analog-watch-on-left-wrist-while.jpg')
}

.client6 .client-slide-info-img {
  background-image: url('../img/person-wearing-black-round-analog-watch-on-left-wrist-while.jpg')
}

.client7 .client-slide-info-img {
  background-image: url('../img/person-wearing-black-round-analog-watch-on-left-wrist-while.jpg')
}

.client8 .client-slide-info-img {
  background-image: url('../img/person-wearing-black-round-analog-watch-on-left-wrist-while.jpg')
}

.client9 .client-slide-info-img {
  background-image: url('../img/person-wearing-black-round-analog-watch-on-left-wrist-while.jpg')
}

.ui-loader-header {
  display: none;
}

.cases-container {
  position: absolute;
  top: 0;
  width: 100vw;
  margin: 0;
  padding: 0;
  height: 100vh;
  overflow: hidden;
  z-index: -1;
  visibility: hidden;
  display: flex;
  flex-wrap: nowrap;
}

.client-case-overlay {
  height: 100%;
  position: absolute;
  width: 100%;
  justify-content: center;
  align-items: center;
  background: rgba(16,16,16,0.4);
}

.client-slide-img {
  height: 100%;
  padding: 0;
  background-size: cover;
  flex: 0 0 auto;
  background-position: 40% 40%;
}

.preload-img-logo {
  width: 200px;
  position: fixed;
  height: auto;
  top: -40px;
  left: 0;
  z-index: -1;
  cursor: pointer;
}

.arrow-left {
  color: #ffffff;
  font-size: 18px;
  font-family: MadeTommySoftBold;
  position: fixed;
  bottom: 40px;
  right: 50px;
  cursor: pointer;
  z-index: -1;
}

.arrow-right {
  color: #ffffff;
  font-size: 18px;
  position: fixed;
  bottom: 40px;
  left: 50px;
  cursor: pointer;
  z-index: -1;
  visibility: hidden;
}

.arrow-right img {
  animation: arrow-right 1s infinite;
}

.arrow-left img {
  margin-left: 10px;
  animation: arrow-left 1s infinite;
  cursor: pointer;
}

.client-case-name {
  position: absolute;
  top: 40%;
  display: flex;
  justify-content: center;
  margin: 0 auto;
  width: 100%;
  color: #ffffff;
  cursor: pointer;
  overflow: hidden;
}

.client-case-name h1 {
  font-family: MadeTommySoftBold;
  font-size: 3.5em;
}

.client-case-name p {
  font-family: MadeTommySoftThin;
  font-size: 2em;
  margin-left: 5px;
  transform: translateY(150%);
}

.client-slide-img {
  pointer-events: none;
  will-change: background-position;
}

.client-slide-img:hover h1,
.client-slide-img:hover p {
  animation: text-up 300ms;
  margin-bottom: 0;
  -webkit-animation: text-up 300ms;
  -moz-animation: text-up 300ms;
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  backface-visibility: hidden;
}

.client-slide-img:hover .client-case-name {
  overflow: visible;
}

.burger-open-menu {
  top: 25px;
  position: fixed;
  right: 30px;
  z-index: -1;
  cursor: pointer;
  padding: 15px 10px;
  border-radius: 100%;
}

.burger-open-menu:hover img {
  transform: rotate(90deg);
}

.opened-menu-cases a {

}

.opened-menu-item {
  height: 100%;
  position: absolute;
  padding: 0;
  background-position: center;
  background-size: cover;
  z-index: -1;
  visibility: hidden;
  top: 0;
  width: 0%;
}

.client-slide-img-nonActive .client-slide-open-title {
  visibility: hidden!important;
}

.clicked-element .client-slide-open-title {
  display: none!important;
}

.open-menu {
  animation: open-menu;
  -webkit-animation: open-menu;
  -moz-animation: open-menu;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
}


.client-slide-img-active {
  width: 100% !important;
}
.client-slide-img-nonActive {
  width: 0% !important;
  overflow:hidden;
}

.closed-client-case {
  width: 33.33% !important;
}

.client-menu-overlay {
  height: 100%;
  position: absolute;
  width: 100%;
  justify-content: center;
  align-items: center;
  background: rgba(16,16,16,0.4);
}

.client-slide-img-container {
  transition: 1.5s all;
  height: 100%;
  padding: 0;
  background-size: cover;
  flex: 0 0 auto;
  background-position: 40% 40%;
}

.arrow-down-case-detail {
  position: fixed;
  bottom: 20px;
  left: 50%;
  background: rgba(0, 0, 0, 0.22);
  width: 40px;
  height: 40px;
  border-radius: 100%;
  z-index: 2;
  visibility: hidden;
}

.arrow-left-case-detail {
   position: fixed;
   bottom: 20px;
   left: 40px;
   background: rgba(0, 0, 0, 0.22);
   width: 40px;
   height: 40px;
   border-radius: 100%;
   z-index: 2;
   visibility: hidden;
 }

.arrow-right-case-detail {
  position: fixed;
  bottom: 20px;
  right: 40px;
  background: rgba(0, 0, 0, 0.22);
  width: 40px;
  height: 40px;
  border-radius: 100%;
  z-index: 2;
  visibility: hidden;
}

.arrow-down-case-detail:hover,
.arrow-left-case-detail:hover,
.arrow-right-case-detail:hover {
  background: rgba(0, 0, 0, 0.55);
}

.arrow-down-case-detail img,
.arrow-left-case-detail img,
.arrow-right-case-detail img {
  padding-left: 10px;
  padding-top: 10px;
}

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

.cases-container::-webkit-scrollbar {
  width: 0px;
  background: transparent;
}

.client-slide-info {
  font-size: 24px;
  font-family: MadeTommySoftThin;
  height: 100vh;
  text-align: center;
  padding: 15% 10%;
}

.more-cases {
  top: 90vh;
  left: 45%;
  width: 200px;
  position: relative;
}

.client-slide-open-title {
  position: absolute;
  top: 20%;
  left: 50px;
  overflow: hidden;
  height: 10px;
}

.client-slide-open-title h2 {
  position: relative;
  font-family: MadeTommySoftBold;
  font-size: 4em;
  transform: translateY(100%);
  transition-duration: 1s;
  cursor: pointer;
}

.client-slide-open-title h3 {
  position: relative;
  font-family: MadeTommySoftThin;
  font-size: 4em;
  transform: translateY(100%);
  transition-duration: 2s;
  cursor: pointer;
}

.show-client-open-title h2 {
  transform: translateY(-100%) !important;
}

.show-client-open-title h3 {
  transform: translateY(-100%) !important;
}

.more-cases {
  cursor: pointer;
}

.more-cases img {
  margin-left: 10px;
}

.client-slide-info-img {
  height: 100vh;
  background-size: cover;
  background-position: bottom;
}

.client-slide-info div {
  margin-bottom: 50px;
  cursor: pointer;
}

.opened-menu-item:hover p {
  visibility: visible!important;
  transform: translateY(-150%);
  -webkit-transform: translateY(-150%);
  transition-duration: 500ms;
}

.opened-menu-item:hover .preload-title-text {
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transition-duration: 800ms;
}

.opened-menu-item:hover .opened-menu-cases {
  overflow: visible;
}

.opened-menu-item:hover .opened-menu-cases div {
  height: auto;
}

.close-menu {
  animation: close-menu;
  -webkit-animation: close-menu;
  -moz-animation: close-menu;
  animation-duration: 1.2s;
  animation-delay: 500ms;
  -webkit-animation-delay: 500ms;
  -moz-animation-delay: 500ms;
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
}

.open-mobile-menu-img1 {
  animation: open-menu-mobile;
  -webkit-animation: open-menu-mobile;
  -moz-animation: open-menu-mobile;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
}

.close-mobile-menu-img1 {
  animation: close-menu-mobile;
  -webkit-animation: close-menu-mobile;
  -moz-animation: close-menu-mobile;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
}

.open-mobile-menu-img2 {
  animation: open-menu-mobile;
  -webkit-animation: open-menu-mobile;
  -moz-animation: open-menu-mobile;
  animation-duration: 1s;
  animation-delay: 100ms;
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
}

.close-mobile-menu-img2 {
  animation: close-menu-mobile;
  -webkit-animation: close-menu-mobile;
  -moz-animation: close-menu-mobile;
  animation-duration: 1.2s;
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
}

.open-mobile-menu-img3 {
  animation: open-menu-mobile;
  -webkit-animation: open-menu-mobile;
  -moz-animation: open-menu-mobile;
  animation-duration: 1s;
  animation-delay: 200ms;
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
}

.close-mobile-menu-img3 {
  animation: close-menu-mobile;
  -webkit-animation: close-menu-mobile;
  -moz-animation: close-menu-mobile;
  animation-duration: 1.4s;
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
}

.burger-close-menu {
  visibility: hidden;
  position: absolute;
  top: 0;
  color: #ffffff;
  font-family: MadeTommySoftThin;
  top: 40px;
  right: 40px;
  cursor: pointer;
}

.burger-close-menu img {
  width: 20px;
  position: relative;
  bottom: 10px;
  -webkit-transition: -webkit-transform .5s linear;
  transition: transform .5s linear;
}

.close-text,
.close-text-about {
  width: 50px;
  display: inline-block;
  visibility: hidden;
  position: absolute;
  top: -15px;
  right: 30px;
  opacity: 1;
}

.burger-close-menu img:hover {
  opacity: 1;
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}

.burger-close-menu img:hover + .close-text,
.burger-close-menu img:hover + .close-text-about {
  visibility: visible!important;
  animation: close-menu-text;
  -webkit-animation: close-menu-text;
  -moz-animation: close-menu-text;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
}

.opened-menu-cases {
  position: absolute;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  color: #ffffff;
  width: 100%;
  top: 40%;
  cursor: pointer;
  overflow: hidden;
  font-size: 0;
}

.opened-menu-cases > div:first-of-type {
  height: 100px;
}

.hide-about-page {
  display: none!important;
}

.opened-menu-cases .line-break {
  width: 100%;
}

.opened-menu-cases h1 {
  font-family: MadeTommySoftBold;
  font-size: 36px;
}

.opened-menu-cases p {
  font-family: MadeTommySoftThin;
  margin: 0;
  font-size: 14px;
  transform: translateY(100%);
  -webkit-transform: translateY(100%);
  -moz-transform: translateY(100%);
}

.opened-menu-cases p.menu-go-to {
  margin-top: 20px;
  font-family: MadeTommySoftBold;
  font-size: 20px;
}

/*!*Keyframes section*!*/

@-webkit-keyframes close-menu-text {
  0% {
    opacity: 0
  }
  100% {
    opacity: 1
  }
}

@-webkit-keyframes open-menu {
  0% {
    width: 0%;
  }
  100% {
    width: 33.33%;
  }
}

@-webkit-keyframes close-menu {
  0% {
    width: 33.33%;
  }
  100% {
    width: 0%;
  }
}

@-webkit-keyframes open-menu-mobile {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}

@-webkit-keyframes close-menu-mobile {
  0% {
    width: 100%;
  }
  100% {
    width: 0%;
  }
}

@-webkit-keyframes text-up {
  0% {
    transform: translateY(0);
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
  }
  20% {
    transform: translateY(-20%);
    -webkit-transform: translateY(-20%);
    -moz-transform: translateY(-20%);
  }
  50% {
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
  }
  80% {
    transform: translateY(-90%);
    -webkit-transform: translateY(-90%);
    -moz-transform: translateY(-90%);
  }
  100% {
    transform: translateY(-120%);
    -webkit-transform: translateY(-120%);
    -moz-transform: translateY(-120%);
  }
}

@-webkit-keyframes arrow-left {
  0%   { opacity: 0;}
  100% { opacity: 1;
    -webkit-transform: translateX(10px);
    -moz-transform: translateX(10px);
    transform: translateX(10px);
  }
}

@-webkit-keyframes arrow-right {
  0%   {
    opacity: 0;
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(-10px);
    -moz-transform: translateX(-10px);
    transform: translateX(-10px);
  }
}

@-webkit-keyframes fade-in-text {
  100% {
    transform: translateY(0);
  }
}

@-webkit-keyframes animatedBackground {
  from {
    background-position: 40% 40%;
  }
  to {
    background-position: 45% 45%;
  }
}

@-webkit-keyframes close-mobile-preload {
  0% {
    transform: scaleX(1);
  }
  100% {
    transform: scaleX(0);
  }
}

@-webkit-keyframes close-preload1 {
  0% {
    width: 33.33%;
    left: 0%;
  }
  100% {
    width: 0%;
    left: 33.33%;
  }
}

@-webkit-keyframes close-preload2 {
  0% {
    width: 33.33%;
    left: 0%;
  }
  100% {
    width: 0%;
    left: 66.66%;
  }
}

@-webkit-keyframes close-preload3 {
  0% {
    width: 33.33%;
    left: 0%;
  }
  100% {
    width: 0%;
    left: 100%;
  }
}

@-webkit-keyframes fade-in {
  0%,
  20% {
    transform: translateY(0);
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
  }
  30%,
  70% {
    transform: translateY(0);
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
  }
}

@-webkit-keyframes fade-in-title {
  0%,
  20% {
    transform: translateY(100%);
    -webkit-transform: translateY(100%);
    -moz-transform: translateY(100%);
  }
  30%,
  70% {
    transform: translateY(0);
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
  }
}

/*!*Media section*!*/

@media screen and (max-width: 992px) and (min-width: 768px) {
  .preload-overlay span {
    font-size: 1.8em;
  }
}

@media screen and (max-width: 768px) and (min-width: 600px) {
  .preload-overlay span {
    font-size: 1.5em;
  }
}

@media screen and (max-width: 600px) and (min-width: 500px) {
  .preload-overlay span {
    font-size: 1.2em;
  }
}

@media screen and (max-width: 500px) and (min-width: 320px) {
  .preload-overlay span {
    font-size: 0.8em;
  }
}

@media screen and (max-width: 767px) {
  .preload-container .img-logo {
    width: 100px;
    top: -10px;
    left: 10px;
  }

  .client-slide-img-container {
    width: 100%;
    height: 33.33%;
  }

  .preload-img {
    height: 33.33% !important;
    width: 100% !important;
  }

  .client-slide-img {
    width: 100% !important;
  }

  .preload-img1-container-animation {
    animation: close-mobile-preload 1.8s;
    -webkit-animation: close-mobile-preload 1.8s;
    -moz-animation: close-mobile-preload 1.8s;
    animation-delay: 4.5s;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
  }

  .preload-img2-container-animation {
    animation: close-mobile-preload 1.8s;
    -webkit-animation: close-mobile-preload 1.8s;
    -moz-animation: close-mobile-preload 1.8s;
    animation-delay: 4.7s;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
  }

  .preload-img3-container-animation {
    animation: close-mobile-preload 1.8s;
    -webkit-animation: close-mobile-preload 1.8s;
    -moz-animation: close-mobile-preload 1.8s;
    animation-delay: 5s;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
  }

  .preload-img-logo {
    width: 100px;
    top: -20px;
  }

  .arrow-left {
    display: none;
  }

  .client-case-name {
    top: 30%;
  }

  .burger-open-menu {
    top: 20px;
    right: 20px;
  }

  .client-case-name h1 {
    font-size: 30px;
  }

  .cases-container {
    flex-wrap: wrap;
  }

  .opened-menu-item {
    height: 33.33%;
  }

  #opened-menu-img2 {
    left: 0!important;
    top: 33.33%;
  }

  #opened-menu-img3 {
    left: 0!important;
    top: 66.66%;
  }

  .opened-menu-cases {
    text-align: center;
  }

  .more-cases {
    left: 35%;
  }

  .client-slide-open-title h3,
  .client-slide-open-title h2 {
    font-size: 20px;
  }

  .client-slide-open-title {
    top: 0;
  }

  .cases-container .closed-client-case {
    width: 100% !important;
  }

  .cases-container {
    overflow-y: auto !important;
  }

  .client-slide-img-container.client5,
  .client-slide-img-container.client6,
  .client-slide-img-container.client7,
  .client-slide-img-container.client8,
  .client-slide-img-container.client9 {
    display: none;
  }
}