* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.HHH {
  position: relative;
  margin: 0 auto 15px;
  display: block;
  width: 90%;
  height: auto;
  text-decoration: none;
  background-color: #fafafa;
  color: #131313;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  -moz-box-shadow: 0 4px #e7e7e7, 0 6px 1px #d0d0d2;
  -webkit-box-shadow: 0 4px #e7e7e7, 0 6px 1px #d0d0d2;
  box-shadow: 0 4px #e7e7e7, 0 6px 1px #d0d0d2;
}
.HHH * {
  -moz-transition: all 0.15s linear;
  -o-transition: all 0.15s linear;
  -webkit-transition: all 0.15s linear;
  transition: all 0.15s linear;
}
.HHH .title {
  display: block;
  padding: 10px 15px 0px 15px;
  font-size: 1.5em;/*1.10em*/
  font-family:kanit;
	text-align: center;
}
.HHH .details {
  display: block;
  clear: both;
  padding: 5px 0 20px 23px;
  font-size: 0.85em;
  color: #9a9ca2;
	text-align: center;
}
.HHH .price {
  position: absolute;
  top: 0;
  right: 0;
  font-family: 'Quattrocento Sans', sans-serif;
  font-size: 2.5em;
  font-weight: 700;
  color: #9a9ca2;
}
.HHH .price strong {
  display: inline-block;
  height: 100%;
  width: 36px;
  line-height: 82px;
  font-size: 1.25em;
  text-align: center;
  background-color: #eee;
  color: #ddd;
  -moz-border-radius: 0 10px 10px 0;
  -webkit-border-radius: 0;
  border-radius: 0 10px 10px 0;
  text-shadow: 0 -1px #8d8f96;
  -moz-box-shadow: 0 4px #d7d4d4;
  -webkit-box-shadow: 0 4px #d7d4d4;
  box-shadow: 0 4px #d7d4d4;
}
.HHH:before {
  position: absolute;
  content: "";
  display: block;
  width: 6px;
  height: 100%;
  -moz-border-radius: 10px 0 0 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px 0 0 10px;
  -moz-transition: all 0.075s linear;
  -o-transition: all 0.075s linear;
  -webkit-transition: all 0.075s linear;
  transition: all 0.075s linear;
}
.HHH.blue:before {
  background-color: #7daee9;
  -moz-box-shadow: 0 4px #719dd2;
  -webkit-box-shadow: 0 4px #719dd2;
  box-shadow: 0 4px #719dd2;
}
.HHH.blue:hover:before {
  background-color: #719dd2;
  -moz-box-shadow: 0 4px #6085b3;
  -webkit-box-shadow: 0 4px #6085b3;
  box-shadow: 0 4px #6085b3;
  text-decoration: none;
}
.HHH.blue:active:before {
  -moz-box-shadow: 0 2px #6085b3;
  -webkit-box-shadow: 0 2px #6085b3;
  box-shadow: 0 2px #6085b3;
}
.HHH.magenta:before {
  background-color: #de7cb9;
  -moz-box-shadow: 0 4px #c870a7;
  -webkit-box-shadow: 0 4px #c870a7;
  box-shadow: 0 4px #c870a7;
}
.HHH.magenta:hover:before {
  background-color: #c870a7;
  -moz-box-shadow: 0 4px #aa5f8e;
  -webkit-box-shadow: 0 4px #aa5f8e;
  box-shadow: 0 4px #aa5f8e;
  text-decoration: none;
}
.HHH.magenta:active:before {
  -moz-box-shadow: 0 2px #aa5f8e;
  -webkit-box-shadow: 0 2px #aa5f8e;
  box-shadow: 0 2px #aa5f8e;
}
.HHH.green:before {
  background-color: #7fd373;
  -moz-box-shadow: 0 4px #72be68;
  -webkit-box-shadow: 0 4px #72be68;
  box-shadow: 0 4px #72be68;
}
.HHH.green:hover:before {
  background-color: #72be68;
  -moz-box-shadow: 0 4px #61a258;
  -webkit-box-shadow: 0 4px #61a258;
  box-shadow: 0 4px #61a258;
  text-decoration: none;
}
.HHH.green:active:before {
  -moz-box-shadow: 0 2px #61a258;
  -webkit-box-shadow: 0 2px #61a258;
  box-shadow: 0 2px #61a258;
}
.HHH.red:before {
  background-color: #f66d64;
  -moz-box-shadow: 0 4px #dd625a;
  -webkit-box-shadow: 0 4px #dd625a;
  box-shadow: 0 4px #dd625a;
}
.HHH.red:hover:before {
  background-color: #dd625a;
  -moz-box-shadow: 0 4px #bc534d;
  -webkit-box-shadow: 0 4px #bc534d;
  box-shadow: 0 4px #bc534d;
  text-decoration: none;
}
.HHH.red:active:before {
  -moz-box-shadow: 0 2px #bc534d;
  -webkit-box-shadow: 0 2px #bc534d;
  box-shadow: 0 2px #bc534d;
}
.HHH:hover {
  -moz-box-shadow: 0 4px #e2e2e2, 0 6px 1px #ccccce;
  -webkit-box-shadow: 0 4px #e2e2e2, 0 6px 1px #ccccce;
  box-shadow: 0 4px #e2e2e2, 0 6px 1px #ccccce;
  text-decoration: none;
}
.HHH:hover .price strong {
  background-color: #e9e9e9;
  -moz-box-shadow: 0 4px #d3d0d0;
  -webkit-box-shadow: 0 4px #d3d0d0;
  box-shadow: 0 4px #d3d0d0;
}
.HHH:active {
  top: 1px;
  -moz-box-shadow: 0 2px #e2e2e2, 0 4px 1px #ccccce;
  -webkit-box-shadow: 0 2px #e2e2e2, 0 4px 1px #ccccce;
  box-shadow: 0 2px #e2e2e2, 0 4px 1px #ccccce;
}
.HHH:active .price strong {
  background-color: #e9e9e9;
  -moz-box-shadow: 0 2px #d3d0d0;
  -webkit-box-shadow: 0 2px #d3d0d0;
  box-shadow: 0 2px #d3d0d0;
}

/* button 3 color*/
.btn3d {
	position: relative;
	top: -6px;
	border: 0;
	transition: all 40ms linear;
	margin-top: 10px;
	margin-bottom: 10px;
	margin-left: 2px;
	margin-right: 2px;
}

.btn3d:active:focus,
.btn3d:focus:hover,
.btn3d:focus {
	-moz-outline-style: none;
	outline: medium none;
}

.btn3d:active,
.btn3d.active {
	top: 2px;
}

.btn3d.btn-default {
	color: #666666;
	box-shadow: 0 0 0 1px #ebebeb inset, 0 0 0 2px rgba(255, 255, 255, 0.10) inset, 0 8px 0 0 #BEBEBE, 0 8px 8px 1px rgba(0, 0, 0, .2);
	background-color: #f9f9f9;
}

.btn3d.btn-default:active,
.btn3d.btn-default.active {
	color: #666666;
	box-shadow: 0 0 0 1px #ebebeb inset, 0 0 0 1px rgba(255, 255, 255, 0.15) inset, 0 1px 3px 1px rgba(0, 0, 0, .1);
	background-color: #f9f9f9;
}

.btn3d.btn-primary {
	box-shadow: 0 0 0 1px #417fbd inset, 0 0 0 2px rgba(255, 255, 255, 0.15) inset, 0 8px 0 0 #4D5BBE, 0 8px 8px 1px rgba(0, 0, 0, 0.5);
	background-color: #4274D7;
}

.btn3d.btn-primary:active,
.btn3d.btn-primary.active {
	box-shadow: 0 0 0 1px #417fbd inset, 0 0 0 1px rgba(255, 255, 255, 0.15) inset, 0 1px 3px 1px rgba(0, 0, 0, 0.3);
	background-color: #4274D7;
}

.btn3d.btn-success {
	box-shadow: 0 0 0 1px #31c300 inset, 0 0 0 2px rgba(255, 255, 255, 0.15) inset, 0 8px 0 0 #5eb924, 0 8px 8px 1px rgba(0, 0, 0, 0.5);
	background-color: #78d739;
}

.btn3d.btn-success:active,
.btn3d.btn-success.active {
	box-shadow: 0 0 0 1px #30cd00 inset, 0 0 0 1px rgba(255, 255, 255, 0.15) inset, 0 1px 3px 1px rgba(0, 0, 0, 0.3);
	background-color: #78d739;
}

.btn3d.btn-info {
	box-shadow: 0 0 0 1px #00a5c3 inset, 0 0 0 2px rgba(255, 255, 255, 0.15) inset, 0 8px 0 0 #348FD2, 0 8px 8px 1px rgba(0, 0, 0, 0.5);
	background-color: #39B3D7;
}

.btn3d.btn-info:active,
.btn3d.btn-info.active {
	box-shadow: 0 0 0 1px #00a5c3 inset, 0 0 0 1px rgba(255, 255, 255, 0.15) inset, 0 1px 3px 1px rgba(0, 0, 0, 0.3);
	background-color: #39B3D7;
}