.tesbox{
    display: block;
    margin: 1%;
    overflow: hidden;

}

.tesbox .descrip-wrap{
    background:#73637F;
    padding:15px;
    border-radius: 10px;
    position: relative;
}

.tesbox .descrip-wrap p{
    margin: 0px;
    color: #ffffff;
}

.tesbox .heading-wrap{
    margin-top:20px;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
}

.tesbox .heading-wrap h3 {
    color: #000000;
    font-family: 'Nunito', sans-serif;
    font-size: 19px;
    font-weight:900;
    padding-right:1%;
}

.tesbox .heading-wrap h3 strong {
    font-size: 15px;
    font-weight:500;
    display:block;
}

/* Create down-pointing arrow for testimonial */
.tesbox .descrip-wrap:after {
    position: absolute;
    right: 160px;
    content: "";
    bottom:-44px;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 0 0px 70px 40px;
    border-color: transparent transparent #73637F transparent;
    transform: rotate(272deg);
}


/* Change colours for the other 3 testimonial boxes */
.tesbox .descrip-wrap2 {
    background:#56c1ed;
}
.tesbox .descrip-wrap3 {
    background:#5e6593;
}
.tesbox .descrip-wrap4 {
    background:#8CD6AD;
}

.tesbox .descrip-wrap2:after {
    border-color: transparent transparent #56c1ed transparent;
}
.tesbox .descrip-wrap3:after{
    border-color: transparent transparent #5e6593 transparent;
}
.tesbox .descrip-wrap4:after{
    border-color: transparent transparent #8CD6AD transparent;
}

/* Carousel definition */
@keyframes display {
                        /* start offscreen right (testimaonials are 900 pix wide) */
  0% {
    transform: translateX(200vw);
    opacity: 1;
  }
                        /* slide in from the right */
  5% {
    transform: translateX( 50vw  ); /* must be spaces around '-' sign ! */
    opacity: 1;
  }
                        /* stay visible, not moving */
  25% {                 /* ---> for 3 images: 33%, for 4 images: 25%, for 5 to 20% */
    transform: translateX( 50vw  );
    opacity: 1;
  }
                        /* move out to the left */
  38% {
    transform: translateX(-200vw);
    opacity: 1;
  }
                        /* stay invisible while the other images are going through */
  100% {
    transform: translateX(-200vw);
    opacity: 1;
  }
}


/*************** All screen sizes **************/
.tes-carousel {
  position: relative;
  width: 96%;          /* 100 percent of window width */
  z-index: 0;           /* stay below the navMenu */
  overflow: hidden;     /* restrict width to screen width, even if images bigger */
  margin-bottom:0;
  height:19vw;
  margin-top:1%;
  margin-left: 1%;
 /* background-color: rgb(0,230,220); */

}


.tes-carousel > .tesbox {       /* Setup / status when everything starts */
  position: absolute;

  top: 0;
  opacity:0;            /* hide random 1st image */
  animation: display 40s infinite; /* duration of 1 complete roation through ALL images */
  z-index: 0;
  overflow: hidden;     /* restrict width to screen width */
  height: auto;
  left: -48vw;
  width: 90vw;
}

/*********** Mobile Phone Style Definition ***********/
@media only screen and (min-width : 0px) and (max-width : 480px) {
    .tes-carousel > .tesbox {
        left: -49vw;
        width: 89vw;
    }
    .tes-carousel {
      height: 70vw;
    }
}

/*********** Tablet Style Definition **********/
@media only screen and (min-width : 480px) and (max-width : 950px) {
    .tes-carousel > .tesbox {
        left: -48.5vw;
        width: 90vw;
    }
    .tes-carousel {
      height: 42vw;
    }
}

/* Delay for the following images. */
.tesbox:nth-child(2) {
  animation-delay: 10s; /* delay of image 2, (duration for all divided by number of images) */
}

.tesbox:nth-child(3) {
  animation-delay: 20s; /* delay of image 3 ( twice the amount of nth-child (2) above */
}


.tesbox:nth-child(4) {
  animation-delay: 30s;
}
/*
img:nth-child(5) {
  animation-delay: 8s;
}