#pinWrapper {
	position: 			fixed;
	left: 				0px;
	right: 				0px;
	height: 			100px;
	bottom: 			-50px;
	z-index: 			15;
	overflow: 			auto;
}
#pinLayout {
	padding: 			10px 20px 70px 20px;
	max-width: 			1160px;
	margin-left: 		auto;
	margin-right: 		auto;
	overflow: 			hidden;
}
#pinWrapper.open #pinLayout {
	overflow: 			auto;
}

#pinWrapper .pin {
	width: 				25%;
	height: 			70px;
	padding:			1px;
	box-sizing: 		border-box;
	float: 				left;
	position: 			relative;
}
@media screen and (max-width: 640px) {
	#pinWrapper .pin {
		width: 			100%;
	}
}
#pinWrapper .pin .noPin {
	border: 			1px dashed #ccc;
	color: 				#ccc;
	position: 			absolute;
	top: 				10px;
	bottom: 			10px;
	left:				10px;
	right: 				10px;
	z-index: 			1;
	padding-top:		12px;
	text-align:			center;
	box-sizing:			border-box;
}
#pinWrapper .pin .pinItem {
	transition: 		background 0.5s linear;
	cursor: 			pointer;
	position: 			relative;
	z-index: 			2;
	height: 			100%;
	overflow: 			hidden;
	box-sizing:			border-box;
	background: 		#bdbdbd;
}



#pinWrapper.open .pin .contentPin {
	background:			#29b6f6; /* blue */
}
#pinWrapper.open .pin .settingPin {
	background: 		#757575; /* grey */
}
#pinWrapper.open .pin .listPin {
	background:			#66bb6a; /* green */
}
#pinWrapper.open .pin .personPin {
	background:			#ab47bc; /* purple */
}
#pinWrapper.open .pin .appsPin {
	background:			#ff9800; /* orange */
}
#pinWrapper.open .pin .eventPin {
	background:			#ef5350; /* red */
}
#pinWrapper.open .pin .communicationPin {
	background:			#5c6bc0; /* indigo */
}

#pinWrapper .pinItem .icon {
	/*background: 		rgba(255, 255, 255, 0.38);*/
	margin: 			10px;
	float: 				left;
}
#pinWrapper .pinItem .icon img {
	display: 			block;
	margin: 			10px;
}
#pinWrapper .pinItem .icon i {
	color: 				rgba(255, 255, 255, 0.87);
}
#pinWrapper .pinItem .name {
	color: 				rgba(255, 255, 255, 0.87);
	font-size: 			18px;
	line-height: 		30px;
	max-height: 		30px;
	overflow: 			hidden;
	text-overflow: 		ellipsis;
	white-space: 		nowrap;
	margin-top: 		10px;
	margin-right: 		10px;
}
#pinWrapper .pinItem .description {
	color: 				rgba(255, 255, 255, 0.54);
	font-size: 			14px;
	margin-right: 		10px;
}
#pinWrapper .pinItem .overlayButton {
	position: 			absolute;
	right: 				0px;
	bottom: 			0px;
	color: 				rgba(0, 0, 0, 0.54);
}
#pinWrapper .pinItem .overlayButton:hover {
	color: 				rgba(0, 0, 0, 0.87);
}
#pinWrapper .pinItem .overlay {
	display: 			none;
	position: 			absolute;
	left: 				0;
	top: 				0;
	width: 				100%;
	height: 			100%;
	background: 		rgba(255, 255, 255, 0.87);
}
#pinWrapper .pinItem .overlay > i {
	display: 			inline-block;
	width: 				25%;
	line-height:		70px;
	text-align: 		center;
	font-size: 			30px;
	color: 				rgba(0, 0, 0, 0.54);
}
#pinWrapper .pinItem .overlay > i:hover {
	color: 				rgba(0, 0, 0, 0.87);
}