{% if testimonials %}
<section id="testim" class="testim">
    <div class="wrap">
        <span id="right-arrow" class="arrow right fa fa-chevron-right"></span>
        <span id="left-arrow" class="arrow left fa fa-chevron-left "></span>
        <ul id="testim-dots" class="dots">
            {% for item in testimonials %}
            <li class="dot{% if loop.first %} active{% endif %}"></li>
            {% endfor %}
        </ul>
        <div id="testim-content" class="cont">
            {% for testimonial in testimonials %}
            <div{% if loop.first %} class="active"{% endif %}>
                {% if testimonial.image %}
                <div class="img">
                    <img src="{{ testimonial.image.thumb(100,100,{'mode':'crop'}) }}" alt="{{ testimonial.name }}">
                </div>
                {% endif %}
                <h2>{{ testimonial.name }}</h2>
                <p>{{ testimonial.quote }}</p>
            </div>
            {% endfor %}
        </div>
    </div>
</section>
<style>
.testim {
    background-color: {{ __SELF__.property('backgroundColor') }} !important;
}
.testim .arrow:hover, .testim .cont div h2 {
    color: {{ __SELF__.property('textColor') }} !important;
}
.testim .dots .dot.active,
.testim .dots .dot:hover {
    background: {{ __SELF__.property('textColor') }};
    border-color: {{ __SELF__.property('textColor') }};
}
@-webkit-keyframes testim-scale {
    70% {
        -webkit-box-shadow: 0px 0px 10px 5px {{ __SELF__.property('textColor') }};        
        box-shadow: 0px 0px 10px 5px {{ __SELF__.property('textColor') }};        
    }

        100% {
            -webkit-box-shadow: 0px 0px 0px 0px {{ __SELF__.property('textColor') }};
            box-shadow: 0px 0px 0px 0px {{ __SELF__.property('textColor') }};
        }
    }
    @-moz-keyframes testim-scale {
        70% {
            -moz-box-shadow: 0px 0px 10px 5px {{ __SELF__.property('textColor') }};
            box-shadow: 0px 0px 10px 5px {{ __SELF__.property('textColor') }};
        }

        100% {
            -moz-box-shadow: 0px 0px 0px 0px {{ __SELF__.property('textColor') }};
            box-shadow: 0px 0px 0px 0px {{ __SELF__.property('textColor') }};
        }
    }
    @-ms-keyframes testim-scale {
        70% {
            -ms-box-shadow: 0px 0px 10px 5px {{ __SELF__.property('textColor') }};
            box-shadow: 0px 0px 10px 5px {{ __SELF__.property('textColor') }};
        }

        100% {
            -ms-box-shadow: 0px 0px 0px 0px {{ __SELF__.property('textColor') }};
            box-shadow: 0px 0px 0px 0px {{ __SELF__.property('textColor') }};
        }
    }

    @-o-keyframes testim-scale {
        70% {
            -o-box-shadow: 0px 0px 10px 5px {{ __SELF__.property('textColor') }};
            box-shadow: 0px 0px 10px 5px {{ __SELF__.property('textColor') }};
        }

        100% {
            -o-box-shadow: 0px 0px 0px 0px {{ __SELF__.property('textColor') }};
            box-shadow: 0px 0px 0px 0px {{ __SELF__.property('textColor') }};
        }
    }
    @keyframes testim-scale {
        70% {
            box-shadow: 0px 0px 10px 5px {{ __SELF__.property('textColor') }};
        }

    100% {
        box-shadow: 0px 0px 0px 0px {{ __SELF__.property('textColor') }};        
    }
}
</style>
{% endif %}