/* Fade elements */
.fade-in-first {
	opacity: 0;
	animation-name: fadeInOpacity;
	animation-iteration-count: 1;
	animation-timing-function: ease-in;
	animation-duration: 0.5s;
	animation-fill-mode: forwards;
}

.fade-in-second {
	opacity: 0;
	animation-name: fadeInOpacity;
	animation-iteration-count: 1;
	animation-timing-function: ease-in;
	animation-duration: 0.5s;
	animation-delay: 0.5s;
	animation-fill-mode: forwards;
}

@keyframes fadeInOpacity {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

/* Navbar overlap fix */
body {
    padding-top: 100px;
}

.user-circle {
    display: inline-block;
    background-color: #45d8e8;
    color: #fff;
    border-radius: 50%;
    font-size: 22px;
    line-height: 30px; /* set to same size as width, height */
    width: 30px;
    height: 30px;
    text-align: center;
    vertical-align: middle;
}