@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap');
:root {
	--creme: #F5F0E9;
	--beige: #B4A389;
	--gruen: #5C613C;
		}

		/*        Mobile Navigation (Default State)         */


		[class^=swiper-button-] {
		  transition: all 0.3s ease;
		}

		.swiper-slide {
		  backface-visibility: hidden;
		  -webkit-backface-visibility: hidden;
		}

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

		.swiper-container {
		  width: 80%;
		  height: 100dvh;
		  float: left;
		  transition: opacity 0.6s ease, transform 0.3s ease;
		}
		.swiper-container.nav-slider {
		  width: 20%;
		  padding-left: 5px;
		}
		.swiper-container.nav-slider .swiper-slide {
		  cursor: pointer;
		  opacity: 0.4;
		  transition: opacity 0.3s ease;
		}
		.swiper-container.nav-slider .swiper-slide.swiper-slide-active {
		  opacity: 1;
		}
		.swiper-container.nav-slider .swiper-slide .content {
		  width: 70%;
		}
		.swiper-container.nav-slider .swiper-slide .content .title {
		  	font-family: Quicksand;
			color: #F5F0E9;
			font-size: 14px;
			min-width: 300px;	max-width: 800px;


		}
		.swiper-container:hover .swiper-button-prev,
		.swiper-container:hover .swiper-button-next {
		  transform: translateX(0);
		  opacity: 1;
		  visibility: visible;
		}
		.swiper-container.loading {
		  opacity: 0;
		  visibility: hidden;
		}

		.swiper-slide {
		  overflow: hidden;
		}
		.swiper-slide .slide-bgimg {
		  position: absolute;
		  top: 0;
		  left: 0;
		  width: 100%;
		  height: 100%;
		  background-position: center;
		  background-size: cover;
		}
		.swiper-slide .entity-img {
		  display: none;
		}
		.swiper-slide .content {
		  position: absolute;
		  top: 25px;
		  padding-left: 25px;
		  color: #F5F0E9;
			width: 80%;
			  left: 0;

		}
		.swiper-slide .content .title {
			font-family: Quicksand;
			color: #F5F0E9;
			font-size: 24px;
			font-weight: 500;
			margin-bottom: 30px;
		}
		.swiper-slide .content .caption {
		  	display: block;
		  	line-height: 30px;
			font-family: Quicksand;
			color: #F5F0E9;
			font-size: 16px;
			font-weight: 500;
			margin-bottom: 30px;
		  	transform: translateX(50px);
		  	opacity: 0;
		 	transition: opacity 0.3s ease, transform 0.7s ease;
			min-width: 300px;	max-width: 800px;
		}
		.swiper-slide .content .caption.show {
		  transform: translateX(0);
		  opacity: 1;
		}

		[class^=swiper-button-] {
		  width: 44px;
		  opacity: 0;
		  visibility: hidden;	color: #F5F0E9;
		}

		.swiper-button-prev {
		  transform: translateX(50px); color: #F5F0E9;
		}

		.swiper-button-next {
		  transform: translateX(-50px); color: #F5F0E9;
		}