/* begin fadein animation */
@-moz-keyframes fadein { /* Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes fadein { /* Opera */
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
}
@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
/* end fadein animation */

/* begin fadeout animation */

@-moz-keyframes fadeout { /* Firefox */
    from {
        opacity:1;
    }
    to {
        opacity:0;
    }
}
@-webkit-keyframes fadeout { /* Safari and Chrome */
    from {
        opacity:1;
    }
    to {
        opacity:0;
    }
}
@-o-keyframes fadeout { /* Opera */
    from {
        opacity:1;
    }
    to {
        opacity: 0;
    }
}
@keyframes fadeout {
    from {
        opacity:1;
    }
    to {
        opacity:0;
    }
}

/* end fadeout */


.listone, .listtwo, .listthree, .listfour, .listfive,.listsix, .listseven, .listeight{
    	width:12.5%;
	height:auto;
	float: left;
	margin:0px;
	background:rgba(20,59,134,0.9);
	color:rgba(255,255,255,1);
	padding:15px 10px;
	font-size:16px;
	font-weight: 400;
	text-align: center;
	}
#people{
    width: 100%;
}
#people .listone {
	opacity: 0;
    -moz-animation: fadein 2s ease-in 2s forwards; /* Firefox */
    -webkit-animation: fadein 2s ease-in 2s forwards; /* Safari and Chrome */
    -o-animation: fadein 2s ease-in 2s forwards; /* Opera */
	animation: fadein 2s ease-in 2s forwards;
}	

#people .listtwo{
    opacity: 0;
    -moz-animation: fadein 2s ease-in 4s forwards; /* Firefox */
    -webkit-animation: fadein 2s ease-in 4s forwards; /* Safari and Chrome */
    -o-animation: fadein 2s ease-in 4s forwards; /* Opera */
    animation: fadein 2s ease-in 4s forwards;
}

#people .listthree{
    opacity: 0;
    -moz-animation: fadein 2s ease-in 6s forwards; /* Firefox */
    -webkit-animation: fadein 2s ease-in 6s forwards; /* Safari and Chrome */
    -o-animation: fadein 2s ease-in 6s forwards; /* Opera */
    animation: fadein 2s ease-in 6s forwards;
}

#people .listfour{
    opacity: 0;
    -moz-animation: fadein 2s ease-in 8s forwards; /* Firefox */
    -webkit-animation: fadein 2s ease-in 8s forwards; /* Safari and Chrome */
    -o-animation: fadein 2s ease-in 8s forwards; /* Opera */
    animation: fadein 2s ease-in 8s forwards;
}

#people .listfive{
    opacity: 0;
    -moz-animation: fadein 2s ease-in 10s forwards; /* Firefox */
    -webkit-animation: fadein 2s ease-in 10s forwards; /* Safari and Chrome */
    -o-animation: fadein 2s ease-in 10s forwards; /* Opera */
    animation: fadein 2s ease-in 10s forwards;
}

#people .listsix{
    opacity: 0;
    -moz-animation: fadein 2s ease-in 12s forwards; /* Firefox */
    -webkit-animation: fadein 2s ease-in 12s forwards; /* Safari and Chrome */
    -o-animation: fadein 2s ease-in 12s forwards; /* Opera */
    animation: fadein 2s ease-in 12s forwards;
}

#people .listseven{
    opacity: 0;
    -moz-animation: fadein 2s ease-in 14s forwards; /* Firefox */
    -webkit-animation: fadein 2s ease-in 14s forwards; /* Safari and Chrome */
    -o-animation: fadein 2s ease-in 14s forwards; /* Opera */
    animation: fadein 2s ease-in 14s forwards;
}

#people .listeight{
    opacity: 0;
    -moz-animation: fadein 2s ease-in 16s forwards; /* Firefox */
    -webkit-animation: fadein 2s ease-in 16s forwards; /* Safari and Chrome */
    -o-animation: fadein 2s ease-in 16s forwards; /* Opera */
    animation: fadein 2s ease-in 16s forwards;
}
@media (max-width: 991px){
.listone, .listtwo, .listthree, .listfour, .listfive,.listsix, .listseven, .listeight{
    	width:12.5%;
	padding:10px 5px;
	font-size:13px;
	}
}
@media (max-width: 767px){
.listone, .listtwo, .listthree, .listfour, .listfive,.listsix, .listseven, .listeight{
    	width:25%;
	padding:10px 5px;
	font-size:10px;
	}
}