.demo-container {
    align-items: center;
	font-family: Helvetica, sans-serif;
	justify-content: center;
	margin: 0;
}

#smileys {
    font-size: 15px;
    margin-top: 15px;
    text-align: center;
}

.smiley {
    -webkit-appearance: none;
    width: 90px;
    height: 90px;
    border: none;
    cursor: pointer;
    transition: border .2s ease;
    filter: grayscale(100%);
    margin: 0 3%;
    transition: all .2s ease;
}

.smiley :hover, :checked {
    filter:	grayscale(0);
}

.smiley:focus {
    outline: 0;
}

#smiley-good {
    background: url('/img/good.svg') center;
    background-size: cover;
}

#smiley-avg {
    background: url('/img/average.svg') center;
    background-size: cover;
}
#smiley-bad {
    background: url('/img/bad.svg') center;
    background-size: cover;
}

.mtt {
	position: fixed;
	bottom: 10px;
	right: 20px;
	color: #999;
	text-decoration: none;
	
	span {
		color: #e74c3c;
	}
	
	&:hover {
		color: #666;

		span {
			color: #c0392b;
		}
	}
}

.demo-container strong{
    margin: 0% 6%;
}