h1,h2,h3,p,ul,li {margin: 10px !important}
h1 {font-size: 20px !important; font-weight: bold !important}
h2 {font-size: 18px !important; font-weight: bold !important}

.key {
    background-color: #d3d6da;
}

.correct {
    background-color: #6aaa63 !important;
    color: white;
}

.semicorrect {
    background-color: #ccb757 !important;
    color: white;
}

.incorrect {
    background-color: #939598 !important;
    color: white;
}

/* hides vue elements initially */
[v-cloak] {
    display: none;
}



.list4b {
	padding:0;
	list-style: none;
	counter-reset: li;
}	
.list4b li {
	position: relative;
	padding:0px 20px 20px 28px;
	margin-left: 40px;
	transition-duration: 0.3s;
}
.list4b li:before {
    border: 6px solid transparent;
	line-height: 30px;
	position: absolute;
	top: 0;
	left:-30px;
	width:42px;
	text-align:center;
	font-size: 13px;
	font-weight: bold;
	color: #ADCEE9;
	counter-increment: li;
	content: counter(li);
	transition-duration: 0.3s;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;	
}
.list4b li:hover:before {
	color: #337AB7;
}
.list4b li:after {
    position: absolute;
    top: 0;
    left: -30px;
    width: 42px;
    height: 42px;
    border: 6px solid #DDDDDD;
    border-radius: 50%;
    content: '';
    opacity: 0.5;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;	
}
.list4b li:hover:after {
	animation: 500ms ease-in-out 0s bounceIn;
    opacity: 1;
    border: 6px solid #ADCEE9;	
}	

@keyframes bounceIn {
	0% {
		opacity: 0;
		transform: scale3d(.3, .3, .3);
	}
	20% {
		transform: scale3d(1.3, 1.3, 1.3);
	}
	40% {
		transform: scale3d(.9, .9, .9);
	}
	60% {
		opacity: 1;
		transform: scale3d(1.03, 1.03, 1.03);
	}
	80% {
		transform: scale3d(.97, .97, .97);
	}
	to {
		opacity: 1;
		transform: scale3d(1, 1, 1);
	}
}