@font-face {
    font-family: fivePointColorEmojis;
    src: url(../fonts/NotoColorEmoji.ttf);
}

/***** 
    Styles for the 5 Point Emoji question theme
    Copyright (C) 2019 - Tony Partner (http://partnersurveys.com)
    Licensed MIT, GPL
    Version - 1.0
    Create date - 28/03/2018
*****/

/** EMOJIS QUESTION **/

.five-point-emoji-list {
	width: 100%;
	max-width: 395px;
	padding: 0;
	margin: 0 0 10px 0;
}

.five-point-emoji-list .emoji-item {
	display: block;
	clear: none;
	float: left;
	width: 18%;
	width: 20%;
    padding: 0;
	margin: 0 1%;
	margin: 0;
}

.five-point-emoji-list .emoji-item label {
	position: relative;
	display: block;
	border: 1px solid #DBDBDB;
	border-right: 0 none;
	height: auto;
	margin: 0;
	padding: 0;
	background: transparent 0 0 no-repeat;
	font-size: 0;
}

.five-point-emoji-list .emoji-item-5 label {
	border-right:  1px solid #DBDBDB;
}

.five-point-emoji-list .emoji-item label:hover {
	background: #BADEB8;
	opacity: 0.65;
}

.five-point-emoji-list .emoji-item input[type="radio"]:checked + label {
	background: #BADEB8;
	opacity: 1;
}

.five-point-emoji-list .emoji-item label::before {
    position: relative;
    left: auto;
	top: auto;
    display: block;
    width: auto;
    height: auto;
    margin: 5px;
    padding: 0;
    border: 0 none;
    border-radius: 0;
	background: transparent none;
	background-size: cover;
    filter: alpha(opacity=50);
	text-align: center; 
	font-size: 48px;
    font-family: fivePointColorEmojis;
    font-weight: 400 !important;
    font-style: normal !important;
}

@media only screen and (max-width: 480px) {
	.five-point-emoji-list .emoji-item label::before {
		font-size: 36px;
	}
}

.five-point-emoji-list .emoji-item-1 label::before { content:"\1F622"; }
.five-point-emoji-list .emoji-item-2 label::before { content:"\1F641"; }
.five-point-emoji-list .emoji-item-3 label::before { content:"\1F610"; }
.five-point-emoji-list .emoji-item-4 label::before { content:"\1F642"; }
.five-point-emoji-list .emoji-item-5 label::before { content:"\1F600"; }

.five-point-emoji-list .emoji-item input[type="radio"]:focus + label::before {
    outline: none;
}

.five-point-emoji-list .emoji-item  label::after {
	display: none;
}