/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/

@media screen and (min-width: 768px) {
  .showcases--mobile {
    display: none;
  }
}
@media screen and (max-width: 769px) {
  .third-block-container {
    display: none;
  }

  .showcases--mobile {
    margin: 300px 0;
  }
}

@media screen and (max-width: 768px) {
  .showcases__slider {
    margin-left: 220px;
    margin-right: 220px;
  }
}

.showcases--mobile {
  width: 100%;
  pointer-events: all;
}

.showcases--mobile .showcases__title {
  font-family: Orbitron;
  font-size: 32px;
  font-weight: 700;
  line-height: 44px;
  letter-spacing: -1.2px;
  text-align: center;
  color: #ffffff;
}

.showcases__slider {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  overflow: auto;
  overflow-y: hidden;
  max-width: 100%;
  gap: 10px;
  padding: 0 15px;
  margin-bottom: 10px;
}

.showcases__slider::-webkit-scrollbar {
  height: 0;
}

.showcases__slider-item {
  position: relative;
  height: 375px;
  min-width: 290px;
}
.showcases__slider-item:after {
  content: "";
  position: absolute;
  top: 0;
  height: 375px;
  width: 290px;
}
.showcases__slider-item:after {
  background-image: url("./../assets/showcase-mobile-bg.svg");
}

.showcases__arrows {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin: 0 auto;
  width: 100%;
}

.showcases__arrow {
  height: 34px;
  border-radius: 5px;
  width: 95px;
  border-width: 1px, 1px, 1px, 1px;
  border-width: 1px;
  border-style: solid;
  border-color: #ffffff;
  background: #212121;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-shadow: 0px 0px 3.5999999046325684px 0px #f4d362;
  box-shadow: 0px 0px 3.5999999046325684px 0px #f4d362;
}

/*.showcases__arrow::after {*/
/*  content: "";*/
/*  display: block;*/
/*  background: #ffffff;*/
/*  width: 56px;*/
/*  height: 2px;*/
/*}*/

.showcases__arrow--left {
  margin-right: 10px;
}

.showcases__arrow--left::after {
  content: url("../assets/showcases/left-arrow.svg");
}

.showcases__arrow--right::after {
  content: url("../assets/showcases/right-arrow.svg");
}

/* SHOWCASE ITEM */

.showcase {
  position: relative;
  overflow: hidden;
}

.showcase__type {
  position: absolute;
  -webkit-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  transform: rotate(-90deg);
  display: block;
  left: -30px;
  width: 100px;
  top: 45px;
  font-family: Orbitron;
  font-size: 15px;
  font-weight: 700;
  line-height: 27px;
  letter-spacing: -0.7280335426330566px;
  text-align: center;
  color: #ffffff;
  z-index: 2;
}

.showcase__body {
  position: absolute;
  left: 40px;
  top: 10px;
  z-index: 2;
  font-size: 9px;
  font-weight: 400;
  line-height: 11px;
  letter-spacing: 0em;
  text-align: left;
  color: #ffffff;
}

.showcase__title {
  margin: 0;
  font-family: Orbitron;
  font-size: 19px;
  font-weight: 700;
  line-height: 27px;
  letter-spacing: -0.7280335426330566px;
  text-align: left;
  color: #f4d362;
}

.showcase__number {
  position: absolute;
  -webkit-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  transform: rotate(-90deg);
  display: block;
  left: 0px;
  width: 50px;
  left: -5px;
  bottom: 15px;
  font-family: Orbitron;
  font-size: 19px;
  font-weight: 700;
  line-height: 27px;
  letter-spacing: -0.7280335426330566px;
  text-align: center;
  color: #ffffff;
  z-index: 2;
}

.showcase:first-child .showcase__body {
  max-width: 155px;
}
.showcase:first-child .showcase-1_duck {
  position: absolute;
  bottom: -10px;
  right: -30px;
  z-index: 2;
  width: 137px;
  height: 137px;
  -webkit-transform: scaleX(-1);
  -ms-transform: scaleX(-1);
  transform: scaleX(-1);
}
.showcase:first-child .showcase-1_top-screen,
.showcase:first-child .showcase-1_screen-1,
.showcase:first-child .showcase-1_screen-2{
  position: absolute;
  z-index: 2;
  width: 77px;
  -o-object-fit: cover;
  object-fit: cover;
  border-radius: 8px;
  border: 1.21px solid #e3c56d;
  height: 167px;
}

.showcase:first-child .showcase-1_top-screen {
  top: 30px;
  right: 15px;
}
.showcase:first-child .showcase-1_screen-1 {
  bottom: 43px;
  left: 36%;
  -webkit-transform: translateX(-60%);
  -ms-transform: translateX(-60%);
  transform: translateX(-60%);
  width: 66px;
  height: 144px;
}
.showcase:first-child .showcase-1_screen-2 {
  bottom: 43px;
  left: 46%;
  width: 66px;
  height: 144px;
  z-index: 3;
  -webkit-transform: translateX(-60%) rotate(5deg);
  -ms-transform: translateX(-60%) rotate(5deg);
  transform: translateX(-60%) rotate(5deg);
}
.showcase:first-child .showcase__text {
  max-width: 125px;
}

.showcase__text {
  font-family: "Proxima-nova", sans-serif;
  font-size: 9px;
  letter-spacing: 0;
  font-weight: 400;
}

.showcase-2_screen-1 {
  position: absolute;
  z-index: 2;
  right: 25px;
  bottom: 50px;
  max-width: 100px;
}

.showcase-2_screen-2 {
  position: absolute;
  z-index: 2;
  bottom: 50px;
  left: 40px;
  max-width: 77px;
}


.showcase-2_screen-1,.showcase-2_screen-2,
.showcase-3_screen-1,.showcase-3_screen-2,
.showcase-4_screen-1,.showcase-4_screen-2,
.showcase-5_screen-1,.showcase-5_screen-2{
	border-radius: 8px;
	border: 1.21px solid #e3c56d;
}


.showcase__text-event {
  max-width: 109px;
}

.showcase__text.do-and-earn__text {
  width: 228px;
}

.showcase-3_screen-1 {
  position: absolute;
  z-index: 2;
  bottom: 10px;
  left: 40px;
  width: 83px;
}

.showcase-3_screen-2 {
  position: absolute;
  z-index: 2;
  bottom: 10px;
  right: 20px;
  width: 83px;
}

.showcase__text.showcase-4__text {
  width: 194px;
}

.showcase-4_screen-1 {
  position: absolute;
  z-index: 2;
  bottom: 30px;
  left: 40px;
  width: 93px;
}

.showcase-4_screen-2 {
  position: absolute;
  z-index: 2;
  bottom: 30px;
  right: 20px;
  width: 93px;
}

.showcase-4_platypus {
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  width: 100px;
}

.showcase__text.showcase-5__text-1 {
  position: absolute;
  width: 105px;
}

.showcase__text.showcase-5__text-2 {
  position: absolute;
  width: 115px;
  bottom: 40px;
  z-index: 2;
  color: white;
  right: 20px;
}

.showcase-5_screen-1 {
  position: absolute;
  z-index: 2;
  bottom: 20px;
  left: 40px;
  width: 94px;
}

.showcase-5_screen-2 {
  position: absolute;
  z-index: 2;
  bottom: 95px;
  right: 10px;
  width: 94px;
}

.showcase__text.showcase-6__text-1 {
  width: 144px;
}

.showcase-6_screen-1 {
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 70px;
  width: 150px;
}

.showcase-6_platypus {
  position: absolute;
  z-index: 2;
  bottom: 0;
  left: 40px;
  width: 140px;
}