/* General Rules
-------------------------------------------------- */

body, .modal {
	background-color: #cebbff;
	background-image: linear-gradient(0deg, #cebbff 0%, #644483 100%);
}

.footer .container {
	background-color: #644483;
}

h4 {
	margin-top: 2.5rem;
	margin-bottom: 1rem;
	padding-bottom: .1em;
	border-bottom: solid 2px #977dbe;
}

a { font-weight: bold; color: #977dbe }
a:hover { color: #660099 }


/* Side Bar
-------------------------------------------------- */

.ar-sidebar {
	background-color: #f8f9fa;
	text-align: center;
	padding: 1rem 1rem 2rem 1rem;
	font-size: 2rem;
}
.ar-sidebar a {
	vertical-align: top;
	display: inline-block;
	border-radius: .2rem;
	color: #977dbe;
	font-weight: normal;
	font-size: .6em;
	text-transform: uppercase;
	padding: .5rem;
	text-decoration: none;
	line-height: 120%;
}
.ar-sidebar a i { font-size: 1.6em; }

.ar-sidebar a:hover {
	background-color: #977dbe;
	color: #fff;
}

/* If above 1400px, the sidebar buttons display on the side of the screen */
@media (min-width: 1400px) {
	.ar-sidebar {
		font-size: 1.2rem;
		width: auto;
		display: block; position: fixed;
		top: 5rem; left: 0;
		padding: .6rem .3rem .7rem .3rem;
		border-radius: 0 0.5rem 0.5rem 0;
	}
	.ar-sidebar a {
		display: block;
		line-height: 160%;
	}
}