/* set all stars to 'empty star' */
.stars-container {
    display: inline-block;
    vertical-align: top;
}
/* set all stars to 'empty star' */
 .stars-container .star{
     float: right;
     display: inline-block;
     padding: 2px;
     cursor: pointer;
	font-size:30px;
 }
 
 .stars-container .star2{
     float: right;
     display: inline-block;
     padding: 2px;
     cursor: pointer;
	font-size:15px;
 }
 
 .stars-container .star.selected {
     float: right;
     display: inline-block;
     padding: 2px;
     color: orange;
     cursor: pointer;
	font-size:30px;
 }
 
 .stars-container .star2.selected {
     float: right;
     display: inline-block;
     padding: 2px;
     color: orange;
     cursor: pointer;
	font-size:15px;
 }
 
.stars-container .star:before {
     content:"\f006";
     /* fontAwesome empty star code */
}
.stars-container .star2:before {
     content:"\f006";
     /* fontAwesome empty star code */
}

/* set hovered/selected star to 'filled star' */
.star:hover:before, .star.selected:before {
    content:"\f005";
    /* fontAwesome filled star code */
}
.star2:hover:before, .star2selected:before {
    content:"\f005";
    /* fontAwesome filled star code */
}

/* set all stars after hovered/selected to'filled star' 
** it will appear that it selects all after due to positioning */
.star:hover ~ .star:before, .star.selected ~ .star:before {
    content:"\f005";
    /* fontAwesome filled star code */
}
.star2:hover ~ .star2:before, .star2.selected ~ .star2:before {
    content:"\f005";
    /* fontAwesome filled star code */
}

.reviews {
    vertical-align: top;
}
button {
    margin-top: 20px;
}