/*Styles for screen 515px and lower*/
@media screen and (max-width: 325px) 	{
	.game ul li {
		width: 47%;
		height: 57px;
	}	
}
@media screen and (max-width: 380px) 	{
	.left-col, .sidebar {
		width: 108%!important;
		float: none; 
		margin: 0 -10px;
	}
	.langkah {
		width: 121%!important;
	}
	.langkah ul li {
		width: 100%!important;
	}
	.info-contact > ul > li {
		width: 100%;
	}
	.info-contact ul > li > span {
		font-size: 100%;
	}
	.bank ul li {
		min-height: 135px!important;
	}
}
@media screen and (max-width: 425px) 	{
	.langkah {
		width: 120%!important;
	}
	.langkah ul li {
		margin: 3px 16px 0;
	}
	header figure.logo {
		position: relative;
		margin: 0 auto;
		text-align: center;
	}
	.bank ul li {
		width: 44%!important;
		min-height: 105px;
	}
}
@media screen and (max-width: 478px) 	{
	h1 { font-size: 15px; padding: 1px; }
	h2 { font-size: 13px; padding: 1px; }
	.cycle-slide {
		margin: 0 11px 0;
	}
	.container-header {
		padding: 0!important;
	}
	.running-text figure {
		width: 40%;
	}
	.marquee.fake {
		width: 66%;
	}
	header figure.logo {
		position: relative;
		margin: 0 auto;
		text-align: center;
	}
	.langkah ul li {
		width: auto!important;
		margin: 3px 25px 0!important;
	}
}
@media screen and (min-width: 424px) and (max-width: 520px) 	{	
	.langkah {
		width: 115%;
	}
	.langkah ul li {
		width: 47%;
	}
}
@media screen and (min-width: 521px) and (max-width: 568px) 	{	
	.langkah {
		width: 114%;
	}
	.langkah ul li {
		width: 47%;
	}
}
@media screen and (max-width: 620px) 	{
	.left-col {
		width: 100%;
		float: none; 
	}
	.sidebar {
		width: 100%;
		float: none; 
	}
	.widget {
		margin-top: 10px!important;		
	}
}
@media screen and (max-width: 660px) 	{
	.bank ul li {
		width: 44%!important;
		min-height: 105px;
	}
}
@media screen and (max-width: 860px) 	{
	.langkah figure {
		width: 100%;
	}
}
@media screen and (min-width: 569px) and (max-width: 670px) 	{
	.langkah {
		width: 111.5%;
	}
	.langkah ul li {
		width: 47%;
	}
}
@media screen and (min-width: 671px) and (max-width: 769px) 	{
	.langkah ul li a span {
		font-size: 25px;
	}
	.langkah ul li {
		margin: 3px 10px 0;
	}
	.langkah {
		width: 109%;
	}
}
@media screen and (min-width: 770px) and (max-width: 860px) 	{
	.langkah ul li {
		margin: 3px 15px 0;
	}
	.langkah {
		width: 110%;
	}
}
@media screen and (min-width: 861px) and (max-width: 899px) 	{
	.langkah {
		width: 108%;
	}
}
@media screen and (min-width: 900px) and (max-width: 932px) 	{
	.langkah {
		width: 107%;
	}
}
@media screen and (min-width: 931px) and (max-width: 971px) 	{
	.langkah {
		width: 107%;
	}
}
@media screen and (min-width: 972px) and (max-width: 1005px) 	{
	.langkah {
		width: 107%;
	}
}
@media screen and (min-width: 861px) 	{
	.langkah ul {
		width: 68%;
	}
	.langkah ul li {
		margin: 3px 22px 0;
	}
}
@media screen and (max-width: 904px) {
	.nivo-controlNav {
		display: none;
	}
}
@media screen and (min-width: 905px) and (max-width: 999px) {
	.nivo-controlNav {
		margin: -400px 0 0 790px;
	}
}
@media screen and (min-width: 1000px) and (max-width: 1059px) {
	.nivo-controlNav {
		margin: -430px 0 0 840px;
	}
}
@media screen and (min-width: 1060px) and (max-width: 1100px) {
	.nivo-controlNav {
		margin: -450px 0 0 860px;
	}
}
@media screen and (max-width: 1300px) {
	.left-banner, .right-banner {
		display: none;
	}
}
@media screen and (max-width: 1050px) {
	#cssmenu > ul > li > a {
		font-size: 14px;
	}
}
@media screen and (max-width: 980px) {
	#cssmenu > ul > li > a {
		font-size: 13px;
		margin: 8px 0;
	}
	.bank ul li {
		margin: 0 2px;
	}
}
@media screen and (min-width: 798px) and (max-width: 990px) {
	.game ul li {
		width: 47%;
		height: 57px;
	}
}
@media screen and (min-width: 621px) and (max-width: 797px) {
	.game ul li {
		width: 45%;
		height: 50px;
	}
}
@media screen and (max-width: 940px) {
	#cssmenu > ul > li > a {
		font-size: 11px;
		margin: 9px 0;
	}
}
@media screen and (max-width: 860px) {
	#cssmenu > ul > li > a {
		font-size: 10px;
		margin: 10px 0;
	}
}

@media screen and (min-width: 801px) and (max-width: 803px) {
	#cssmenu > ul > li > a {
		font-size: 9px;
		margin: 11px 0;
	}
}
img {
	max-width: 100%;
	height: auto;
	width: auto; /* ie8 */
}

@media all and (max-width: 633px) 	{
	.running-text .container-header {
		padding: 0!important;
	}
}

@media screen and (min-width: 625px) and (max-width: 633px) 	{
	.info-contact {
		margin: 0 0 55px;
	}
}

@media all and (max-width: 800px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
  #cssmenu {
	border-radius: 0;
  }
  #cssmenu > ul > li > a {
	font-size: 15px;
  }
  #cssmenu > ul {
    display: none;
	background: #ffff3b;
  }
  #cssmenu > ul.open {
    display: block;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
  }
  #cssmenu > ul > li {
    float: none;
    display: block;
	background: none;
	padding-left: 0;
	z-index: 99;
  }
  #cssmenu > ul > li > a {
    padding: 18px 25px 18px 25px;
	border-bottom: 1px solid #6c3410;
	border-left: none;
	color: #f00;
	margin: 0;
  }
  #cssmenu > ul > li:first-child > a {
    margin-left: 0;
  }
  #cssmenu .last a {
    margin-right: 0;
  }
  #cssmenu .last:hover {
	border-radius: 0;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
  }
  #cssmenu > ul > li:first-child:hover {
	border-radius: 0;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
  }
  #cssmenu > ul > li:hover > a,
  #cssmenu > ul > li.active > a {
    background: rgba(0, 0, 0, 0.1);
  }
  #cssmenu #menu-button {
    display: block;
    text-decoration: none;
    font-size: 17px;
    font-weight: 700;
    color: #d3eced;
    padding: 11px 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
  }
  #cssmenu ul ul,
  #cssmenu ul li:hover > ul,
  #cssmenu > ul > li > ul,
  #cssmenu ul ul ul,
  #cssmenu ul ul li:hover > ul{
    left: 0;
    right: auto;
    top: auto;
    opacity: 1;
    width: 100%;
    padding: 0;
    position: relative;
    text-align: left;
  }
  #cssmenu ul ul {
	background: #ffff3b;
  }
  #cssmenu ul > li.current-menu-item, #cssmenu ul > li.current-menu-ancestor {
    background: rgba(255, 0, 0, 0.3);	
  }
  #cssmenu ul ul li {
    width: 100%;
  }
  #cssmenu ul ul li a {
    width: 100%;
    padding-left: 35px;
	color: #f00;
	font-size: 14px;
  }
   #cssmenu > ul > li:hover, #cssmenu > ul > li:first-child:hover, #cssmenu ul ul li a:hover, #cssmenu ul ul > li.menu-item-has-children:hover > a {
	background: rgba(0, 0, 0, 0.1);
  }
  #cssmenu ul ul ul li a {
    padding-left: 45px;
  }
  #cssmenu ul ul li:first-child > a,
  #cssmenu ul ul li:last-child > a {
    border-radius: 0;
  }
  #cssmenu > ul > li > ul::after {
	border-bottom: none;
  }
  #cssmenu ul ul ul::after {
	border-right: none;
  }
  #cssmenu #menu-button::after {
    display: block;
    content: '';
    position: absolute;
    height: 3px;
    width: 22px;
    border-top: 2px solid #d3eced;
    border-bottom: 2px solid #d3eced;
    right: 25px;
    top: 13px;
  }
  #cssmenu #menu-button::before {
    display: block;
    content: '';
    position: absolute;
    height: 3px;
    width: 22px;
    border-top: 2px solid #d3eced;
    border-bottom: 2px solid #d3eced;
    right: 25px;
    top: 21px;
  }
  #cssmenu > ul > li.has-sub > a::after,
  #cssmenu ul ul li.has-sub > a::after {
    display: none;
  }
  .running-text figure {
	width: 33%;
  }
  .marquee.fake {
	width: 71%;
  }
  #menu .container-header {
	padding: 0!important;
  }
	#menu .container-header {
		width: 100%;
	}
}