{* Slider *}
{*    {$banerBox}
    <div class="cb"></div>*}   
    
<!-- {* Ikonki odracane *}
<section id="intro" class="main style3 primary">
    <div class="container">
        <div class="rowIntro scrollHiddenOn" > 
            {literal}
                <script>
                    $(function () {
                        $('.containerSecurity').mouseenter(function () {
                            $('.front.security').transition({rotateY: '180deg', easing: 'ease', duration: 800});
                            $('.back.security').transition({rotateY: '0deg', easing: 'ease', duration: 800});
                        });
                        $('.containerSecurity').mouseleave(function () {
                            $('.back.security').transition({rotateY: '180deg', easing: 'ease', duration: 800});
                            $('.front.security').transition({rotateY: '0deg', easing: 'ease', duration: 800});
                        });

                        $('.containerEnergy').mouseenter(function () {
                            $('.front.energy').transition({rotateY: '180deg', easing: 'ease', duration: 800});
                            $('.back.energy').transition({rotateY: '0deg', easing: 'ease', duration: 800});
                        });
                        $('.containerEnergy').mouseleave(function () {
                            $('.back.energy').transition({rotateY: '180deg', easing: 'ease', duration: 800});
                            $('.front.energy').transition({rotateY: '0deg', easing: 'ease', duration: 800});
                        });

                        $('.containerProperty').mouseenter(function () {
                            $('.front.property').transition({rotateY: '180deg', easing: 'ease', duration: 800});
                            $('.back.property').transition({rotateY: '0deg', easing: 'ease', duration: 800});
                        });
                        $('.containerProperty').mouseleave(function () {
                            $('.back.property').transition({rotateY: '180deg', easing: 'ease', duration: 800});
                            $('.front.property').transition({rotateY: '0deg', easing: 'ease', duration: 800});
                        });
                    });

                </script>
            {/literal}

            <div class="col-4 col-s-12 posRel  containerSecurity">
                
                <section class="introBox security flipBox front">
                    <div class="securityIcon"></div>
                    <div class="lineTop lineTopSecurity"></div>
                    <header>
                         <div class="introBoxText">
                        {$objBox1->GetDescription()}
                         </div>
                    </header>
                    <div class="lineBottom lineBottomSecurity "></div>
                </section>
                {*<section class="introBox security flipBox back" {if $securityObj->GetSourceUrl()}onclick="window.location.href = 'http://{$securityObj->GetSourceUrl()}';" style="cursor: pointer;" {/if}>
                    {if $securityObj->GetTitle()}                        
                    <header>
                        <h2>{$securityObj->GetTitle()}</h2>
                    </header>
                    {/if}
                    <div class="introBoxText">
                        {$securityObj->GetDescription()}
                    </div>
                </section>*}
                <section class="introBox security flipBox back" {if $objBox1->GetSourceUrl()}onclick="window.location.href = 'http://{$objBox1->GetSourceUrl()|replace:"http://":""}';" style="cursor: pointer;" {/if} >
                    
                    <div class="securityIcon_back"></div>
                </section>
            </div>
            <div class="col-4 col-s-12 posRel containerEnergy">
                <section class="introBox energy flipBox front">                    
                    <div class="energyIcon"></div>
                    <div class="lineTop lineTopEnergy"></div>
                    <header>
                         <div class="introBoxText">
                        {$objBox2->GetDescription()}
                         </div>
                    </header>
                    <div class="lineBottom lineBottomEnergy"></div>
                </section>
                {*<section class="introBox energy flipBox back" {if $energyObj->GetSourceUrl()}onclick="window.location.href = 'http://{$energyObj->GetSourceUrl()}';" style="cursor: pointer;" {/if}>                    
                    {if $energyObj->GetTitle()}                        
                    <header>
                        <h2>{$energyObj->GetTitle()}</h2>
                    </header>
                    {/if}
                    <div class="introBoxText">
                        {$energyObj->GetDescription()}
                    </div>
                </section>*}
                <section class="introBox energy flipBox back" {if $objBox2->GetSourceUrl()}onclick="window.location.href = 'http://{$objBox2->GetSourceUrl()|replace:"http://":""}';" style="cursor: pointer;" {/if} >                    
                   <div class="energyIcon_back"></div>
                </section>
                
            </div>
            <div class="col-4 col-s-12 posRel containerProperty">
                <section class="introBox property flipBox front">                    
                    <div class="propertyIcon"></div>
                    <div class="lineTop lineTopProperty"></div>
                    <header>
                         <div class="introBoxText">
                        {$objBox3->GetDescription()}
                         </div>
                    </header>
                    <div class="lineBottom lineBottomProperty"></div>
                </section>
                {*<section class="introBox property flipBox back" {if $propertyObj->GetSourceUrl()}onclick="window.location.href = 'http://{$propertyObj->GetSourceUrl()}';" style="cursor: pointer;" {/if}>                      
                    {if $propertyObj->GetTitle()}                        
                    <header>
                        <h2>{$propertyObj->GetTitle()}</h2>
                    </header>
                    {/if}
                    <div class="introBoxText">
                        {$propertyObj->GetDescription()}
                    </div>
                </section>*}
                <section class="introBox property flipBox back" {if $objBox3->GetSourceUrl()}onclick="window.location.href = 'http://{$objBox3->GetSourceUrl()|replace:"http://":""}';" style="cursor: pointer;" {/if} >                      
                    <div class="propertyIcon_back"></div>
                </section>
            </div>
            <div class="cb"></div>
        </div>
    </div>
    <div class="cb"></div>
</section> !-->

{* Boxy *}


{foreach from=$arrayObjHomeArticle item=objArticleSG key=keyHome}

{literal}
<script>
    $(function () {
        $( window ).scroll(function() {
            if ($('.containerBoxNr{/literal}{$keyHome}{literal}').visible(true)) {
                $('.boxSG{/literal}{$keyHome}{literal}').addClass('scrollHiddenOff');
                $('.boxSG{/literal}{$keyHome}{literal}').removeClass('scrollHiddenOn');
            } else {
               $('.boxSG{/literal}{$keyHome}{literal}').addClass('scrollHiddenOn');
               $('.boxSG{/literal}{$keyHome}{literal}').removeClass('scrollHiddenOff');
            }  
        });
    });

</script>
{/literal}    
    
<section id="contentMain" class="main style3 primary containerBoxNr{$keyHome}">
    <div class="container trescSG boxSG{$keyHome}" >
		
        {if $objArticleSG->GetName()}
        <header>
                <h2>{$objArticleSG->GetName()}</h2>
        </header>
        {/if}
        <div class="trescSGText">
            {$objArticleSG->GetDescription()}
        </div>    
    </div>    
 </section>
{/foreach}
<div class="cb"></div>