<style type="text/css">
    #waterfall li.show {
        opacity: 1;
        transform: translateY(0);
        transition: all 0.3s, top 1s;
    }

    #waterfall li > div {
        color: rgba(0,0,0,0.6);
        border-radius: 3px;
        margin: 10px;
        padding: 0px;
        background: rgb(255,255,255);
        border: 1px solid rgba(038, 191, 64, 0);
        transition: all 0.5s;
    }

        #waterfall li > div:hover {
            transform: translateY(-10px);
            border: 1px solid #3b5998;
            box-shadow: 0 10px 15px rgba(154, 187, 221, 0.4);
            transition: all 0.3s;
        }
/* loader css */
.windows8 {
    z-index: initial;
    vertical-align: middle;
    display: table;
    margin-left: auto;
    margin-right: auto;
}

.windows8 .wBall {
	position: absolute;
	width: 74px;
	height: 74px;
	opacity: 0;
	transform: rotate(225deg);
		-o-transform: rotate(225deg);
		-ms-transform: rotate(225deg);
		-webkit-transform: rotate(225deg);
		-moz-transform: rotate(225deg);
	animation: orbit 5.4425s infinite;
		-o-animation: orbit 5.4425s infinite;
		-ms-animation: orbit 5.4425s infinite;
		-webkit-animation: orbit 5.4425s infinite;
		-moz-animation: orbit 5.4425s infinite;
}

.windows8 .wBall .wInnerBall{
	position: absolute;
	width: 10px;
	height: 10px;
	background: rgb(0,0,0);
	left:0px;
	top:0px;
	border-radius: 10px;
}

.windows8 #wBall_1 {
	animation-delay: 1.186s;
		-o-animation-delay: 1.186s;
		-ms-animation-delay: 1.186s;
		-webkit-animation-delay: 1.186s;
		-moz-animation-delay: 1.186s;
}

.windows8 #wBall_2 {
	animation-delay: 0.233s;
		-o-animation-delay: 0.233s;
		-ms-animation-delay: 0.233s;
		-webkit-animation-delay: 0.233s;
		-moz-animation-delay: 0.233s;
}

.windows8 #wBall_3 {
	animation-delay: 0.4765s;
		-o-animation-delay: 0.4765s;
		-ms-animation-delay: 0.4765s;
		-webkit-animation-delay: 0.4765s;
		-moz-animation-delay: 0.4765s;
}

.windows8 #wBall_4 {
	animation-delay: 0.7095s;
		-o-animation-delay: 0.7095s;
		-ms-animation-delay: 0.7095s;
	    	-webkit-animation-delay: 0.7095s;
		-moz-animation-delay: 0.7095s;
}

.windows8 #wBall_5 {
	animation-delay: 0.953s;
		-o-animation-delay: 0.953s;
		-ms-animation-delay: 0.953s;
		-webkit-animation-delay: 0.953s;
		-moz-animation-delay: 0.953s;
}



@keyframes orbit {
	0% {
		opacity: 1;
		z-index:99;
		transform: rotate(180deg);
		animation-timing-function: ease-out;
	}

	7% {
		opacity: 1;
		transform: rotate(300deg);
		animation-timing-function: linear;
		origin:0%;
	}

	30% {
		opacity: 1;
		transform:rotate(410deg);
		animation-timing-function: ease-in-out;
		origin:7%;
	}

	39% {
		opacity: 1;
		transform: rotate(645deg);
		animation-timing-function: linear;
		origin:30%;
	}

	70% {
		opacity: 1;
		transform: rotate(770deg);
		animation-timing-function: ease-out;
		origin:39%;
	}

	75% {
		opacity: 1;
		transform: rotate(900deg);
		animation-timing-function: ease-out;
		origin:70%;
	}

	76% {
	opacity: 0;
		transform:rotate(900deg);
	}

	100% {
	opacity: 0;
		transform: rotate(900deg);
	}
}

@-o-keyframes orbit {
	0% {
		opacity: 1;
		z-index:99;
		-o-transform: rotate(180deg);
		-o-animation-timing-function: ease-out;
	}

	7% {
		opacity: 1;
		-o-transform: rotate(300deg);
		-o-animation-timing-function: linear;
		-o-origin:0%;
	}

	30% {
		opacity: 1;
		-o-transform:rotate(410deg);
		-o-animation-timing-function: ease-in-out;
		-o-origin:7%;
	}

	39% {
		opacity: 1;
		-o-transform: rotate(645deg);
		-o-animation-timing-function: linear;
		-o-origin:30%;
	}

	70% {
		opacity: 1;
		-o-transform: rotate(770deg);
		-o-animation-timing-function: ease-out;
		-o-origin:39%;
	}

	75% {
		opacity: 1;
		-o-transform: rotate(900deg);
		-o-animation-timing-function: ease-out;
		-o-origin:70%;
	}

	76% {
	opacity: 0;
		-o-transform:rotate(900deg);
	}

	100% {
	opacity: 0;
		-o-transform: rotate(900deg);
	}
}

@-ms-keyframes orbit {
	0% {
		opacity: 1;
		z-index:99;
		-ms-transform: rotate(180deg);
		-ms-animation-timing-function: ease-out;
	}

	7% {
		opacity: 1;
		-ms-transform: rotate(300deg);
		-ms-animation-timing-function: linear;
		-ms-origin:0%;
	}

	30% {
		opacity: 1;
		-ms-transform:rotate(410deg);
		-ms-animation-timing-function: ease-in-out;
		-ms-origin:7%;
	}

	39% {
		opacity: 1;
		-ms-transform: rotate(645deg);
		-ms-animation-timing-function: linear;
		-ms-origin:30%;
	}

	70% {
		opacity: 1;
		-ms-transform: rotate(770deg);
		-ms-animation-timing-function: ease-out;
		-ms-origin:39%;
	}

	75% {
		opacity: 1;
		-ms-transform: rotate(900deg);
		-ms-animation-timing-function: ease-out;
		-ms-origin:70%;
	}

	76% {
	opacity: 0;
		-ms-transform:rotate(900deg);
	}

	100% {
	opacity: 0;
		-ms-transform: rotate(900deg);
	}
}

@-webkit-keyframes orbit {
	0% {
		opacity: 1;
		z-index:99;
		-webkit-transform: rotate(180deg);
		-webkit-animation-timing-function: ease-out;
	}

	7% {
		opacity: 1;
		-webkit-transform: rotate(300deg);
		-webkit-animation-timing-function: linear;
		-webkit-origin:0%;
	}

	30% {
		opacity: 1;
		-webkit-transform:rotate(410deg);
		-webkit-animation-timing-function: ease-in-out;
		-webkit-origin:7%;
	}

	39% {
		opacity: 1;
		-webkit-transform: rotate(645deg);
		-webkit-animation-timing-function: linear;
		-webkit-origin:30%;
	}

	70% {
		opacity: 1;
		-webkit-transform: rotate(770deg);
		-webkit-animation-timing-function: ease-out;
		-webkit-origin:39%;
	}

	75% {
		opacity: 1;
		-webkit-transform: rotate(900deg);
		-webkit-animation-timing-function: ease-out;
		-webkit-origin:70%;
	}

	76% {
	opacity: 0;
		-webkit-transform:rotate(900deg);
	}

	100% {
	opacity: 0;
		-webkit-transform: rotate(900deg);
	}
}

@-moz-keyframes orbit {
	0% {
		opacity: 1;
		z-index:99;
		-moz-transform: rotate(180deg);
		-moz-animation-timing-function: ease-out;
	}

	7% {
		opacity: 1;
		-moz-transform: rotate(300deg);
		-moz-animation-timing-function: linear;
		-moz-origin:0%;
	}

	30% {
		opacity: 1;
		-moz-transform:rotate(410deg);
		-moz-animation-timing-function: ease-in-out;
		-moz-origin:7%;
	}

	39% {
		opacity: 1;
		-moz-transform: rotate(645deg);
		-moz-animation-timing-function: linear;
		-moz-origin:30%;
	}

	70% {
		opacity: 1;
		-moz-transform: rotate(770deg);
		-moz-animation-timing-function: ease-out;
		-moz-origin:39%;
	}

	75% {
		opacity: 1;
		-moz-transform: rotate(900deg);
		-moz-animation-timing-function: ease-out;
		-moz-origin:70%;
	}

	76% {
	opacity: 0;
		-moz-transform:rotate(900deg);
	}

	100% {
	opacity: 0;
		-moz-transform: rotate(900deg);
	}
}
</style>
<div data-ng-controller="InstagramFeedsController">
    <!-- START CONTENT -->
    <section id="content">
        <!--start container-->
        <div class="container">
            <div class="row no-space">
                <!--<div class="col offset-s5 s5">
                    <div class="input-field">
                        <input id="categories" type="text" class="validate">
                        <label for="categories" style="left:0;">Search user by name</label>
                    </div>
                </div>-->
                <!--<div class="col s2 center margin-top-20">-->
                    <!--href="#SearchProfileModal"-->
                    <!--<a  ng-click="searchtag()" class="btn btn_round ">
                        <i class="fa fa-search"></i>
                    </a>
                </div>-->
               <!--<a class='dropdown-button right white-text btn black' href='javascript:void(0)' data-activates='dropdownFilter' style="font-size: 14px;height: 28px;line-height: 27px;border-radius: 4px;">{{filterrTxtt}}</a><span class="right">&nbsp;</span><a class='dropdown-button right white-text btn black' href='javascript:void(0)' data-activates='dropdownSort' style="font-size: 14px;height: 28px;line-height: 27px;border-radius: 4px;">{{SorttTxtt}}</a><span class="right">&nbsp;</span><a class='right white-text btn black' ng-click="loadFeeds()" title="Recent feeds" href='javascript:void(0)' style="font-size: 14px;height: 28px;line-height: 27px;border-radius: 4px;">Recent</a><span class="right">&nbsp;</span>-->
            </div>
            <div class="row no-space">
                <!--<a class='dropdown-button right white-text btn black' href='javascript:void(0)' data-activates='dropdownFilter' style="font-size: 14px;height: 28px;line-height: 27px;border-radius: 4px;">{{filterrTxtt}}</a><span class="right">&nbsp;</span><a class='dropdown-button right white-text btn black' href='javascript:void(0)' data-activates='dropdownSort' style="font-size: 14px;height: 28px;line-height: 27px;border-radius: 4px; text-align:center">{{SorttTxtt}}</a><span class="right">&nbsp;</span><a class='right white-text btn black' ng-click="loadFeeds()" title="Recent feeds" href='javascript:void(0)' style="font-size: 14px;height: 28px;line-height: 27px;border-radius: 4px;">Recent</a><span class="right">&nbsp;</span>-->
             <div class="row no-space" ng-if="show!=true">
                 <a class='dropdown-button right white-text btn black' href='javascript:void(0)' data-activates='dropdownFilter' style="font-size: 14px;height: 28px;line-height: 27px;border-radius: 4px;  text-align:center">{{filterrTxtt}}</a><span class="right">&nbsp;</span><a class='dropdown-button right white-text btn black' href='javascript:void(0)' data-activates='dropdownSort' style="font-size: 14px;height: 28px;line-height: 27px;border-radius: 4px;  text-align:center">{{SorttTxtt}}</a><span class="right">&nbsp;</span><a class='right white-text btn black' ng-click="ReLoadingTopFeeds()" title="Recent feeds" href='javascript:void(0)' style="font-size: 14px;height: 28px;line-height: 27px;border-radius: 4px; text-align:center">Recent</a><span class="right">&nbsp;</span>
             </div>
                 <div class="col l2 m2 s12 center">                  
                    <img src={{detailsuser.profileUrl}} class="responsive-img circle margin-top-10">
                </div>
                <div class="col l5 m5 s12">
                    <h5 class="grey-text text-darken-4 margin-top-20">{{detailsuser.insUserName}}</h5>
                    <h6>posts : <strong class="grey-text text-darken-1">{{detailsuser.totalImages}}</strong></h6>
                    <h6>followers : <strong class="grey-text text-darken-1">{{detailsuser.followers}}</strong></h6>
                    <h6>following : <strong class="grey-text text-darken-1">{{detailsuser.followedBy}}</strong></h6>
                    <h6>{{detailsuser.bio}}</h6>
                </div>
                <div class="col s12 m5 l5 ">
                    <div class="right  margin-top-20">
                        <!--<a class="dropdown-button btn white-text btn_style black ng-binding" href="javascript:void(0)" data-activates="dropdownFilter" style="font-size: 14px;height: 28px;line-height: 27px;border-radius: 4px; text-align:center">All Posts</a>-->
                        <ul id="dropdownFilter" class="dropdown-content" style="white-space: nowrap; position: absolute; top: 20px; left: 678.484px; opacity: 1; display: none;">
                            <li><a href="javascript:void(0)" style="color:black"><strong>Filter</strong></a></li>
                            <li><a href="javascript:void(0)" ng-click="filterSearch('image', 'Image')">Image posts</a></li>
                            <li><a href="javascript:void(0)" ng-click="filterSearch('video', 'Video')">Video posts</a></li>
                        </ul>
                        <!--<a class="dropdown-button white-text btn btn_style black ng-binding" href="javascript:void(0)" data-activates="dropdownSort" style="font-size: 14px;height: 28px;line-height: 27px;border-radius: 4px; text-align:center">Popular</a>-->
                        <ul id="dropdownSort" class="dropdown-content" style="white-space: nowrap; position: absolute; top: 20px; left: 587.438px; opacity: 1; display: none;">
                            <li><a href="javascript:void(0)" style="color:black"><strong>Popular</strong></a></li>
                            <li><a href="javascript:void(0)" ng-click="sortSearch('mLikes','Most likes')">Most Likes</a></li>
                            <li><a href="javascript:void(0)" ng-click="sortSearch('mComments', 'Most comments')">Most Comments</a></li>
                            <li><a href="javascript:void(0)" ng-click="sortSearch('lLikes', 'Least likes')">Least Likes</a></li>
                            <li><a href="javascript:void(0)" ng-click="sortSearch('lComments', 'Least comments')">Least Comments</a></li>
                        </ul>
                        <!--<a class="white-text btn btn_style black" ng-click="ReLoadingTopFeeds()" title="Recent feeds" href="javascript:void(0)" style="font-size: 14px;height: 28px;line-height: 27px;border-radius: 4px; text-align:center">Recent</a>-->
                        <span class="right">&nbsp;</span>
                    </div>
                </div>
            </div>
            <div class="row no-space">
                <br /><br />
                <div class="center">
                    <!--<h6 style="color:lightgray; font-size:24px; font-family:Calibri" ng-if="endfeeds==true"><span><img style="width:60px" src="http://i.imgur.com/0MjybMu.png" /></span><br />No post to display<br /></h6>-->
                </div>
                <br />
            </div>
            <div class="row" >
                <!-- loader -->
                <div class="windows8" ng-if="preloadmorefeedss !=false">
                    <div class="wBall" id="wBall_1">
                        <div class="wInnerBall"></div>
                    </div>
                    <div class="wBall" id="wBall_2">
                        <div class="wInnerBall"></div>
                    </div>
                    <div class="wBall" id="wBall_3">
                        <div class="wInnerBall"></div>
                    </div>
                    <div class="wBall" id="wBall_4">
                        <div class="wInnerBall"></div>
                    </div>
                    <div class="wBall" id="wBall_5">
                        <div class="wInnerBall"></div>
                    </div>
                </div>
               
                <div id="center">
                    <ul id="waterfall">
                        <li class="collection-item" ng-repeat="insfeed in lstinsFeeds " myRepeatTabDirective>
                            <div class="studio_card">
                                <a class="card hoverable no-space modal-trigger" ng-click="viewPostModal(insfeed)" data-backdrop="static" data-keyboard="false">
                                    <div class="card-image waves-effect waves-block waves-light">
                                        <span ng-if="insfeed.videoUrl !=null" style="margin-top: 5px;position: absolute;color: #fff;z-index: 1;right: 10px;display: table;font-size: 30px;"><i class="icon-camcorder"></i></span>
                                        <img class="activator" ng-src="{{insfeed.feedImageUrl}}" alt="imgs">
                                    </div>
                                    <div class="card-content">
                                        <div class="row no-space">
                                            <div class="col s12 m6 center">
                                                <div class="grey-text text-darken-4">Likes</div>
                                                    <a ng-if="insfeed.isLike==0" ng-click="InstagramLikeUnLike(insfeed.likeCount,insfeed.isLike,insfeed.feedId,insfeed.instagramId)">{{insfeed.likeCount}} </a>
                                                    <a ng-if="insfeed.isLike==1" ng-click="InstagramLikeUnLike(insfeed.likeCount,insfeed.isLike,insfeed.feedId,insfeed.instagramId)">{{insfeed.likeCount}} </a>     
                                            </div>
                                            <div class="col s12 m6 center">
                                                <div class="grey-text text-darken-4">Comments</div>
                                                {{insfeed.commentCount}}
                                            </div>
                                        </div>
                                    </div>
                                </a>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="col s12 center">
                    <a class="btn btn_style blue_btn_style" ng-click="listData()" onClick="this.style.visibility = 'hidden';  loadmore_feeds();"  ng-if="preloadmorefeeds==false">Load More</a>
                    <h6 style="color:lightgray; font-size:30px; font-family:Calibri" ng-if="endfeeds==true && filters!=true"><br /><br /><span><img style="width:60px" src="http://i.imgur.com/0MjybMu.png" /></span><br />No posts to show<br /></h6>
                    <h6 style="color:lightgray; font-size:30px; font-family:Calibri" ng-if="lstnofeeds==true"><br /><br /><span><img style="width:60px" src="http://i.imgur.com/0MjybMu.png" /></span><br />No posts to show<br /></h6>
                
</div>
            </div>
        </div>

        <!-- image calling Structure -->
        <div id="viewPostModal" class="modal" style="width: 750px;">
            <div class="modal-content" style="padding: 10px;">
                <div class="row no-space">
                    <div class="col l7 m7 s7 center">
                        <img class="responsive-img" ng-src="{{feeds.feedImageUrl}}" alt="imgs">
                    </div>
                    <div class="col l5 m5 s5">
                        <span class="card-title grey-text text-darken-4">{{feeds.adminUser}}</span>
                        <p style="word-wrap: break-word;"> {{feeds.feed}}</p>
                        <div class="row no-space" >
                            <ul class="col s12 instfeeds" style="padding-bottom: 20px;" >
                                <li class="collection-item avatar" ng-repeat="inscomment in feeds._InstagramComment">
                                    <!--{{insfeed._InstagramComment}}-->
                                    <!--<img ng-src="{{inscomment.fromProfilePic}}"  class="circle">-->
                                    <span class="email-title"><b>{{inscomment.fromName}} :</b> {{inscomment.comment}}</span>                                   
                                    <!-- <a class="tooltipped secondary-content" data-position="left">{{inscomment.commentDate}}</a>-->
                                </li>
                            </ul>

                            <div class="row no-space">
                                <div class="col l6 s6">
                                    <a ng-click="Deletefeeds(feeds.feedId)" class="black-text">
                                        <i class="icon-trash" aria-hidden="true" title="Delete"></i>
                                    </a>
                                </div>
                                <div class="col l6 s6">
                                        <i class="icon-heart red-text"  ng-if="feeds.isLike==1" ng-click="InstagramLikeUnLike(feeds.likeCount,feeds.isLike,feeds.feedId,feeds.instagramId)"></i>
                                        <i class="icon-heart red-text"  ng-if="feeds.isLike==0" ng-click="InstagramLikeUnLike(feeds.likeCount,feeds.isLike,feeds.feedId,feeds.instagramId)"></i>
                                </div>
                            </div>
                            <div class="row no-space">
                                <div class="input-field col s9">
                                    <input id="postcomment" placeholder="Add a comment.." class="" type="text">
                                    <!--<label for="postcomment" class="active">Add a comment..</label>-->

                                </div>
                                <div ng-show="dispbtn" class="input-field col s1">
                                    <a class="btn btn_style btn_round" ng-click="AddInstagramComment(feeds.feedId,feeds.instagramId,feeds.type)">send</a>
                                </div>
                                <div ng-show="!dispbtn" class="input-field col s1">
                                    <i class="fa fa-spinner fa-pulse fa-2x fa-fw"></i>
                                </div>
                             </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!--end image calling-->

        <!--//video calling strature--> 
        <div id="VideoPostModal" class="modal" style="max-width: 850px; width: 100%;">
            <a class="modal-action modal-close right" ng-click="closeasdf()" style="margin-right: 10px; margin-top: 10px; font-size: large;"><i class="fa fa-close black-text"></i></a>
            <div class="modal-content">
                <div class="row no-space">
                    <div class="col l8 m8 s8 center">
                        <embed id="play" width="360" height="360" autostart="false" allowscriptaccess="always"
                               src="{{videosss | youtubeEmbedUrl}}" type="video/mp4">

                    </div>
                    <div class="col l4 m4 s4">
                        <span class="card-title grey-text text-darken-4">{{feeds.adminUser}}</span>
                        <p style="word-wrap: break-word;"> {{feeds.feed}}</p>
                        <div class="row no-space">
                            <ul class="col s12 instfeeds" style="padding-bottom: 20px;">
                                <li class="collection-item avatar" ng-repeat="inscomment in feeds._InstagramComment">
                                    <!--{{insfeed._InstagramComment}}-->
                                    <!--<img ng-src="{{inscomment.fromProfilePic}}"  class="circle">-->
                                    <span class="email-title"><b>{{inscomment.fromName}} :</b> {{inscomment.comment}}</span>
                                    <!-- <a class="tooltipped secondary-content" data-position="left">{{inscomment.commentDate}}</a>-->
                                </li>
                            </ul>
                            <div class="row no-space">
                                <div class="col l6 s6">
                                    <a ng-click="Deletefeeds(feeds.feedId)" class="black-text">
                                        <i class="icon-trash" aria-hidden="true" title="Delete"></i>
                                    </a>
                                </div>
                                <div class="col l6 s6">
                                    <a class="red-text">
                                        <i class="icon-heart" aria-hidden="true" title="Like"></i>
                                    </a>
                                </div>
                            </div>
                            <div class="row no-space">
                                <div class="input-field col s10">
                                    <input id="postvideocomment" placeholder="Add a comment.." class="" type="text">
                                    <!--<label for="postcomment" class="active">Add a comment..</label>-->

                                </div>
                                <div ng-show="dispbtn" class="input-field col s1">
                                    <a class="btn btn_style btn_round" ng-click="AddInstagramComment(feeds.feedId,feeds.instagramId,feeds.type)">send</a>
                                </div>
                                <div ng-show="!dispbtn" class="input-field col s1">
                               
                                    <i class="fa fa-spinner fa-pulse fa-2x fa-fw"></i>
                                </div>
                             </div>                                
                         </div>
                    </div>
                </div>
            </div>
        </div>
        <!--end-->

        <!--//search user strature--> 
        <div id="SearchProfileModal" class="modal" style="width: 630px">
            <a  class="modal-action modal-close waves-effect waves-green btn-flat right"><i class="fa fa-times"></i></a>
            <div class="modal-content" style="padding: 10px;">
                <div class="row no-space">
                    <div class="col m12">
                        <div class="">
                            <ul class="collection no-space">
                                <li class="collection-item avatar" ng-repeat="item in seachdata" style="min-height: 65px;">
                                    <img src={{item.profile_picture}} alt="" class="circle">
                                    <a class="break_word grey-text text-darken-2" style="margin-top: 10px; display: inline-block;" href="https://www.instagram.com/{{item.username}}" target="_blank" >{{item.username}}</a>
                                    <a class="secondary-content btn btn_style btn_round blue" ng-click="Follow(item.id)">Follow</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- END CONTENT -->
</div>

<script type="text/javascript">
  $('.instfeeds').slimScroll({
        color: '#FAB51C',
        size: '10px',
        height: '250px',
        alwaysVisible: true,
        allowPageScroll: true
  });
  $('.insearch').slimScroll({
      color: '#FAB51C',
      size: '10px',
      height: '450px',
      alwaysVisible: true,
      allowPageScroll: true
  });
</script>
<!-- //////////////////////////////////////// Script Code //////////////////////////////////////////// -->

<script>
        function loadmore_feeds() {
            $('#load_circle_insta').show();
        }

        
</script>

<!-- //////////////////////////////////////// End Script Code //////////////////////////////////////// -->
<!-- //////////////////////////////////////// Style CSS for Pre Loader //////////////////////////////////////// -->

<style>
    .cssload-container {
        background: rgb(255,255,255);
    }

        .cssload-container div {
            width: 27px;
            height: 27px;
            position: absolute;
            background-color: rgb(204,204,204);
            top: 5%;
            border-radius: 50%;
        }

            .cssload-container div:nth-child(1) {
                background-color: rgb(190,3,156);
                animation: cssload-move 2.6s infinite cubic-bezier(0.2, 0.64, 0.81, 0.23);
                -o-animation: cssload-move 2.6s infinite cubic-bezier(0.2, 0.64, 0.81, 0.23);
                -ms-animation: cssload-move 2.6s infinite cubic-bezier(0.2, 0.64, 0.81, 0.23);
                -webkit-animation: cssload-move 2.6s infinite cubic-bezier(0.2, 0.64, 0.81, 0.23);
                -moz-animation: cssload-move 2.6s infinite cubic-bezier(0.2, 0.64, 0.81, 0.23);
            }

            .cssload-container div:nth-child(2) {
                background-color: rgb(239,9,21);
                animation: cssload-move 2.6s 195ms infinite cubic-bezier(0.2, 0.64, 0.81, 0.23);
                -o-animation: cssload-move 2.6s 195ms infinite cubic-bezier(0.2, 0.64, 0.81, 0.23);
                -ms-animation: cssload-move 2.6s 195ms infinite cubic-bezier(0.2, 0.64, 0.81, 0.23);
                -webkit-animation: cssload-move 2.6s 195ms infinite cubic-bezier(0.2, 0.64, 0.81, 0.23);
                -moz-animation: cssload-move 2.6s 195ms infinite cubic-bezier(0.2, 0.64, 0.81, 0.23);
            }

            .cssload-container div:nth-child(3) {
                background-color: rgb(255,60,0);
                animation: cssload-move 2.6s 390ms infinite cubic-bezier(0.2, 0.64, 0.81, 0.23);
                -o-animation: cssload-move 2.6s 390ms infinite cubic-bezier(0.2, 0.64, 0.81, 0.23);
                -ms-animation: cssload-move 2.6s 390ms infinite cubic-bezier(0.2, 0.64, 0.81, 0.23);
                -webkit-animation: cssload-move 2.6s 390ms infinite cubic-bezier(0.2, 0.64, 0.81, 0.23);
                -moz-animation: cssload-move 2.6s 390ms infinite cubic-bezier(0.2, 0.64, 0.81, 0.23);
            }

            .cssload-container div:nth-child(4) {
                background-color: rgb(250,181,28);
                animation: cssload-move 2.6s 585ms infinite cubic-bezier(0.2, 0.64, 0.81, 0.23);
                -o-animation: cssload-move 2.6s 585ms infinite cubic-bezier(0.2, 0.64, 0.81, 0.23);
                -ms-animation: cssload-move 2.6s 585ms infinite cubic-bezier(0.2, 0.64, 0.81, 0.23);
                -webkit-animation: cssload-move 2.6s 585ms infinite cubic-bezier(0.2, 0.64, 0.81, 0.23);
                -moz-animation: cssload-move 2.6s 585ms infinite cubic-bezier(0.2, 0.64, 0.81, 0.23);
            }



    @keyframes cssload-move {
        0% {
            left: 0%;
        }

        100% {
            left: 100%;
        }
    }

    @-o-keyframes cssload-move {
        0% {
            left: 0%;
        }

        100% {
            left: 100%;
        }
    }

    @-ms-keyframes cssload-move {
        0% {
            left: 0%;
        }

        100% {
            left: 100%;
        }
    }

    @-webkit-keyframes cssload-move {
        0% {
            left: 0%;
        }

        100% {
            left: 100%;
        }
    }

    @-moz-keyframes cssload-move {
        0% {
            left: 0%;
        }

        100% {
            left: 100%;
        }
    }
</style>
<!--//////////////////////////////////////// End Style CSS for Pre Loader ////////////////////////////////////////--> 
