.testimonial-container {background: linear-gradient(180deg, #63B5D8 0%, #00607f 100%);}
.testimonials { height:100%; position:relative; }
.testimonials .slick-list { overflow:hidden; }

.comment-left { width:440px; padding:0 80px 0 0; flex:1; }
.comment-left h3 { color:#fff; padding: 0 0 3px; }
.comment-left p {padding:0; }
.avatar { width:360px; height:360px; border-radius:50%; overflow:hidden; margin: 0 0 25px; }
.avatar img { object-fit: cover; }
.comment-right { flex:auto; }
.comment-right .h1 { color:#fff; padding: 30px 0 32px; }
.testimonials ul.slick-dots { margin:0; padding:0; position: absolute; left: -50px; top: -30px; height:100%; display: flex; flex-direction: column; justify-content: center; width:16px; }
.testimonials ul.slick-dots li.slick-active:before { color:#fff; }

.comment-slide-item.no_image{flex-direction: column-reverse;}
.no_image .comment-left{padding-top: 40px; text-align: left; display: block; width: 100%; }
.comment-slide .avatar-text{color: #fff;}

/*-- media css starts here --*/
@media only screen and (min-width: 1024px){
    .comment-slide-item{padding: 80px 0; align-items: center;}
    .comment-right .h1{font-size: 34px; line-height: 44px;}
}
@media only screen and (max-width: 1399px) and (min-width: 1024px){
    .comment-left{padding-right: 40px; padding-left: 40px;}
    .avatar{width: 300px; height: 300px;}
    .comment-right .h1{font-size: 30px; line-height: 38px;}
    .testimonials ul.slick-dots{left: 0;}
}
@media only screen and (max-width: 1023px) and (min-width: 200px){
    .testimonial-container { height:auto; padding:32px 20px; }
    .comment-slide-item { height: auto; flex-direction: column-reverse; }
    .comment-right .h1 { font-size:24px; line-height: 28px; }
    .avatar { width:64px; height:64px; float:left; margin:0 24px 0 0;  }
    .avatar-text{flex: 1;}
    .quote-top.show-in-tablet { width: 14px; display: inline-block !important; position: relative; top: -7px; }
    .quote-btm.show-in-tablet { width: 14px; display: inline-block !important; position: relative; top: -7px; }
    .comment-left { flex-direction: row; padding:0; text-align: left; margin:0; justify-content: flex-start; }
    .comment-right { text-align: left; }
    .testimonials ul.slick-dots{ left: 0;  width: 100%; flex-direction: row; top: auto;  position: relative; justify-content: flex-start;  margin: 30px 0 0; height:auto; }
}
@media only screen and (max-width: 767px) and (min-width: 200px){
    .comment-left { width:100%; }
    .comment-left h3 { font-size:20px; line-height: 24px; }
    .testimonial-container {padding-left:0; padding-right:0; }
}