body{
  margin      : 0;
  padding     : 1.5em;
  font-family : sans-serif;
  line-height : 1.5;
}

#page{
  max-width:1000px;
  margin:auto;
  margin-top:-1.5em;
 }

p{
  margin  : 0 0 1.5em;
  padding : 0;
}

a{
  color           : #9c3;
  text-decoration : none;
}

h1{font-size:2rem;}
h2{font-size:1.8rem;}
h3{font-size:1.6rem;}
h4{font-size:1.4rem;}
h5{font-size:1.2rem;}
h6{font-size:1rem;}


h1,h2,h3,h4,h5,h6{
  font-family: 'ABeeZee', sans-serif;
  color:#508650;
 }

.ratinglabel{
   color:#508650;
   font-weight:bold;
   margin-right:10px;
 }
 
@media only screen 
   and (min-device-width : 1000px) {
.starRating:not(old){
  display        : inline-block;
  width          : 7.5em;
  height         : 1.5em;
  overflow       : hidden;
  vertical-align : bottom;
}

.starRating:not(old) > input{
  margin-right : -100%;
  opacity      : 0;
}

.starRating:not(old) > label{
  display         : block;
  float           : right;
  position        : relative;
  background      : url('star-off.svg');
  background-size : contain;
}

.starRating:not(old) > label:before{
  content         : '';
  display         : block;
  width           : 1.5em;
  height          : 1.5em;
  background      : url('star-on.svg');
  background-size : contain;
  opacity         : 0;
  transition      : opacity 0.2s linear;
}

.starRating:not(old) > label:hover:before,
.starRating:not(old) > label:hover ~ label:before,
.starRating:not(:hover) > :checked ~ label:before{
  opacity : 1;
}

}