.sp-page-builder .page-content #section-id-1503372633171{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}
.sp-page-builder .page-content #section-id-1503885980255{margin:0px 0px 0px 0px;padding:80px 0px 80px 0px;}
#sppb-addon-1504670601439 {
margin: 0 0 20px 0;
}

#sppb-addon-1504670601439 .sppb-addon-title h2{margin: 0px 0px 0 0px; padding: 0px 0px 0px 0px; }
#sppb-addon-1503991256801 {
margin: 0 0 0 0;
}


.sp-page-builder .page-content #section-id-1503546281523{margin:0px 0px 0px 0px;padding:77px 0px 100px 0px;background:#f5f5f5;}
#sppb-addon-1503628173278 .sppb-addon-title h1{margin: 0px 0px 0 0px; padding: 0px 0px 0px 0px; }
.sp-page-builder .page-content #section-id-1503885980244{margin:0px 0px 0px 0px;padding:120px 0px 120px 0px;}
.sp-page-builder .page-content #section-id-1503384325283{padding:85px  0 122px 0;background-image:url(images/2017/08/23/bg1.png);background-repeat:no-repeat;background-size:cover;background-attachment:fixed;background-position:0 0;}
#sppb-addon-1503464122410 .sppb-addon-title h1{margin: 0px 0px 30px 0px; padding: 0px 0px 0px 0px; }
#sppb-addon-1503384325287 .sppb-carousel-inner > .sppb-item{-webkit-transition-duration: 600ms; transition-duration: 600ms;}
.sp-page-builder .page-content #section-id-1503546281506{margin:0px 0px 0px 0px;padding:50px 0px 50px 0px;background:linear-gradient(to right, #de1b1f 0%,#4184d8 100%);}
.sp-page-builder .page-content #section-id-1506590000717{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}
#sppb-addon-1503285935298 .sppb-addon-title {
margin-bottom:54px;}

#sppb-addon-1503299783323 .sppb-addon-title {
margin-bottom:54px;}

#sppb-addon-1503300851910 .sppb-addon-title {
margin-bottom:54px;}

#sppb-addon-1503303459208 .sppb-addon-title {
margin-bottom:54px;}

.sp-page-builder .page-content #section-id-1503049777165{margin:0px 0px 0px 0px;padding:0 0px 0 0px;}
#sppb-addon-1503049777169 .sppb-social-share-wrap ul li a {border-radius: 4px;}#sppb-addon-1503049777169 .sppb-social-share-wrap {text-align:left;}
.tz-module .nav li a {
  display: block;
  padding: 5px 10px;
}
.form-group {
  margin-bottom: 20px;
}
#login-form ul.unstyled {
  margin-top: 20px;
  padding-left: 20px;
}
.module-title {
  margin-bottom: 20px;
  font-size: 22px;
}
.framework-logo {
  padding: 10px 0 30px;
}
body {
  font-family: 'Roboto', sans-serif;
  font-size: 15px;
}
p {
  font-size: 15px;
  font-weight: 400;
  color: #666666;
  line-height: 1.846153846153846;
  margin-bottom: 25px;
}
a {
  color: inherit;
}
a:hover,
a:active {
  text-decoration: none;
}
ol,
ul {
  padding-left: 15px;
  line-height: 30px;
}
ol li,
ul li {
  padding-left: 7px;
}
.blog-featured .items-leading [class^="leading-"],
.blog .items-leading [class^="leading-"],
.blog-featured .items-row [class^="leading-"],
.blog .items-row [class^="leading-"],
.blog-featured .items-leading [class*=" column-"],
.blog .items-leading [class*=" column-"],
.blog-featured .items-row [class*=" column-"],
.blog .items-row [class*=" column-"] {
  margin-bottom: 55px;
}
.blog-featured .items-leading .item-image,
.blog .items-leading .item-image,
.blog-featured .items-row .item-image,
.blog .items-row .item-image {
  margin-bottom: 25px;
}
.blog-featured .items-leading .item-image img,
.blog .items-leading .item-image img,
.blog-featured .items-row .item-image img,
.blog .items-row .item-image img {
  max-width: 100%;
}
.blog-featured .items-leading .page-header,
.blog .items-leading .page-header,
.blog-featured .items-row .page-header,
.blog .items-row .page-header {
  padding: 0;
  margin: 0 40px 0 0;
  border: none;
  overflow: hidden;
}
.blog-featured .items-leading .page-header h3,
.blog .items-leading .page-header h3,
.blog-featured .items-row .page-header h3,
.blog .items-row .page-header h3 {
  font-family: 'Kanit', sans-serif;
  font-size: 30px;
  color: #3f5157;
  text-transform: uppercase;
  font-weight: 600;
  position: relative;
  padding-bottom: 15px;
  margin-top: 0;
  margin-bottom: 25px;
  -webkit-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  cursor: pointer;
}
.blog-featured .items-leading .page-header h3:hover a:before,
.blog .items-leading .page-header h3:hover a:before,
.blog-featured .items-row .page-header h3:hover a:before,
.blog .items-row .page-header h3:hover a:before {
  -webkit-transform: scale(1) translateX(0px) translateY(0px) rotate(0deg);
  -moz-transform: scale(1) translateX(0px) translateY(0px) rotate(0deg);
  transform: scale(1) translateX(0px) translateY(0px) rotate(0deg);
  opacity: 1;
}
.blog-featured .items-leading .page-header h3:after,
.blog .items-leading .page-header h3:after,
.blog-featured .items-row .page-header h3:after,
.blog .items-row .page-header h3:after {
  content: '';
  width: 90px;
  height: 2px;
  background: rgba(65, 132, 216, 0.2);
  position: absolute;
  bottom: 0;
  left: 0;
}
.blog-featured .items-leading .page-header h3:before,
.blog .items-leading .page-header h3:before,
.blog-featured .items-row .page-header h3:before,
.blog .items-row .page-header h3:before {
  content: '';
  width: 50px;
  height: 2px;
  background: #4184d8;
  position: absolute;
  bottom: 0;
  left: 0;
}
.blog-featured .items-leading .page-header h3 a,
.blog .items-leading .page-header h3 a,
.blog-featured .items-row .page-header h3 a,
.blog .items-row .page-header h3 a {
  display: block;
  color: inherit;
  text-decoration: none !important;
  position: relative;
}
.blog-featured .items-leading .page-header h3 a:before,
.blog .items-leading .page-header h3 a:before,
.blog-featured .items-row .page-header h3 a:before,
.blog .items-row .page-header h3 a:before {
  color: #4184d8;
  content: attr(data-hover);
  position: absolute;
  opacity: 0;
  -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
  -moz-transition: -moz-transform 0.3s, opacity 0.3s;
  transition: transform 0.3s, opacity 0.3s;
  -webkit-transform: scale(1.1) translateX(10px) translateY(-10px) rotate(4deg);
  -moz-transform: scale(1.1) translateX(10px) translateY(-10px) rotate(4deg);
  transform: scale(1.1) translateX(10px) translateY(-10px) rotate(4deg);
}
.blog-featured .items-leading .icons,
.blog .items-leading .icons,
.blog-featured .items-row .icons,
.blog .items-row .icons {
  position: relative;
  z-index: 99;
}
.blog-featured .items-leading .article-info,
.blog .items-leading .article-info,
.blog-featured .items-row .article-info,
.blog .items-row .article-info {
  font-family: 'Roboto', sans-serif;
  color: #aaaaaa;
  font-size: 14px;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.blog-featured .items-leading .article-info a,
.blog .items-leading .article-info a,
.blog-featured .items-row .article-info a,
.blog .items-row .article-info a {
  color: inherit;
}
.blog-featured .items-leading .article-info dd,
.blog .items-leading .article-info dd,
.blog-featured .items-row .article-info dd,
.blog .items-row .article-info dd {
  margin: 0;
}
.blog-featured .items-leading .article-info dd:after,
.blog .items-leading .article-info dd:after,
.blog-featured .items-row .article-info dd:after,
.blog .items-row .article-info dd:after {
  content: '/';
  display: inline-block;
  margin: 0 7px;
}
.blog-featured .items-leading .article-info dd:last-child:after,
.blog .items-leading .article-info dd:last-child:after,
.blog-featured .items-row .article-info dd:last-child:after,
.blog .items-row .article-info dd:last-child:after {
  content: none;
}
.blog-featured .items-leading .tz__btn,
.blog .items-leading .tz__btn,
.blog-featured .items-row .tz__btn,
.blog .items-row .tz__btn {
  margin-top: 20px;
  text-transform: uppercase;
  color: #3f5157;
  font-weight: 500;
  text-decoration: none !important;
  display: block;
  -webkit-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  overflow: hidden;
  position: relative;
}
.blog-featured .items-leading .tz__btn .fa,
.blog .items-leading .tz__btn .fa,
.blog-featured .items-row .tz__btn .fa,
.blog .items-row .tz__btn .fa {
  position: absolute;
  left: -10px;
  top: 3px;
  -webkit-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  font-size: 12px;
  opacity: 0;
}
.blog-featured .items-leading .tz__btn:hover,
.blog .items-leading .tz__btn:hover,
.blog-featured .items-row .tz__btn:hover,
.blog .items-row .tz__btn:hover {
  color: #4184d8;
  padding-left: 15px;
}
.blog-featured .items-leading .tz__btn:hover .fa,
.blog .items-leading .tz__btn:hover .fa,
.blog-featured .items-row .tz__btn:hover .fa,
.blog .items-row .tz__btn:hover .fa {
  left: 0;
  opacity: 1;
}
.blog-featured .tz__block--flex,
.blog .tz__block--flex {
  display: flex;
  align-items: flex-start;
}
.blog-featured .tz__block--flex.left .tz__media,
.blog .tz__block--flex.left .tz__media {
  padding-right: 15px;
  order: 1;
}
.blog-featured .tz__block--flex.left .tz__content,
.blog .tz__block--flex.left .tz__content {
  padding-left: 15px;
  order: 2;
}
.blog-featured .tz__block--flex.right .tz__media,
.blog .tz__block--flex.right .tz__media {
  padding-left: 15px;
  order: 2;
}
.blog-featured .tz__block--flex.right .tz__content,
.blog .tz__block--flex.right .tz__content {
  padding-right: 15px;
  order: 1;
}
.blog-featured .tz__block--flex .tz__media,
.blog .tz__block--flex .tz__media {
  width: 30%;
}
.blog-featured .tz__block--flex .tz__content,
.blog .tz__block--flex .tz__content {
  width: 70%;
}
.blog-featured .tz__tags,
.blog .tz__tags {
  font-family: 'Kanit', sans-serif;
  font-weight: 500;
  font-size: 12px;
  text-transform: uppercase;
}
.blog-featured .tz__tags .tags.inline,
.blog .tz__tags .tags.inline {
  line-height: inherit;
  display: inline-block;
  margin: 0 0 0 10px;
}
.blog-featured .tz__tags .tags.inline li,
.blog .tz__tags .tags.inline li {
  margin: 0 0 0 -5px;
}
.blog-featured .tz__tags .tags.inline a,
.blog .tz__tags .tags.inline a {
  color: #b4b4b4;
  letter-spacing: 1.5px;
}
.blog-featured .tz__tags .tags.inline a:hover,
.blog .tz__tags .tags.inline a:hover,
.blog-featured .tz__tags .tags.inline a:active,
.blog .tz__tags .tags.inline a:active,
.blog-featured .tz__tags .tags.inline a:focus,
.blog .tz__tags .tags.inline a:focus {
  color: #000000;
}
.pagination > li > span,
.pagination > li > a {
  margin: 0 5px;
  width: 40px;
  line-height: 40px;
  height: 40px;
  padding: 0;
  text-align: center;
  background: #e9e9e9 !important;
  border: none;
  color: #666666 !important;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
}
.pagination > li > span:hover,
.pagination > li > a:hover,
.pagination > li > span:focus,
.pagination > li > a:focus {
  color: #ffffff !important;
  background: #4184d8 !important;
}
.pagination > li.active > span,
.pagination > li.active > span:focus,
.pagination > li.active > span:hover,
.pagination > li.active > a,
.pagination > li.active > a:hover,
.pagination > li.active > a:focus {
  color: #ffffff !important;
  background: #4184d8 !important;
}
.cat-children > h3 {
  font-size: 30px;
  font-family: 'Kanit', sans-serif;
  text-transform: uppercase;
  position: relative;
  font-weight: 700;
  padding-bottom: 15px;
  margin-bottom: 20px;
}
.cat-children > h3:after {
  content: '';
  width: 90px;
  height: 2px;
  background: rgba(65, 132, 216, 0.2);
  position: absolute;
  bottom: 0;
  left: 0;
}
.cat-children > h3:before {
  content: '';
  width: 50px;
  height: 2px;
  background: #4184d8;
  position: absolute;
  bottom: 0;
  left: 0;
}
.cat-children .page-header {
  margin: 0 0 10px 15px;
  font-size: 16px;
  font-weight: 700;
  font-family: 'Kanit', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.cat-children .page-header:hover,
.cat-children .page-header:focus,
.cat-children .page-header:active {
  color: #4184d8;
}
.item-page .item-image {
  margin-bottom: 25px;
}
.item-page .item-image img {
  max-width: 100%;
}
.item-page .article-info {
  font-family: 'Roboto', sans-serif;
  color: #aaaaaa;
  font-size: 14px;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.item-page .article-info a {
  color: inherit;
}
.item-page .article-info dd {
  margin: 0;
}
.item-page .article-info dd:after {
  content: '/';
  display: inline-block;
  margin: 0 7px;
}
.item-page .article-info dd:last-child:after {
  content: none;
}
.item-page .page-header {
  border: none;
  margin: 0 40px 0 0;
  padding: 0;
}
.item-page .page-header h2 {
  font-size: 30px;
  font-family: 'Kanit', sans-serif;
  text-transform: uppercase;
  position: relative;
  font-weight: 700;
  padding-bottom: 25px;
  margin-bottom: 20px;
  margin-top: 0;
}
.item-page .page-header h2:after {
  content: '';
  width: 90px;
  height: 2px;
  background: rgba(65, 132, 216, 0.2);
  position: absolute;
  bottom: 0;
  left: 0;
}
.item-page .page-header h2:before {
  content: '';
  width: 50px;
  height: 2px;
  background: #4184d8;
  position: absolute;
  bottom: 0;
  left: 0;
}
.item-page .tz__tags {
  font-family: 'Kanit', sans-serif;
  font-weight: 500;
  font-size: 12px;
  text-transform: uppercase;
}
.item-page .tz__tags .tags.inline {
  line-height: inherit;
  display: inline-block;
  margin: 0 0 0 10px;
}
.item-page .tz__tags .tags.inline li {
  margin: 0 0 0 -5px;
}
.item-page .tz__tags .tags.inline a {
  color: #b4b4b4;
  letter-spacing: 1.5px;
}
.item-page .tz__tags .tags.inline a:hover,
.item-page .tz__tags .tags.inline a:active,
.item-page .tz__tags .tags.inline a:focus {
  color: #000000;
}
.item-page form .content_vote {
  display: inline-block;
}
.item-page form .content_vote select {
  padding: 7px 15px;
  vertical-align: middle;
}
.item-page form .content_vote .btn.btn-mini {
  background: #4184d8;
  color: #ffffff;
  text-transform: uppercase;
  font-family: 'Kanit', sans-serif;
  font-weight: 500;
  -webkit-border-radius: 1px;
  -moz-border-radius: 1px;
  border-radius: 1px;
}
.item-page form .content_vote .btn.btn-mini:hover {
  background: #276abf;
}
.pagenav li a {
  border-color: #4184d8;
  background: #4184d8;
  color: #ffffff;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  padding: 10px 20px;
  line-height: 1em;
  text-transform: uppercase;
  font-weight: 500;
  letter-spacing: 1px;
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
.pagenav li a:hover {
  background: #276abf;
}
blockquote {
  background: #f5f5f5;
  border: none;
  padding: 35px 30px 35px 100px;
  position: relative;
  margin: 45px 0;
}
blockquote:after {
  content: '\f10e';
  font-family: FontAwesome;
  color: #4184d8;
  font-size: 36px;
  position: absolute;
  top: 30px;
  left: 40px;
  font-style: italic;
  line-height: 1em;
}
blockquote p {
  color: #3f5157;
  font-size: 18px;
  font-weight: 300;
  font-style: italic;
  line-height: 1.5em;
  margin-bottom: 15px;
}
blockquote p.author {
  font-family: 'Kanit', sans-serif;
  color: #3f5157;
  font-size: 16px;
  text-transform: uppercase;
  font-style: normal;
  font-weight: 500;
  padding-bottom: 5px;
}
.search-results {
  margin-top: 30px;
}
.search .highlight {
  color: #4184d8;
  text-transform: capitalize;
}
.search .result-title {
  font-size: 16px;
}
.categories-list .page-header + * {
  padding-left: 15px;
}
.categories-list .page-header {
  font-family: 'Kanit', sans-serif;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 24px;
  border-color: #dddddd;
  padding-bottom: 5px;
}
.btn {
  font-size: 12px;
  line-height: 2em;
  text-transform: uppercase;
  padding: 8px 35px;
  border: none;
}
.btn-default {
  background: #3f5157;
  color: #cacaca;
  border-color: #3f5157;
}
.btn-default:hover,
.btn-default:focus,
.btn-default:active {
  background: #2a3539;
  color: #ffffff;
  border-color: #2a3539;
}
.btn.btn-mini {
  font-size: 10px;
  line-height: 2em;
  padding: 4px 20px;
}
input.form-control {
  height: auto;
  font-size: 14px;
  line-height: 2em;
  border: 1px solid #dddddd;
  -webkit-box-shadow: none;
  box-shadow: none;
  font-weight: 400;
  color: #666666;
  padding: 5px 20px;
}
.chzn-container-single {
  min-width: 90px;
}
.chzn-container-single .chzn-single {
  -webkit-box-shadow: none;
  box-shadow: none;
  border: 1px solid #dddddd;
  height: auto;
  font-size: 14px;
  line-height: 2em;
  padding: 5px 20px;
  background: #ffffff;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
}
.chzn-container-single .chzn-single div {
  width: 15px;
  right: 8px;
  top: 5px;
}
.chzn-container-single.chzn-container-active.chzn-with-drop .chzn-single {
  background: #ffffff;
}
.ordering-box label {
  display: block;
  font-size: 16px;
  margin-bottom: 10px;
}
fieldset legend {
  font-family: 'Kanit', sans-serif;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 24px;
  border-color: #dddddd;
  padding-bottom: 5px;
}
/*# sourceMappingURL=template.css.map */



.module-title {
  color: #3f5157;
  font-size: 20px;
  text-transform: uppercase;
  font-family: 'Kanit', sans-serif;
  font-weight: 600;
  position: relative;
  letter-spacing: 1px;
  padding-bottom: 15px;
  margin: 0 0 37px 0;
  line-height: 1.4em;
}
.module-title:after {
  content: '';
  position: absolute;
  width: 70px;
  height: 2px;
  background: #4184d8;
  left: 0;
  bottom: 0;
  opacity: 0.2;
}
.module-title:before {
  content: '';
  position: absolute;
  width: 40px;
  height: 2px;
  background: #4184d8;
  left: 0;
  bottom: 0;
  opacity: 1;
}

.categories-module {
  list-style: none;
  margin: 0;
  padding: 0;
  line-height: 1.42857143;
}
.categories-module li {
  padding: 0;
  margin: 18px 0;
}
.categories-module ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.categories-title {
  font-size: 13px;
  font-weight: 300;
  font-family: 'Roboto', sans-serif;
  margin: 0;
  line-height: inherit;
}
.categories-title a {
  display: block;
  color: #666666;
}
.categories-title a:hover {
  color: #4184d8;
}
.categories-title .num {
  float: right;
}
.category-module,
.mostread,
.latestnews {
  list-style: none;
  margin: 0;
  padding: 0;
}
.category-module li,
.mostread li,
.latestnews li {
  font-size: 13px;
  font-weight: 300;
  font-family: 'Roboto', sans-serif;
  margin: 22px 0;
  line-height: 1.42857143;
  padding: 0;
}
.category-module li a,
.mostread li a,
.latestnews li a {
  display: block;
  color: #666666;
}
.category-module li a:hover,
.mostread li a:hover,
.latestnews li a:hover {
  color: #4184d8;
}
.category-module li:last-child,
.mostread li:last-child,
.latestnews li:last-child {
  margin-bottom: 0;
}
.tagspopular ul > li {
  margin: 5px 3px 0 0;
  padding: 0;
}
.tagspopular ul > li > a {
  font-size: 12px;
  padding: 5px 20px;
  line-height: 1.6666667;
  font-weight: 300;
  background: transparent;
  color: #666666;
  border: 1px solid #dddddd;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
}
.tagspopular ul > li > a:hover {
  background: #4184d8;
  border-color: #4184d8;
  color: #ffffff;
}
.module-ct .search .style-right {
  display: flex;
}
.module-ct .search .style-right input {
  -webkit-border-radius: 2px 0 0 2px;
  -moz-border-radius: 2px 0 0 2px;
  border-radius: 2px 0 0 2px;
}
.module-ct .search .style-right .btn {
  -webkit-border-radius: 0 2px 2px 0;
  -moz-border-radius: 0 2px 2px 0;
  border-radius: 0 2px 2px 0;
}
.module-ct .search .style-left {
  display: flex;
}
.module-ct .search .style-left input {
  -webkit-border-radius: 0 2px 2px 0;
  -moz-border-radius: 0 2px 2px 0;
  border-radius: 0 2px 2px 0;
}
.module-ct .search .style-left .btn {
  -webkit-border-radius: 2px 0 0 2px;
  -moz-border-radius: 2px 0 0 2px;
  border-radius: 2px 0 0 2px;
}
.module-ct .search .style-top .btn {
  margin-bottom: 10px;
}
.module-ct .search .style-bottom .btn {
  margin-top: 10px;
}
.module-ct .search input {
  width: 100%;
  font-size: 13px;
  font-weight: 300;
  line-height: 20px;
  padding: 9px 20px;
}
.module-ct .search .btn {
  padding: 5px 15px;
  font-size: 12px;
}
.tag-category .btn-toolbar {
  margin-bottom: 30px;
  display: table;
}
.tag-category .btn-toolbar .btn-group,
.tag-category .btn-toolbar .btn {
  float: none !important;
}
.tag-category .btn-toolbar .btn-group {
  width: 50%;
}
.tag-category .btn-toolbar .btn-group.pull-right {
  text-align: right;
  margin-left: -10px;
}
.tag-category .btn-toolbar .btn-group input[type="text"] {
  width: 50%;
  font-size: 13px;
  font-weight: 300;
  line-height: 20px;
  padding: 9px 20px;
  border: 1px solid #dddddd;
  position: relative;
  top: 1px;
}
.tag-category .btn-toolbar .btn-group button {
  color: #ffffff;
  background: #4184d8;
}
.tag-category .btn-toolbar .btn-group button:hover {
  background: #276abf;
}

.rating {
  border: none;
  display: inline-block;
}
.rating > input {  display: none; }
.rating > label:before {
  margin: 5px;
  font-size: 1.25em;
  font-family: FontAwesome;
  display: inline-block;
  content: "\f005";
}

.rating > .half:before {
  content: "\f089";
  position: absolute;
}

.rating > label {
  color: #ddd;
  float: right;
}

/***** CSS Magic to Highlight Stars on Hover *****/

.rating > input.active ~ label /* show gold star when clicked */
{ color: #4184d8;  } /* hover previous stars in list */

.rating > input:checked + label:hover , /* hover current star when changing rating */
{ color: #4184d8;  }