:root {
  --web-primary-color: #03638b;
  --web-primary-hover-color: #00486e;
  --web-links-color: #0752e1;
  --web-links-hover-color: #005888;
  --web-mobile-nav-bg: #1d252ae0;
  --web-side-nav-title-bg: #0372ac;
  --web-side-nav-title-text: #fff;

  --prime1: #f7ac1e;
  --prime2: #179bd1;
  --prime3: #c1d961;
  --prime4: #242122;
  --prime5: #e0e0e0;

  --prime1b: #bb5807;
  --prime2b: #0d7eab;

  --text: #222;

  --color-white: #FFFFFF;
  --color-gold: #F7B03B;
  --color-blue: #21A4DB;
  --color-green: #BCDD71;
  --color-text: #2c3e50;
  --color-text-light: #546e7a;
  --color-hero-bg: #edfaff;
  --color-hero-shade-1: #ecf9d0;
  --color-hero-shade-2: #ffe9c7;
  --shadow-sm: 0 6px 15px rgba(33, 164, 219, 0.12);
  --shadow-md: 0 10px 25px rgba(33, 164, 219, 0.2);
  --shadow-lg: 0 20px 40px rgba(33, 164, 219, 0.28);
}


* {
	font-family: arial;
}

body {
	margin: 0;
	padding: 0;
}

a {
	text-decoration: none;
	color: inherit;
}

a:hover, a:focus {
	text-decoration: underline;
}

ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

ul li {
	margin-bottom: 15px;
}

ul li:last-child {
	border-bottom: 0;
}

ul li a {
    display: block;
    padding: 1rem;
    background: #f1f1f1;
	position: relative;
}


ul li a:after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	width: 3px;
	height: 100%;
	background: linear-gradient(0, var(--color-blue), var(--color-gold), var(--color-green));
	transition: opacity 0.3s ease;
}