@import url("https://fonts.googleapis.com/css?family=Lato|Sansita");
.lato {
	font-family: 'Lato', cursive;
}

.sansita {
	font-family: 'Sansita', cursive;
}

.em-sidebar {
	position: fixed;
	z-index: 1;
}

.em-sidebar span {
	font-family: 'Sansita', sans-serif;
}

.em-sidebar.active ul {
	left: -1em;
	-webkit-transition: visibility 1s ease-in-out, left 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
	transition: visibility 1s ease-in-out, left 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
	visibility: visible;
}

.em-sidebar .em-toggle {
	display: inline-block;
	position: relative;
	padding: 1em;
	border: 1px solid;
	background-color: #FFF;
	color: #FFB7C5;
	text-align: center;
	cursor: pointer;
	z-index: 2;
}

.em-sidebar .em-toggle::before {
	color: #684B51;
}

.em-sidebar ul {
	display: block;
	position: relative;
	left: -10em;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	-webkit-transition: visibility 1s ease-in-out, left .5s ease-out;
	transition: visibility 1s ease-in-out, left .5s ease-out;
	visibility: hidden;
	list-style-type: none;
}

.em-sidebar ul>li {
	display: block;
	width: 2.5em;
	height: 2em;
	margin: 0;
	padding: .5em 0 .5em 2em;
	-webkit-transition: all 0.75s cubic-bezier(0.87, -0.31, 0.18, 1.08);
	transition: all 0.75s cubic-bezier(0.87, -0.31, 0.18, 1.08);
	border-width: 0 1px 0 0;
	border-style: solid;
	border-color: #FFB7C5;
	background-color: #9C2542;
	color: #FFB7C5;
	list-style: none;
	text-align: center;
	white-space: nowrap;
	cursor: pointer;
}

.em-sidebar ul>li:first-child {
	border-width: 1px 1px 0 0;
}

.em-sidebar ul>li:last-child {
	border-width: 0 1px 1px 0;
}

.em-sidebar ul>li a {
	color: #FFB7C5;
	text-decoration: none;
}

.em-sidebar ul>li span {
	display: inline-block;
	position: relative;
	left: -10em;
	padding-left: .5em;
	-webkit-transition: visibility 0.75s, opacity 1s cubic-bezier(0.42, 0, 0, 1), left 1s ease-out;
	transition: visibility 0.75s, opacity 1s cubic-bezier(0.42, 0, 0, 1), left 1s ease-out;
	color: #FFB7C5;
	font-size: 1.5em;
	font-weight: bold;
	text-transform: uppercase;
	opacity: 0;
	visibility: hidden;
}

.em-sidebar ul>li:hover {
	width: 14em;
	border-radius: 0 3em 3em 0;
	opacity: 1;
}

.em-sidebar ul>li:hover:hover span {
	left: 0;
	-webkit-transition: visibility 0.75s, opacity 1s cubic-bezier(0.42, 0, 0, 1), left 0.5s ease-in-out;
	transition: visibility 0.75s, opacity 1s cubic-bezier(0.42, 0, 0, 1), left 0.5s ease-in-out;
	opacity: 1;
	visibility: visible;
}

@media (max-width: 768px) {
	.em-sidebar ul>li:hover {
		width: 12em;
	}
}

.em-sidebar ul>li:nth-of-type(1) {
	background-color: #811453;
}

.em-sidebar ul>li:nth-of-type(2) {
	background-color: #3C144F;
}

.em-sidebar ul>li:nth-of-type(3) {
	background-color: #952108;
}

.em-sidebar ul>li:nth-of-type(4) {
	background-color: #362865;
}

.em-sidebar ul>li:nth-of-type(5) {
	background-color: #9C2542;
}

.em-sidebar ul>li:nth-of-type(6) {
	background-color: #0A7E8C;
}

.em-sidebar ul>li:nth-of-type(7) {
	background-color: #9F4576;
}

.em-sidebar ul>li:nth-of-type(8) {
	background-color: #39A879;
}

.em-sidebar ul>li:nth-of-type(9) {
	background-color: #712F2C;
}

.em-sidebar ul>li:nth-of-type(10) {
	background-color: #1A1FC6;
}

@media (max-width: 768px) {
	.em-sidebar ul>li {
		height: 2em;
	}
}

@media (max-width: 480px) {
	.em-sidebar ul>li {
		padding-left: 1.5em;
	}
}