description = "Porfolio Details 2 Section"

[viewBag]
==
<?php
function onStart()
{
    $this->addCss('assets/vendor/swipebox/css/swipebox.min.css');
    $this->addJs('assets/vendor/shuffle/shuffle.min.js');
    $this->addJs('assets/vendor/swipebox/js/jquery.swipebox.min.js');
}
?>
==
<div {% if data.section_portfoliodetails2_id %}id="{{ data.section_portfoliodetails2_id }}"{% endif %} class="portfoliodetails2 py-24 {{ data.section_portfoliodetails2_bg }}">
    <div class="{{ data.section_portfoliodetails2_container }}">
        <!-- Row  -->
        {% if data.section_portfoliodetails2_header or data.section_portfoliodetails2_subheader %}
        <div class="row mb-10 justify-content-center">
            <div class="col-md-7 text-center">
                <h2 class="pt-5 pb-4">{{ data.section_portfoliodetails2_header }}</h2>
                <h6 class="text-body line-height-normal">{{ data.section_portfoliodetails2_subheader }}</h6>
            </div>
        </div>
        {% endif %}
        <!-- Row  -->
        <!-- Row  -->
        <div class="row">
            {% set total = 12 %}
            {% set size_1 = data.section_portfoliodetails2_size %}
            {% set size_2 = total - size_1 %}
            {% set size_3 = data.section_portfoliodetails2_isize %}
            {% set size_4 = total - size_3 %}
            {% if size_1 == 12 %}
            {% set size_2 = total %}
            {% else %}
            {% set size_3 = total %}
            {% set size_4 = total %}
            {% endif %}
            <div class="col-md-{{ size_1 }} mb-7">
                <div id="portfolio-{{ data.section_portfoliodetails2_id }}" class="row overflow-visible">
                    {% set aos = ['fade-right', 'fade-down', 'fade-left', 'fade-right', 'fade-up', 'fade-left'] %}
                    {% for fields in data.section_portfoliodetails2_media %}
                    <!-- Column -->
                    <div class="{{ data.section_portfoliodetails2_column }} portfolio-item">
                        <div class="card border-0 mb-7 shadow overflow-hidden" {% if data.section_portfoliodetails2_animation %}data-aos="{{ aos[ loop.index0 % 6 ] }}" data-aos-duration="1200"{% endif %}>
                            <div class="img-hover position-relative">
                                <div class="portfolio-overlay position-absolute pos-0 bg-black-50 opacity-0 z-10 transition-40 overflow-hidden w-100 h-100">
                                    <div class="h-100 d-flex justify-content-center align-items-center">
										{% if data.section_portfoliodetails2_lightbox %}
                                        <a class="d-flex justify-content-center align-items-center rounded-circle w-10r h-10r p-0 btn btn-outline-light swipebox" caption="<b class='text-white display-11'>{{ fields.section_portfoliodetails2_ititle }}</b><br><em class='text-light'>{{ fields.section_portfoliodetails2_idesc }}</em>" href="
                                        {% if fields.section_portfoliodetails2_type == 'image' %}
                                        {{ fields.section_portfoliodetails2_image|media }}
                                        {% else %}
                                        {{ fields.section_portfoliodetails2_video }}
                                        {% endif %}
                                        ">
                                        {% if fields.section_portfoliodetails2_type == 'image' %}<i class="far fa-image"></i>{% else %}<i class="fas fa-video"></i>{% endif %}
                                        </a>
										{% endif %}
                                        {% if fields.section_portfoliodetails2_link is not empty %}
                                        <a class="d-flex justify-content-center align-items-center rounded-circle w-10r h-10r p-0 btn btn-outline-light ml-4" href="{{ fields.section_portfoliodetails2_clink ? fields.section_portfoliodetails2_clink : (fields.section_portfoliodetails2_plink | staticPage) }}">
                                            <i class="fas fa-link"></i>
                                        </a>
                                        {% endif %}
                                        <div class="port-hover-info position-absolute pos-x-0 pos-b-0 p-4 opacity-0 transition-40 w-75">
                                            {% if fields.section_portfoliodetails2_ititle %}<h5 class="portfolio-title font-weight-medium mb-0 text-white">{{ fields.section_portfoliodetails2_ititle }}</h5>{% endif %}
                                        </div>
                                    </div>
                                </div>
                                <img src="{{ fields.section_portfoliodetails2_image|media|resize(550, (fields.section_portfoliodetails2_height), { mode: 'crop' }) }}" class="w-100" alt="{{ fields.section_portfoliodetails2_ititle }}" />
                            </div>
                        </div>
                    </div>
                    <!-- Column -->
                    {% endfor %}
                </div>
            </div>
            <div class="col-md-{{ size_2 }} mb-7">
                <div class="row justify-content-center">
                    <div class="col-md-{{ size_4 }} mb-7 {{ data.section_portfoliodetails2_align }}" {% if data.section_portfoliodetails2_animation %}data-aos="fade-up" data-aos-duration="1200"{% endif %}>
                        <h2 class="mb-7">{{ data.section_portfoliodetails2_title }}</h2>
                        <h4 class="text-muted font-weight-light">{{ data.section_portfoliodetails2_subtitle }}</h4>
                        {{ data.section_portfoliodetails2_desc|raw }}
						{% if data.section_portfoliodetails2_btn_link is not empty %}
                        <a href="{{ data.section_portfoliodetails2_btn_clink ? data.section_portfoliodetails2_btn_clink : (data.section_portfoliodetails2_btn_plink | staticPage) }}" class="btn btn-default text-white btn-chevron px-10 mt-5">
                            <span>{{ data.section_portfoliodetails2_btn_label }} <i class="{{ data.section_portfoliodetails2_btn_icon }}"></i></span>
                        </a>
						{% endif %}
                    </div>
                    {% if data.section_portfoliodetails2_infos or data.section_portfoliodetails2_social %}
                    <div class="col-md-{{ size_3 }} mb-7">
                        {% for fields in data.section_portfoliodetails2_infos %}
                        <div class="mb-7" {% if data.section_portfoliodetails2_animation %}data-aos="fade-up" data-aos-duration="1200"{% endif %}>
                            {% if fields.section_portfoliodetails2_info_title %}<h4 class="mb-5">{{ fields.section_portfoliodetails2_info_title }}</h4>{% endif %}
                            <ul class="list-inline">
                            {% for info in fields.section_portfoliodetails2_info %}
                            <li class="py-2 d-flex align-items-center">
                                {% if info.section_portfoliodetails2_info_url %}<a class="d-flex" href="{{ info.section_portfoliodetails2_info_url }}">{% endif %}
                                    {% if info.section_portfoliodetails2_info_icon %}<i class="{{ info.section_portfoliodetails2_info_icon }} d-flex justify-content-center align-items-center rounded-circle bg-default text-white w-8r h-8r mr-3"></i>{% endif %}
                                    {{ info.section_portfoliodetails2_info_text }}
                                {% if info.section_portfoliodetails2_info_url %}</a>{% endif %}
                            </li>
                            {% endfor %}
                            </ul>
                        </div>
                        {% endfor %}
                        {% if data.section_portfoliodetails2_social %}
                        <div class="mb-7" {% if data.section_portfoliodetails2_animation %}data-aos="fade-up" data-aos-duration="1200"{% endif %}>
                            {% if data.section_portfoliodetails2_stitle %}<h4 class="mb-5">{{ data.section_portfoliodetails2_stitle }}</h4>{% endif %}
                            <ul class="list-inline">
                                {% for fields in data.section_portfoliodetails2_social %}
                                <li class="list-inline-item">
                                    <a class="d-flex justify-content-center align-items-center btn btn-outline-default rounded-circle p-1 w-10r h-10r" href="{{ fields.section_portfoliodetails2_social_url }}">
                                        <i class="{{ fields.section_portfoliodetails2_social_icon }}"></i>
                                    </a>
                                </li>
                                {% endfor %}
                            </ul>
                        </div>
                        {% endif %}
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
        <!-- Row  -->
    </div>
</div>

{% put scripts %}
<script>
{% if data.section_portfoliodetails2_media %}
var Shuffle = window.Shuffle;
window.shuffleInstance = new Shuffle(document.querySelector('#portfolio-{{ data.section_portfoliodetails2_id }}'), {
	itemSelector: '.portfolio-item',
	sizer: '.my-sizer-element',
	columnWidth: 0,
	easing: 'cubic-bezier(0.4, 0.0, 0.2, 1)',
	gutterWidth: 0,
	speed: 250,
	staggerAmount: 15,
	staggerAmountMax: 150,
	useTransforms: true,
});
{% endif %}

{% if data.section_portfoliodetails2_lightbox %}
;( function( $ ) {
    $( '.swipebox' ).swipebox( {
		hideCloseButtonOnMobile : false, // true will hide the close button on mobile devices
		removeBarsOnMobile : true, // false will show top bar on mobile devices
		hideBarsDelay : 5000, // delay before hiding bars on desktop
		videoMaxWidth : 1600 // videos max width
    } );
} )( jQuery );
{% endif %}
</script>
{% endput %}