<!--<div>-->
<!--<p>Technologies: {{customer2.technology}}</p>-->
<!--{{asd}}-->
<!--{{ID}}-->
<!--{{customer2[1].city}}-->
<!--</div>-->




<!--<div ng-repeat="cust in customers2| filter : {id: ID} : true">-->



<div ng-repeat="cust in customerData | filter:isStatus" class="client_page_container">
    <div class="col-lg-6 col-sm-12 col-xs-12 client_name_container">
        <p class="h4">Customer:</p>
        <p class="h6">{{cust.Name}}</p>
    </div>
    <div class="col-lg-6  col-sm-12 col-xs-12 client_tech_container">
        <p class="h4">Technologies:</p>
        <p class="h6">{{cust.Technologies}}</p>

    </div>
    <div class="col-lg-12 col-sm-12 col-xs-12 client_page_description_container" >
        <p class="h4">Description:</p>
        <p class="h6">{{cust.Description}}</p>

    </div>

    <!--<div>{{cust.Pictures[0]}}</div>-->


    <div id="project_content" class="col-lg-12 cold-md-12 col-sm-12 col-xs-12">

        <!--MONITOR PREVIEW-->
        <!--==================================================-->
        <div class="monitor_preview scaled_preview col-lg-6 col-sm-12 col-xs-12">
            <div class="mp_overlay">
                <div>
                    <div ng-repeat="pics in cust.Pictures" class="owl-carousel owl-theme owl-customer">
                        <div ng-repeat="deskPic in pics.Desktop" class="item">
                        <img src="{{deskPic.Path}}">
                        <!--PICSSS: {{deskPic.Path}}-->
                        </div>
                    </div>
                </div>
            </div>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 432.59 353.28">
                <defs>
                    <style>.cls-1{fill:#d8e6f0;}.cls-2{fill:gray;}.cls-3{fill:#999;}</style>
                </defs>
                <title>Monitor</title>
                <g id="Layer_2" data-name="Layer 2">
                    <g id="Capa_1" data-name="Capa 1">
                        <path class="cls-1 monitor_screen" d="M432.59,12.08V233.44H0V12.08A12.08,12.08,0,0,1,12.08,0H420.51A12.08,12.08,0,0,1,432.59,12.08Z"/>
                        <polygon class="cls-2" points="254.79 274.39 263.85 343.28 168.75 343.28 177.81 274.39 254.79 274.39"/>
                        <path class="cls-3" d="M432.59,233.44V262.3a12.08,12.08,0,0,1-12.08,12.09H12.08A12.08,12.08,0,0,1,0,262.3V233.44H432.59Z"/>
                        <rect class="cls-3" x="132.47" y="333.28" width="167.65" height="20"/>
                    </g>
                </g>
            </svg>
        </div>





        <!--LAPTOP PREVIEW-->
        <!--==================================================-->
        <div class="laptop_preview scaled_preview col-lg-6  col-sm-12 col-xs-12">
            <div class="mp_overlay">
                <div ng-repeat="pics in cust.Pictures" class="owl-carousel owl-theme owl-customer">
                    <div ng-repeat="lapPics in pics.Laptop" class="item">
                        <img src="{{lapPics.Path}}">
                        <!--PICSSS: {{deskPic.Path}}-->
                    </div>
                </div>
            </div>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 488.7 344.27">
                <defs>
                    <style>.cls-1{fill:#38454f;}.cls-2{fill:#546a79;}.cls-3{fill:#b0b6bb;}</style>
                </defs>
                <title>laptop2</title>
                <g id="Layer_2" data-name="Layer 2">
                    <g id="Layer_1-2" data-name="Layer 1">
                        <g id="Layer_2-2" data-name="Layer 2">
                            <g id="Layer_1-2-2" data-name="Layer 1-2">
                                <path class="cls-1" d="M172.38,300.14v17.65H313.62V300.14H463.69V17.65A17.65,17.65,0,0,0,446,0H40A17.65,17.65,0,0,0,22.31,17.61V300.14Z"/>
                                <polygon class="cls-2 laptop_screen" points="39.97 282.48 446.03 282.48 446.03 17.66 39.97 17.66 39.97 282.48"/>
                                <path class="cls-3" d="M311.74,300.14v17.65H176.93V300.14H0v26.48c0,9.75,7.54,17.65,20.81,17.65h455c5.35,0,12.89-7.9,12.89-17.65V300.14Z"/>
                            </g>
                        </g>
                    </g>
                </g>
            </svg>
        </div>







        <!--TABLET PREVIEW-->
        <!--==================================================-->
        <div class="tablet_preview scaled_preview col-lg-6  col-sm-12 col-xs-12">
            <div class="mp_overlay">
                <div ng-repeat="pics in cust.Pictures" class="owl-carousel owl-theme owl-customer">
                    <div ng-repeat="tabPics in pics.Tablet" class="item">
                        <img src="{{tabPics.Path}}">
                        <!--PICSSS: {{deskPic.Path}}-->
                    </div>
                </div>
            </div>

            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 370 460">
                <defs>
                    <style>.cls-1{fill:#466289;}.cls-2{fill:#6b81a1;}.cls-3{fill:#354a67;}.cls-4{fill:#233145;}.cls-5{fill:#121923;}</style>
                </defs>
                <title>Tablet</title>
                <g id="Layer_2" data-name="Layer 2">
                    <g id="Layer_1-2" data-name="Layer 1">
                        <g id="_Group_" data-name="&lt;Group&gt;">
                            <path id="_Path_" data-name="&lt;Path&gt;" class="cls-1" d="M185,0H30A30,30,0,0,0,0,30V430a30,30,0,0,0,30,30H185l30-260Z" />
                            <path id="_Path_2" data-name="&lt;Path&gt;" class="cls-2" d="M185,460H340a30,30,0,0,0,30-30V30A30,30,0,0,0,340,0H185Z" />
                            <rect id="_Path_3" data-name="&lt;Path&gt;" class="cls-3" x="30" y="30" width="310" height="340" />
                            <rect id="_Path_4" data-name="&lt;Path&gt;" class="cls-4" x="30" y="200" width="280" height="170" />
                            <rect id="_Path_5" data-name="&lt;Path&gt;" class="cls-4" x="310" y="30" width="30" height="170" />
                            <rect id="_Path_6" data-name="&lt;Path&gt;" class="cls-5" x="310" y="200" width="30" height="170" />
                            <circle id="_Path_7" data-name="&lt;Path&gt;" class="cls-4" cx="185" cy="415" r="15" />
                        </g>
                        <rect class="cls-3" x="100" y="130" width="170" height="310" transform="translate(470 100) rotate(90)" />
                        <rect class="cls-3" x="100" y="-40" width="170" height="310" transform="translate(300 -70) rotate(90)" />
                    </g>
                </g>
            </svg>
        </div>

        <!--SMARPHONE PREVIEW-->
        <!--==================================================-->
        <div class="smartphone_preview scaled_preview col-lg-6  col-sm-12 col-xs-12">
            <div class="mp_overlay">
                <div ng-repeat="pics in cust.Pictures" class="owl-carousel owl-theme owl-customer">
                    <div ng-repeat="mobPics in pics.Mobile" class="item">
                        <img src="{{mobPics.Path}}">
                        <!--PICSSS: {{deskPic.Path}}-->
                    </div>
                </div>
            </div>

            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 58">
                <defs>
                    <style>.cls-1{fill:#545e73;}.cls-2{fill:#8697cb;}.cls-3{fill:#323a45;}</style>
                </defs>
                <title>smartphone2</title>
                <g id="Layer_2" data-name="Layer 2">
                    <g id="Capa_1" data-name="Capa 1">
                        <path class="cls-1" d="M28.59,58H3.41A3.41,3.41,0,0,1,0,54.6V3.4A3.41,3.41,0,0,1,3.41,0H28.59A3.41,3.41,0,0,1,32,3.4V54.59A3.4,3.4,0,0,1,28.59,58Z"/>
                        <rect class="cls-2 smartphone_screen" y="6" width="32" height="40"/>
                        <circle class="cls-3" cx="16" cy="52" r="3"/>
                        <path class="cls-3" d="M16,4H12a1,1,0,0,1,0-2h4a1,1,0,0,1,0,2Z"/>
                        <path class="cls-3" d="M20,4H19a1,1,0,0,1,0-2h1a1,1,0,0,1,0,2Z"/>
                    </g>
                </g>
            </svg>
        </div>


    </div>


    <script>
       // $("document").ready(function(){
       setTimeout(function () {

           $('.owl-carousel').owlCarousel({
               loop:true,
               margin:10,
               nav:true,
               responsive:{
                   0:{
                       items:1
                   },
                   600:{
                       items:1
                   },
                   1000:{
                       items:1
                   }
               }
           });

       }, 500);

       // });
    </script>

</div>