/**
 * @author SMDesign Studio (https://www.smdesign-studio.com/)
 * @copyright Copyright (c) 2020 SMDesign Studio (http://www.smdesign.rs/)
 * @package Smdesign_Intesapay
 * @license See LICENSE.txt for license details.
 */
.payment-cards {
	text-align:center;
}
.payment-cards .cards-inner.credit-cards-wrapper ul {
	margin-bottom: 0;
    padding: 5px 10px;
}
.payment-cards .cards-inner.credit-cards-wrapper ul li{
	display: inline-block;
	margin-bottom: 0;
}
.payment-cards .cards-inner.credit-cards-wrapper ul li a{
	text-decoration: none;
}
.payment-cards .cards-inner.credit-cards-wrapper ul li img {
    text-align: center;
    max-height: 40px;
    margin-right: 5px;
}	
@keyframes grow {
	from {
		width: 0%
	} to {
		width: 100%;
	}
}
#color-bar {
	position: relative;
	width: 100%;
	top: 5%;
	left: 50%;
	transform: translate3d(-50%, -50%, 0);
}
#color-bar input {
	display: none;
}
#color-bar label {
  position: relative;
  display: block;
  width: 100%;
  height: 20px;
  background: transparent;
  border-radius: 0.4rem;
  border: 2px solid white;
  overflow: hidden;
  box-shadow: -2px 0 8px 0 rgba(white, 0.6);
}
#color-bar label div {
	position: absolute;
	top: 0;
	left: 0;
	background: linear-gradient(to right, #f46f1c, #0060b1 35%, #005aae 40%, #e9ba05 95%);
	height: 100%;
	width: 0%;
	box-shadow: 0 0 8px 1px white inset;
	animation: grow 2s forwards;
}
#color-bar label div:before {
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	mix-blend-mode: overlay;
	opacity: 0.5;
}
#color-bar span {
	display: inline-block;
	color: #4F9CC0;
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	margin-top: 0.7rem;
}
#color-bar span:last-child {
	float: right;
}

@media screen and (max-width: 832px) {
	.payment-cards .cards-inner.credit-cards-wrapper ul li img {
		margin-bottom: 5px;
	}
}