/* This file contains all the styles only used in the home page */

.user-rank {
	color: #898989;
}

.user-rank-name {
	color: #fcffff;
}

.user-rank-products {
	font-size: 0.57rem;
}

.user-rank-reviews {
	font-weight: 600;
	color: #1976d2;
}

.smiley-rate-btn {
	font-size: 3rem;
}

.blue-site-banner {
	background: #182235;
	color: #1a96d4;
}

.blue-site-banner a {
	border: 1px solid #1a96d4;
	color: #1a96d4;
}

.blue-site-banner a:hover {
	border: 1px solid #26aaec;
	color: #26aaec;
	text-decoration: none;
}

.gray-site-banner {
	background: #24252f;
	color: #898989;
}

.gray-site-banner a {
	border: 1px solid #898989;
	color: #898989;
}

.gray-site-banner a:hover {
	border: 1px solid #adadad;
	color: #adadad;
	text-decoration: none;
}

.orange-site-banner {
	background: #2f2924;
	color: #ea9534;
}

.orange-site-banner a {
	border: 1px solid #ea9534;
	color: #ea9534;
}

.orange-site-banner a:hover {
	border: 1px solid #ffab4b;
	color: #ffab4b;
	text-decoration: none;
}

.green-site-banner {
	background: #183035;
	color: #00c31f;
}

.green-site-banner a {
	border: 1px solid #00c31f;
	color: #00c31f;
}

.green-site-banner a:hover {
	border: 1px solid #0de231;
	color: #0de231;
	text-decoration: none;
}

.react__heading{
	text-align: center;
	font-size: 14px;
	font-weight: bold;
}

.react__area label{
	display: inline-block;
	margin:0px 5px;
	cursor: pointer;
}
.react__area input[type="radio"]{
	display: none;
}
.react__area img{
	width:48px;
	height: 48px;
	filter: grayscale(1);
	-webkit-filter: grayscale(1);
	transition: 0.2s;
	-webkit-transition: 0.2s;
	-moz-transition: 0.2s;
	-ms-transition: 0.2s;
	-o-transition: 0.2s;
}
.react__area input:checked~img{
	filter: grayscale(0);
	-webkit-filter: grayscale(0);
}
.react__area label:hover img{
	transform: scale(1.3);
	filter: grayscale(0.4);
	-webkit-filter: grayscale(0.4);
	-webkit-transform: scale(1.3);
	-moz-transform: scale(1.3);
	-ms-transform: scale(1.3);
	-o-transform: scale(1.3);
}