/* Panels. */

.splitview {
  position: relative;
  width: 100%;
  min-height: 45vw;
  overflow: hidden;
}

.panelImg {
  position: absolute;
  width: 100vw;
  min-height: 45vw;
  overflow: hidden;
}

.panelImg .contentImg {
  position: absolute;
  width: 100vw;
  min-height: 45vw;
  color: #fff;
}

.panelImg img {
  box-shadow: 0 0 20px 20px rgba(0, 0, 0, 0.15);
  /* width: 35%; */
  position: absolute;
  top: 0%;
  left: 0%;
  /* transform: translate(-50%, -50%); */
}

.bottomImg {
  z-index: 1;
}

.topImg {
  /* background-color: rgb(77, 69, 173); */
  z-index: 2;
  /* width: 50vw; */

  /*-webkit-clip-path: polygon(60% 0, 100% 0, 100% 100%, 40% 100%);
    clip-path: polygon(60% 0, 100% 0, 100% 100%, 40% 100%);*/
}

.topImg .descriptionImg {
  left: 5%;
}

/* Handle. */
.handleImg {
  /* height: 100%; */
  position: absolute;
  display: block;
  background-color: rgb(253, 171, 0);
  width: 5px;
  top: 0;
  left: 0;
  z-index: 3;
}

/* Skewed. */
.skewedImg .handleImg {
  /* top: 50%; */
  /* transform: rotate(30deg) translateY(-50%); */
  height: 200%;
  /* -webkit-transform-origin: top;
  -moz-transform-origin: top;
  transform-origin: top; */
}

.skewedImg .topImg {
  /* transform: skew(-30deg); */
  margin-left: -1000px;
  width: calc(50vw + 1000px);
}

.skewedImg .topImg .contentImg {
  /* transform: skew(30deg); */
  margin-left: 1000px;
}
/* 
html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  margin: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
} */

.sliderContainer {
  position: relative;
  width: 120%;
  height: 50vh;
  border: 2px solid white;
  /* @media (max-width: 1200px) {
    width: 100%;
    border: 2px solid red;
  } */
}
.sliderContainer .img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: 900px 100%;
}
.sliderContainer .background-img {
  background-image: url('../assets/images/cabin_render.jpg');
}
.sliderContainer .foreground-img {
  background-image: url('../assets/images/cabin_sketch.jpg');
  width: 50%;
}
.sliderContainer .slider {
  position: absolute;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0);
  outline: none;
  margin: 0;
  transition: all 0.2s;
  display: flex;
  justify-content: center;
  align-items: center;
}
.sliderContainer .slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 6px;
  height: 50vh;
  background: white;
  cursor: pointer;
}
.sliderContainer .slider::-moz-range-thumb {
  width: 6px;
  height: 50vh;
  background: white;
  cursor: pointer;
}
.sliderContainer .slider-button {
  pointer-events: none;
  position: absolute;
  width: 40px; /* Use percentage */
  height: 40px; /* Use percentage */
  border-radius: 50%;
  background-color: white;
  left: calc(50% - 2.5%); /* Use percentage */
  top: calc(50% - 2.5%); /* Use percentage */
  display: flex;
  justify-content: center;
  align-items: center;
}
.sliderContainer .slider-button:after {
  content: '';
  padding: 3px;
  display: inline-block;
  border: solid #5d5d5d;
  border-width: 0 2px 2px 0;
  transform: rotate(-45deg);
}
.sliderContainer .slider-button:before {
  content: '';
  padding: 3px;
  display: inline-block;
  border: solid #5d5d5d;
  border-width: 0 2px 2px 0;
  transform: rotate(135deg);
}

@media (max-width: 768px) {
  .sliderContainer {
    width: 100%; /* Set width to 100% for mobile screens */
  }
}