.grabbable {
  cursor: move;
  /* fallback if grab cursor is unsupported */
  cursor: grab;
  cursor: -moz-grab;
  cursor: -webkit-grab; }

/* (Optional) Apply a "closed-hand" cursor during drag operation. */
.grabbable:active {
  cursor: grabbing;
  cursor: -moz-grabbing;
  cursor: -webkit-grabbing; }


.splide {
  padding: 0 5px 0 5px; 
  
  }

.splide__arrow {
  position: absolute;
  z-index: 1;
  top: 110%; }

.splide__arrow--prev {
  left: calc(43% - 17px); }

.splide__arrow--next {
  right: calc(43% - 17px); }
/*
.splide__pagination {
  visibillity: hidden; }

.splide__list {
  align-items: center; }
  
  
.splide__slide__container {
	max-width: 100%;
}
*/
.my_img {
	display: flex;
	align-items: center;
	justify-content: center;
  	height: 300px;
	
	 background-size: cover !important;
 	 background-position: 50% !important;
	
	background-repeat: no-repeat;
}

:root {
	--slide-in-start: 100%;
	--slide-in-end: 0%;
}

.img_text {
	opacity: 0;
    font-size: calc(1.6rem + 0.3vw);
    line-height: 1.7;
    color: var(--primary-txt-color);
    font-weight: bold;
	word-break: break-word;
  	overflow: hidden;
  	max-width: 100%;
  	text-align: center;
	padding: 5%;
}


.img_1 { background: url("../img/slider/slider1.jpg"); }
.img_2 { background: url("../img/slider/slider2.jpg"); }
.img_3 { background: url("../img/slider/slider3.jpg"); }
.img_4 { background: url("../img/slider/slider4.jpg"); }



.hidden {
	position: absolute;
	visibility: hidden;
	height: 0px;
	width: 0px;
}





.is-visible [data-inviewport="scale-in"].is-inViewport { 
	opacity: 1;
	
	-webkit-animation-delay: 0s;
			animation-delay: 0s;
	-ms-animation-delay: 0s;
	
	
			 animation: slide_in 1.3s ease-out;
	-webkit-animation: slide_in 1.3s ease-out;
	-ms-animation: slide_in 1.3s ease-out;
	
}
/*
.iewrap { 
	.img_text {
		opacity: 1;
		-webkit-animation-delay: 0.1s;
				animation-delay: 0.1s;
		
				 animation: slide_in 1.3s ease-in-out;
		-webkit-animation: slide_in 1.3s ease-in-out;
	}
}
 */
  
@keyframes slide_in {
	0%   { 
		transform: translateY(var(--slide-in-start)); 
		opacity: 0.5;
	}
	100% {
		 transform: translateY(var(--slide-in-end)); 
		 opacity: 1;
	}
}

@-webkit-keyframes slide_in {
	0%   { -webkit-transform:translateY(var(--slide-in-start)); }
	100% { -webkit-transform:translateY(var(--slide-in-end)); }
}
  


@media only screen and (max-width: 1400px) {
	.img_text {
		 font-size: calc(1.2rem + 0.7vw);
	}
}


@media only screen and (max-width: 800px) {
	.img_text {
		 font-size: calc(1.0rem + 0.7vw);
	}
}
  
  

/* Hier geht man von min aus, müsste aber von max aus um mit dem Rest des Projekts auf einer Linie zu sein.. TODO */
@media only screen and (min-width: 320px) {
  .splide {
    padding: 0 10px 0 10px; } }

@media only screen and (min-width: 662px) {
  .splide {
    padding: 0 40px 0 40px; }
  .splide__arrow {
    position: absolute;
    z-index: 1;
    top: 40%; }
  .splide__arrow--prev {
    left: 0; }
  .splide__arrow--next {
    right: 0; }
  .splide__pagination {
   visibility: hidden; } }