@-webkit-keyframes changeSkinIcon {
	0% {
		-webkit-transform: rotate(0);
	}
	5% {
		-webkit-transform: rotate(90deg);
	}
	25% {
		-webkit-transform: rotate(90deg);
	}
	30% {
		-webkit-transform: rotate(180deg);
	}
	50% {
		-webkit-transform: rotate(180deg);
	}
	55% {
		-webkit-transform: rotate(270deg);
	}
	75% {
		-webkit-transform: rotate(270deg);
	}
	80% {
		-webkit-transform: rotate(360deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
	}
}
@-moz-keyframes changeSkinIcon {
	0% {
		-moz-transform: rotate(0);
	}
	15% {
		-moz-transform: rotate(90deg);
	}
	25% {
		-moz-transform: rotate(90deg);
	}
	35% {
		-moz-transform: rotate(180deg);
	}
	50% {
		-moz-transform: rotate(180deg);
	}
	65% {
		-moz-transform: rotate(270deg);
	}
	75% {
		-moz-transform: rotate(270deg);
	}
	90% {
		-moz-transform: rotate(360deg);
	}
	100% {
		-moz-transform: rotate(360deg);
	}
}
@-o-keyframes changeSkinIcon {
	0% {
		-o-transform: rotate(0);
	}
	15% {
		-o-transform: rotate(90deg);
	}
	25% {
		-o-transform: rotate(90deg);
	}
	35% {
		-o-transform: rotate(180deg);
	}
	50% {
		-o-transform: rotate(180deg);
	}
	65% {
		-o-transform: rotate(270deg);
	}
	75% {
		-o-transform: rotate(270deg);
	}
	90% {
		-o-transform: rotate(360deg);
	}
	100% {
		-o-transform: rotate(360deg);
	}
}
@keyframes changeSkinIcon {
	0% {
		transform: rotate(0);
	}
	15% {
		transform: rotate(90deg);
	}
	25% {
		transform: rotate(90deg);
	}
	35% {
		transform: rotate(180deg);
	}
	50% {
		transform: rotate(180deg);
	}
	65% {
		transform: rotate(270deg);
	}
	75% {
		transform: rotate(270deg);
	}
	90% {
		transform: rotate(360deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

.style_changer {
	* {
		color: @main-site-dark-color !important;
	}
	.changer_button {
		border: none;
		background: @main-site-light-color;
		.rounded-top-right(3px);
		.rounded-bottom-right(3px);
		
		i {
			font-size: 30px;
			font-style: normal;
			line-height: 44px;
			color: #fff;
			-webkit-animation: animButtonIcon 1.8s ease infinite;
			-moz-animation: animButtonIcon 1.8s ease infinite;
			animation: animButtonIcon 1.8s ease infinite;
			
			&:before {
				content: "\e714";
				font-family: @font-icons-main;
				.rel();
				top: 1px;
			}
		}
	}
	.changer_content {
		border: none;
		background: @main-site-light-color;
		.rounded-bottom-right(3px);
		
		.sc_main_header {
			border-bottom: none;
		}
		h3 {
			text-align: left;
			margin-left: 15px;
		}
		.changer_content_block {
			border-bottom: none;
			
			h3 {
				font-size: 14px;
			}
			.sel_selected {
				.rounded(3px);
				background: @main-site-light-color;
				border-color: fade(@main-site-dark-color, 30%);
				
				.sel_arraw {
					background: none;

					&:after, &:before {
						content: " ";
						.abs();
						.block();
						width: 6px;
						height: 2px;
						background: @main-site-dark-color;
						top: 50%;
						margin-top: -1px;
						left: 50%;
					}
					&:after {
						margin-left: -4px;
						.rotate(45deg);
					}
					&:before {
						.rotate(-45deg);
					}
				}
			}
			.sel_options {
				background: transparent;
				.rounded(3px);
				border: 1px solid;
				border-color: fade(@main-site-dark-color, 30%);
				
				.sel_option {
					border: none;
					background: @main-site-light-color;
					.transition(background .3s ease-in-out);
					
					&:hover {
						background: darken(@main-site-light-color, 5%);
					}
				}
			}
			#pattern-changer {
				padding-bottom: 5px;
				margin-left: 15px;
				
				li {
					border: none;
				}
			}
		}
	}
	&:before {
		content: " ";
		.abs();
		.block();
		width: 100%;
		height: 1px;
		background: fade(@main-site-dark-color, 30%);
		bottom: -1px;
		left: 0;
		z-index: 1;
	}
}

#stylechanger-skin-changer-button {
	a:before {
		-webkit-animation: changeSkinIcon 5s linear infinite;
		-moz-animation: changeSkinIcon 5s linear infinite;
		animation: changeSkinIcon 5s linear infinite;
	}
}

#stylechanger-skin-changer {
	z-index: 9999;
}