/* ENCUENTRA TU COLOR */
#colors {
	background-color: #f2f2f2;
}
#colors .color-wrapper:after{
	content: "";
	display: table;
	clear: both;
}
#colors .color-slider .color-ball{
	width: 12%;
    padding-bottom: 12%;
	margin: 20px 1%;
	float: left;
	border-radius: 50%;
	position: relative;
	/*overflow: hidden;*/
}
#colors .color-slider .color-ball a{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 50%;
}
#colors .color-slider .color-ball a:before{
	position: absolute;
    top: -6px;
    left: -6px;
    right: -6px;
    bottom: -6px;
    border-radius: 50%;
    content: '';
    border: 2px solid transparent;
    z-index: 0;
	-webkit-transition: border 0.3s ease-out;
	-moz-transition: border 0.3s ease-out;
	transition: border 0.3s ease-out;
}
#colors .color-slider .color-ball a.active:before{
    border: 2px solid rgba(218, 41, 28, 1);
}
#colors .indicator{
	display: none;
}
@media screen AND (min-width: 768px) {
	#colors .color-wrapper{
		margin-top: 25px;
		width: 100% !important;
	}
}
@media screen AND (min-width: 992px) {
	#colors .color-slider .color-ball a:hover:before{
		border: 2px solid rgba(218, 41, 28, 0.8);
	}
	#colors .color-slider .color-ball{
		width: 10%;
		padding-bottom: 10%;
		margin: 20px 2%;
	}
}
@media screen AND (min-width: 1200px) {
	#colors .color-slider .color-ball{
		width: 8%;
	    padding-bottom: 8%;
	    margin: 20px 3%;
	}
}
@media screen AND (max-width: 767px) {
	#colors .col-xs-12 {
		padding: 0;
	}
	#colors .color-slider{
		overflow-x: scroll;
		/*width: 320px;*/
		width: 100%;
		height: 180px;
		margin: 10px 0;
	}
	#colors .color-slider .color-ball{
		width: 140px;
		height: 140px;
		margin: 20px;
		padding-bottom: 0;
	}
	#colors .indicator{
		display: block;
		color: #000;
		text-align: center;
		font-size: 25px;
		position: absolute;
		z-index: 9;
		width: 100%;
		background-color: #f2f2f2;
		margin-bottom: 0;
		padding-bottom: 10px;
	}
}