.clear{clear: both;}
.rate{
	width:100%; height: 40px;
	border:#e9e9e9 1px solid;
	background-color:  #f6f6f6;
	margin:60px auto;
	margin-bottom:0px;
    text-align:center;

}
.rate .rate-btn{
	width: 45px; height:40px;
	float: left;
	background: url(images/rate-btn.png) no-repeat;
	cursor: pointer;
	
}
.rate .rate-btn:hover, .rate  .rate-btn-hover, .rate  .rate-btn-active{
	background: url(images/rate-btn-hover.png) no-repeat;
}

.result-container{
	width: 82px; height: 18px;
	position: relative;
	background-color: #ccc;
	border: #ccc 1px solid;
	margin:auto;
}
.rate-stars{
	width: 82px; height: 18px;
	background: url(images/rate-stars.png) no-repeat;
	position: absolute;
}
.rate-bg{
	height: 18px;
	background-color: #ffbe10;
	position: absolute;
}
/************************  bar *******************/

/* Three column layout */
.row2 {
width:80%;
padding-left:50px;
}
.side {
 float: left;
  width: 15%;
  margin-top:10px;
}

.middle {
  margin-top:10px;
  float: left;
  width: 70%;

}

/* Place text to the right */
.right {
  text-align: left;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* The bar container */
.bar-container {
  width: 80%;
  background-color: #f1f1f1;
  text-align: center;
  color: white;
}

/* Individual bars */
.bar-5 { height: 18px; background-color: #4CAF50;}
.bar-4 { height: 18px; background-color: #2196F3;}
.bar-3 {width: 10%; height: 18px; background-color: #00bcd4;}
.bar-2 {width: 4%; height: 18px; background-color: #ff9800;}
.bar-1 {width: 3%; height: 18px; background-color: #f44336;}

/* Responsive layout - make the columns stack on top of each other instead of next to each other */

@media (max-width: 700px) 
{
.rate{
	width:100%; 
}    
}

@media (max-width: 500px) 
{
.rate{
	width:100%; 
}    

  .side, .middle {
    width: 100%;
  }
  .right {
    display: none;
  }
}