/* CSS Document */
<style>
/* Remove margins and padding from the list */

.checklist  ul {
    margin: 0 !important;
    padding: 0 !important;
}

/* Style the list items */
.checklist ul li {
  cursor: pointer;
  position: relative;
  padding: 12px 8px 12px 50px;
	margin: 0 0 10px -20px;
  list-style-type: none;
  background: #eee;
  transition: 0.2s;
	background-image: url(https://www.mohawkcollege.ca/sites/default/files/Marketing%20and%20Communications/new-student-checklist/checkbox.png);
    background-repeat: no-repeat;
    background-position: 15px 15px;
    background-size: 20px;
  
  /* make the list items unselectable */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Set all odd list items to a different color (zebra-stripes) */
.checklist ul li:nth-child(odd) {
  background: #f9f9f9;
	background-image: url(https://www.mohawkcollege.ca/sites/default/files/Marketing%20and%20Communications/new-student-checklist/checkbox.png);
    background-repeat: no-repeat;
    background-position: 15px 15px;
    background-size: 20px;
}

/* Darker background-color on hover */
.checklist ul li:hover {
  background: #ddd;
	background-image: url(https://www.mohawkcollege.ca/sites/default/files/Marketing%20and%20Communications/new-student-checklist/checkbox.png);
    background-repeat: no-repeat;
    background-position: 15px 15px;
    background-size: 20px;
}

/* When clicked on, add a background color and strike out text */
.checklist ul li.checked {
  background: #660033;
  color: #ffffff;
	background-image: url(https://www.mohawkcollege.ca/sites/default/files/Marketing%20and%20Communications/new-student-checklist/checkbox-white.png);
    background-repeat: no-repeat;
    background-position: 15px 15px;
    background-size: 20px;
}

.checklist ul li.checked a {
	color: #ffffff !important;
}

/* Add a "checked" mark when clicked on */
.checklist ul li.checked::before {
  content: '';
  position: absolute;
  border-color: #fff;
  border-style: solid;
  border-width: 0 4px 4px 0;
  top: 8px;
  left: 24px;
  transform: rotate(45deg);
  height: 22px;
  width: 13px;
}

.inline-image-left {
	margin-top: 0px;
}

.card-list .card-list-item__inner {
    padding: .2em 1em 1em 1em;
}

.homepage-banner--name {
    font-size: 3.25rem;
    padding: 0.5em;
    font-weight: bold;
}

@media (max-width:629px) {
	.homepage-banner--textbox {
		display: none;
	}
	.inline-image-left {
		display: none;
	}
}

h2 {
	margin-top: 50px;
}

</style>