/* ==== TESTIMONIALS ==== */

.testimonial {
    display: grid;
    grid-template-columns: 90% 10%;
}

.testimonial:nth-of-type(2n) {
    grid-template-columns: 10% 90%;
}

.testimonial-content {
    background: #fafafa;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    padding: 25px 25px 25px 10vw;
    margin: 25px 0;
    font-size: calc(18px + 0.2vw);
}

.testimonial:nth-of-type(2n) .testimonial-content {
    grid-column: 2;
    background: #34A798;
    color: #ffffff;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    padding: 25px 10vw 25px 25px;
}

.client-name, .client-location {
    display: block;
}
.client-name {
    font-weight: bold;
    color: #101010;
    font-size: 18px;
    margin: 20px 20px 0 20px;
}

.testimonial:nth-of-type(2n) .testimonial-content .client-name {
    color: #fafafa;
}

.client-location {
    font-style:italic;
    font-size: 14px;
    margin: 0 20px;
}

.testimonial blockquote {
    margin: 0 20px;
    position: relative;
}

.testimonial blockquote p {
    margin:0 0 10px;
    display: inline-block;
}

.testimonial blockquote p:first-of-type:before {
    content: "\f205";
    font-family: 'dashicons';
    margin: 0 10px 0 0;
}

.testimonial blockquote p:last-of-type:after {
    content: "\f205";
    font-family: 'dashicons';
    transform: rotate(180deg);
    display: inline-block;
    margin-left: 10px;
}

@media only screen and (min-width: 768px) {
    .testimonial {
        grid-template-columns: 70% 30%;
    }

    .testimonial:nth-of-type(2n) {
        grid-template-columns: 30% 70%;
    }
}


@media only screen and (min-width: 1600px) {
    .testimonial {
        grid-template-columns: 60% 40%;
    }

    .testimonial:nth-of-type(2n) {
        grid-template-columns: 40% 60%;
    }

    .testimonial-content {
        padding: 35px 25px 35px 20vw;
    }

    .testimonial:nth-of-type(2n) .testimonial-content {

        padding: 35px 20vw 35px 25px;
    }
}