{#

Element ID: Element13
Element Name: Customized training

#}

<div class="customized-training">
    <div class="customized-training__wrapper">
        <img src="{{site.theme.link}}/frontend/img/vr_room.jpg" alt=""/>
        <div class="customized-training__plus customized-training__plus--top" data-customized-training>
            <div class="pulsating-circle">
                <span></span>
                <div class="customized-training__image-hover">
                    <img src="{{ TimberImage(element.image_top).src|resize(150) }}" alt="{{ TimberImage(element.image_top).alt }}">
                </div>
            </div>
        </div>
        <img class="customized-training__arrow customized-training__arrow--top" src="{{site.theme.link}}/frontend/img/training-arrow-lounge.jpg" alt="">
        <img class="customized-training__arrow customized-training__arrow--top-mobile" src="{{site.theme.link}}/frontend/img/training-arrow-lounge-mobile.jpg" alt="">
        <h3 class="customized-training__cover-title customized-training__cover-title--top">{{element.title_top}}</h3>
        <div class="customized-training__plus customized-training__plus--middle" data-customized-training>
            <div class="pulsating-circle">
                <span></span>
                <div class="customized-training__image-hover">
                    <img src="{{ TimberImage(element.image_middle).src|resize(150) }}" alt="{{ TimberImage(element.image_middle).alt }}">
                </div>
            </div>
        </div>
        <img class="customized-training__arrow customized-training__arrow--middle" src="{{site.theme.link}}/frontend/img/training-arrow-testing.jpg" alt="">
        <img class="customized-training__arrow customized-training__arrow--middle-mobile" src="{{site.theme.link}}/frontend/img/training-arrow-testing-mobile.jpg" alt="">
        <h3 class="customized-training__cover-title customized-training__cover-title--middle">{{element.title_middle}}</h3>
        <div class="customized-training__plus customized-training__plus--bottom" data-customized-training>
            <div class="pulsating-circle">
                <span></span>
                <div class="customized-training__image-hover">
                    <img src="{{ TimberImage(element.image_bottom).src|resize(150) }}" alt="{{ TimberImage(element.image_bottom).alt }}">
                </div>
            </div>
        </div>
        <img class="customized-training__arrow customized-training__arrow--bottom" src="{{site.theme.link}}/frontend/img/training-arrow-station.jpg" alt="">
        <img class="customized-training__arrow customized-training__arrow--bottom-mobile" src="{{site.theme.link}}/frontend/img/training-arrow-station-mobile.jpg" alt="">
        <h3 class="customized-training__cover-title customized-training__cover-title--bottom">{{element.title_bottom}}</h3>
    </div>
</div>

<div class="customized-training-modal" data-modal-customized-training>
    <div class="customized-training-modal__image">
        <img src="{{ TimberImage(element.image_top).src }}" alt="{{ TimberImage(element.image_top).alt }}">
        <div class="close-modal" data-modal-close>
            <svg class="icon-close">
                <use xlink:href="{{site.theme.link}}/frontend/icons/icons.svg#icon-close"></use>
            </svg>
        </div>
    </div>
    <div class="container p-0">
        <div class="row">
            <div class="col-md-8 offset-md-2">
                <div class="customized-training-modal__about text-align-center">
                    <h2 class="customized-training-modal__title">{{element.modal_title_top}}</h2>
                    <p class="m-0 customized-training-modal__text">
                        {{element.modal_text_top}}
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="customized-training-modal" data-modal-customized-training>
    <div class="customized-training-modal__image">
        <img src="{{ TimberImage(element.image_middle).src }}" alt="{{ TimberImage(element.image_middle).alt }}">
        <div class="close-modal" data-modal-close>
            <svg class="icon-close">
                <use xlink:href="{{site.theme.link}}/frontend/icons/icons.svg#icon-close"></use>
            </svg>
        </div>
    </div>
    <div class="container p-0">
        <div class="row">
            <div class="col-md-8 offset-md-2">
                <div class="customized-training-modal__about text-align-center">
                    <h2 class="customized-training-modal__title">{{element.modal_title_middle}}</h2>
                    <p class="m-0 customized-training-modal__text">
                        {{element.modal_text_middle}}
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="customized-training-modal" data-modal-customized-training>
    <div class="customized-training-modal__image">
        <img src="{{ TimberImage(element.image_bottom).src }}" alt="{{ TimberImage(element.image_bottom).alt }}">
        <div class="close-modal" data-modal-close>
            <svg class="icon-close">
                <use xlink:href="{{site.theme.link}}/frontend/icons/icons.svg#icon-close"></use>
            </svg>
        </div>
    </div>
    <div class="container p-0">
        <div class="row">
            <div class="col-md-8 offset-md-2">
                <div class="customized-training-modal__about text-align-center">
                    <h2 class="customized-training-modal__title">{{element.modal_title_bottom}}</h2>
                    <p class="m-0 customized-training-modal__text">
                        {{element.modal_text_bottom}}
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>