@charset "utf-8";
/* CSS Document */

div.side {
	text-align: left;
	margin: 40px auto auto auto;
	right: -90px;
	transition: right 0.33s ease;
	position: fixed;
	background-color: #38274E;
	color: #FFE9F6;
	border-top: ridge 10px #21162E;
	border-left: ridge 10px #21162E;
	border-right: groove 10px #21162E;
	border-bottom: groove 10px #21162E;
	border-radius: 5px 0px 0px 5px;
	width: 7.5%;
	height: 40%;
	z-index: 2;
	background: url("SVG/arrow.svg") left #38274E;
	background-size: 100%;
	box-shadow: 15px 10px 20px 4px rgba(33,22,46,0.5);
	overflow-y: scroll;
}

div.side:hover {
	right: -10px;
	background-image: linear-gradient(#38274E,#38274E);
	transition: right 0.25s ease;
}

div.side img {
    opacity: 100%;
    transition: opacity 0.25s ease;
}

div.side:hover img {
    opacity: 0%;
	transition: opacity 0.25s ease;
}

div.side ul li {
	list-style: none;
	padding: 5px 0px;
	margin: 20px 0px;
}

div.side a {
	opacity: 0%;
	color: #FFE9F6;
	transition: opacity 0.5s ease;
}

div.side:hover a {
	opacity: 100%;
	transition: opacity 0.5s ease;
}

div.side h3 {
	margin: 20px 0px 0px 20px;
	opacity: 0%;
	text-align: center;
	transition: opacity 0.25s ease;
}

div.side:hover h3 {
	opacity: 100%;
	transition: opacity 0.25s ease;
}