{% extends 'base.html.twig' %}

{% block title %}Steve Krack{% endblock %}



{% block body %}

<style>
   
    
 

{# element.style {
    overflow: hidden;
    height: 100%;
} #}


</style>


{# Desk Version d-md-table-cell #}

 <!--MAIN BODY-->
<div class="container-fluid no-padd margin-md-90t d-none d-md-table-cell" >
    <div data-vc-full-width="true" data-vc-full-width-init="false" data-vc-stretch-content="true" class="row-fluid no-padd ">
        <div class="wpb_column vc_column_container vc_col-sm-12 ">
        
            <div class="split-slider ">
                <div class="split-wrapper split-wrapper--desctop full-height-window-hard js-split-slider "
                    data-style-header="" data-nav="1" data-nav-pos="right" data-pagination-color="#7e7d7d,#7e7d7d,#7e7d7d,#7e7d7d,"
                    data-pagination-color-active="#fff,#fff,#fff,#fff,">

                    <div class="split-ms-left " style="background-color: transparent">

                        {% for project in projects  %}
                        {% set counter = ( counter | default(0) ) + 1 %}
                        <div class="split-ms-section" style="background-color: transparent">
                            {# <div class="project-detail-full-overlay" style="z-index:1"></div> #}
                            {% if loop.first %}
                            <img data-src="{{ asset('assets/img/projects/' ~ project.photo1 ) }}" class="s-img-switch lazy"
                                alt="banner image"> 
                            {% else %}
                            <img data-src="{{ asset('assets/img/projects/' ~ project.photo1 ) }}" class="s-img-switch lazy"
                                alt="banner image"> 
                            {% endif %}
                                <div class="project-detail-full-overlay">
                                    {% if loop.first %}
                                    <div class='icon-scroll'></div>
                                        {% endif %}
                                </div>
                        </div>
                        {% endfor %}

                    </div>

                    <div class="split-ms-right ">
                        {% for project in projects %}
                        {% set counter = ( counter | default(0) ) + 1 %}
                        <div class="split-ms-section marg-item" style="background-color: transparent">
                            <div class="content-wrap">
                                <div class="project-filmstrip-item-content">
                                        
                                    <a href="{{ path('project', { url: project.url  }) }}" target="_blank"
                                        class="project-filmstrip-item-link a-btn-arrow" style="    height: 100vh;width: 100vw; " ></a>
                                        {# <div class="project-detail-fullscreen-content-descr content" >
                                            <p style="line-height: 14px;">{{ project.description }} </p>
                                        </div> #}
                                       
                                        <h6 class="project-filmstrip-item-title text-white text-uppercase " style="bottom: 2rem;position: absolute;    width: 100%;">{{ project.label }}<br><br><br> <p class="text-left text-white" style="line-height: 14px;">{{ project.description }}<br><br><br><br> </p></h6>
                                    

                                
                            </div>

                            </div>
                        </div>
                        {% endfor %}
            

                    </div>
                </div>

            </div>

                
        </div>
    </div>
</div>
<!--/MAIN BODY-->


  <div class="container-fluid no-padd ">
        <div class="row-fluid">
            <div class="wpb_column vc_column_container col-sm-12 no-padd">
                <div class="project-detail-parallax" >

                    {% for project in projects  %}
                    {% set counter = ( counter | default(0) ) + 1 %}
                    <a class=" text-white" href="{{ path('project', { url: project.url  }) }}">
                        <div class="project-detail-parallax-item ">
                            <div class="project-detail-full-overlay" style="z-index:1">
                                  {% if loop.first %}
                            <div class='icon-scroll'></div>
                                {% endif %}
                            </div>
                            <div class="detail-parallax-item-bg js-detail-parallax-item-bg ">
                                
                                <img src="{{ asset('assets/img/projects/' ~ project.photo1 ) }}"
                                    class="attachment-full size-full" alt="banner image" />
                                
                            </div>

                            <div class="detail-parallax-item-header">
                                
                                <h6 class="text-white text-uppercase text-right" style="letter-spacing:0;font-weight:300!important">
                                    {{ project.label}} </h6>
                                    <p class="text-right text-white" style="line-height: 14px;">{{ project.description }} </p>
                                
                            </div>             

                        </div>
                        
                    </a>
                    {% endfor %}



                    
                </div>

            </div>
        </div>
    </div>
    <!--/MAIN BODY-->
    

{# <div class="content-wrap d-none">
<div class="swiper text-white swiper-fullscreen-vertical" data-swiper-slides="1" data-swiper-speed="600" data-swiper-vertical="true">
    <div class="swiper-container">
        <div class="swiper-wrapper">
            
            {% for project in projects  %}
            {% set counter = ( counter | default(0) ) + 1 %}
            <div class="swiper-slide" id="{{counter}}"  data-swiper-autoplay="2000" >
                
                <div class="card-wrapper h-100">

                    <a class="card card-fullscreen text-white" href="{{ path('project', { url: project.url  }) }}">
                        
                        <span class="card-img">
                            <div class=" text-white"></div>
                            
                                <img src="{{ asset('assets/img/projects/' ~ project.photo1 ) }}" 
                                alt="{{ project.label}}">
                        
                            <span class="background-color" style="background-color: rgba(14, 14, 14, .2);"></span>
                        </span>
                        <span class="card-img-overlay container">
                            <p class="card-title h1 mb-0 pr-0" style="font-size:14px;letter-spacing:0">{{ project.label}}</p>
                            
                        </span>
                    </a>
                    <div class="card-social-container container">
                        <ul class="card-social nav nav-gap-md align-items-center flex-column text-white">
                        </ul>
                    </div>
                </div>
            </div>
            {% endfor %}
    </div>
</div>
</div> #}





{% endblock %}