#referenceslisting {
	margin-bottom:15px;
	padding:0 15px;
}

#referenceslisting .app {
	padding:0;
}

#referenceslisting .app img{
	width:100%;
}

#referenceslisting .app .app-description{
	opacity:0;
	filter: alpha(opacity=0);
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
	background:rgba(27, 135, 245, 0.9);
}

#referenceslisting .app:hover{
	cursor:pointer;
}


#referenceslisting .app .app-description .app-title{
	position:absolute;
	top:50%;
	left:50%;
	-ms-transform: translate(-50%,-50%)	;
    -webkit-transform: translate(-50%,-50%)	;
	transform: translate(-50%,-50%)	;
	color:#fff;
	width:100%;
	padding:0 5px;
	text-align:center
}

#referenceslisting .app .app-description .app-links {
	display:none;
	position:absolute;
	top:50%;
	left:50%;
	-ms-transform: translate(-50%,-50%)	;
    -webkit-transform: translate(-50%,-50%)	;
	transform: translate(-50%,-50%);
	text-align:center;
}

#referenceslisting .app.fixed .app-description{
	opacity:1;
	filter: alpha(opacity=100);
}

#referenceslisting .app.fixed .app-description .app-title{
	top:0px;
	left:0;
	-ms-transform:none	;
    -webkit-transform: none;
	transform:none;
	padding:5px 0;
	border-bottom:1px solid #fff;
}

#referenceslisting .app.fixed .app-description .app-links{
	display:block;
	width:100%;
}

#referenceslisting .app .app-description .app-links a{ 
	display:block;
	color:#ddd;
	margin:5px 0;
	font-size:16px;
}

#referenceslisting .app .app-description .app-links a:hover{ 
	color:#fff;
	text-decoration:none
}


#referenceslisting .app.in .app-description{
	-webkit-animation-duration: 0.5s;
	-webkit-animation-name: slideLeftToRightIn;
	-webkit-animation-delay:0.1s;
	-webkit-animation-fill-mode:forwards;
	-webkit-animation-timing-function: ease-out;
	
	animation-duration: 0.5s;
	animation-name: slideLeftToRightIn;
	animation-delay:0.1s;
	animation-fill-mode:forwards;
	animation-timing-function: ease-out;
}

#referenceslisting .app.out .app-description{
	-webkit-animation-duration: 1s;
	-webkit-animation-name: slideRightToLeftOut;
	-webkit-animation-fill-mode:backwards;
	-webkit-animation-timing-function: ease-out;
	
	animation-duration: 1s;
	animation-name: slideRightToLeftOut;
	animation-fill-mode:backwards;
	animation-timing-function: ease-out;
}

#referenceslisting .app.animate {
	-webkit-animation-duration: 0.3s;
	-webkit-animation-name: slideBottomToTop;
	-webkit-animation-fill-mode:backwards;
	-webkit-animation-timing-function: ease-out; 
	
	animation-duration: 0.3s;
	animation-name: slideBottomToTop;
	animation-fill-mode:backwards;
	animation-timing-function: ease-out;
}

#sortListing {
	text-align:center;
	padding:15px 0;
}

#sortListing a{
	font-size:22px;
}

#sortListing a:hover{
	cursor:pointer;
	text-decoration:none
}

/* KEYFRAME */

@keyframes slideLeftToRightIn {
	0% {
		opacity:0;
		filter: alpha(opacity=0);
		-webkit-transform:translateX(-25%);
		-moz-transform:translateX(-25%);
		-ms-transform:translateX(-25%);
		transform: translateX(-25%);
		
	}
	100% { 
		opacity:100;
		filter: alpha(opacity=100);
		-webkit-transform:translateX(0);
		-moz-transform:translateX(0);
		-ms-transform:translateX(0);
		transform: translateX(0);
	}
}

@-webkit-keyframes slideLeftToRightIn {
	0% {
		opacity:0;
		filter: alpha(opacity=0);
		-webkit-transform:translateX(-25%);
		-moz-transform:translateX(-25%);
		-ms-transform:translateX(-25%);
		transform: translateX(-25%);
		
	}
	100% { 
		opacity:100;
		filter: alpha(opacity=100);
		-webkit-transform:translateX(0);
		-moz-transform:translateX(0);
		-ms-transform:translateX(0);
		transform: translateX(0);
	}
}

@keyframes slideRightToLeftOut {
	0% {
		opacity:100;
		filter: alpha(opacity=100);
		-webkit-transform:translateX(0);
		-moz-transform:translateX(0);
		-ms-transform:translateX(0);
		transform: translateX(0);
		
	}
	100% {
		opacity:0;
		filter: alpha(opacity=0);
		-webkit-transform:translateX(25%);
		-moz-transform:translateX(25%);
		-ms-transform:translateX(25%);
		transform: translateX(25%);
	}
}

@-webkit-keyframes slideRightToLeftOut {
	0% {
		opacity:100;
		filter: alpha(opacity=100);
		-webkit-transform:translateX(0);
		-moz-transform:translateX(0);
		-ms-transform:translateX(0);
		transform: translateX(0);
		
	}
	100% {
		opacity:0;
		filter: alpha(opacity=0);
		-webkit-transform:translateX(25%);
		-moz-transform:translateX(25%);
		-ms-transform:translateX(25%);
		transform: translateX(25%);
	}
}

@keyframes slideBottomToTop {
	0% {
		opacity:0;
		filter: alpha(opacity=0);
		-webkit-transform:translateY(100%);
		-moz-transform:translateY(100%);
		-ms-transform:translateY(100%);
		transform: translateY(100%);
		
	}
	100% { 
		opacity:100;
		filter: alpha(opacity=100);
		-webkit-transform:translateY(0);
		-moz-transform:translateY(0);
		-ms-transform:translateY(0);
		transform: translateY(0);
	}
}

@-webkit-keyframes slideBottomToTop {
	0% {
		opacity:0;
		filter: alpha(opacity=0);
		-webkit-transform:translateY(100%);
		-moz-transform:translateY(100%);
		-ms-transform:translateY(100%);
		transform: translateY(100%);
		
	}
	100% { 
		opacity:100;
		filter: alpha(opacity=100);
		-webkit-transform:translateY(0);
		-moz-transform:translateY(0);
		-ms-transform:translateY(0);
		transform: translateY(0);
	}
}