<div class="checkImg" id="fullpages">
    <!--Home-->
    <div class="section fp-noscroll" id="section0">
        <div class="owl-carousel owl-theme" id="topSlider">
            {foreach from=$slider item=slid}
            <div class="item relative">
                <img src="{$pathimg}{$slid.slidImageMob}">
                <figure class="slider-greeting absolute is-animated text-white py-5 px-4 d-block">
                    {if !empty($slid.slidTitle)}<div class="f-title h3 relative text-uppercase mb-3 is-animated">{$slid.slidTitle|html_entity_decode}</div>{/if}
                    <p class="f-text h6 relative is-animated">{$slid.slidDescription|html_entity_decode}</p>
                </figure>
            </div>
            {/foreach}
        </div>
    </div>

    <!--About Us-->
    <div class="section" id="section1">
        <div class="container-fluid is-animated relative py-5">
            <div class="pb-5 is-loading">
                <div class="mb-5">
                    <div class="heading text is-animated text-hs h3 font-weight-bold mb-5">
                        <small class="font-md text-secondary text-uppercase letter-space-1 mb-2 d-block">{$content1.mconMenuName}</small>
                        {$content1.mconTitle}
                    </div>
                    <div class="imgCont is-animated mb-5">
                        <img src="{$pathimg}{$content1.mconImage}" alt="{$content1.mconTitle}">
                    </div>
                    <div class="intro is-animated">
                        <div class="text-detail">{$content1.mconDescription|html_entity_decode}</div>
                    </div>
                </div>
            </div>
            <div class="row mxm-2 awards checkImg mt-5 pt-5">
                {foreach from=$award item=awd}
                <div class="col-6 col-sm-4 px-1 mb-2">
                    <div class="imgCont pointer-grabs">
                        <img src="{$pathimg}{$awd.awarImage}" alt="{$awd.awarTitle}" class="font-xs">
                    </div>
                </div>
                {/foreach}
            </div>
        </div>
    </div>

    <!--Practices-->
    <div class="section" id="section2">
        <div class="slide scroll" data-anchor="practices">
            <div class="container-fluid is-animated relative py-5">
                <div class="heading text-center is-animated text-hs h3 font-weight-bold mb-4">
                    <small class="font-md text-secondary text-uppercase letter-space-1 mb-2 d-block">{$content2.mconMenuName}</small>
                    {$content2.mconTitle}
                </div>
                <div class="text-detail text-center is-animated mb-5">{$content2.mconDescription|html_entity_decode}</div>

                <div class="row practices-list text-center justify-content-center">
					{foreach from=$list_practise key=k_practise item=practise}
                    <div class="col-auto col-sm-6 mb-1 list is-animated {if $k_practise%2 == 0} {/if}">
                        <figure class="effect-apollo is-loading rounded">
                            <div class="imgCont {if empty($practise.lpraIcon)}bg-white text-center rounded no-image{/if} relative">
                                <img class="font-xs d-inline-block" src="{$pathimg}{if !empty($practise.lpraIcon)}{$practise.lpraIcon}{else}case.png{/if}" alt="{$practise.lpraTitle}"/>
                            </div>
                            <figcaption>
                                <h2 class="h4">{$practise.lpraTitle}</h2>
                                <p class="h6 text-warning">Learn More <i class="fa fa-chevron-circle-right"></i></p>
                                <a href="{$path}/#practices/{$practise.lpraSanitize}"></a>
                            </figcaption>
                        </figure>
                    </div>
					{/foreach}
                </div>

                <div class="row mxm-2 awards checkImg mt-5 pt-5">
                    {foreach from=$award item=awd}
                    <div class="col-6 col-sm-4 px-1 mb-2">
                        <div class="imgCont pointer-grabs">
                            <img src="{$pathimg}{$awd.awarImage}" alt="{$awd.awarTitle}" class="font-xs">
                        </div>
                    </div>
                    {/foreach}
                </div>
            </div>
        </div>

        <!--Practice Detail-->
		{foreach from=$list_practise key=k_practise item=practise}
        <div class="slide scroll" data-anchor="{$practise.lpraSanitize}">
            <div class="container-fluid is-animated py-5 relative">
                <div class="heading-box is-animated mb-4">
                    <a href="{$path}/#practices" class="font-md text-uppercase text-secondary letter-space-1 mb-2 d-inline-block"><i class="fa fa-chevron-circle-left mr-2"></i>Practices</a>
                    <h2 class="heading h3 text-hs font-weight-bold d-block">{$practise.lpraTitle}</h2>
                </div>
                <div class="text-detail is-animated mb-5">{$practise.lpraDescription|html_entity_decode}</div>

                <div class="row practices-list is-loading text-center">
                    {foreach from=$list_practise item=prac}
                    <div class="col-auto col-sm-6 mb-1 list is-animated">
                        <figure class="effect-apollo rounded list  is-animated mb-3 {if $prac.lpraSanitize == $practise.lpraSanitize}active{/if}">
                            <div class="imgCont {if empty($practise.lpraIcon)}bg-white text-center rounded no-image{/if} relative">
                                <img class="font-xs d-inline-block" src="{$pathimg}{if !empty($prac.lpraIcon)}{$prac.lpraIcon}{else}case.png{/if}" alt="{$prac.lpraTitle}"/>
                            </div>
                            <figcaption>
                                <h2 class="h4">{$prac.lpraTitle}</h2>
                                <p class="h6 text-warning">Learn More <i class="fa fa-chevron-circle-right"></i></p>
                                <a class="{if $prac.lpraSanitize == $practise.lpraSanitize}default{/if}" href="{if $prac.lpraSanitize != $practise.lpraSanitize}{$path}/#practices/{$prac.lpraSanitize}{else}javascript:void(0){/if}">View more</a>
                            </figcaption>
                        </figure>
                    </div>
                    {/foreach}
                </div>

                <div class="row mxm-2 awards checkImg mt-5 pt-5">
                    {foreach from=$award item=awd}
                    <div class="col-6 col-sm-4 px-1 mb-2">
                        <div class="imgCont pointer-grabs">
                            <img src="{$pathimg}{$awd.awarImage}" alt="{$awd.awarTitle}" class="font-xs">
                        </div>
                    </div>
                    {/foreach}
                </div>
            </div>
        </div>
		{/foreach}
    </div>

    <!--Lawyers-->
    <div class="section" id="section3">
        <div class="slide scroll" data-anchor="lawyers">
            <div class="container-fluid is-animated relative py-5">
                <h2 class="heading text-center is-animated text-hs h3 font-weight-bold mb-4">
                    <small class="font-md text-secondary text-uppercase letter-space-1 mb-2 d-block">{$content3.mconMenuName}</small>
                    {$content3.mconTitle}
                </h2>
                <div class="text-detail text-center is-animated mb-5">
                    {$content3.mconDescription|html_entity_decode}
                </div>
				{foreach from=$list_lawyer item=lawyer key=k_law}
				{if $k_law < 3}
					{if $k_law == 1}
					<div class="text-center justify-content-center mb-4">
					{/if}
                        <div class="sub-heading h5 font-weight-bold text-center mb-3 is-animated">{$type_name[$k_law]}</div>
                        <div class="row mxm-2 justify-content-center is-animated partner-list mb-4">
                            {foreach from=$lawyer item=laws}
                            <div class="list col-6 col-sm-6 px-1 mb-3">
                                <a href="{$path}/#lawyers/{$laws.lawySanitize}" class="relative text-center d-block">
                                    <div class="card-header bg-transparent relative border-bottom-0 p-0">
                                        <div class="imgCont d-inline-block"><img class="card-img" src="{$pathimg}{$laws.lawyFoto}" alt="{$laws.lawyName|html_entity_decode}"></div>
                                        <div class="card-title font-md text-uppercase font-weight-bold pt-2 mb-0">{$laws.lawyName|html_entity_decode}</div>
                                    </div>
                                </a>
                            </div>
                            {/foreach}
                        </div>
					{if $k_law == 2}	
					</div>
					{/if}
				{else}

                <div class="sub-heading h5 font-weight-bold text-center mb-3 is-animated">{$type_name[$k_law]}</div>
                <div class="row mxm-2 text-center justify-content-center is-animated associates-list">
                    {foreach from=$lawyer item=laws}
					<div class="list col-6 col-sm-6 px-1 mb-3">
                        <a href="{$path}/#lawyers/{$laws.lawySanitize}" class="relative text-center d-block">
                            <div class="card-header bg-transparent relative border-bottom-0 p-0">
                                <div class="imgCont d-inline-block"><img class="card-img" src="{$pathimg}{$laws.lawyFoto}" alt="{$laws.lawyName|html_entity_decode}"></div>
                                <div class="card-title text-uppercase font-md font-weight-bold pt-1 px-3 mb-0">{$laws.lawyName|html_entity_decode}</div>
                            </div>
                        </a>
                    </div>
					{/foreach}
				</div>
				{/if}
				{/foreach}

                <div class="row mxm-2 awards checkImg mt-5 pt-5">
                    {foreach from=$award item=awd}
                    <div class="col-6 col-sm-4 px-1 mb-2">
                        <div class="imgCont pointer-grabs">
                            <img src="{$pathimg}{$awd.awarImage}" alt="{$awd.awarTitle}" class="font-xs">
                        </div>
                    </div>
                    {/foreach}
                </div>
            </div>
        </div>

        <!--Lawyer Detail-->
		{foreach from=$list_lawyer item=lawyer key=k_law}
			{foreach from=$lawyer item=laws}
            <div class="slide law-detail" data-anchor="{$laws.lawySanitize}">
                <div class="container-fluid is-animated py-5 relative">
                    <div class="heading-box text-center is-animated mb-5">
                        <a href="{$path}/#lawyers" class="font-md text-secondary text-uppercase letter-space-1 mb-2 d-inline-block"><i class="fa fa-chevron-circle-left mr-1"></i>Lawyers</a>
                        <h2 class="heading text-center h3 font-weight-bold mb-3 d-block">{$laws.lawyName|html_entity_decode}</h2>
                    </div>
                    <div class="imgCont rounded text-center mb-4 mx-auto d-block is-animated">
                        <img src="{$pathimg}{$laws.lawyFoto}" alt="{$laws.lawyName}">
                    </div>
                    <div class="text-detail is-animated mb-4">{$laws.lawyEducationBackground|html_entity_decode}</div>

                    <div class="short-info is-animated mb-2">
                        <label class="text-hs font-weight-bold">Education Background</label>
                        <div>{if !empty($laws.lawyEducation)}{$laws.lawyEducation|html_entity_decode}{else}-{/if}</div>
                    </div>
                    <div class="short-info is-animated mb-2">
                        <label class="text-hs font-weight-bold">Professional Membership</label>
                        <div>{if !empty($laws.lawyExpertise)}{$laws.lawyExpertise|html_entity_decode}{else}-{/if}</div>
                    </div>
                    <div class="short-info is-animated mb-2">
                        <label class="text-hs font-weight-bold">Email</label>
                        <div>{if !empty($laws.lawyEmail)}<a href="mailto:{$laws.lawyEmail}" target="_top">{$laws.lawyEmail}</a>{else}-{/if}</div>
                    </div>
                </div>
                <div class="container-fluid px-0 mt-5">
                    <div class="bg-light px-3 py-5">
                        {foreach from=$list_lawyer item=lawyer_2 key=k_law_2}
                        <div class="is-animated nav-list pb-3 mb-3">
                            <div class="h5 text-hs text-center font-weight-bold mb-3">{$type_name[$k_law_2]}</div>
                            <div class="row mxm-2 justify-content-center font-md font-weight-bold text-uppercase associates-list">
                                {foreach from=$lawyer_2 item=laws_2}
                                <div class="list col-6 col-sm-6 px-1 mb-4">
                                    <a href="{if $laws_2.lawySanitize != $laws.lawySanitize}{$path}/#lawyers/{$laws_2.lawySanitize}{else}javascript:void(0){/if}" class="relative px-0 d-inline-block {if $laws_2.lawySanitize == $laws.lawySanitize}default active{/if}">
                                        <div class="card-header bg-transparent text-center relative border-bottom-0 p-0">
                                            <div class="imgCont">
                                                <img class="card-img" src="{$pathimg}{$laws_2.lawyFoto}" alt="{$laws_2.lawyName|html_entity_decode}">
                                            </div>
                                            <div class="card-title text-uppercase font-weight-bold pt-2 px-3 mb-0">{$laws_2.lawyName|html_entity_decode}</div>
                                        </div>
                                    </a>
                                </div>
                                {/foreach}
                            </div>
                        </div>
                        {/foreach}
                    </div>

                    <div class="row mxm-2 awards checkImg mt-5 pt-5">
                        {foreach from=$award item=awd}
                        <div class="col-6 col-sm-4 px-1 mb-2">
                            <div class="imgCont pointer-grabs">
                                <img src="{$pathimg}{$awd.awarImage}" alt="{$awd.awarTitle}" class="font-xs">
                            </div>
                        </div>
                        {/foreach}
                    </div>
                </div>
            </div>
			{/foreach}
		{/foreach}
    </div>

    <!--News & Publications-->
    <div class="section bg-light" id="section4">
        <div class="container-fluid is-animated relative py-5">
            <div class="text-center mb-5">
                <div class="heading text-center is-animated text-hs h3 font-weight-bold mb-4">
                    <small class="font-md text-secondary text-uppercase letter-space-1 mb-2 d-block">{$content4.mconMenuName}</small>
                    {$content4.mconTitle|html_entity_decode}
                </div>
                <div class="text-detail text-center is-animated mb-3">{$content4.mconDescription|html_entity_decode}</div>
            </div>
            <div class="article-list">
				{foreach from=$list_news item=news}
                <div class="list is-animated mb-4">
                    <div class="card border">
                        <div class="card-horizontal">
                            <div class="card-body">
                                <h2 class="card-title h5 font-weight-bold mb-2"><a class="text-hs" href="{$news.url}">{$news.newsTitle}</a></h2>
                                <div class="card-text text-detail mb-3">{$news.subject}</div>
                                <div class="font-md text-secondary">
                                    <a class="text-orangered" href="{$news.urlcreator}"><i class="fa fa-user mr-1"></i>{$news.creator}</a>
                                    <span class="ml-4"><i class="fa fa-clock-o mr-2"></i>{$news.newsReleaseDate|date_format:"%d %b %Y"}</span>
                                </div>
                            </div>
                            <!--<div class="card-header bg-transparent border-bottom-0 p-0">-->
                                <!--<a href="{$news.url}" class="imgCont rounded font-xs d-block">-->
                                    <!--<img src="{$pathimg400}{$news.newsImage2}" alt="{$news.newsTitle}">-->
                                <!--</a>-->
                            <!--</div>-->
                        </div>
                    </div>
                </div>
				{/foreach}
            </div>

            <div class="row mxm-2 awards checkImg mt-5 pt-5">
                {foreach from=$award item=awd}
                <div class="col-6 col-sm-4 px-1 mb-2">
                    <div class="imgCont pointer-grabs">
                        <img src="{$pathimg}{$awd.awarImage}" alt="{$awd.awarTitle}" class="font-xs">
                    </div>
                </div>
                {/foreach}
            </div>
        </div>
    </div>

    <!--Careers-->
    <div class="section bg-light" id="section5">
        <div class="container-fluid is-animated relative py-5">
            <div class="heading text-center is-animated text-hs h3 font-weight-bold mb-4">
                <small class="font-md text-secondary letter-space-1 text-uppercase mb-2 d-block">{$content5.mconMenuName}</small>
                {$content5.mconTitle}
            </div>
            <div class="text-detail text-center is-animated mb-5">{$content5.mconDescription|html_entity_decode}</div>

            <div class="careers-list pb-5">
				{foreach from=$list_career item=career}
                <div class="list is-animated mb-4">
                    <div class="card bg-white relative over-hidden">
                        <div class="card-body relative">
                            <h2 class="card-title h5 font-weight-bold mb-2"><a href="{$career.url}">{$career.careJobsTitle}</a></h2>
                            <div class="card-text font-md mb-2">{$career.subject}</div>
                            <div class="font-md mb-3">
                                <span class="mr-2"><i class="fa fa-flag text-secondary mr-1"></i> {$career.jposName}</span>
                                <span><i class="fa fa-clock-o mr-1"></i> {if !empty($career.careYearRound)}{$career.careYearRound} Year{else}Fresh Graduate{/if}</span>
                            </div>
                            <a href="{$career.url}" class="btn btn-hs font-weight-bold text-uppercase font-md px-4">Apply Now <i class="fa fa-chevron-circle-right ml-1"></i></a>
                        </div>
                    </div>
                </div>
				{/foreach}
            </div>

            <div class="row mxm-2 awards checkImg mt-5 pt-5">
                {foreach from=$award item=awd}
                <div class="col-6 col-sm-4 px-1 mb-2">
                    <div class="imgCont pointer-grabs" data-toggle="popover" data-html="true" data-placement="top" title="{$awd.awarTitle}" data-content="<span class='imgCont d-block'><img src='{$pathimg}{$awd.awarImage}'</span>">
                        <img src="{$pathimg}{$awd.awarImage}" alt="{$awd.awarTitle}" class="font-xs">
                    </div>
                </div>
                {/foreach}
            </div>
        </div>
    </div>

    <!--Contact Us-->
    <div class="section bg-light" id="section6">
        <div class="container-fluid relative is-animated px-4 py-5">
            <div class="imgCont is-animated text-center mb-4 d-block">
                <img class="card-img" src="{$pathimg}menara_pertiwi.jpg" alt="">
            </div>

            <div class="heading is-animated text-hs h4 font-weight-bold text-uppercase mb-5">
                <small class="font-sm text-secondary letter-space-2 mb-2 d-block">{$content6.mconMenuName}</small>
                {$content6.mconTitle}
            </div>
            <div class="intro is-animated">
                <div class="mb-5">
                    <!--<i class="fa fa-building fa-2x text-hs mb-1 d-block"></i>-->
                    <div class="font-weight-bold mb-1">Office Address</div>
                    <address class="text-left d-block">
                        {$global_setting.gsetAddress|html_entity_decode}
                        <span class="btn btn-sm btn-hs px-2 py-0" data-toggle="modal" data-target="#maps"><i class="fa fa-map-marker mr-1"></i> Open Maps</span>
                    </address>
                    <div class="clearfix"></div>
                </div>
                <div class="row mxm-2">
                    <div class="col-12 text-center px-1 mb-3">
                        <div class="bg-white border py-3 px-4">
                            <i class="fa fa-phone fa-2x text-hs mb-1 d-block"></i>
                            <div class="font-weight-bold mb-1">Phone Number</div>
                            {$global_setting.gsetPhone}
                        </div>
                    </div>
                    <div class="col-12 text-center px-1 mb-3">
                        <div class="bg-white border py-3 px-4">
                            <i class="fa fa-fax fa-2x text-hs mb-1 d-block"></i>
                            <div class="font-weight-bold mb-1">Fax Number</div>
                            {$global_setting.gsetFax}
                        </div>
                    </div>
                </div>
            </div>

            <div class="forms border rounded shadow-sm is-animated w-75 p-4 d-none">
                <div class="h4 mb-3 text-center">APPLICATION FORM</div>
                <form name="" method="post" class="apps-form font-md">
                    <input type="hidden" name="id" id="id-careers">
                    <div class="form-group">
                        <label class="sr-only" for="fullname">Fullname</label>
                        <input type="text" class="form-control font-md" id="fullname" placeholder="Fullname">
                    </div>
                    <div class="form-group">
                        <div class="input-group date" data-provide="datepicker">
                            <input type="text" name="birthdate" id="birthdate" class="form-control" placeholder="Birthdate">
                            <div class="input-group-addon">
                                <span class="fa fa-calendar"></span>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="sr-only" for="email">Email</label>
                        <input type="email" class="form-control font-md" id="email" placeholder="Email">
                    </div>
                    <div class="form-group">
                        <label class="sr-only" for="email">Phone Number</label>
                        <input type="text" class="form-control font-md" id="phone" placeholder="Phone Number">
                    </div>
                    <div class="form-group">
                        <label class="sr-only" for="cv">Upload CV</label>
                        <div class="custom-file">
                            <input type="file" class="custom-file-input" id="cv" aria-describedby="cv">
                            <label class="custom-file-label" for="cv">Upload CV</label>
                        </div>
                    </div>
                    <div class="form-group mt-4">
                        <button type="submit" class="btn btn-hs font-md text-uppercase btn-block px-4"><i class="fa fa-send-o mr-2"></i>Submit</button>
                    </div>
                </form>
            </div>

            <div class="row mxm-2 awards checkImg mt-5 pt-5">
                {foreach from=$award item=awd}
                <div class="col-6 col-sm-4 px-1 mb-2">
                    <div class="imgCont pointer-grabs">
                        <img src="{$pathimg}{$awd.awarImage}" alt="{$awd.awarTitle}" class="font-xs">
                    </div>
                </div>
                {/foreach}
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="maps" tabindex="-1" role="dialog" aria-labelledby="mapsTitle" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-body">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <iframe width="100%" height="450" frameborder="0" style="border:0" allowfullscreen src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3966.257370524116!2d106.82317706436062!3d-6.229761462743225!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e69f1502dc123a3%3A0x6b6492b1d51469c1!2sHendra+Soenardi!5e0!3m2!1sen!2sid!4v1554692528741!5m2!1sen!2sid"></iframe>
            </div>
        </div>
    </div>
</div>

{literal}
<script type="text/javascript">
    // var firstUrl = window.location.href;
    // if(!firstUrl.match('#')) {
    //     var splitUrl = firstUrl.split(".com/");
    //     if(typeof splitUrl[1] != 'undefined') {
    //         location.href = splitUrl[0] +".com/#"+ splitUrl[1];
    //     }
    // }
</script>
<script type="text/javascript">
    var section = $('.section'),
        footer = $('footer'),
        checkImg    = $('.checkImg'),
        progress    = $('progress'),
        blurImg     = $('.blur-image'),
        ceking      = false,
        supportsProgress = progress[0] && /*IE does not support progress*/ progress[0].toString().indexOf('Unknown') === -1;

    // Call images loader
    checkImg.imagesLoaded().progress(onProgress);

    $('#fullpages').fullpage({
        licenseKey: 'OPEN-SOURCE-GPLv3-LICENSE',
        anchors: ['home','about-us','practices','lawyers','news-publications','careers','contact-us'],
        menu: '#menu',
        paddingTop: '56px',
        paddingBottom: '48px',
        lazyLoad: true,
        scrollingSpeed: 1500,
        scrollOverflow: true,
        // scrollOverflowOptions: {
        //     click: true
        // },
        css3: true,
        fadingEffect: false,
        afterRender: function(){
            var wh = $(window).outerHeight(),
                nh = $('.navbar').outerHeight(),
                fh = $('footer').outerHeight(),
                cal = wh-nh-fh;
            $('#topSlider').find('.item').css('height', cal);
            //console.log('After Render');
        },
        onLeave: function(origin, destination, direction){
            section.find('.container-fluid').css({'animation-delay':'300ms', 'opacity': 0});
            section.find('.is-animated').removeClass('animated fadeInLeft fadeInRight fadeInUp fadeInDown').css({'animation-delay':'300ms', 'opacity': 0});

            if(origin.anchor == "home"){
                $(destination.item).find('.owl-carousel').removeClass('animated fadeInRight').css({'animation-delay':'600ms', 'opacity': 0});
            }
            //console.log('ON LEAVE', 'Origin:',origin, 'Destinatiion:' ,destination, 'Direction:', direction);
        },
        afterLoad: function(origin, destination, direction){
            var par = $('.section.active');
            fullpage_api.setKeyboardScrolling(false);
            fullpage_api.setAllowScrolling(false);
            $(destination.item).find('.is-animated').removeClass('animated fadeInLeft fadeInRight fadeInUp fadeInDown').css({'animation-delay':'300ms', 'opacity': 0});

            if(destination.anchor == "home"){
                fullpage_api.setAllowScrolling(true, 'left');
                fullpage_api.setAllowScrolling(true, 'right');
                carousel('#topSlider', true, false, true, 1, 5000);
                $(destination.item).find('.owl-carousel').addClass('animated fadeInRight').css({'animation-delay':'600ms', 'opacity': 1});
            }
            if(destination.anchor == "about-us"){
                $(destination.item).find('.container-fluid').css({'animation-delay':'300ms', 'opacity': 1});
                $(destination.item).find('.heading').addClass('animated fadeInRight').css({'animation-delay':'300ms', 'opacity': 1});
                $(destination.item).find('.intro').addClass('animated fadeInRight').css({'animation-delay':'500ms', 'opacity': 1});
                $(destination.item).find('.imgCont').addClass('animated fadeInRight').css({'animation-delay':'700ms', 'opacity': 1});
                $(destination.item).find('.owl-carousel').addClass('animated fadeInRight').css({'animation-delay':'900ms', 'opacity': 1});
                carousel('#testimonialSlider', false, true, true, 2);
            }
            if(destination.anchor == "practices"){
                console.log('Active:',destination.item);
                $(destination.item).find('.slide.active .container-fluid').css({'animation-delay':'300ms', 'opacity': 1});
                $(destination.item).find('.slide.active .heading').removeClass('animated fadeInDown').addClass('animated fadeInDown').css({'animation-delay':'300ms', 'opacity': 1});
                $(destination.item).find('.slide.active .text-detail').addClass('animated fadeInDown').css({'animation-delay':'500ms', 'opacity': 1});
                $(destination.item).find('.slide.active .list').addClass('animated fadeInDown').css({'animation-delay':'700ms', 'opacity': 1});
            }
            if(destination.anchor == "lawyers"){
                console.log('Active:',destination.item);
                $(destination.item).find('.slide.active .container-fluid').css({'animation-delay':'300ms', 'opacity': 1});
                $(destination.item).find('.slide.active .heading').removeClass('animated fadeInDown').addClass('animated fadeInDown').css({'animation-delay':'300ms', 'opacity': 1});
                $(destination.item).find('.slide.active .sub-heading').addClass('animated fadeInDown').css({'animation-delay':'500ms', 'opacity': 1});
                $(destination.item).find('.slide.active .partner-list').addClass('animated fadeInDown').css({'animation-delay':'700ms', 'opacity': 1});
                $(destination.item).find('.slide.active .associates-list').addClass('animated fadeInDown').css({'animation-delay':'900ms', 'opacity': 1});
            }
            if(destination.anchor == "news-publications"){
                console.log('Active:',destination.item);
                $(destination.item).find('.container-fluid').css({'animation-delay':'300ms', 'opacity': 1});
                $(destination.item).find('.heading').addClass('animated fadeInDown').css({'animation-delay':'300ms', 'opacity': 1});
                $(destination.item).find('.text-detail').addClass('animated fadeInDown').css({'animation-delay':'500ms', 'opacity': 1});
                $(destination.item).find('.article-list .list').each(function (i, el) {
                    var delays = 300 + (i * 200) + 'ms';
                    $(el).addClass('animated fadeInDown').css({'animation-delay':delays, 'opacity': 1})
                });
            }
            if(destination.anchor == "careers"){
                console.log('Active:',destination.item);
                $(destination.item).find('.container-fluid').css({'animation-delay':'300ms', 'opacity': 1});
                $(destination.item).find('.heading').addClass('animated fadeInDown').css({'animation-delay':'300ms', 'opacity': 1});
                $(destination.item).find('.text-detail').addClass('animated fadeInDown').css({'animation-delay':'500ms', 'opacity': 1});
                $(destination.item).find('.careers-list .list').each(function (i, el) {
                    var delays = 300 + (i * 200) + 'ms';
                    $(el).addClass('animated fadeInDown').css({'animation-delay':delays, 'opacity': 1})
                });
            }
            if(destination.anchor == "contact-us"){
                $(destination.item).find('.container-fluid').css({'animation-delay':'300ms', 'opacity': 1});
                $(destination.item).find('.heading').addClass('animated fadeInRight').css({'animation-delay':'300ms', 'opacity': 1});
                $(destination.item).find('.intro').addClass('animated fadeInRight').css({'animation-delay':'500ms', 'opacity': 1});
                $(destination.item).find('.imgCont').addClass('animated fadeInRight').css({'animation-delay':'700ms', 'opacity': 1});
                $(destination.item).find('.forms').addClass('animated fadeInDown').css({'animation-delay':'700ms', 'opacity': 1});
            }
            //console.log('AFTER LOAD', 'Origin:',origin, 'Destinatiion:' ,destination, 'Direction:', direction);
        },
        afterResize: function(width, height){},
        afterResponsive: function(isResponsive){},
        afterSlideLoad: function(section, origin, destination, direction){
            var sa = $('.slide.active');
            if(section.anchor == "practices"){
                $(destination.item).find('.container-fluid').css({'animation-delay':'300ms', 'opacity': 1});
                $(destination.item).find('.text-detail').addClass('animated fadeInDown').css({'animation-delay':'500ms', 'opacity': 1});

                if(destination.anchor == "practices") {
                    $(destination.item).find('.heading').removeClass('animated fadeInDown').addClass('animated fadeInDown').css({'animation-delay':'300ms', 'opacity': 1});
                    $(destination.item).find('.list').addClass('animated fadeInDown').css({'animation-delay':'700ms', 'opacity': 1});
                }else{
                    $(destination.item).find('.heading-box').removeClass('animated fadeInDown').addClass('animated fadeInDown').css({'animation-delay':'300ms', 'opacity': 1});
                    $(destination.item).find('.list').addClass('animated fadeInRight').css({'animation-delay':'700ms', 'opacity': 1});
                }
            }
            if(section.anchor == "lawyers"){
                $(destination.item).find('.container-fluid').css({'animation-delay':'300ms', 'opacity': 1});
                $(destination.item).find('.text-detail').addClass('animated fadeInDown').css({'animation-delay':'500ms', 'opacity': 1});

                if(destination.anchor == "lawyers") {
                    $(destination.item).find('.heading').removeClass('animated fadeInDown').addClass('animated fadeInDown').css({'animation-delay':'300ms', 'opacity': 1});
                    $(destination.item).find('.sub-heading').removeClass('animated fadeInDown').addClass('animated fadeInDown').css({'animation-delay':'300ms', 'opacity': 1});
                    $(destination.item).find('.partner-list').addClass('animated fadeInDown').css({'animation-delay':'700ms', 'opacity': 1});
                    $(destination.item).find('.associates-list').addClass('animated fadeInDown').css({'animation-delay':'900ms', 'opacity': 1});
                }else{
                    $(destination.item).find('.imgCont').removeClass('animated fadeInLeft').addClass('animated fadeInRight').css({'animation-delay':'300ms', 'opacity': 1});
                    $(destination.item).find('.heading-box').removeClass('animated fadeInDown').addClass('animated fadeInDown').css({'animation-delay':'300ms', 'opacity': 1});
                    $(destination.item).find('.short-info').addClass('animated fadeInLeft').css({'animation-delay':'500ms', 'opacity': 1});
                    $(destination.item).find('.nav-list').addClass('animated fadeInDown').css({'animation-delay':'500ms', 'opacity': 1});

                }
            }
            //console.log('SLIDE LOAD', 'Section:',section, 'Origin:',origin, 'Destinatiion:' ,destination, 'Direction:', direction);
        },
        onSlideLeave: function(section, origin, destination, direction){
            if(section.anchor == "home"){
                fullpage_api.setScrollingSpeed(0);
            }
            var sa = $('.slide.active');
            sa.find('.container-fluid').css({'animation-delay':'300ms', 'opacity': 0});
            sa.find('.is-animated').removeClass('animated fadeInLeft fadeInRight fadeInUp fadeInDown').css({'animation-delay':'300ms', 'opacity': 0});

            //console.log('SLIDE LEAVE', 'Section:',section, 'Origin:',origin, 'Destinatiion:' ,destination, 'Direction:', direction);
        }
    });

    $(window).on('load', function () {
        $.fn.fullpage.setScrollingSpeed(0);
    });

    function imgLoader(){
        var container = $('.checkImg'),
            progress = $('progress'),
            supportsProgress = progress[0] && /*IE does not support progress*/ progress[0].toString().indexOf('Unknown') === -1;

        container.imagesLoaded().progress(onProgress);
    }
    function onProgress( imgLoad, image ) {
        var item = $( image.img ).parents('.is-loading');
        setInterval(function () {
            item.addClass('activated').removeClass('is-loading');
        }, 200);
        if ( !image.isLoaded ) {
            item.addClass('is-broken');
        }
    }
    function translated(event) {
        var owl = $('.owl-item'),
            owlActive = $('.owl-item.active');

        owl.find('.is-animated').removeClass('animated fadeInRight fadeInLeft').css({'opacity': 0});
        owlActive.find('figure').addClass('animated fadeInLeft').css({'animation-delay':'200ms', 'opacity': 1});
        owlActive.find('.f-title').addClass('animated fadeInRight').css({'animation-delay':'700ms', 'opacity': 1});
        owlActive.find('.f-text').addClass('animated fadeInRight').css({'animation-delay':'900ms', 'opacity': 1});

        $("#section0").mousemove(function(e) {
            parallaxIt(e, ".border1", 15, 59);
            parallaxIt(e, ".border2", 15 -30);
        });
    }
    function carousel(par, dots, nav, loop, type, autoplay){
        if(type != 1 || type == 'undefined'){
            $(par).owlCarousel({
                nav: nav,
                navText: ['<i class="fa fa-arrow-left"></i>','<i class="fa fa-arrow-right"></i>'],
                dots: dots,
                margin: 20,
                loop: loop,
                mouseDrag: true,
                touchDrag: true,
                pullDrag: true,
                responsive:{
                    0:{
                        items:2,
                        slideBy: 2
                    },
                    1128:{
                        items:2,
                        slideBy: 2
                    },
                    1366:{
                        items:2,
                        slideBy: 2
                    }
                }
            });
        }else {
            $(par).owlCarousel({
                items: 1,
                nav: nav,
                navText: ['<i class="fa fa-arrow-left"></i>','<i class="fa fa-arrow-right"></i>'],
                dots: dots,
                stagePadding: 0,
                margin: 0,
                loop: true,
                autoplay: true,
                autoplayTimeout: autoplay,
                autoplayHoverPause: true,
                // autoplaySpeed: true,
                mouseDrag: true,
                touchDrag: true,
                pullDrag: true,
                fallbackEasing: 'fade',
                checkVisible: false,
                // slideSpeed: 500,
                onInitialized: translated,
                onTranslated: translated
            });
        }
    }
    // add animate.css class(es) to the elements to be animated
    function setAnimation (elem, InOut ) {
        // Store all animationend event name in a string.
        // cf animate.css documentation
        var animationEndEvent = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';

        elem.each ( function () {
            var $elem = $(this);
            var $animationType = 'animated ' + $elem.data( 'animation-' + InOut );

            $elem.addClass($animationType).one(animationEndEvent, function () {
                $elem.removeClass($animationType); // remove animate.css Class at the end of the animations
            });
        });
    }
    function scrollCustom(){
        var lastScrollTop = 0;
        $(window).scroll(function(event){
            var scroll = $(window).scrollTop(),
                navbar = $('.navbar'),
                navOffset = navbar.offset().top,
                st = $(this).scrollTop(),
                ww2 = $(this).width();

            //Add menu fixed
            // if (scroll > navbar + 20) {$('.navbar').addClass("fixed");}
            // else {$('.navbar').removeClass("fixed");}

            //Navbar show if scrollTop
            // if (st > lastScrollTop){$('.navbar').removeClass("open");}
            // else {$('.navbar').addClass("open");}
            // lastScrollTop = st;

            navbar.toggleClass("open", scroll >= 100);

            //Show button Back to top
            $("#back-to-top").toggleClass("show", scroll >= 250);
        });
    }
    function muteAudio() {
        var sc = $('.soundControl');
        sc.click(function () {
            if($(this).hasClass('mute')){
                $(this).removeClass('mute fa-volume-off').addClass('fa-volume-up').prop('title','Sound Off');
                audio1.muted = false;
                audio2.muted = false;
                audio3.muted = false;
            }else{
                $(this).removeClass('fa-volume-up').addClass('mute fa-volume-off').prop('title','Sound On');
                audio1.muted = true;
                audio2.muted = true;
                audio3.muted = true;
            }
        });
    }
    function fullscreen() {
        var f = $('#fullscreen'), fs = $('.fullScreen');
        fs.click(function() {
            if ($.fullscreen.isFullScreen()) {
                $(this).removeClass('full');
                $.fullscreen.exit();
                return false;
            }else{
                $(this).addClass('full');
                f.fullscreen();
                return false;
            }
        });
    }
    function playAudio(param) {
        switch(param) {
            case 2:
                audio2.play();
                break;
            case 3:
                audio3.play();
                break;
            default:
                audio1.play();
                break;
        }
    }
    function others() {
        var $content = $('.floats'),
            scrollClass = 'on-scroll',
            activateAtY = 20;

        function deactivateContent() {
            if (!$content.hasClass(scrollClass)) {
                $content.addClass(scrollClass);
            }
        }
        function activateContent() {
            if ($content.hasClass(scrollClass)) {
                $content.removeClass(scrollClass);
            }
        }

        var position = $(window).scrollTop();

        // should start at 0

        $(window).scroll(function() {
            var scroll = $(window).scrollTop();
            if(scroll > position) {
                console.log('scrollDown');
                $('.floats').addClass('on-scroll');
            } else {
                console.log('scrollUp');
                $('.floats').removeClass('on-scroll');
            }
            position = scroll;
        });
    }
</script>
{/literal}