:root {
	--dark-blue: hsl(240, 38%, 20%);
	--grayish-blue: hsl(240, 18%, 77%);
	--dark-grayish-blue: #8585AC;
	--box-shadow-1: 0 4rem 5rem -3rem rgba(36, 36, 113, 0.50);
	--box-shadow-2: 0 1.5rem 2rem -1rem rgba(36, 36, 113, 0.10)
}

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

html {
	font-size: 62.5%
}

body {
	font-family: 'Inter', sans-serif
}

.section-testimonials {
	height: 100vh;
	width: 100%;
	background-repeat: no-repeat;
	background-position: bottom left;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap
}

@-webkit-keyframes slideInNext {
	0% {
		transform: translateX(50%);
		opacity: 0
	}
	70% {
		opacity: 1
	}
	100% {
		transform: translateX(0)
	}
}

@keyframes slideInNext {
	0% {
		transform: translateX(50%);
		opacity: 0
	}
	70% {
		opacity: 1
	}
	100% {
		transform: translateX(0)
	}
}

@-webkit-keyframes slideInPrev {
	0% {
		transform: translateX(-50%);
		opacity: 0
	}
	70% {
		opacity: 1
	}
	100% {
		transform: translateX(0)
	}
}

@keyframes slideInPrev {
	0% {
		transform: translateX(-50%);
		opacity: 0
	}
	70% {
		opacity: 1
	}
	100% {
		transform: translateX(0)
	}
}

@-webkit-keyframes slideOutNext {
	0% {
		transform: translateX(0%);
		opacity: 1
	}
	70% {
		opacity: 0;
		display: none
	}
	100% {
		transform: translateX(-50%);
		opacity: 0
	}
}

@keyframes slideOutNext {
	0% {
		transform: translateX(0%);
		opacity: 1
	}
	70% {
		opacity: 0;
		display: none
	}
	100% {
		transform: translateX(-50%);
		opacity: 0
	}
}

.slider {
	max-width: 100%;
	background-repeat: no-repeat;
	background-size: 48.4%;
	background-position: bottom 0px right 7.3rem;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	overflow: hidden
}

.slider__slides {
	width: 100%;
	display: flex
}

.slider__slide {
	flex: 1 0 100%;
	margin-right: 15rem;
}

.slider__slide-content {
	display: flex;
	justify-content: center;
	align-items: center height:250px;
}

.slider__buttons {
	flex: 0 0 auto;
	width: 5rem;
	height: 2.35rem;
	box-shadow: var(--box-shadow-2);
	display: flex;
	position: relative;
	bottom: 2.5%;
	right: 30%
}

.slider__button {
	flex: 0 0 50%;
	background-color: #fff;
	cursor: pointer;
	display: flex;
	justify-content: center;
	align-items: center
}

.slider__button--prev {
	border-top-left-radius: 50%;
	border-bottom-left-radius: 50%;
	box-shadow: 1px 2px 2px 2px grey;
}

.slider__button--next {
	border-top-right-radius: 50%;
	border-bottom-right-radius: 50%;
	box-shadow: 3.5px 2px 2px 2px grey;
}

.slider__button-icon {
	stroke: var(--dark-grayish-blue);
	transition: stroke 0.2s
}

.slider__button:hover .slider__button-icon {
	stroke: var(--grayish-blue)
}

.slider__button:active .slider__button-icon {
	stroke: var(--dark-grayish-blue)
}

.testimonial {
	width: 100%
}

.testimonial__text {
	color: var(--dark-blue);
	width: 60%;
	margin-right: -6%;
	margin-left: 15%;
	z-index: 1;
	position: relative
}

.testimonial__quote {
	font-size: 1rem;
	font-weight: 200;
	line-height: 1.5;
	margin-bottom: .60rem;
	text-align: justify;
}

.testimonial__cite {
	font-size: 1rem;
	font-style: normal
}

.testimonial__cite--name {
	font-weight: 700;
	margin-right: 8px
}

.testimonial__cite--role {
	color: var(--grayish-blue)
}

.testimonial__img {
	flex: 0 1 48.65%
}

.testimonial__photo {
	width: 15rem;
	height: 10rem;
	margin-top: 2.5rem;
	margin-left: 10rem;
	box-shadow: var(--box-shadow-1);
	border-radius: 5px;
	position: relative;
}

.attribution {
	flex: 1 0 100%;
	display: block;
	font-size: 11px;
	text-align: center;
	bottom: 2rem
}

.attribution a {
	color: #3e52a3
}

.clearfix::after {
	content: "";
	clear: both;
	display: table;
}

@media only screen and (max-width: 75em) {
	.section-testimonials {
		height: auto
	}
}

@media only screen and (max-width: 63em) {
	.section-testimonials {
		padding: 0.5rem 4rem;
		background-size: 76%
	}
}

@media only screen and (max-width: 41em) {
	.section-testimonials {
		padding: 0.5rem;
		align-items: flex-start
	}
}

@media only screen and (max-width: 63em) {
	.testimonial__photo {
		width: 100%
	}
}

@media only screen and (max-width: 63em) {
	.testimonial__img {
		flex: initial;
		width: 50%
	}
}

@media only screen and (max-width: 52.5em) {
	.testimonial__img {
		width: 60%
	}
}

@media only screen and (max-width: 41em) {
	.testimonial__img {
		width: 77.7%
	}
}

@media only screen and (max-width: 75em) {
	.testimonial__cite {
		font-size: 1.6rem
	}
}

@media only screen and (max-width: 63em) {
	.testimonial__cite {
		font-size: 2rem
	}
}

@media only screen and (max-width: 63em) {
	.testimonial__cite {
		font-size: 2.2rem;
		line-height: 1.5
	}
}

@media only screen and (max-width: 41em) {
	.testimonial__cite {
		font-size: 1.5rem;
		line-height: 1.3
	}
}

@media only screen and (max-width: 22.5em) {
	.testimonial__cite {
		font-size: 1.2rem
	}
}

@media only screen and (max-width: 75em) {
	.testimonial__cite--name {
		margin-right: 0;
		display: block
	}
}

@media only screen and (max-width: 75em) {
	.testimonial__quote {
		font-size: 1.5rem
	}
}

@media only screen and (max-width: 63em) {
	.testimonial__quote {
		font-size: 1.5rem
	}
}

@media only screen and (max-width: 52.5em) {
	.testimonial__quote {
		font-size: 1.5rem
	}
}

@media only screen and (max-width: 41em) {
	.testimonial__quote {
		font-size: 1.5rem;
		margin-bottom: 1.5rem
	}
}

@media only screen and (max-width: 22.5em) {
	.testimonial__quote {
		font-size: 1.6rem;
		margin-bottom: 1.5rem
	}
}

@media only screen and (max-width: 63em) {
	.testimonial__text {
		order: 1;
		flex: initial;
		margin-right: 0;
		text-align: center
	}
}

@media only screen and (max-width: 41em) {
	.testimonial__text {}
}

@media only screen and (max-width: 22.5em) {
	.testimonial__text {}
}

@media only screen and (max-width: 63em) {
	.testimonial__quotation-marks {
		left: 50%;
		transform: translateX(-50%)
	}
}

@media only screen and (max-width: 41em) {
	.testimonial__quotation-marks {
		width: 6rem;
		height: 5rem;
		top: -2.5rem
	}
}

@media only screen and (max-width: 22.5em) {
	.testimonial__quotation-marks {
		width: 4rem;
		height: auto;
		top: -1rem
	}
}

@media only screen and (max-width: 75em) {
	.slider {
		background-size: 48%
	}
}

@media only screen and (max-width: 63em) {
	.slider {
		padding: 0;
		background-position: top center;
		background-size: 62% auto;
		align-items: flex-start
	}
}

@media only screen and (max-width: 52.5em) {
	.slider {
		background-size: 75% auto
	}
}

@media only screen and (max-width: 41em) {
	.slider {
		background-size: 100% auto
	}
}

@media only screen and (max-width: 63em) {
	.slider__slides {}
}

@media only screen and (max-width: 63em) {
	.slider__slide {
		flex: 1 0 100%
	}
}

@media only screen and (max-width: 63em) {
	.slider__slide-content {
		flex-direction: column;
		justify-content: flex-start;
		align-items: center
	}
}

@media only screen and (max-width: 75em) {
	.slider__buttons {
		bottom: 7.5%
	}
}

@media only screen and (max-width: 63em) {
	.slider__buttons {
		top: 20.5vw;
		right: 50%;
		transform: translateX(50%)
	}
}

@media only screen and (max-width: 52.5em) {
	.slider__buttons {
		top: 24vw
	}
}

@media only screen and (max-width: 41em) {
	.slider__buttons {
		width: 4rem;
		height: 2rem;
		top: 35vw
	}
}