/* Ratings widget */
.rate {
    display: inline-block;
    border: 0;
	color: #DADADA; 
}
/* Hide radio */
.rate > input {
    display: none;
}
/* Order correctly by floating highest to the right */
.rate > label {
    float: right;
}
/* The star of the show */
.rate > label:before {
    display: inline-block;
    font-size: 1.5rem;
    padding: 0rem 0rem;
    margin: 0;
    cursor: pointer;
    font-family: FontAwesome;
	/*content: "\f006 ";  empty star outline */
     content: "\f005 ";  /*full star */
}
/* Zero stars rating */
.rate > label:last-child:before {
	content: "\f005 ";  /*full star */
    /* content: "\f006 "; /* empty star outline */
}
		
/* Half star trick */
.rate .half:before {
    content: "\f089 "; /* half star no outline */
    position: absolute;
    padding-right: 0;
}
/* Click + hover color */
.rate input:checked ~ label, /* color current and previous stars on checked */
label:hover, label:hover ~ label { color: #DB4B00;  } /* color previous stars on hover */

/* Hover highlights */
.rate input:checked + label:hover, input:checked ~ label:hover, /* highlight current and previous stars */
input:checked ~ label:hover ~ label, /* highlight previous selected stars for new rating */
label:hover ~ input:checked ~ label /* highlight previous selected stars */ { color: #DB4B00;  } 

 .checked {
	color:#DB4B00;
		}
		
.colorless {
	color:#DADADA;
		}
.star {
  display: inline-block;
  position: relative;
  color: #DADADA;
}


 .star:after{
  font-family: FontAwesome;
  content: "\f005";
  position: absolute;
  left: 0;
  top: 0;
  width: 25%;
  overflow: hidden;
  color: #DB4B00;
}
.star1 {
  display: inline-block;
  position: relative;
  color: #DADADA;
}


 .star1:after{
  font-family: FontAwesome;
  content: "\f005";
  position: absolute;
  left: 0;
  top: 0;
  width: 50%;
  overflow: hidden;
  color: #DB4B00;
}
.star2 {
  display: inline-block;
  position: relative;
  color: #DADADA;
}


 .star2:after{
  font-family: FontAwesome;
  content: "\f005";
  position: absolute;
  left: 0;
  top: 0;
  width: 75%;
  overflow: hidden;
  color: #DB4B00;
}

@media screen and (max-width: 500px) {
    .rate > label:before {
    display: inline-block;
    font-size: 1rem;
    padding: 0rem;
    margin: 0;
    cursor: pointer;
    font-family: FontAwesome;
	/*content: "\f006 ";  empty star outline */
     content: "\f005 ";  /*full star */
}
}