/* #####################################################################################################
   This stylesheet describes reviews
   ##################################################################################################### */

/*--- standard variables ---*/
/*--- product item ratio (thumb + content) ---*/
/* set ProductImageRatio in productOverview! */
/*--- media queries. When using responsive ---*/
/* Range breakpoints */
/*--- media queries. When using responsive: only mobile & desktop ---
@responsive:	false;
@largePhone:	~"only screen and (min-width: 480px)";
@tablet:		~"only screen and (min-width: 999999999px)";
@tabletLand:	~"only screen and (min-width: 768px)";
@desktop:		~"only screen and (min-width: 768px)";

@upToTablet:	~"only screen and (max-width: 767px)";
@upToDesktop:	~"only screen and (max-width: 767px)";*/
/*--- media queries. When not using responsive ---
@responsive:	false;
@largePhone:	~"only screen and (min-width: 1px)";
@tablet:		~"only screen and (min-width: 1px)";
@tabletLand:	~"only screen and (min-width: 1px)";
@desktop:		~"only screen and (min-width: 1px)";

@upToTablet:	~"only screen and (max-width: 1px)";
@upToDesktop:	~"only screen and (max-width: 1px)";*/
/*----- Default functions -----*/
/*----- Default Crossbrowser functions -----*/
/*----- CSS3 functions -----*/
/*----- CSS3 Animation functions -----*/
/*----- Buttons -----*/
/*----- Responsive functions -----*/
/* ==========================================================================
   Default / Mobile styles
   ========================================================================== */

#reviewsList .kop1 {
  color: #0175bb;
  float: right;
}
#reviewsList .reviewHeader,
#reviewsList .reviewContent {
  margin: 20px 0 0;
}
#reviewsList dl.reviewHeader {
  clear: both;
}
#reviewsList dl.reviewHeader dt {
  font-weight: bold;
}
#reviewsList dl.reviewHeader dd {
  margin: 0 0 5px;
}
.ratingStars {
  height: 23px;
  line-height: 23px;
  float: left;
}
.ratingStars .rating {
  background: url(https://www.otensien.nl//images/modules/reviews.stars.png) no-repeat left -27px;
  height: 15px;
  margin: 4px 0;
  width: 75px;
  float: left;
}
.ratingStars .rating .score {
  height: 15px;
  background: url(https://www.otensien.nl//images/modules/reviews.stars.png) no-repeat left 0;
}
/* ==========================================================================
   Tablet styles
   ========================================================================== */

@media only screen and (min-width: 768px) {
  #reviewsList .reviewHeader,
  #reviewsList .reviewContent {
    margin: 0;
    float: left;
  }
  #reviewsList .reviewHeader {
    width: 30%;
    margin-right: 2%;
  }
  #reviewsList .reviewContent {
    width: 65%;
    margin-right: 3%;
  }
}
/* ==========================================================================
   ProductReviews
   ========================================================================== */

.reviewList .review {
  width: 100%;
  margin-bottom: 15px;
}
@media only screen and (min-width: 768px) {
  .reviewList .review {
    max-width: 45%;
    float: left;
  }
  .reviewList .review:nth-child(even) {
    margin-left: 10%;
  }
}
.reviewList .review .rating {
  font-size: 20px;
  line-height: 20px;
}
.reviewList .review .star {
  width: 20px;
  height: 20px;
  line-height: inherit;
}
.reviewList .review .review__reviewerName {
  display: block;
  margin: 10px 0;
  font-size: 18px;
  text-transform: uppercase;
}
.reviewList .review .review__date {
  font-size: 12px;
  color: #0175bb;
}
.ratingContainer {
  text-align: left;
  margin-bottom: 15px;
}
.rating {
  display: inline-block;
  unicode-bidi: bidi-override;
  text-align: left;
  font-size: 20px;
  line-height: 20px;
}
.star {
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  display: inline-block;
  vertical-align: middle;
  margin-right: -4px;
  width: 20px;
  height: 20px;
  text-align: left;
}
.star:hover {
  cursor: pointer;
}
.star:before {
  content: "\f006";
  color: #777777;
}
.star.selected:before,
.star.selected ~ .star:before {
  content: "\f005";
  color: #e3cf7a;
}
.star.halfStar:before {
  content: "\f123";
}
.viewReviews {
  margin-left: 15px;
}