html,body{
	  margin:0px;
  	padding:3px;
		height:100%;
		width:99%;
		height:auto;
	 	min-height:auto;
		background: #000000;
		background-image: url('/images/brand/background/background.jpg?00');
		background-repeat: repeat;
		background-size: cover;
		overflow-x: hidden;
		color: white;
		font: normal 13px Helvetica, sans-serif;
}

div,ul{
	box-sizing: border-box;
}

.main {
	float:left;
	border: 0px solid red;
	width: 100%;
	height:auto;
 	min-height:auto;
	padding: 0;
	margin: 0;
	background: #000;
}

.pagetitle {
	 font-size: large;
	 font-weight: bold;
	 color: white;
}

.landingframe{
		float:left;
		border: 0px solid red;
		width: 100%;
		height: auto;
		padding: 0;
		margin: 0;
}
.logoframe {
	float:left;
	border: 0px solid #000;
	width: 100%;
	height: auto;

}

.logoframe span{
	font-size: 60px;
}

.footerpayment {
	margin-top: 32px;
	width: 240px;
	height: 64px;
	border: 0px solid red;
  position: relative;
	float: left;
}

#divImage {
	width: 240px;
	height: 64px;
	border: 0px solid red;
  position: relative;
	float: left;
}
#divImage2 {
	width: 130px;
	height: 80px;
	border: 0px solid red;
  position: relative;
	float: left;
}

.divInfo {
	top: 20;
	left: 20;
	width: 300px;
	height: 100px;
	color: white;
	font-size: 11px;
	border: 1px solid grey;
	background: rgba(0,0,0,0.6);
}
.divInfo2 {
	top: -150;
	left: -1;
	width: 130px;
	height: 200px;
	color: white;
	font-size: 9px;
	border: 1px solid grey;
	background: rgba(0,0,0,0.6);
}

#divImage .divInfo {
    display:none;
    position:absolute;
    bottom:0;
}

#divImage:hover .divInfo {
    display:block;
}

#divImage2 .divInfo2 {
    display:none;
    position:absolute;
    bottom:0;
}

#divImage2:hover .divInfo2 {
    display:block;
}


.companylogo {
	float:left;
	border: 0px solid blue;
	width:300px;
	height:99px;
	display: block;
	background-image:url('/images/brand/logo/logo_desktop.png?123');
	background-repeat: no-repeat;
}


.gamelist {
	float:left;
	border: 0px solid red;
	width:100%;
}

.imgpromo1{
	background-image:url("/images/brand/promotion/desktop/banner-promo-1.jpg?99");
	background-size: contain;
	height: 399px;
	width:1000px;
}

.imgpromo2{
	background-image:url("/images/brand/promotion/desktop/banner-promo-2.jpg?99");
	background-size: contain;
	height: 399px;
	width:1000px;
}

.imgpromo3{
	background-image:url("/images/brand/promotion/desktop/banner-promo-3.jpg?99");
	background-size: contain;
	height: 399px;
	width:1000px;
}

.imgpromo4{
	background-image:url("/images/brand/promotion/desktop/banner-promo-4.jpg?89");
	background-size: contain;
	height: 399px;
	width:1000px;
}

.imgpromo5{
	background-image:url("/images/brand/promotion/desktop/banner-promo-5.jpg?55");
	background-size: contain;
	height: 399px;
	width:1000px;
}




.banklogo{
	 margin:1px;
	 border: 0px solid blue;
	 width:180px;
}

.contactlogo{
	float:left;
	margin:0.5px;
	border: 0px solid blue;
	width:1000px;
}
.daftar{
	float:left;
	margin:3.5px;
	border: 0px solid blue;
	width:70px;
}

.img_banner{
	 float:left;
	 border: 0px solid blue;
	 width:1000px;
   height:400px;
   background-image:url('/images/brand/banner/banner.jpg');
	 background-repeat: no-repeat;
}

.imglogo{
	width: 190px;
}



.boxframe {
	float:left;
	border: 0px solid #000;
	width: 100%;
	height: auto;
}


.footer {
	float:left;
	border: 0px solid #000;
	width: 100%;
	padding: 10px 3px 3px 10px;
	color:#58595B;
	font-size: 14px;
}


.previewimg {
	width:80%;
}

.framecenter{
 text-align: left;
 width: 1000px;
 height:100%;
 border: solid 0px #000;
 display: block;
 margin-left: auto;
 margin-right: auto;
 background-color: #;

}


.tablelist {
	border-collapse: collapse;
	border: solid 0px #CCC;
	background-color:white;
}

.tablelist th {
	border: solid 1px #CCC;
	font: bold 13px Helvetica, Arial, sans-serif;
	background-color:#444;
	color:#fff;
}
.tablelist tr td {
	border: solid 1px #CCC;
	font: normal 13px Helvetica, Arial, sans-serif;
	background-color:#FFF;
	color:#444;
}


.ondesktophidden{
		display: none;
}

#mySidenav  {

	height: 40px;
	width: 100%;
	z-index: 7000;
	float: left;
	background: rgba(0,0,0,0.5);
}

#mySidenav  > li {
float: left;
position: relative;

}

#mySidenav  ul {
background: #1c1c1c;
display: none;
position: absolute;
left: -100; top: 100%;
z-index:1000
}

#mySidenav  a {
cursor: pointer;
display: block;
color: #eed488;
line-height: 30px;
padding: 5px 15px;
text-decoration: none;
}

#mySidenav li { list-style: none; }
#mySidenav li:hover { background: #881719; }
#mySidenav li:hover ul { display: block; }
#mySidenav li:hover ul a{ width: 150px;}

#menuopen { border: solid 0px gray;
						position: fixed;
						font: normal 1.7em Helvetica, Arial, sans-serif;
						color:black ;
						display:none;
						padding: 5px;
						padding-top: 14px;
						width:2em;
						height:2em;
						background-color: black;
						text-align: center;
						vertical-align: middle;

}


/*  Magic Happens Here */
input:placeholder-shown + label {
  opacity:0;
  transform: translateY(100%);
}

select:placeholder-shown + label {
  opacity:0;
  transform: translateY(100%);
}

input {
	height:45px;
  padding:10px 6px 3px 6px;
  margin:5px 0;
  border:2px solid lightgray;
  transition: all 0.1s;
  font-size:14px;
	width: 100%;
	text-transform:uppercase;
}

input[type="button"], input[type="submit"], button{
	height:45px;
	width: 100%;
  padding:10px 10px 10px 10px;
  margin:5px 0;
  border:1px solid black;
  transition: all 0.1s;
  font-size:100%;
	float: left;
	background: #ccc;
	-webkit-appearance:none;
	border-radius: 0;

}

select {
	height:45px;
	padding:10px 6px 3px 6px;
  margin:5px 0;
  border:2px solid lightgray;
  transition: all 0.1s;
  font-size:100%;
	width: 100%;
	background-color: white;
	-webkit-appearance:none;

}

.inputReadonly {
	height:45px;
  padding:10px 6px 3px 6px;
  margin:5px 0;
  border:2px solid white;
  transition: all 0.1s;
  font-size:14px;
	width: 100%;
}
.selectReadonly {
	height:45px;
	padding:10px 6px 3px 3px;
  margin:5px 0;
  border:2px solid white;
  transition: all 0.1s;
  font-size:14px;
	width: 100%;

}

 input + label {
  border:1px solid black;
  position: absolute;
  top: -2px;
  left: 5px;
  transition: all 0.1s;
  opacity:1;
  background:transparent;
  border:2px solid;
  border-width: 0;
  padding:0 3px;
  transform: translateY(calc(50% + 5px));
	font-size:12px;
  font-weight: normal;
	color:gray;
}

select + label {
 border:1px solid black;
 position: absolute;
 top:-2px;
 left: 5px;
 transition: all 0.1s;
 opacity:1;
 background:transparent;
 border:2px solid;
 border-width: 0;
 padding:0 4px;
 transform: translateY(calc(50% + 5px));
 font-size:12px;
 font-weight: normal;
 color:gray;
}

input:focus {
  outline:0;
  border-color:#ffc600;
}

input:focus + label {
  border-color:#ffc600;
}

.pagetitle {
	 font-size: large;
	 font-weight: bold;
}

a{
		cursor: pointer;
}

.onmobilehidden{
		display: inline;
}


.gametitle {
	 font-size: xx-large;
	 font-weight: bold;
	 color:white;
}

.pagesubtitle {
	font-size: large;
	font-weight: bold;
}

.group {
	float:left;
  position: relative;
	border:0px solid black;
	padding:0 4px 0 0px;
	width:100%;
}

.gameframe {
	float: left;
}

.width1column {
	width:100%;
	float:left;
}
.width2column{
	width:50%;
	float:left;
}

.width3column{
	width:43%;
	float:left;
}



.center {
	margin: auto;
}

/* The Overlay (background) */
.overlay {
    /* Height & width depends on how you want to reveal the overlay (see JS below) */
    height: 100%;
    width: 0;
    position: fixed; /* Stay in place */
    z-index: 10000; /* Sit on top */
    left: 0;
    top: 0;
    background-color: rgb(0,0,0); /* Black fallback color */
    background-color: rgba(0,0,0, 0.9); /* Black w/opacity */
    overflow-x: hidden; /* Disable horizontal scroll */
    transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}

/* Position the content inside the overlay */
.overlay-content {
    position: relative;
    top: 15%; /* 25% from the top */
    width: 700px; /* 100% width */
    text-align: left; /* Centered text/links */
		margin: auto;
    margin-top: 20px; /* 30px top margin to avoid conflict with the close button on smaller screens */
		color: white;
}

/* The navigation links inside the overlay */
.overlay a {
    padding: 8px;
    text-decoration: none;
    font-size: large;
    color: #818181;
    display: block; /* Display block instead of inline */
    transition: 0.3s; /* Transition effects on hover (color) */
}

/* When you mouse over the navigation links, change their color */
.overlay a:hover, .overlay a:focus {
    color: #f1f1f1;
}

/* Position the close button (top right corner) */
.overlay .closebtn {
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 30px;
}



.mySlides {display:none}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  height: 13px;
  width: 13px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active {
  background-color: #717171;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

@media only screen and (min-device-width: 250px) and (max-device-width: 736px) {

	html,body{
		  margin:0px;
	  	padding:3px;
			height:100%;
			width:99%;
			height:auto;
		 	min-height:auto;
			background: #000000;
			overflow-x: hidden;
			color: white;
			font: normal 13px Helvetica, Arial, sans-serif;
	}
					.pagesubtitle_separator { display: none; }
					input {width: 100%}
					select{width: 100%}

					.overlay a {font-size: 20px}
				    .overlay .closebtn {
				         font-size: 30px;
				         top: 15px;
				         right: 15px;
				  }

					.mobilefullframe{
						width:99%;
						float:left;
				  }
					.pagetitle {
						font-size: large;
						font-weight: bold;
					}


					.ondesktophidden{
							display:inline;
					}
					.onmobilehidden{
							display:none;
					}

					.framecenter{
					 text-align: left;
					 width: 100%;
					 height:100%;
					 border: solid 0px #CCC;
					 display: block;
					 margin-left: auto;
					 margin-right: auto;
					}


					.imglogo{
						width: 49%;
					}

					.imgpromo1{
						content:url("/images/brand/promotion/mobile/banner-promo-mobile-1.jpg?55");
						height: 163px;
						width:	407px;
					}

					.imgpromo2{
						content:url('/images/brand/promotion/mobile/banner-promo-mobile-2.jpg?55');
						height: 163px;
						width:	407px;
					}

					.imgpromo3{
						content:url('/images/brand/promotion/mobile/banner-promo-mobile-3.jpg?55');
						height: 163px;
						width:	407px;
					}

					.imgpromo4{
						content:url('/images/brand/promotion/mobile/banner-promo-mobile-4.jpg?99');
						height: 163px;
						width:	407px;
					}

					.imgpromo5{
						content:url('/images/brand/promotion/mobile/banner-promo-mobile-5.jpg?55');
						height: 163px;
						width:	407px;
					}




					.banklogo{
						 width:18%;
					}

					.contactlogo{
						width:100%;
					}
					.daftar{
						width:50%;
					}

					.img_banner{
						 float:left;
						 border: 0px solid blue;
						 background-size:100%;
						 width:100%;
						 height:262px;
					   background-image:url('/images/brand/banner/banner_mobile.jpg');
						 background-repeat: no-repeat;
					}

					.logoframe {
						float:left;
						padding-left: 50px;
						border: 0px solid #000;
						width: 93%;
					}

					.logoframe span{
						font-size: 30px;
					}

					.pagetitle {
						font-size: x-large;
						font-weight: bold;
						color: white;
					}

					.gametitle {
						 font-size: xx-large;
						 font-weight: bold;
						 color: white;
					}

					.companylogo {
						float:left;
						border: 0px solid blue;
						width:275px;
						height:80px;
						display: block;
						background-image:url('/images/brand/logo/logo_mobile.png?66');
						background-repeat: no-repeat;
					}

					.previewimg {
						width:100%;
					}

					.debug{
						display: none;
						cursor: pointer;
					}
					.overlay-content {
					    width: 90%; /* 100% width */
					}

				#mySidenav  {
						height: auto;
						width: 250px;
						position: fixed;
						z-index: 1000;
						display: none;
						top:30px;
				}

				#mySidenav  > li { float: none; width: 100%; }
				#mySidenav  a { line-height: 40px; font-size: large}
				#mySidenav  ul { position: relative; }

				#menuopen { display:inline; }

				#navfullscreen{
					position: fixed;
					display: none;
					height:100%;
					width:100%;
					z-index: 999;
					margin: -5px;
					background-color: rgb(0,0,0); /* Black fallback color */
			    background-color: rgba(0,0,0, 0.5); /* Black w/opacity */
					left: 0;
			    top: 0;
			    overflow-x: hidden; /* Disable horizontal scroll */
					overflow-y: hidden;
			    transition: 0.5s;

				}



}