@keyframes serviceLoagind {
    from {-webkit-filter: grayscale(0%);}
    to {-webkit-filter: grayscale(100%);}
}

.third_party_application {
	padding: 20px 40px;
}

.third_party_application .services-list {
	text-align: center;
}

.third_party_application .services-list li {
	display: inline-block;
	position: relative;
	width: 200px;
	margin: 10px;
}
.third_party_application .services-list li.service-loading {
    animation-name: serviceLoagind;
    animation-iteration-count: infinite;
    animation-duration: 1.5s;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
    animation-direction: alternate;
}
.third_party_application .services-list li.service-loading .actions:after {
	content: "";
	background-image: url( "/assets/images/lightbox/loading.gif" );
    width: 10%;
    height: 20px;
    display: inline-block;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.third_party_application .services-list li .actions {
	text-align: center;
}
.third_party_application .services-list li .actions a {
	color: white;
}
.third_party_application .services-list li .service_logo {
	position: relative;
	background-size: cover;
	margin-left: 25px;
	width: 150px;
	height: 150px;
}
.third_party_application .services-list li .service_logo .badge {
	position: absolute;
	right: 5%;
	top: 5%;
    display: inline-block;
    background: #747474;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    color: white;
    border-radius: 100%;
    opacity: .8;
    transition: opacity 1s;
}
.third_party_application .services-list li .service_logo .badge:hover {
	opacity: 1;
}
.third_party_application .services-list li:not(.service-allowed) .service_logo {
	-webkit-filter: grayscale(100%);
	filter: gray;
}
.third_party_application .services-list li h3 {
	width: 100%;
	text-align: center;
	margin: 10px auto;
}