/* https://nightfury-alfa.com/pages/codingsnow/tutorials/tutorial42.html**************/
  
  body{
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: white;
  }
  
  #tür_slider{
    margin-top: 85px;
    height: 90vh;
    position: relative;
}

  .img-slider{
    position: absolute;
    top: 100px;
    width: 48vh;
    height: 80vh;
    margin: 10px;
    background: transparent;
  }
  
  .img-slider .slide{
    z-index: 1;
    position: absolute;
    height: 100vh;
    width: 100%;
    clip-path: circle(0% at 0 50%);
  }
  
  .img-slider .slide.active{
    clip-path: circle(150% at 0 50%);
    transition: 1s;
    transition-property: none;
  }
  
  .img-slider .slide img{
    z-index: 1;
    width: 30vh;
    border: solid black 5px;
    position: relative;
    top: 7vh;
    z-index: 3;
  }

  .vertical_adjustment{
    top: 15vh !important;
  }

  .min_width{
    width: 20vh !important;   
  }

  .min_width_extrem{
    width: 15vh !important;   
  }

  .min_width:hover{
    width: 35vh !important;   
    left: 0vh !important;
  }

  .min_width_extrem:hover{
    width: 25vh !important; 
    left: 0vh !important;  
  }


  .img-slider .slide img:hover{
    width: 53vh;
    left: -4vh;
  }

  .adjustment_hover:hover{
    width: 85vh !important;
    left: -20vh !important;
    top: 8vh !important;
  }


  .img-slider .slide .info{
    position: absolute;
    top: 65vh;
    width: 33vh;
    margin: 0px 8vh;


  }

  .img-slider .slide .info a{
    text-decoration: underline ;
  }

  .adjustment_info{
    top: 40vh !important;
  }
  
  .adjustment_info_med{
    top: 59vh !important;
  }

  .adjustment_info_24{
    top: 50vh !important;
  }

  .img-slider .slide .info h2{
    margin: -3px auto;
    font-size: 0.8em;
    background-color: white;
    box-shadow: 0 2px 5px gray;
    padding: 5px;
    border: gray dotted 2px;
  }
  
  .img-slider .slide .info p{
    font-style: italic;
    font-size: 0.8em;
    margin: 18px auto;
    padding: 15px 5px;
    border-radius: 4px;
    position: absolute;
    width: 35vh;
    left: -3vh;
    top: 5vh;

  }
  
  .img-slider .navigation{
    z-index: 2;
    position: absolute;
    display: flex;
    bottom: 30px;
    top: 52vh;
    left: 50%;
    transform: translateX(-50%);
  }
  
  .img-slider .navigation .btn{
    background: rgba(108, 83, 83, 0.5);
    width: 12px;
    height: 12px;
    margin: 10px;
    border-radius: 50%;
    cursor: pointer;
  }
  
  .img-slider .navigation .btn.active{
    background: #6c5353;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
  }

/* text right next to image *********/
  


.adjustment_for_desc{
  top: 31vh !important;
}


.adjustment_for_desc_med{
  top: 42vh !important;
}



  
  @media (max-width: 620px){
    #tür_slider{
      position: absolute;
      top: -61vh;
      left: -50vw;
      margin-top: 100px;
      width: 100vw;
      height: 800px;
  }

    .img-slider{
      top: 70px;
      width: 85%;
      height: 250px;
    }

    .img-slider .slide img{
      z-index: 1;
      width: 65vw;
      border: solid black 5px;
      position: relative;
      top: 10vw;
    }

    .vertical_adjustment{
      top: 20vw !important;
    }

    .min_width:hover{
      width: 20vh !important;   
    }

    .min_width_extrem{
      width: 15vh !important;   
    }
  
  
    .min_width_extrem:hover{
      width: 15vh !important; 
      left: 0vh !important;  
    }

    .img-slider .slide img:hover{
      z-index: 1;
      width: 65vw;
      border: solid black 5px;
      position: relative;
      top: 10vw;
      left: 0px;
    }

    .adjustment_info{
      top: 90vw !important;
    }

    .adjustment_hover:hover{
      width: 65vw !important;
      left: 0px !important;
      top: 10vw !important;
  
  
    }

  
    .img-slider .slide .info{
      position: absolute;
      top: 125vw;
      width: 63vw;
      margin: 0px 11vw;
    }
  
    .adjustment_info_med{
      top: 120vw !important;
    }

    .img-slider .slide .info p{
      width: 70vw;
      margin-top: 20px;

  
    }
    
    .adjustment_for_desc{
      top: 65vw !important;
    }

    .adjustment_for_desc_med{
      top: 85vw !important;
    }
    
  
    .img-slider .navigation{
      bottom: 15px;
      position: absolute;
      top: 110vw;
      width: 140px;
    }

    .four{
      left: 55% !important;
    }

    .three{
      left: 60% !important;
    }

    .two{
      left: 63% !important;
    }
  
    .img-slider .navigation .btn{
      width: 15px;
      height: 15px;
      margin: 6px;
    }

    
  }