.aball {
	overflow-x: scroll;
}

.aball-2 {}

.hscroll-none::-webkit-scrollbar {
	display: none;
}

/**********************/
.header {
	border-bottom: #ccc 3px solid;
}

.header .title-1 {
	font: 55px/84px 'Kanit', Arial, sans-serif;
	font-weight: bold;
	color      : #333;
}

.header .title-2 {
	font       : 31.5px/42px 'Kanit', Arial, sans-serif;
	font-weight: bold;
	color      : #090;
}

.header .year-1 {
	font       : 87px/81px 'Kanit', Arial, sans-serif;
	font-weight: bold;
	color      : #F03;
}

.header .year-2 {
	font: 60px/70px 'Kanit', Arial, sans-serif;
	color: #F03;
}

.header .time {
	margin-top: 20px;
	font      : 17px/20px 'Kanit', Arial, sans-serif;
	color     : #333;
}

/*****************************************************/

.bar-total {
	width: 100%;

}

.bar-total .topic {
	margin-left: 40px;
	font       : 14px/20px 'Kanit', Arial, sans-serif;
	color      : #333;
}

.bar-total .count {
	margin-left: 40px;
	font       : 16px/24px 'Kanit', Arial, sans-serif;
	color      : #333;
}

.bar-total .total-1 {
	width     : 20%;
	background: url(../images/vote/vote_0004.png) top left no-repeat;
}

.bar-total .total-2 {
	width     : 20%;
	background: url(../images/vote/vote_0003.png) top left no-repeat;

}

.bar-total .total-3 {
	width     : 20%;
	background: url(../images/vote/vote_0002.png) top left no-repeat;
}

.bar-total .total-4 {
	width     : 20%;
	background: url(../images/vote/vote_0001.png) top left no-repeat;
}

.bar-total .total-5 {
	width     : 20%;
	background: url(../images/vote/vote_0000.png) top left no-repeat;
}


/*****************************************************/
.mid {}

.mid .title {
	font : 30px/30px 'Kanit', Arial, sans-serif;
	color: #333;

}

.mid .title span {
	color: #090;

}

.mid .pic {
	width : 170px;
	height: 170px;

	-webkit-border-radius: 200px;
	-moz-border-radius   : 200px;
	border-radius        : 200px;
	overflow             : hidden;
}

.mid .pic img {
	max-width: 100%;
	height   : auto;

}

.mid .name {
	font: 16px/20px 'Kanit', Arial, sans-serif;
	color: #0055aa;
}



.mid .number {
	font: 16px/20px 'Kanit', Arial, sans-serif;
	color: #999;
}

.mid .total {
	font       : 46px/50px 'Kanit', Arial, sans-serif;
	font-weight: bold;
	color      : #0055aa;
}

.mid .t-green {
	color: #39aa01;
}

/******************************************/


.box {
	margin-top    : 50px;
	vertical-align: baseline;
}

.boxdetails {
	padding   : 0 0 30px 0;
	border-top: 3px solid #333;
}

.box table {
	border-collapse: collapse;
	border-spacing : 0;
	width          : 100%;
}

.box th {
	color      : #F00;
	font-family: 'Kanit', sans-serif;
	font-weight: 500;
	font-size  : 19px;
	text-align : center;
	padding    : 10px 5px;
}

.box th:first-child {
	color      : #000;
	font-size  : 24px;
	font-weight: 700;
	text-align : left;
	padding    : 10px 10px;
}


.box td {
	font-family: 'Kanit', sans-serif;
	font-weight: 500;
	font-size  : 18px;
	padding    : 10px 5px;
	text-align : center;
}

.box td:first-child {
	text-align: left;
	padding   : 10px 10px;
	width     : 40%;
}

.box td:last-child {
	background: #39aa01;
	color     : #fff;
	font-size : 20px;
}

.box tbody tr {
	background-color: #effaea;
	border-left     : #39aa01 5px solid;

}

.box tbody tr:nth-child(odd) {
	background-color: #e5effa;
	border-left     : #0055aa 5px solid;
}

.box tbody tr:nth-child(odd) td:last-child {
	background-color: #0055aa;
}

@media (min-width: 375px) and (max-width: 419px) {
	.bar-total .topic {
		margin-left: 40px;
		font       : 13px/20px 'Kanit', Arial, sans-serif;
		color      : #333;
	}

	.bar-total .count {
		margin-left: 40px;
		font       : 12px/20px 'Kanit', Arial, sans-serif;
		color      : #333;
	}

	.box table {
		width: 500px;
	}

	.header .title-1 {
		font: 50px/50px 'Kanit', Arial, sans-serif;
	}

	.header .title-2 {
		font: 27.5px/42px 'Kanit', Arial, sans-serif;
	}

	.mid .title {
		font : 27px/30px 'Kanit', Arial, sans-serif;
		color: #333;
	}

	.mid .pic {
		width : 150px;
		height: 150px;

	}

	.box th:first-child {
		line-height: 24px;
	}

	.header .year-1 {
		font: 65px/65px 'Kanit', Arial, sans-serif;
	}

	.bar-total .total-1 {
		width     : 50%;
		background: url(../images/vote/vote_0004.png) top left no-repeat;
	}

	.bar-total .total-2 {
		width     : 50%;
		background: url(../images/vote/vote_0003.png) top left no-repeat;

	}

	.bar-total .total-3 {
		width     : 50%;
		background: url(../images/vote/vote_0002.png) top left no-repeat;
	}

	.bar-total .total-4 {
		width     : 50%;
		background: url(../images/vote/vote_0001.png) top left no-repeat;
	}

	.bar-total .total-5 {
		width     : 50%;
		background: url(../images/vote/vote_0000.png) top left no-repeat;
	}
}

@media (min-width: 768px) and (max-width: 991px) {

	.mid .pic {
		width : 140px;
		height: 140px;
	}
}

@media (min-width: 992px) and (max-width: 1199px) {
	.mid .name {
		font: 18px/25px 'Kanit', Arial, sans-serif;

	}

	.mid .number {
		font: 17px/20px 'Kanit', Arial, sans-serif;
	}

	.mid .pic {
		width : 130px;
		height: 130px;
	}

	.mid .total {
		font: 34px/40px 'Kanit', Arial, sans-serif;
	}
}