:root {
  --transition-duration: 600ms;
}

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

body {
  width: 100vw;
  height: 100vh;
  overflow-y: hidden;
  overflow-x: hidden;
  font-family: Arial, Helvetica, sans-serif;
}

.dots-navigate {
  top: 0;
  right: 0;
  gap: 14px;
  z-index: 2;
  height: 100%;
  display: flex;
  position: fixed;
  margin-right: 52px;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}

.dots-navigate__dot {
  width: 13px;
  height: 13px;
  cursor: pointer;
  border-radius: 100%;
  border: 2px solid #292323;
  transition: background-color var(--transition-duration) ease-in-out, transform var(--transition-duration) ease-in-out;
}

.dots-navigate__dot--active {
  transform: scale(1.4);
  background-color: #292323;
}

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

.slide-wrapper {
  width: 100%;
  height: 100%;
  position: absolute;
}

.slide-wrapper[data-slide-type="multi"] {
  display: flex;
}

.slide-wrapper-wrap {
  width: 50%;
  height: 100%;
  position: relative;
  transition: transform var(--transition-duration) ease-in-out;
}

.slide-wrapper-full {
  width: 100%;
  height: 100%;
  position: relative;
  transition: transform var(--transition-duration) ease-in-out;
}

.slide-content {
  width: 100%;
  color: #fff;
  height: 100%;
  display: flex;
  font-size: 44px;
  align-items: center;
  justify-content: center;
  text-shadow: 0px 4px 3px rgba(0, 0, 0, 0.4), 0px 8px 13px rgba(0, 0, 0, 0.1), 0px 18px 23px rgba(0, 0, 0, 0.1);
}

/* Full slide */
.slide-1-full {
  background-color: #008000;
}

.slide-3-full {
  background-color: #4169e1;
}

.slide-7-full {
  background-color: #7a2d2d;
}

.slide-8-full {
  background-color: #735959;
}
/* Full slide */

/* Multi slide */
.slide-2-left {
  background-color: #ff0000;
}

.slide-2-right {
  background-color: #0abbbb;
}

.slide-4-left {
  background-color: #0000ff;
}

.slide-4-right {
  background-color: #a52a2a;
}

.slide-5-left {
  background-color: #0da7aa;
}

.slide-5-right {
  background-color: #008000;
}

.slide-6-left {
  background-color: #59594f;
}

.slide-6-right {
  background-color: #1bec1b;
}

.slide-7-left {
  background-color: #383833;
}

.slide-7-right {
  background-color: #472f7a;
}

.slide-9-left {
  background-color: #b6b634;
}

.slide-9-right {
  background-color: #260e5a;
}

.slide-10-left {
  background-color: #6b6b3d;
}

.slide-10-right {
  background-color: #c26778;
}
/* Multi slide */

@media screen and (max-width: 992px) {
  body {
    width: auto;
    height: auto;
    overflow-y: visible;
  }

  .dots-navigate {
    display: none;
  }

  .slides-container .slide-wrapper {
    display: block;
  }

  .slide-wrapper-wrap {
    width: 100%;
    height: auto;
    position: static;
    padding-top: 40px;
    padding-bottom: 40px;
    transform: translateY(0%) !important;
  }

  .slide-wrapper-full {
    width: 100%;
    height: auto;
    position: static;
    padding-top: 40px;
    padding-bottom: 40px;
    transform: translateY(0%) !important;
  }

  .slide-wrapper {
    z-index: auto;
    position: static;
  }

  .slide {
    font-size: 30px;
    padding-left: 6px;
    padding-right: 6px;
  }
}