@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,700|Roboto+Condensed:300,400,700|Roboto:100,400,700');

/*############################################################################
##############################################################################
##############################################################################
BUTTONS
##############################################################################
##############################################################################
############################################################################*/
.button{
	display: inline-block;
	position: relative;

	margin: 0px;
	padding: 0px;

	box-sizing: border-box;

	float: left;

	width: 72px;
	height: 72px;

	align: center;
	text-align: center;
	vertical-align: middle;

	cursor: pointer;
}

.round{
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-ms-border-radius: 10px;
	-o-border-radius: 10px;
	border-radius: 10px;
	float: none;

	margin: 0px 15px 0px 15px;
}

.round > span{
	display: inline-block;
	position: absolute;

	margin: 0px;
	padding: 0px;

	width: 80px;

	left: -4px;
	top: 80px;

	align: center;
	text-align: center;

	font-family: 'Open Sans', Helvetica, Arial, Verdana, sans-serif;
	color: #000;
	font-size: 10pt;
	font-weight: 100;
	letter-spacing: 0.05em;
	line-height: 1.05em;
}

.leftpanelbutton{
	display: inline-block;
	position: relative;

	margin: 0px 0px 10px 0px;
	padding: 0px 0px 0px 20px;

	width: 100%;

	align: left;
	text-align: left;

	white-space: nowrap;

	cursor: pointer;
}

.leftpanelbutton > img{
	width: auto;
	height: 25px;
}

.leftpanelbutton > span{
	display: inline-block;
	position: relative;

	margin: 0px 0px 0px 5px;
	padding: 0px;

	height: 25px;

	align: left;
	text-align: left;
	vertical-align: top;

	font-family: 'Open Sans', Helvetica, Arial, Verdana, sans-serif;
	color: #000;
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 0.05em;
	line-height: 25px;
}

.plus{
	background-color: #ec2e4f;
	padding: 25px  0px 0px 0px;
}
.magnifyingglass{
	padding: 20px 0px 0px 0px;
	background-color: #6fcac7;
}

.aelogo{
	background-color: #5e5e5e;
	position: relative;
	padding: 25px 0px 0px 0px;
}
.document{
	background-color: #f6cd0c;
	padding: 20px 0px 0px 0px;
}
.calendar{
	background-color: #9c00f7;
	padding: 20px 0px 0px 0px;
}
.star{
	background-color: #5700ff;
	padding: 20px 0px 0px 0px;
}
.database{
	background-color: #5bc2ef;
	padding: 20px 0px 0px 0px;
}
.database > img{
	width: 50%;
	height: auto;
}
.button.active .triangle{
	right: -8px;
}
.triangle{
	display: inline-block;
	position: absolute;

	margin: 0px;
	padding: 0px;

	top: 3px;
	right: 100px;

	transform: rotate(45deg);
	transform-origin: 50% 100%;

	width: 52px;
	height: 52px;

	background-color: inherit;

	z-index: -1;

	-webkit-transition: all 400ms ease-in-out;
	-moz-transition: all 400ms ease-in-out;
	-ms-transition: all 400ms ease-in-out;
	-o-transition: all 400ms ease-in-out;
	transition: all 400ms ease-in-out;
}