/* ______ Referenz Page ______ */
/* ______  ______ */

#referenz-main{
}

.ref-projects{
}

.ref-project{
  margin-top: 10vh;

  background-color: rgba(0, 0, 0, .1);
  height: 140vw;

  padding-top: 1vh;
  padding-bottom: 1vh;
}

.ref-p-top{
  display: flex;
  padding: 1rem;
}

.ref-p-texts{
  width: 80vw;
}

.ref-p-datum-div{
  width: 20vw;
}

.ref-p-datum{
  margin: 0;
}

.ref-p-bot{
  position: relative;
}

.ref-p-arrow{
  position: absolute;
  z-index: 10;

  height: 100vw;
  width: 10vw;
}

.ref-p-arrow-l{
  right: 0;

  transform: scaleX(-1);
}

.ref-p-images{
  position: absolute;

  height: 100vw;
  width: 100vw;

  display: flex;
}
.ref-p-img-container {
  position: relative;
  width: 100vw;
  height: 100vw;
  overflow: hidden;
}

.ref-p-image-div {
  position: absolute;
  inset: 0;
}

.ref-p-image {
  width: 100vw;
  height: 100vw;
  object-fit: cover;
}

/* transform  */

.slide-img {
  transform: translateX(100vw);
  opacity: 0;
  transition: transform 0.6s ease, opacity 0.6s ease;
}

.right{
  transform: translateX(-100vw);
}

.slide-img.show {
  transform: translateX(0);
  opacity: 1;
}

/* media query: laptops and bigger device */
@media screen and (min-width: 992px) {


/*_____ Reference ______*/
.ref-project{
  height: 31vw;
}

.ref-p-texts{
  width: 88vw;
  padding-left: 5vw;
}

.ref-p-datum-div{
  width: 12vw;
}
.ref-p-datum{

  font-size: clamp(3px, 1.5vw, 30px);
}

.ref-p-title{
  font-size: clamp(5px, 3.2vw, 50px);
}

.ref-p-text{
  margin: .2rem;

  width: 50vw;

 font-size: clamp(3.5px, 2.1vw, 35px);
}

.ref-p-arrow{
  display: none;
}

.ref-p-images{
  height: 18vw;
  width: 87vw;

  padding-left: 6.5vw;
  padding-right: 6.5vw;
}

.ref-p-img-container{
  height: 18vw;
  width: 87vw;
  display: flex;
}

.ref-p-image-div{
  margin-left: 1.7vw;
  margin-right: 1.7vw;

  position: relative;
  width: 18vw;
  height: 18vw;
}

.ref-p-image{
  width: 18vw;
  height: 18vw;
}

.ref-p-arrow{
  height: 18vw;
  width: 2.5vw;
}


/* transform  */

.slide-img {
  transform: none;
  opacity: 1;
  transition: none;
}

.right{
  transform: none;
}

.slide-img.show {
  transform: none;
  opacity: 1;
}

}