body {background:#F5F7F9;color:#222;font-size:16px;}
img {width:100%;}

#section1 {color:#666666;border-bottom:3px solid #ccc;box-shadow:0px 1px 2px 2px #eee;background:#FFF;}
#section1 .white_head {padding:30px 30px;text-align:center;}
#section1 .white_head h4 {font-size:20px;}

#section2 {margin-top:110px;}
#section2 .review-box {max-width:500px;background-color:#FFFFFF;border:1px solid #d2d7dc;border-radius:5px;padding:30px;text-align:left;}
#section2 .review-box h5 {font-size:18px;margin:0;color:#666666;}
#section2 .review-box h6 {font-size:15px;margin:0 0 12px;color:#666666;font-weight:normal;}
#section2 .review-box .rating-text {float: right; display:inline-block;vertical-align:middle;padding-left:15px;}
#section2 .review-box form textarea {width:100%;font-size:14px;color:#222;font-weight:300;padding:5px 5px;min-height:80px;resize: vertical;}
#section2 .review-box form input[type="submit"] {display:block;margin-top:15px;padding:10px 30px 30px;width:100%;text-align:center;color:#FFFFFF;font-weight:bold;background:rgb(106, 179, 46);border:none;}

.star-rating-wrap {
  display: inline-block;
  font-size: 18px;
  vertical-align: bottom;
  margin: 15px 0;
}
.star-rating-wrap:after {
  content: "";
  display: table;
  clear: both;
}
.star-rating-wrap .star-rating-ico {
  float: right;
  padding-left: 5px;
  cursor: pointer;
  color: #d2d7dc;
  font-size: 30px;
}
.star-rating-wrap .star-rating-ico:last-child {
  padding-left: 0;
}
.star-rating-wrap .star-rating-input {
  display: none;
}
.star-rating-wrap .star-rating-ico:hover:before, .star-rating-wrap .star-rating-ico:hover ~ .star-rating-ico:before {
  content: "\f005";
  color: #f9bf54;
}
.star-rating-wrap .star-rating-input.selected ~ .star-rating-ico:before {
  content: "\f005";
  color: #f9bf54;
}
.consent-wrap{
    display: none;
    margin: 15px 0;
}
.consent-wrap .tooltip-icon {
    display: inline-block;
    position: relative;
    width: 16px;
    height: 16px;
    margin: auto 2px;
    color: #78828c;
    font-size: 12px;
    text-align: center;
    border: 1px solid;
    border-radius: 50%;
    cursor: pointer;
}
.consent-wrap .tooltip.in {
    opacity: 1 !important;
}
.consent-wrap .tooltip-inner {
    background-color: #fff !important;
    border: 1px solid #d2d7dc;
    color: #666 !important;
}
.consent-wrap .tooltip-arrow {
    border-top-color: #d2d7dc !important;
}
#consent-checkbox[type=checkbox] + label {
  display: inline-block;
  cursor: pointer;
}

#consent-checkbox[type=checkbox] {
  display: none;
}

#consent-checkbox[type=checkbox] + label:before {
  content: "\2714";
  border: 0.1em solid #ccc;
  border-radius: 0.2em;
  display: inline-block;
  width: 16px;
  height: 16px;
  padding-left: 2px;
  margin-right: 8px;
  color: transparent;
  transition: .2s;
  font-size: 12px;
}

#consent-checkbox[type=checkbox] + label:active:before {
  transform: scale(0);
}

#consent-checkbox[type=checkbox]:checked + label:before {
  border-color: #d2d7dc;
  color: #78828c;
}

#consent-checkbox[type=checkbox]:disabled + label:before {
  transform: scale(1);
  border-color: #aaa;
}

#consent-checkbox[type=checkbox]:checked:disabled + label:before {
  transform: scale(1);
  background-color: #bfb;
  border-color: #bfb;
}
.consent-wrap .consent-text{
    font-weight: normal;
    font-size: 14px;
}
.rating {
  unicode-bidi: bidi-override;
  direction: rtl;
	display:table-cell;
}
.rating > span {
  display: inline-block;
  position: relative;
  width: 40px;
	font-size:40px;
	color:#222;

}
.rating > span:hover:before,
.rating > span:hover ~ span:before {
   content: "\2605";
   position: absolute;
	 color:#FF6C35;
	 cursor: pointer;
}

.rating > span.given:before {
	content: "\2605";
   position: absolute;
	 color:#FF6C35;
	 cursor:pointer;
}
#review-submitted-wrap{
    display: none;
}
#review-submitted-wrap h1{
    font-size: 20px;
    text-align: center;
}
@media (max-width:600px) {
	#section2 {margin-top:50px;min-height: 375px;}
    #consent-checkbox[type=checkbox] + label {
      display: initial;
    }
}

@media (max-width:370px) {
	.rating > span {font-size:30px;width:30px;}
	#section2 {margin-top:35px;}
	#section2 .review-box h6 {font-size:14px;}
	#section1 .white_head h4 {font-size:18px;}
}

#section3 {color:#222222;border-bottom:3px solid #ccc;border-top:3px solid #ccc;box-shadow:0px 1px 2px 2px #eee;background:#FFF;font-weight:300;}
#section3 .footer-box {padding:30px 30px;text-align:center;font-size:18px;}
#section3 .footer-box img {max-width:200px;vertical-align:middle;}
#section3 .footer-box span {display:inline-block;padding-left:30px;padding-top:10px;}


@media (max-width:370px) {
	#section3 .footer-box {font-size:15px;}
}


@import "compass/css3";

$unchecked-star: '\2606';
$unchecked-color: #888;
$checked-star: '\2605';
$checked-color: #e52;

.star-cb-group {
  /* remove inline-block whitespace */
  font-size: 0;
  * {
    font-size: 1rem;
  }
  /* flip the order so we can use the + and ~ combinators */
  unicode-bidi: bidi-override;
  direction: rtl;
  & > input {
    display: none;
    & + label {
      /* only enough room for the star */
      display: inline-block;
      overflow: hidden;
      text-indent: 9999px;
      width: 1em;
      white-space: nowrap;
      cursor: pointer;
      &:before {
        display: inline-block;
        text-indent: -9999px;
        content: $unchecked-star;
        color: $unchecked-color;
      }
    }
    &:checked ~ label:before,
      & + label:hover ~ label:before,
      & + label:hover:before {
      content: $checked-star;
      color: #e52;
      text-shadow: 0 0 1px #333;
    }
  }
  
  /* the hidden clearer */
  & > .star-cb-clear + label {
    text-indent: -9999px;
    width: .5em;
    margin-left: -.5em;
  }
  & > .star-cb-clear + label:before {
    width: .5em;
  }

  &:hover > input + label:before {
    content: $unchecked-star;
    color: $unchecked-color;
    text-shadow: none;
  }
  &:hover > input + label:hover ~ label:before,
  &:hover > input + label:hover:before {
    content: $checked-star;
    color: $checked-color;
    text-shadow: 0 0 1px #333;
  }
}