/* ==========================================================================
   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: block;
			}
		}

		.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: block;
			}
		}

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

.product {
	/* odds are you will use flexbox */
	// display: flex;

	/* center it */
	margin-left: auto;
	margin-right: auto;

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

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

		height: auto;
		width: 100%;
	}

	.product__name.product__name {
		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
		font-size: 19px;
		font-weight: 600;
		text-align: center;
		text-transform: uppercase;
    padding-top:5px;color:#0f4c81;
	}

	@media (min-width: 37.5em) {
		.product__name.product__name {
			font-size: 18px;
		}
	}

	.product__description {
		font-size: 16px;
		font-weight: 100;
		line-height: 1.1;
		text-align: center;
    margin:0%;padding:0%;

	}

	@media (min-width: 37.5em) {
		.product__description {
			font-size: 13px;
		}
	}