@import url('https://fonts.googleapis.com/css?family=Open+Sans');

.ff-container{
	margin:  1% 10% 0 10%;
}
.ff-container label{
	font-family: 'Open Sans', Tahoma, Geneva, sans-serif;
	text-transform: uppercase;
	line-height: 1em;
	width: 20%;
	float:left;
	cursor: pointer;
	color: #999;
	font-size: 10pt;
}
.ff-container input.ff-selector-type-all:checked ~ label.ff-label-type-all,
.ff-container input.ff-selector-type-1:checked ~ label.ff-label-type-1,
.ff-container input.ff-selector-type-2:checked ~ label.ff-label-type-2,
.ff-container input.ff-selector-type-3:checked ~ label.ff-label-type-3,
.ff-container input.ff-selector-type-4:checked ~ label.ff-label-type-4{
	/*text-decoration: underline;*/
	border-bottom: 2px solid #999;
	color: #333;
}
.ff-container input{
	display: none;
}
.ff-items{
	width: auto;
	height: 520px;
	text-align: center;
	position:relative;
}
.ff-items a{
	display: block;
	position:relative;
	background-color:transparent;
}
/*
.ff-items li{
	position:absolute;
	margin: 0px;
	float: left;
	width: auto;
	height: auto;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}*/
.ff-items li{
	position:absolute;
	float: left;
	width: auto;
	height: auto;
	-webkit-transition: all 0.1s ease-in-out;
	-moz-transition: all 0.1s ease-in-out;
	-o-transition: all 0.1s ease-in-out;
	-ms-transition: all 0.1s ease-in-out;
	transition: all 0.1s ease-in-out;
}
.ff-container input.ff-selector-type-1:checked ~ .ff-items .ff-item-type-1,
.ff-container input.ff-selector-type-2:checked ~ .ff-items .ff-item-type-2,
.ff-container input.ff-selector-type-3:checked ~ .ff-items .ff-item-type-3,
.ff-container input.ff-selector-type-4:checked ~ .ff-items .ff-item-type-4{	
	opacity: 1;
	-webkit-transform: scale(1.1);
	-moz-transform: scale(1.1);
	-o-transform: scale(1.1);
	-ms-transform: scale(1.1);
	transform: scale(1.1);
}
.ff-container input.ff-selector-type-1:checked ~ .ff-items li:not(.ff-item-type-1),
.ff-container input.ff-selector-type-2:checked ~ .ff-items li:not(.ff-item-type-2),
.ff-container input.ff-selector-type-3:checked ~ .ff-items li:not(.ff-item-type-3),
.ff-container input.ff-selector-type-4:checked ~ .ff-items li:not(.ff-item-type-4){
	opacity: 0.1;
	-webkit-transform: scale(0.5);
	-moz-transform: scale(0.5);
	-o-transform: scale(0.5);
	-ms-transform: scale(0.5);
	transform: scale(0.5);
}


/* ball */
.small-ball {
	width:50px;height:50px; 
	border-radius:99em;
}
.medium-ball {
	width:110px;height:110px; 
	border-radius:99em;
}
.big-ball {
	width:190px;height:190px; 
	border-radius:99em;
}
.ball-type1{
	background-color:#816289;
	border:0px solid #816289;
}
.ball-type2{
	background-color:#f19394;
}
.ball-type3{
	background-color:#70bab6;
}
.ball-type4{
	background-color:#3e6eac;
}


/* Media Queries */

@media screen and (max-width: 960px) {
	
	.ff-items a{
		-moz-transform: scale(0.7) rotate(0deg) translate(0px, 0px) skew(0deg, 0deg);
		-webkit-transform: scale(0.7) rotate(0deg) translate(0px, 0px) skew(0deg, 0deg);
		-o-transform: scale(0.7) rotate(0deg) translate(0px, 0px) skew(0deg, 0deg);
		-ms-transform: scale(0.7) rotate(0deg) translate(0px, 0px) skew(0deg, 0deg);
		transform: scale(0.7) rotate(0deg) translate(0px, 0px) skew(0deg, 0deg);
	}

	.wrapper .tip-small {
	  	margin-top:-8px;
	}
	.wrapper .tip-medium{
	  	margin-top:-14px;
	}
	.wrapper .tip-big{
	  	margin-top:-26px;
	}

	.ff-container{
		margin:  0% 3% 0 3%;
	}
	.ff-container label{
		margin:  6% 3% 0 3%;
		white-space:nowrap;
		float: none;
		cursor: pointer;
		font-size: 10px;
	}

}



/****/

@media screen and (max-device-width: 640px)  {
	.ff-items{
		height: 640px;
		width: 160%;
		-moz-transform: scale(1) rotate(270deg) translate(-28%, -40%) skew(0deg, 0deg);
		-webkit-transform: scale(1) rotate(270deg) translate(-28%, -40%) skew(0deg, 0deg);
		-o-transform: scale(1) rotate(270deg) translate(-28%, -40%) skew(0deg, 0deg);
		-ms-transform: scale(1) rotate(270deg) translate(-28%, -40%) skew(0deg, 0deg);
		transform: scale(1) rotate(270deg) translate(-28%, -40%) skew(0deg, 0deg);
	}
	.ff-items a{
		-moz-transform: scale(1) rotate(90deg) translate(0px, 0px) skew(0deg, 0deg);
		-webkit-transform: scale(1) rotate(90deg) translate(0px, 0px) skew(0deg, 0deg);
		-o-transform: scale(1) rotate(90deg) translate(0px, 0px) skew(0deg, 0deg);
		-ms-transform: scale(1) rotate(90deg) translate(0px, 0px) skew(0deg, 0deg);
		transform: scale(1) rotate(90deg) translate(0px, 0px) skew(0deg, 0deg);
	}
	.ff-container label{
		font-size: 18pt;
	}
	.wrapper .tip-small {
	  	-moz-transform: scale(2) rotate(90deg) translate(-15px, 17px) skew(0deg, 0deg);
		-webkit-transform: scale(2) rotate(90deg) translate(-15px, 17px) skew(0deg, 0deg);
		-o-transform: scale(2) rotate(90deg) translate(-15px, 17px) skew(0deg, 0deg);
		-ms-transform: scale(2) rotate(90deg) translate(-15px, 17px) skew(0deg, 0deg);
		transform: scale(2) rotate(90deg) translate(-15px, 17px) skew(0deg, 0deg);
	}
	.wrapper .tip-medium{
	  	-moz-transform: scale(2) rotate(90deg) translate(-28px, 33px) skew(0deg, 0deg);
		-webkit-transform: scale(2) rotate(90deg) translate(-28px, 33px) skew(0deg, 0deg);
		-o-transform: scale(2) rotate(90deg) translate(-28px, 33px) skew(0deg, 0deg);
		-ms-transform: scale(2) rotate(90deg) translate(-28px, 33px) skew(0deg, 0deg);
		transform: scale(2) rotate(90deg) translate(-28px, 33px) skew(0deg, 0deg);
	}
	.wrapper .tip-big{
	  	-moz-transform: scale(2) rotate(90deg) translate(0px, 0px) skew(0deg, 0deg);
		-webkit-transform: scale(2) rotate(90deg) translate(0px, 0px) skew(0deg, 0deg);
		-o-transform: scale(2) rotate(90deg) translate(0px, 0px) skew(0deg, 0deg);
		-ms-transform: scale(2) rotate(90deg) translate(0px, 0px) skew(0deg, 0deg);
		transform: scale(2) rotate(90deg) translate(-53px, 54px) skew(0deg, 0deg);
	}

	.ff-container{
		margin:  0% 3% 0 3%;
	}
	.ff-container label{
		margin:  6% 3% 0 3%;
		white-space:nowrap;
		float: none;
		cursor: pointer;
		font-size: 10px;
	}

}