#color-options {
	position: fixed;
	z-index: 9998;
	background: #FFFFFF;
	padding: 10px 20px;
	left: -70px;
	top: 90px;
	width: 30px;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
	
	transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-webkit-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
}

.color-options-link {
	background: #FFFFFF;
	padding: 10px 20px;
	font-size: 14px;
	position: fixed;
	left: -51px;
	margin: 0;
	top: 163px;
	z-index: 9999;
	border-radius: 5px 5px 0 0;
	box-shadow: 0 -3px 3px rgba(0, 0, 0, 0.2);
	
	outline: 0 none;
	
	-moz-transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
	-o-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	transform: rotate(90deg);
	transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-webkit-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
}

#colorpicker-cnt p {
	margin-bottom: 0;
	cursor: pointer;
}

#color-options li a {
	height: 30px;
	text-indent: -9999px;
	width: 30px;
	margin-bottom: 5px;
	display: block;
	outline: 0 none;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
	
	transition: transform 0.35s ease;
	transition: transform 0.35s cubic-bezier(0.81, -0.57, 0.175, 1.65);
	
	-moz-transition: -moz-transform 0.35s cubic-bezier(0.81, -0.57, 0.175, 1.65);
	-webkit-transition: -webkit-tranform 0.35s ease;
	-webkit-transition: -webkit-transform 0.35s cubic-bezier(0.81, -0.57, 0.175, 1.65);
	-ms-transition: -ms-transform 0.35s ease;
	-o-transition: -o-transform 0.35s ease;
	z-index: 8;
}

#color-options li a:hover {
	transform: scale(1.7);
	-moz-transform: scale(1.7);
	-webkit-transform: scale(1.7);
	-ms-transform: scale(1.7);
	-o-transform: scale(1.7);
	z-index: 10;
}

#color-options li a.blue {
	background: #1e2f4a;
}
#color-options li a.red {
	background: #470d0d;
}
#color-options li a.green {
	background: #57692f;
}
#color-options li a.grey {
	background: #858585;
}
#color-options li a.purple {
	background: #3b1936;
}
#color-options li a.brown {
	background: #988b78;
}
#color-options li a.orange {
	background: #844617;
}
#color-options li a.cyan {
	background: #236b70;
}
#color-options li a.pink {
	background: #692958;
}
#color-options li a.dark-grey {
	background: #4e5457;
}

.color-options-link:focus {
	left: 19px;
}

.color-options-link:focus ~ #color-options {
	left: 0px;
}

@media all and (max-width: 767px) {
	#color-options {
		padding: 20px 10px;
		left: 50%;
		bottom: -90px;
		top: auto;
		height: 30px;
		width: 280px;
		margin-left: -150px;
	}

	.color-options-link {
		padding: 10px 20px;
		position: fixed;
		left: 50%;
		margin: 0;
		bottom: 0px;
		top: auto;
		margin-left: -67px;

		-moz-transform: none;
		-webkit-transform: none;
		-o-transform: none;
		-ms-transform: none;
		transform: none;
	}

	#color-options li a {
		float: left;
		height: 30px;
		width: 25px;
		margin-left: 3px;
	}

	#color-options li a.first {
		margin-left: 1px;
	}

	.color-options-link:focus {
		bottom: 65px;
		left: 50%;
	}

	.color-options-link:focus ~ #color-options {
		bottom: -25px;
		left: 50%;
	}
}