body{
  overflow-x: hidden;
}
.testimonials-container {
  padding-top: 2rem;
  min-height: 450px;
  width:80%;
  position:relative;
  display:flex;
  flex-direction:row;
  margin:0 auto;
  flex-wrap: wrap;
}

.testimonial{
  font-size:1.5rem;
  padding-top: 4rem;
  line-height: 40px;
  background-image: url("pattern-quotes.svg");
  background-repeat:no-repeat;
}


.image-items {
  background-image: url("pattern-bg.svg");
  background-size:100%;
  background-repeat:no-repeat;
  /*min-height: 600px; */
  text-align:center;
  transform:translateX(4rem);
}

.image-items img{
  width: 70%;
  margin: 0 auto;
  top:20%;
  transform:translateY(20%);
  -webkit-box-shadow: 0 4rem 5rem -3rem rgba(36,36,113,0.50);
  box-shadow: 0 4rem 5rem -3rem rgba(36,36,113,0.50);
  border-radius: 5px;

}

.basicInfo {
  width:50%;
}

.user-details{
  padding-top: 1.5rem;
}

.username {
	margin: 0;
  font-style:bold;
}

.slider-button{
  flex: 0 0 auto;
  width: 8rem;
  height: 4rem;
  display: flex;
  position:relative;
  z-index: 1000;
  top:1rem;
  left: 25%;
  transform:translateY(1rem);
}
.slider{
  flex: 0 0 5rem;
  background-color: #fff;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  color:#c2d6d6;
  font-weight:500px;
  font-size:3rem;
}
.slider-l{
  border-top-left-radius: 50%;
  border-bottom-left-radius: 50%;
}
.slider-r{
  border-bottom-right-radius:50%;
  border-top-right-radius: 50%;
}

.slider p:hover{
  color:#293d3d;
  transition: color 0.5s ease;
}

@keyframes grow {
	0% {
		transform: scaleX(0);
	}
}

@media (max-width: 768px) {
	.testimonials-container {
		padding: 20px 30px;
	}

	.fa-quote {
		display: none;
	}
}

@media only screen and (max-width: 1020px) {

  .testimonialsContainer {
    flex-direction:column;
    margin:0;
  }
  .basicInfo{
    flex: 100%;
    order: 2;
  }

  .image-items{
    order:1;
    width:100%;
    display:flex;
    align-items: center;
    padding: 5rem;
    min-width:400px;
    max-width: 400px;
    right:0;
    left:0;
    margin-left:auto;
    margin-right:auto;
    transform:translateX(-3rem);
  }
  .image-items img{
    width:100%;
    height:100%;
    transform:translateY(0);
  }
  .slider-button{
    position:absolute;
    right: 1rem;
    top: 9rem;
    transform: translateY(9rem);
  }

}
