/********* main div *********/
.facebook-reviews { margin-top: 5em;}
h2.fb { 
  color: #3B5998; 
  font-size: 1.6rem;
  font-weight: bold;
  letter-spacing: -.5px;
  text-align: center;
  text-transform: uppercase; }


/********* total rating container *********/
._4bl7._4531._5ono { 
  background: #5b93fc; 
  border-radius: 5px; 
  margin: 0 auto; 
  padding: 1em 0; 
  text-align: center; 
  width: 75%; }

/* the blue button */
._4uyj { 
  color: #FFF; 
  font-size: 1.1rem; 
  letter-spacing: .5px; }

  @media screen and (min-width: 568px) {
    .facebook-reviews { margin-top: 8em; }
    ._4bl7._4531._5ono { width: 200px; }
  }


/********* the whole review container *********/
.review-container { 
  background: #FFF; 
  border-radius: 5px; 
  box-shadow: 3px 3px 9px #CCC; 
  display: inline-block;
  margin: 1em .25em;
  padding: 1em 0;
  width: 100%; }


/*** profile img & user info ***/
.clearfix { 
  display: inline-block; 
  margin: 0 auto; 
  padding: .3em 2em; 
  width: 100%; }

.pfp { 
  border: solid 1px #CCC; 
  border-radius: 50%; 
  display: block; 
  height: 140px; 
  margin: 0 auto; 
  overflow: hidden; 
  width: 140px; }
.pfp img { 
  height: 100%; 
  width: 100%; }

.username,
.date {
  margin-bottom: 0;
  text-align: center; }
.username { 
  color:#4267b2; 
  font-size: 1.3rem; 
  margin-bottom: .4em; }
.date { 
  font-size: .9rem; 
  font-style: italic; }

.star-ratings { 
  height: 30px;
  overflow: hidden; }
.star-ratings img { 
  display: block;
  height: 80px;
  margin: -25px auto 0; }
 

/*** user review container & text ***/
.review { 
  margin: 1.2em auto .5em; 
  padding: 0 2em; 
  width: 100%; }
.review p { 
  font-size: 1rem; 
  text-align: center; }
.review p:before,
.review p:after { 
  color: #888; 
  font-size: 1.5rem; 
  font-style: italic;
  line-height: 0.1em;  
  vertical-align: -0.3em; }
  .review p:before { content: open-quote; margin-right: 0.2em; }
  .review p:after { content: close-quote; }