@charset "UTF-8";
/* CSS Document */

/* ==========================================================================
   Swiper modifications
 ========================================================================== */

.swiper-container {
	margin-top: 2em; /* minor cosmetic */
}

	.swiper-wrapper {
		/* now pagination is below slides */
		margin-bottom: 3em;

		/* just enough width so slides handing off screen are partially visible */
		width: 73.8%;
	}

	@media (min-width: 37.5em) {
		.swiper-wrapper {
			/* now arrows appear */
			/* make room for arrows */
			width: 92%;
		}
	}

	@media (min-width: 43.75em) {
		.swiper-wrapper {
			/* make room for arrows */
			width: 95%;
		}
	}


		/* doubleing up specificity to win over on transform */
		.swiper-slide.swiper-slide {
			/* a single column layout */
			width: 100%;
		}


		@media (min-width: 37.5em) {
			.swiper-slide.swiper-slide  {
				/* going for a 2 column layout here */
				width: 50%;

				/* centeredSlides set to true */
				/* reposition so first slide appears on left */
				transform: translateX(-50%);
			}
		}

		@media (min-width: 43.75em) {
			.swiper-slide.swiper-slide  {
				/* upping it to a 3 column layout */
				width: 33.33333333333%;

				/* centeredSlides set to true */
				/* reposition so first slide appears on left */
				transform: translateX(-100%);
			}
		}

		@media (min-width: 53em) {
			.swiper-slide.swiper-slide  {
				/* and finally the 4 column layout */
				width: 25%;

				/* centeredSlides set to true */
				/* reposition so first slide appears on left */
				transform: translateX(-150%);
			}
		}

		.swiper-pagination {
			/* show on small viewports */
			display: block;
		}

		@media (min-width: 37.5em) {
			.swiper-pagination {
				/* hide on larger viewports per stakeholder recommendation */
				display: none;
			}
		}

		/* now move prev button more to the left */
		.swiper-button-prev {
			/* but first hide on small viewports */
			display: none;

			left: 0;
			top: 0;

			margin-top: 0;

			/* subtract .swiper-wrapper bottom-margin to vertically center arrow */
			height: calc(100% - 3em);

			/* css trickery to hide the way left image */
			background-color: #fff;
		}

		@media (min-width: 37.5em) {
			.swiper-button-prev {
				/* show on larger viewports */
				display: none;
			}
		}

		.swiper-button-next {
			/* hide on small viewports */
			display: none;

			right: 0;
			top: 0;

			margin-top: 0;

			/* subtract .swiper-wrapper bottom-margin to vertically center arrow */
			height: calc(100% - 3em);

			/* css trickery to hide the way right image */
			background-color: #fff;
		}

		@media (min-width: 37.5em) {
			.swiper-button-next {
				/* show on larger viewports */
				display: none;
			}
		}

/* ==========================================================================
   content in swiper
 ========================================================================== */

.product {
	/* odds are you will use flexbox */
	/* display: inline-block; */

	/* center it */
	margin-left: -27%;

	/* adjust the width to add or remove whitespace  */
	width: 88%;
}

	.photograph {
		/* if parent is flex it will stretch this image */
		/* align-self: center; */
		display: block;

		height: auto;
		width: 100%;
    border-radius: 10px;
	}

	.product__name.product__name {
		display: block;
		font-size: 14px;
    	letter-spacing: 0.08em;
   		text-transform: uppercase;
    	font-family: "proxima-nova";
    	font-weight: 700;
		text-align: left;
		padding-top: 20px;
		padding-bottom: 5px;
	}



@media only screen and (max-width: 766px) {
	.product__name.product__name {
		font-size: 12px;
    	letter-spacing: 0.08em;
   		text-transform: uppercase;
    	font-family: "proxima-nova";
    	font-weight: 700;
		text-align: left;
		padding-top: 20px;
		padding-bottom: 5px;
	}
	
	.product {
	/* odds are you will use flexbox */
	/* display: inline-block; */

	/* center it */
	margin-left: -4%;

	/* adjust the width to add or remove whitespace  */
	width: 88%;
}
}


	.product__description {
		font-size: 10px;
    	font-family: "proxima-nova";
    	font-weight: 500;
    	letter-spacing: 0.3em;
    	text-transform: uppercase;
		color: rgba(0,0,0,1.00);
	}

@media only screen and (max-width: 766px) {
	.product__description {
		font-size: 8px;
    	font-family: "proxima-nova";
    	font-weight: 500;
    	letter-spacing: 0.3em;
    	text-transform: uppercase;
		color: rgba(0,0,0,1.00);
	}
}




.swiper-slide:link {
	text-decoration: none;
	color: rgba(0,0,0,1.00);
}

.swiper-slide:visited {
	text-decoration: none;
	color: rgba(0,0,0,1.00);
}

/*custom for vanAchibald*/

.swiper-nav {
  height: 30px;
  display: flex;
  justify-content: flex-start;
  padding: 0 5%;
  background-color: rgba(255,255,255,1.00);
}

.swiper-button {
	height: 15px;
	width: 40px;
	cursor: pointer;
}

.vanachibald-button-prev {
	margin-right: 10px;
}

.vanachibald-button-prev img{
	transform: rotate(180deg);
}


/* --- Footer Blend: Swiper-Texte und Pfeile ---
   Wenn der Footer herannaht, wechseln Produktname,
   -beschreibung und Navigationspfeile auf hell.
   ------------------------------------------------ */

.product__name,
.product__description {
  transition: color 500ms ease;
}

.swiper-button img {
  transition: filter 500ms ease;
}

.home-swiper-container.is-footer-approaching--black .product__name {
  color: rgba(255,255,255,0.90);
}

.home-swiper-container.is-footer-approaching--black .product__description {
  color: rgba(255,255,255,0.60);
}

.home-swiper-container.is-footer-approaching--black .swiper-slide:link,
.home-swiper-container.is-footer-approaching--black .swiper-slide:visited {
  color: rgba(255,255,255,0.90);
}

.home-swiper-container.is-footer-approaching--black .swiper-button img {
  filter: brightness(0) invert(1);
}