@font-face {
	font-family: 'Gotham Rounded Bold';
	src: url('../fonts/gotham-rounded-bold.otf');
}

@font-face {
	font-family: 'Gotham Rounded Medium';
	src: url('../fonts/gotham-rounded-medium.otf');
}

@font-face {
	font-family: 'Gotham Rounded Book';
	src: url('../fonts/gotham-rounded-book.otf');
}

/* BODY */

body {
	margin: 0;
	background: #DEAB51;
}

img {
	max-width: 100%;
}

a {
	text-decoration: none;
}

.container {
	display: block;
	width: 100%;
}

/* HEADER */

header {
	background: #C49756;
	overflow: hidden;
	position: fixed;
	width: 100%;
	top: 0;
}

header .logo-box {
	display: inline-block;
	padding: 7px 25px;
}

header .logo-box img {
	height: 48px;
}

header .main-menu {
	display: block;
	width: 55%;
	float: right;
	vertical-align: top;
	overflow: hidden;
}

header .main-menu ul {
	display: block;
	width: 100%;
	margin: 0;
	padding-left: 0;
}

header .main-menu ul li {
	display: inline-block;
	width: calc(99% / 3);
	background: #9C661E;
	vertical-align: top;
}

header .main-menu ul li a {
	display: block;
	/*width: 100px;*/
	width: 100%;
	padding: 10px 0px;
	font: 11.5px 'Gotham Rounded Bold';
	color: #fff;
	text-align: center;
}

header .main-menu ul li:nth-child(n+2) {
	border-left: 1px solid #C49756;
}

header .main-menu ul li img {
	display: block;
	margin: auto auto 10px auto;
}

/* MAIN */

#main {
	padding-top: 80px;
}

.main-home {
	padding-top: 80px !important;
}

#main .last-result-wrap,
#main .table-result-wrap,
#main .past-result-wrap,
#main .prediksi-wrap,
#main .about-us-wrap {
	margin-top: 3px;
	background: #542100;
	border-top: 6px solid #9C661E;
	overflow: hidden;
}

#main .last-result-wrap h2,
#main .table-result-wrap h2,
#main .past-result-wrap h2,
#main .prediksi-wrap h2,
#main .about-us-wrap h2 {
	display: block;
	margin: 0;
	padding: 2px 0 10px;
	background-image: url('../img/head-title-bg.png');
	background-repeat: no-repeat;
	background-position: center;
	font: 18px 'Gotham Rounded Bold';
	color: #fff;
	text-align: center;
}

#main .last-result-wrap .result-wrap {
	background: #F6C46D;
	padding-bottom: 15px;
	overflow: hidden;
}

#main .last-result-wrap .result-wrap h3 {
	padding: 5px 0;
	margin: 0 0 15px 0;
	background: #DEAB51;
	font: 14px 'Gotham Rounded Bold';
	color: #9C661E;
	text-align: center;
}

#main .last-result-wrap .result-wrap .lotto-result {
	display: inline-block;
	width: 62%;
	float: left;
}

#main .last-result-wrap .result-wrap .lotto-result .lotto-item {
	padding: 0 10px;
}

#main .last-result-wrap .result-wrap .lotto-result .lotto-item img {
	/*height: 46px;*/
	width: 13%;
}

#main .last-result-wrap .result-wrap .result-4d {
	display: inline-block;
	width: 38%;
}

#main .last-result-wrap .result-wrap .result-4d .item-4d > div {
	display: inline-block;
	width: 21%;
	padding: 5px 0;
	background: #F1CD95;
	border: 2px solid #9C661E;
	border-radius: 4px;
	font: 19.8px 'Gotham Rounded Medium';
	color: #9C661E;
	text-align: center;
	vertical-align: top;
}

#main .last-result-wrap .result-wrap .result-4d .item-4d > div span {
	display: block;
	margin-bottom: 2px;
	font-size: 9.9px;
	color: #E72D18;
}

#main .last-result-wrap .clock-wrap,
#main .last-result-wrap .social-wrap {
	display: inline-block;
	margin: 10px 0;
	padding: 0 10px;
	text-align: center;
	float: left;
	vertical-align: top;
}

#main .last-result-wrap .clock-wrap {
	width: 39%;
}

#main .last-result-wrap .clock-wrap > div {
	display: inline-block;
	width: 30%;
	font: 12px 'Gotham Rounded Bold';
	color: #fff;
	text-align: center;
}

#main .last-result-wrap .clock-wrap > div:nth-child(n+2) {
	margin-left: 5px;
}

#main .last-result-wrap .clock-wrap > div span {
	display: block;
	margin-bottom: 10px;
	padding: 10px 12px;
	background: #F18D21;
	border-radius: 4px;
	font: 36.5px 'Gotham Rounded Medium';
	color: #fff;
}

#main .last-result-wrap .social-wrap {
	width: 56%;
	padding-right: 0;
	padding-left: 0;
	font: 12px 'Gotham Rounded Medium';
	color: #fff;
}

#main .last-result-wrap .social-wrap > div {
	display: inline-block;
	width: 44%;
	margin-bottom: 10px;
	padding: 13.5px 10px;
	background: #F6C46D;
	float: left;
	vertical-align: top;
}

#main .last-result-wrap .social-wrap > .right {	
	border-left: 1px solid #C49756;
}

#main .last-result-wrap .social-wrap > .left img {
	width: 48%;
}

#main .last-result-wrap .social-wrap .social-list {
	margin: 0;
	padding-left: 0;
}

#main .last-result-wrap .social-wrap .social-list li {
	display: inline-block;
	/*width: 21%;*/
	width: 35%;
}

#main .last-result-wrap .social-wrap .social-list li:nth-child(n+2) {
	margin-left: 2px;
}

#main .table-result-wrap .table-result,
#main .past-result-wrap .table-result {
	width: 100%;
	background: #875513;	
	border: none;
	border-top: 2px solid #875513;
	border-right: none;
	border-bottom: 2px solid #875513;
	border-left: none;
	border-collapse: collapse;
	font: 16px 'Gotham Rounded Book';
	color: #fff;
	text-align: center;
}

#main .table-result-wrap .table-result th,
#main .past-result-wrap .table-result th {
	padding: 10px 0;
	background: #9C661E;
	border: none;
	font: 18px 'Gotham Rounded Medium';
}

#main .table-result-wrap .table-result th:nth-child(n+2),
#main .table-result-wrap .table-result td:nth-child(n+2),
#main .past-result-wrap .table-result th:nth-child(n+2),
#main .past-result-wrap .table-result td:nth-child(n+2) {
	border-left: 2px solid #875513;
}

#main .table-result-wrap .table-result td,
#main .past-result-wrap .table-result td {
	padding: 5px;
	background: #542100;
}

#main .table-result-wrap .table-result td:nth-child(4) span,
#main .past-result-wrap .table-result td:nth-child(4) span {
	display: inline-block;
}

#main .table-result-wrap .table-result td:nth-child(4) span:nth-child(n+2),
#main .past-result-wrap .table-result td:nth-child(4) span:nth-child(n+2) {
	margin-left: 7px;
}

#main .table-result-wrap .table-result td:nth-child(4) span.middle-number,
#main .past-result-wrap .table-result td:nth-child(4) span.middle-number {
	color: #F6C46D;
	border-bottom: 1px solid #F6C46D;
}

#main .table-result-wrap .table-result td:last-child span,
#main .past-result-wrap .table-result td:last-child span {
	display: inline-block;
	margin-top: 7px;
	margin-right: 10px;
	vertical-align: top;
}

#main .table-result-wrap .btn-history,
#main .prediksi-wrap .btn-more {
	display: block;
	width: 130px;
	margin: 5px auto;
	padding: 5px;
	background: #9C661E;
	border-radius: 6px;
	font: 15px 'Gotham Rounded Book';
	color: #fff;
	text-align: center;
	clear: both;
}

#main .prediksi-wrap {
	padding-bottom: 30px;
}

#main .prediksi-wrap .prediksi-item {
	display: block;
	padding: 15px 20px;
	background: #DEAB51;
	overflow: hidden;
}

#main .prediksi-wrap .prediksi-item .item {
	display: inline-block;
	width: 48%;
	
}

#main .prediksi-wrap .prediksi-item .item:nth-child(even) {
	margin-left: 15px;
}

#main .prediksi-wrap .btn-more {
	width: 160px;
	margin-top: 20px;
}

#main .past-result-wrap .paging-wrap {
	padding: 5px;
	background: #DEAB51;
}

#main .past-result-wrap .paging-wrap .paging {
	margin: 0;
	padding-left: 0;
}

#main .past-result-wrap .paging-wrap .paging li {
	display: inline-block;
	margin: 5px 0;
	padding: 5px;
	background: #542100;
}

#main .past-result-wrap .paging-wrap .paging li a {
	display: inline-block;
	width: 20px;
	font: 10px 'Gotham Rounded Medium';
	color: #fff;
	text-align: center;
}

#main .past-result-wrap .paging-wrap .paging li.selected a {
	color: #D59324;
}

#main .about-us-wrap .inner-content {
	padding: 10px;
	font: 13px 'Gotham Rounded Book';
	color: #fff;
}

#main .about-us-wrap .inner-content p {
	margin: 0;
}

.popup {
	display: none;
    position:fixed;
    z-index:2;
    top:0;
    left:0;
    width:100%;
    height:120%;
    background:rgba(0,0,0,0.7);
    opacity:0;
    visibility:hidden;
    transition:.3s ease;
}

.popup > iframe {
    position:relative;
    top:20%;
    z-index: 99;
    /*left:50%;
    margin-left:-280px;*/
}

/* RESPONSIVE */

@media (max-width: 626px) {

	#main .last-result-wrap .social-wrap > div {
		/*width: 43%;*/
		width: 41%;
	}
}

@media (max-width: 600px) {

	#main .last-result-wrap h2, 
	#main .last-result-wrap h2,
	#main .table-result-wrap h2, 
	#main .prediksi-wrap h2,
	#main .about-us-wrap h2 {
		font-size: 16px;
	}
	}

	#main .last-result-wrap .result-wrap h3 {
		font-size: 12px;
	}

	#main .last-result-wrap .result-wrap .lotto-result .lotto-item img {
		width: 12%;
		margin-top: 2px;
	}

	#main .last-result-wrap .result-wrap .result-4d .item-4d > div {
		width: 19%;
		font-size: 16px;
	}

	#main .last-result-wrap .clock-wrap > div {
		font-size: 11px;
	}

	#main .last-result-wrap .clock-wrap > div span {
		margin-bottom: 6px;
		font-size: 30.5px;
	}

	#main .last-result-wrap .social-wrap {
		font-size: 11px;
	}

	#main .last-result-wrap .social-wrap .social-list {
		margin: 0.7px 0;
	}

	#main .table-result-wrap .table-result,
	#main .past-result-wrap .table-result {
		font-size: 13px;
	}

	#main .table-result-wrap .table-result th,
	#main .past-result-wrap .table-result th {
		font-size: 16px;
	}

	#main .table-result-wrap .table-result td:last-child img,
	#main .past-result-wrap .table-result td:last-child img {
		width: 50%;
	}

	#main .table-result-wrap .btn-history, 
	#main .prediksi-wrap .btn-more {
		width: 110px;
		font-size: 13px;
	}

	#main .prediksi-wrap .btn-more {
		width: 140px;
	}
}

@media (max-width: 546px) {

	header .main-menu {
		width: 53%;
	}

	header .main-menu ul li a {
		font-size: 10.5px;
	}

	#main .last-result-wrap .social-wrap > div {
		padding: 11.5px 10px;
		margin-bottom: 6px;
	}

	#main .last-result-wrap .clock-wrap {
		width: 35%;
	}

	#main .last-result-wrap .clock-wrap > div span {
		padding: 10px 0;
		font-size: 28.5px;
	}

	#main .last-result-wrap .social-wrap {
		width: 58%;
	}

	#main .last-result-wrap .social-wrap .social-list {
		margin: 0.2px 0;
	}
}

@media (max-width: 531px) {

	#main .last-result-wrap .result-wrap .result-4d .item-4d > div {
		padding: 2px 0;
	}

	#main .last-result-wrap .clock-wrap > div {
		width: 27%;
	}

	#main .table-result-wrap .table-result td.
	#main .past-result-wrap .table-result td {
		padding: 5px 2px;
	}

	#main .prediksi-wrap .prediksi-item {
		text-align: center;
	}

	#main .prediksi-wrap .prediksi-item .item {
		width: 46%;
	}
}

@media (max-width: 523px) {

	header .main-menu {
		width: 48%;
	}

	header .main-menu ul li:nth-child(n+2) a {
		padding: 10.3px 0;
	}

	#main .last-result-wrap {
		text-align: center;
	}

	#main .last-result-wrap .clock-wrap, 
	#main .last-result-wrap .social-wrap {
		padding: 0;
		float: none;
	}

	#main .last-result-wrap .social-wrap {
		width: 62%;
	}
}

@media (max-width: 500px) {

	header .logo-box {
		padding: 3px 25px;
	}

	header .logo-box img {
		height: 42px;
	}

	header .main-menu ul li a {
		padding: 8px 0;
		font-size: 9.5px;
	}

	header .main-menu ul li:nth-child(n+2) a {
		padding: 8.2px 0;
	}

	header .main-menu ul li img {
		height: 16px;
	}

	#main .last-result-wrap h2, 
	#main .table-result-wrap h2, 
	#main .past-result-wrap h2, 
	#main .prediksi-wrap h2,
	#main .about-us-wrap h2 {
		padding: 0px 0px 6px;
		font-size: 14px;
	}

	#main .last-result-wrap .result-wrap .lotto-result {
		width: 59%;
	}

	#main .last-result-wrap .result-wrap .result-4d {
		width: 41%;
	}

	#main .last-result-wrap .result-wrap .result-4d .item-4d > div {
		width: 20%;
	}

	#main .last-result-wrap .result-wrap {
		padding-bottom: 7px;
	}

	#main .last-result-wrap .result-wrap h3 {
		margin: 0px 0px 7px 0px;
	}

	#main .last-result-wrap .clock-wrap > div,
	#main .last-result-wrap .social-wrap {
		font-size: 10px;
	}

	#main .last-result-wrap .social-wrap > div {
		padding: 5.5px 8px;
	}

	#main .last-result-wrap .clock-wrap > div span {
		padding: 8px 0;
		font-size: 20.5px;
	}

	#main .table-result-wrap .table-result th,
	#main .past-result-wrap .table-result th {
		font-size: 13px;
	}

	#main .table-result-wrap .table-result,
	#main .past-result-wrap .table-result {
		font-size: 11px;
	}

	#main .table-result-wrap .table-result td:last-child span,
	#main .past-result-wrap .table-result td:last-child span {
		margin-top: 4px;
	}

	#main .table-result-wrap .table-result td:last-child img,
	#main .past-result-wrap .table-result td:last-child img {
		width: auto;
		height: 22px;
	}

	#main .table-result-wrap .btn-history, 
	#main .prediksi-wrap .btn-more {
		width: 90px;
		font-size: 11px;
	}

	#main .prediksi-wrap {
		padding-bottom: 20px;
	}

	#main .prediksi-wrap .prediksi-item {
		padding: 15px 20px 10px;
	}

	#main .prediksi-wrap .btn-more {
		width: 120px;
		margin-top: 10px;
	}

	#main .about-us-wrap .inner-content {
		font-size: 11px;
	}
}

@media (max-width: 450px) {

	#main .last-result-wrap .clock-wrap > div span {
		padding: 6px 0;
	}
}

@media (max-width: 429px) {

	header .logo-box {
		padding: 7px 15px;
	}

	header .logo-box img {
		height: 34px;
	}

	header .main-menu {
		width: 50%;
	}

	#main .last-result-wrap .result-wrap .lotto-result {
		width: 57%;
	}

	#main .last-result-wrap .result-wrap .result-4d {
		width: 43%;
	}

	#main .last-result-wrap .result-wrap .result-4d .item-4d > div {
		padding: 0;
	}

	#main .last-result-wrap .result-wrap .result-4d .item-4d > div span {
		font-size: 9px;
	}

	#main .last-result-wrap .clock-wrap, 
	#main .last-result-wrap .social-wrap {
		display: block;
		margin: auto;
		float: none;
		clear: both;
	}

	#main .last-result-wrap .clock-wrap {
		width: 46%;
		margin-top: 15px;
	}

	#main .last-result-wrap .social-wrap {
		width: 87%;
	}

	#main .table-result-wrap .table-result,
	#main .past-result-wrap .table-result {
		font-size: 9px;
	}
}

@media (max-width: 410px) {

	header .logo-box {		
		padding: 12px 0px 0px 10px;
	}

	header .logo-box img {
		height: 28px;
	}

	header .main-menu {
		width: 56%;
	}

	#main .table-result-wrap .table-result td:last-child span,
	#main .past-result-wrap .table-result td:last-child span {
		float: left;
		margin-right: 1px;
	}

	#main .table-result-wrap .table-result td:nth-child(4) span:nth-child(n+2),
	#main .past-result-wrap .table-result td:nth-child(4) span:nth-child(n+2) {
		margin-left: 2px;
	}

}

@media (max-width: 388px) {

	#main .table-result-wrap .table-result td:nth-child(4),
	#main .past-result-wrap .table-result td:nth-child(4) {
		width: 60px;
	}

	#main .last-result-wrap .result-wrap .result-4d .item-4d > div span {
		font-size: 8px;
	}

}

@media (max-width: 363px) {

	header .logo-box {		
		padding: 12px 0px 0px 10px;
	}

	header .main-menu {
		width: 58%;
	}

	header .main-menu ul {
		text-align: right;
	}

	header .main-menu ul li {
		width: calc(91% / 3);
	}

	#main .last-result-wrap .result-wrap h3 {
		font-size: 10px;
	}

	#main .last-result-wrap .result-wrap .lotto-result .lotto-item,
	#main .last-result-wrap .result-wrap .result-4d .item-4d {
		text-align: center;
	}

	#main .last-result-wrap .result-wrap .lotto-result {
		width: 71%;
	}

	#main .last-result-wrap .result-wrap .result-4d {
		width: 29%;
	}

	#main .last-result-wrap .result-wrap .lotto-result .lotto-item {
		padding: 0px 2px;
	}

	#main .last-result-wrap .result-wrap .lotto-result .lotto-item img {
		/*width: 19%;*/
		width: 12%;
		margin-top: 26px;
	}

	#main .last-result-wrap .result-wrap .result-4d .item-4d > div {
		width: 39%;
		/*width: 22%;*/
	}

	#main .last-result-wrap .result-wrap .result-4d .item-4d > div:nth-child(n+3) {
		margin-top: 5px;
	}

	#main .table-result-wrap .table-result td:last-child span,
	#main .past-result-wrap .table-result td:last-child span {
		display: block;
		margin-bottom: 5px;
		float: none;
	}

	#main .prediksi-wrap .prediksi-item .item {
		width: 80%;
	}

	#main .prediksi-wrap .prediksi-item .item:nth-child(n+2) {
		margin-top: 10px;
	}

	#main .prediksi-wrap .prediksi-item .item:nth-child(even) {
		margin-left: 0;
	}
}

@media (max-width: 310px) {

	header .logo-box {
		padding: 12px 0px 0px 5px;
	}

	header .logo-box img {
		height: 26px;
	}

	header .main-menu {
		width: 61%;
	}

	header .main-menu ul li {
		width: calc(95% / 3);
	}

	header .main-menu ul li a {
		padding: 5px 0;
	}

	header .main-menu ul li:nth-child(n+2) a {
		padding: 5px 0;
	}

}

/* Mobile navigation */
@charset "UTF-8";

.brand {
  position: absolute;
  padding-left: 20px;
  padding-top: 13px;
  float: left;
  line-height: 70px;
  text-transform: uppercase;
  font-size: 1.4em;
}
.brand a,
.brand a:visited {
  color: #ffffff;
  text-decoration: none;
}

.nav-container {
  max-width: 1000px;
  margin: 0 auto;
}

nav {
  float: right;
}
nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
nav ul li {
  float: left;
  position: relative;
}
nav ul li a,
nav ul li a:visited {
  display: block;
  padding: 0 20px;
  line-height: 70px;
  background: #9C6628;
  color: #ffffff;
  text-decoration: none;
}
nav ul li a:hover,
nav ul li a:visited:hover {
  background: #532204;
  color: #ffffff;
}
nav ul li a:not(:only-child):after,
nav ul li a:visited:not(:only-child):after {
  padding-left: 4px;
  content: " ▾";
}
nav ul li ul li {
  min-width: 190px;
}
nav ul li ul li a {
  padding: 15px;
  line-height: 20px;
}

.nav-dropdown {
  position: absolute;
  display: none;
  z-index: 1;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
}

/* Mobile navigation */
.nav-mobile {
	display: block;
	position: absolute;
	top: 12px;
	right: 0;
	height: 70px;
	width: 70px;
}

  nav {
    width: 100%;
    padding: 70px 0 15px;
  }
  nav ul {
    display: none;
  }
  nav ul li {
    float: none;
  }
  nav ul li a {
    padding: 15px;
    line-height: 20px;
  }
  nav ul li ul li a {
    padding-left: 30px;
  }

  .nav-dropdown {
    position: static;
  }

#nav-toggle {
  position: absolute;
  left: 18px;
  top: 22px;
  cursor: pointer;
  padding: 10px 35px 16px 0px;
}
#nav-toggle span,
#nav-toggle span:before,
#nav-toggle span:after {
  cursor: pointer;
  border-radius: 8px;
  height: 5px;
  width: 35px;
  background: #9D6626;
  position: absolute;
  display: block;
  content: "";
  transition: all 300ms ease-in-out;
}
#nav-toggle span:before {
  top: -10px;
}
#nav-toggle span:after {
  bottom: -10px;
}
#nav-toggle.active span {
  background-color: transparent;
}
#nav-toggle.active span:before, #nav-toggle.active span:after {
  top: 0;
}
#nav-toggle.active span:before {
  transform: rotate(45deg);
}
#nav-toggle.active span:after {
  transform: rotate(-45deg);
}

/*RUMUS*/
#inputVariable {
  display: block;
  text-align: center;
  background: #f6c46d;
  border-bottom: 5px solid #9d661e;
  padding-bottom:20px;
}

#inputVariable table {
  margin: auto;
}

#inputVariable tr:first-child {
}
#inputVariable tr {
  display: inline-table;
}
#inputVariable tr td {
  padding: 18px;
  font-family:Microsoft Tai Le;
  font-size: 17px;
  font-weight: bold;
}
#inputVariable tr td input[type=text] {
  font-size: 17px;
}
#inputVariable p{
  margin-top: 20px;
}
#inputVariable h2  {
  float: left;
  width: 100%;
  margin:0 auto;
  padding: 30px;
  box-sizing:border-box;
  }
#inputVariable input[type=button] {
  padding: 10px;
}

#inputVariable input[type=button]:hover {
  cursor:pointer;
  background:#d59324;;
  color:#542100;
}

.btn-check{
	border-radius:5px;
	color:#fff;
	font-weight:bold;
	background:#542100;
	border:none;
}

.divBoll{
	padding: 5px;
}

.BollName{
	color: #56230F;
	font-weight: bold;
	font-size: 1.2em;
}

.inputBoll{
	width: 70%;
	height: 17px;
}