/* Gallery buttons design  */
#controls .left {
	float: left;
}

#controls .button.view-switcher {
	float: right;
	margin-top: 5px;
	font-weight: normal;
	width: 40px;
	padding: 6px 11px;
	background-color: transparent;
	border: 1px solid transparent;
}

#controls .button.view-switcher img{
	opacity: .3;
}

#controls .button.view-switcher.gallery {
	float: none;
	margin-right: 4px;
	padding: 7px 11px;
	background-color: rgba(240, 240, 240, .9);
}

#controls .button.view-switcher.gallery img{
	opacity: .5;
}

#controls .button.sorting {
	padding: 8px 7px;
	-webkit-perspective: 1000px;
	-moz-perspective: 1000px;
	perspective: 1000px;
}

#controls .button.left-switch-button,
#controls .button.left-switch-button:hover {
	float: right;
	display: inline;
	border-radius: 3px 0 0 3px;
	margin-left: 3px;
	margin-right: 0;
	border-right: 0;
	border-right: 1px solid rgba(216, 216, 216, 0.9);
}

#controls .button.right-switch-button {
	float: right;
	display: inline;
	border-radius: 0 3px 3px 0;
	margin-left: -1px;
}

#share-button img,
.button.left-switch-button img,
.button.right-switch-button img {
	vertical-align: -3px;
	opacity: 0.6;
}

#controls .disabled-button {
	pointer-events: none;
	background-color: rgba(230, 230, 230, .9);
	border: 1px solid rgba(230, 230, 230, .9);
}

#controls .disabled-button img {
	opacity: 0.25;
}

#controls .disabled-button:hover,
#controls .disabled-button:focus,
#controls .disabled-button a:focus,
#controls .disabled-button.loading {
	background-color: rgba(255, 255, 255, .9);
	color: #111;
	border: 1px solid rgba(240, 240, 240, .9);
}

#controls .button.view-switcher:hover {
	background-color: rgba(255, 255, 255, .9);
	color: #111;
	border: 1px solid rgba(240, 240, 240, .9);
}

#controls .button.sorting.active-button {
	background-color: rgba(255, 255, 255, .9);
	color: #111;
	border: 1px solid rgba(240, 240, 240, .9);
	border-right-color: rgba(216, 216, 216, 0.9);
}

#controls .button.sorting.active-button:hover {
	background-color: rgba(255, 255, 255, .9);
	color: #111;
	border: 1px solid rgba(240, 240, 240, .9);
	border-right-color: rgba(216, 216, 216, 0.9);
}

/* Original Flip CSS by David Walsh
http://davidwalsh.name/css-flip*/

/* Wrapping both sort images */
#controls .button.sorting .flipper {
	-webkit-transform: perspective(1000px);
	-moz-transform: perspective(1000px);
	transform: perspective(1000px);

	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;

	-webkit-transition: 0.3s;
	-moz-transition: 0.3s;
	transition: 0.3s;

	position: relative;
}

#controls .button.sorting .front,
#controls .button.sorting .back {
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;

	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;

	-webkit-transition: 0.3s;
	-moz-transition: 0.3s;
	transition: 0.3s;

	position: absolute;
	top: 0;
	left: 0;
	padding: 2px 1px;
}

#controls .button.sorting .front,
#controls .button.sorting.active-button.hover .back {
	z-index: 2;

	-webkit-transform: rotateX(0deg);
	-moz-transform: rotateX(0deg);
	transform: rotateX(0deg);
}

#controls .button.sorting .back {
	filter: alpha(opacity=0); /* Hide this class in IE<10 */

	-webkit-transform: rotateX(180deg);
	-moz-transform: rotateX(180deg);
	transform: rotateX(180deg);
}

#button-loading {
	position: absolute;
	width: 24px;
	height: 24px;
	background-size: 24px 24px;
	margin-left: -4px;
	margin-top: -3px;
}

#controls .button.sorting.active-button.hover .front {
	-webkit-transform: rotateX(180deg);
	-moz-transform: rotateX(180deg);
	transform: rotateX(180deg);
}