﻿html {
	padding:0;
	margin:0;
	height:auto;
	background:linear-gradient(45deg,#2a0000,#120000,#4f0000,#000000);
	background-size:400% 400%;
	/* animation:gradient 15s ease infinite; */
	display:flex;
	flex-direction:column;
  }
  
  @keyframes gradient {
	0% {
	  background-position:0% 50%;
	}
	50% {
	  background-position:100% 50%;
	}
	100% {
	  background-position:0% 50%;
	}
  }
  
  a {
	text-decoration:none;
	color:#fff;
	-webkit-transition:opacity 0.2s;
	-moz-transition:opacity 0.2s;
	-o-transition:opacity 0.2s;
	transition:opacity 0.2s;
  }
  
  a img {
	border:none;
  }
  
  a:hover {
	opacity:0.9;
  }
  
  .container {
	margin:auto;
	max-width:930px;
	border:1px solid transparent;
  }
  
  .header {
	width:930px;
	height:auto;
  }
  
  .logo {
	float:left;
	width:276px;
	height:101px;
	margin-left:10px;
	margin-top:10px;
  }
  
  .loginfrom {
	float:right;
	width:640px;
	height:auto;
  }
  
  /* PROMO BUTTON STYLE */
  
	.promobutton {
	float:left;
	position:relative;
	right:20px;
	padding-top:10px;
	margin-left:180px;
	margin-bottom:5px;
	width:40%;
	height:40px;
  }
  
  .button {
	border:1px solid red;
	-webkit-backdrop-filter:blur(10px);
	backdrop-filter:blur(10px);
	transform:skewX(-10deg);
	height:40px;
	width:100%;
	border-radius:20px 5px 20px 0;
	position:relative;
	display:flex;
	align-items:center;
	justify-content:center;
	transition:all 0.3s ease;
	font-family:'Bebas Neue',cursive;
	font-size:35px;
	font-weight:300;
	padding-top:7px;
	text-shadow:0 0 20px #fff;
	text-transform:uppercase;
	-webkit-animation:breath2 2s 0.5s infinite alternate;
	animation:breath2 2s 0.5s infinite alternate;
	transition:all 0.2s ease;
	cursor:pointer;
	color:red;
  }
  
  .button:before {
	content:"";
	display:block;
	width:calc(100% - 22px);
	height:calc(45px - 8px);
	-webkit-animation:breath 2s infinite alternate;
	animation:breath 2s infinite alternate;
	left:10px;
	top:3px;
	position:absolute;
	background-color:transparent;
	border:1px solid #ff0000;
	border-radius:15px 3px 15px 3px;
  }
  
  .button.fire {
	border-color:#ff0000;
	background:rgb(255,0,0);
	background:linear-gradient(0deg,rgba(255,0,0,1) 0%,rgba(255,0,0,0) 100%);
	box-shadow:0 0 15px rgba(255,0,0,0.6),0 5px 20px rgba(255,0,0,0.6),inset 0 1px #ff0000,inset 0 -1px #ff0000;
	color:#fff;
  }
  
  .button.fire:before {
	box-shadow:inset 0 0 20px 0 #ff0000;
  }
  
  .button:hover.fire {
	box-shadow:0 0 25px rgba(255,0,0,0.8),0 5px 20px rgba(255,0,0,0.8),inset 0 1px #ff0000,inset 0 -1px #ff0000;
	color:yellow;
  }
  
  .button:hover.fire:before {
	box-shadow:inset 0 0 30px 0 #ff0000;
  }
  
  .button + .button {
	margin-top:15px;
	-webkit-animation-delay:0.3s;
	animation-delay:0.3s;
  }
  
  @-webkit-keyframes breath {
	0% {
	  transform:scaleX(1);
	}
	100% {
	  transform:scaleX(0.95);
	}
  }
  
  @keyframes breath {
	0% {
	  transform:scaleX(1);
	}
	100% {
	  transform:scaleX(0.95);
	}
  }
  
  @-webkit-keyframes breath2 {
	0% {
	  transform:skewX(-10deg) scaleX(1);
	}
	100% {
	  transform:skewX(-10deg) scaleX(0.95);
	}
  }
  
  @keyframes breath2 {
	0% {
	  transform:skewX(-10deg) scaleX(1);
	}
	100% {
	  transform:skewX(-10deg) scaleX(0.95);
	}
  }
  
  .ref {
	-webkit-backdrop-filter:blur(10px);
	backdrop-filter:blur(10px);
	border:1px solid rgba(255,255,255,0.6);
	border-radius:3px;
	padding:5px 8px;
	position:absolute;
	font-size:16px;
	bottom:10px;
	right:10px;
	color:#fff;
	font-weight:300;
	font-family:sans-serif;
	text-decoration:none;
  }
  
  .ref::first-letter {
	font-size:12px;
  }
  
  /* END PROMO BUTTON */
  
	
	.header .login-container {
	float:right;
	width:522px;
	margin-top:10px;
  }
  
  .numbercode {
	float:left;
	width:55px;
	height:31px;
	margin-left:5px;
  }
  
  /* Style the input field inside the navbar */
  
	.header input[type=text] {
	float:left;
	padding-left:5px;
	margin-left:5px;
	margin-top:0;
	font-size:12px;
	width:100px;
	/* adjust as needed (as long as it doesn't break the topnav) */
  
	  height:27px;
	background:#000;
	border:1px solid transparent;
	border-color:white;
	border-image-slice:1;
	font-style:italic;
	color:#fff;
  }
  .header input[type=password] {
	float:left;
	padding-left:5px;
	margin-left:5px;
	margin-top:0;
	font-size:12px;
	width:100px;
	/* adjust as needed (as long as it doesn't break the topnav) */
  
	  height:27px;
	background:#000;
	border:1px solid transparent;
	border-color:white;
	border-image-slice:1;
	font-style:italic;
	color:#fff;
  }
  
  .code input[type=text] {
	float:left;
	width:50px;
  }
  
  /* Style the button inside the input container */
  
	.header .login-container .sitelogin {
	float:left;
	width:80px;
	height:31px;
	font-family:'Bebas Neue',cursive;
	margin-left:5px;
	font-size:20px;
	cursor:pointer;
	color:#fff;
  }
  
  .header .login-container .sitelogin:hover {
	background-image:linear-gradient(to top,#d80007 100%,#ff0008 100%);
  }
  
  nav {
	margin:115px auto;
	max-width:930px;
	width:930px;
	font-family:'Bebas Neue',cursive;
  }
  
  #checkbox1,
  .toggle {
	display:none;
  }
  
  .menu {
	padding:0;
	margin:0;
	max-width:930px;
	height:50px;
	border-radius:0;
	display:flex;
	flex-direction:row;
	justify-content:space-around;
	align-items:center;
	list-style-type:none;
  }
  
  .menu li a {
	text-decoration:none;
	align-self:center;
	border-radius:0;
	font-size:20px;
	padding:10px 15px;
	transition:background .2s linear;
  }
  
  .demo {
	border-radius:10px;
	background:rgb(180,0,0);
	background:linear-gradient(0deg,rgba(180,0,0,1) 0%,rgba(78,0,0,1) 2%,rgba(70,0,0,1) 48%,rgba(126,0,0,1) 49%,rgba(116,0,0,1) 50%,rgba(104,0,0,1) 63%,rgba(104,0,0,1) 72%,rgba(175,0,0,1) 97%,rgba(232,0,0,1) 100%);
  }
  
  .demo li a {
	color:#fff;
  }
  
  .demo li a:hover {
	width:100%;
	color:yellow;
	background:rgb(187,0,0);
	background:linear-gradient(0deg,rgba(187,0,0,1) 0%,rgba(0,0,0,0) 44%);
  }
  
  #informasi {
	top:185px;
	position:absolute;
	float:left;
	background:rgb(255,255,255);
	background:-moz-linear-gradient(0deg,rgba(255,255,255,1) 0%,rgba(240,240,240,1) 7%,rgba(162,162,162,1) 49%,rgba(255,255,255,1) 50%,rgba(215,215,215,1) 75%,rgba(170,170,170,1) 100%);
	background:-webkit-linear-gradient(0deg,rgba(255,255,255,1) 0%,rgba(240,240,240,1) 7%,rgba(162,162,162,1) 49%,rgba(255,255,255,1) 50%,rgba(215,215,215,1) 75%,rgba(170,170,170,1) 100%);
	background:linear-gradient(0deg,rgba(255,255,255,1) 0%,rgba(240,240,240,1) 7%,rgba(162,162,162,1) 49%,rgba(255,255,255,1) 50%,rgba(215,215,215,1) 75%,rgba(170,170,170,1) 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#aaaaaa",GradientType=1);
	width:930px;
	height:43px;
	border:1px solid #fff;
	border-radius:10px;
	margin-bottom:20px;
  }
  
  .textinformasi {
	float:left;
	color:#000;
	font-size:15px;
	font-family:'Bebas';
	font-style:italic;
	font src:url('../fonts/BEBAS.ttf');
	width:0.2%;
	margin:-5px 10px;
  }
  
  .textmarquee {
	float:right;
	color:#fff;
	font:normal 15px arial,sans-serif;
	font-style:italic;
	width:92%;
	height:26px;
	margin:5px 5px;
	background:rgb(36,36,36);
	background:-moz-linear-gradient(0deg,rgba(36,36,36,1) 0%,rgba(0,0,0,1) 7%,rgba(0,0,0,1) 48%,rgba(22,22,22,1) 50%,rgba(0,0,0,1) 75%,rgba(24,24,24,1) 100%);
	background:-webkit-linear-gradient(0deg,rgba(36,36,36,1) 0%,rgba(0,0,0,1) 7%,rgba(0,0,0,1) 48%,rgba(22,22,22,1) 50%,rgba(0,0,0,1) 75%,rgba(24,24,24,1) 100%);
	background:linear-gradient(0deg,rgba(36,36,36,1) 0%,rgba(0,0,0,1) 7%,rgba(0,0,0,1) 48%,rgba(22,22,22,1) 50%,rgba(0,0,0,1) 75%,rgba(24,24,24,1) 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#242424",endColorstr="#181818",GradientType=1);
	padding-top:8px;
	border-radius:7px;
  }
  
  #sliderarea {
	position:absolute;
	top:243px;
	float:left;
	width:656px;
	height:276px;
	border:1px solid #ff0000;
  }
  
  .iframestyle {
	width:100%;
	height:276px;
	float:left;
	margin-left:0;
	margin-top:0;
  }
  
  .gamewraper {
	top:243px;
	margin-left:666px;
	position:absolute;
	float:right;
	width:264px;
	height:259px;
	font-family:'bebas neue',bold;
  }
  
  .games {
	position:relative;
	margin:0 auto;
	text-align:center;
	width:263px;
	height:62px;
	border:1px solid #ff0000;
	margin-bottom:7px;
	border:1px solid #ff0000;
	background:rgb(255,255,255);
	background:linear-gradient(0deg,rgba(255,255,255,1) 0%,rgba(206,206,206,1) 30%,rgba(223,223,223,1) 52%,rgba(255,255,255,1) 52%,rgba(229,229,229,1) 80%,rgba(209,209,209,1) 100%);
  }
  
  /* Centered text */
  
	.centered {
	font-weight:bold;
	position:absolute;
	top:70%;
	left:50%;
	transform:translate(-50%,-50%);
  }
  
  .centered span {
	position:absolute;
	transform:translate(-50%,-50%);
	top:50%;
	left:50%;
	letter-spacing:5px;
	font-size:30px;
	font-weight:bold;
	background-image:linear-gradient(
		to top,#ffffff 10%,#ffffff 0,#828282 12%,#ffffff 45%,#828282 50%,#949494 20%,#ffffff 78%,#ffffff 100%
		);
	color:transparent;
	-webkit-background-clip:text;
	letter-spacing:0;
	-webkit-text-stroke:0.7px #260000;
  }
  
  .nbox {
	background:-ms-linear-gradient(top,#274b66 0,#103856 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#274b66',endColorstr='#103856',GradientType=0);
  }
  
  .nbox {
	-webkit-box-shadow:aquamarine;
	-moz-box-shadow:0 -2px 0 0 rgba(7,32,49,1);
	padding:0 0;
	float:left;
	width:930px;
	margin-top:240px;
  }
  
  .media-body {
	vertical-align:middle;
	border-radius:5px;
  }
  
  .media-body span {
	font-size:16px;
  }
  
  .media {
	font-family:'Bebas';
	src:url('../fonts/BEBAS.ttf');
  }
  
  .media-body span {
	position:absolute;
	font-size:17px;
	margin-left:60px;
	color:#fff;
	padding-top:20px;
  }
  
  .media {
	float:left;
	width:220px;
	height:70px;
	margin-top:0;
	margin-left:8.5px;
	font-size:18px;
	background:rgb(180,0,0);
	background:linear-gradient(0deg,rgba(180,0,0,1) 0%,rgba(78,0,0,1) 2%,rgba(70,0,0,1) 48%,rgba(126,0,0,1) 49%,rgba(116,0,0,1) 50%,rgba(104,0,0,1) 63%,rgba(104,0,0,1) 72%,rgba(175,0,0,1) 97%,rgba(232,0,0,1) 100%);
	border-radius:10px;
	border:1px solid red;
  }
  
  .socialico {
	float:left;
	width:40px;
	height:40px;
	position:absolute;
	margin-top:15px;
	margin-left:10px;
  }
  
  img {
	max-width:100%;
	max-height:100%;
	display:block;
  }
  
  .middleinfo {
	float:left;
	margin-top:10px;
	width:930px;
	height:330px;
  }
  
  .boxtoto {
	font-family:arial;
	float:left;
	margin-right:10px;
	width:302px;
	height:320px;
	border:1px solid #ff0000;
	background:linear-gradient(-160deg,#1f0000,#1f0000,#5e0000,#5e0000);
	background-size:400% 400%;
	animation:gradient 15s ease infinite;
  }
  
  .boxmid {
	float:left;
	width:301px;
	height:320px;
	border:1px solid #ff0000;
	background:rgb(33,0,0);
	background:linear-gradient(0deg,rgba(33,0,0,1) 0%,rgba(13,0,0,1) 100%);
	border:1px solid #ff0000;
  }
  
  .boxmid span {
	transform:translate(-50%,-50%);
	top:50%;
	left:50%;
	letter-spacing:5px;
	font-weight:bold;
	background-image:linear-gradient(
		to top,#a77600 10%,#a77600 0,#ffea00 22%,#a77600 45%,#ffea00 50%,#ffea00 55%,#be8600 78%,#ffea00 100%
		);
	color:gold;
	-webkit-background-clip:text;
	letter-spacing:0;
	-webkit-text-stroke:0 #6c0000;
  }
  
  .light {
	-webkit-mask-image:linear-gradient(-15deg,rgba(0,0,0,.6) 30%,#000 50%,rgba(0,0,0,.6) 70%);
	-webkit-mask-size:200%;
	animation:shine 2s infinite;
  }
  
  @-webkit-keyframes shine {
	from {
	  -webkit-mask-position:150%;
	}
	to {
	  -webkit-mask-position:-50%;
	}
  }
  
  .boxsmartphone {
	float:left;
	margin-left:10px;
	width:301px;
	height:320px;
	border:1px solid #ff0000;
	background:rgb(33,0,0);
	background:linear-gradient(0deg,rgba(33,0,0,1) 0%,rgba(13,0,0,1) 100%);
	animation:gradient 15s ease infinite;
  }
  
  .boxsmartphone span {
	transform:translate(-50%,-50%);
	top:50%;
	left:50%;
	letter-spacing:5px;
	font-weight:bold;
	background-image:linear-gradient(
		to top,#a77600 10%,#a77600 0,#ffea00 22%,#a77600 45%,#ffea00 50%,#ffea00 55%,#be8600 78%,#ffffff 100%
		);
	color:#ffffff;
	-webkit-background-clip:text;
	letter-spacing:2px;
	-webkit-text-stroke:0 #6c0000;
  }
  
  .lastesttitle {
	float:left;
	width:100%;
	height:40px;
	text-align:center;
	vertical-align:middle;
	background:rgb(175,0,0);
	background:linear-gradient(0deg,rgba(175,0,0,1) 0%,rgba(125,0,1,1) 21%,rgba(115,0,8,1) 33%,rgba(110,0,9,1) 41%,rgba(117,5,5,1) 45%,rgba(255,0,0,1) 50%,rgba(255,0,0,1) 63%,rgba(121,0,0,1) 100%);
	color:#fff;
	font-size:30px;
	font-family:'Bebas Neue',cursive;
	font-style:bold;
	margin-bottom:10px;
	color:#fff;
	-webkit-text-stroke:0 #ff0000;
	text-shadow:0 4px 4px #ff0000;
  }
  
  .titletoto {
	text-align:left;
	font-weight:bold;
	font-size:16px;
	text-transform: uppercase;
  }
  
  .datetoto {
	text-align:left;
	font-size:14px;
  }
  
  #gaptoto {
	margin-left:15px;
	margin-top:6px;
  }
  
  .imgtoto {
	width:13%;
	height:13%;
  }
  
  .wrappersection {
	float:left;
	width:100%;
  }
  
  table {
	border-left:0 solid #ddd;
	border-right:0 solid #ddd;
  }
  
  table,
  td,
  th {
	border-bottom:0 solid #ddd;
  }
  
  table {
	border-collapse:collapse;
	width:90%;
  }
  
  td {
	/* background:rgb(96,96,96);
	background:linear-gradient(0deg,rgba(96,96,96,1) 0%,rgba(0,0,0,0) 44%,rgba(41,41,41,0) 100%);
	*/
  
		height:15px;
	text-align:center;
	vertical-align:center;
  }
  
  .widget-content {
	margin:0 0 0 0;
  }
  
  tr td a {
	display:block;
  }
  
  .widget-content tr td {
	border-top:0;
	letter-spacing:0;
	color:#fff;
  }
  
  .sectionfooter {
	float:left;
	margin-top:10px;
	margin-bottom:30px;
	width:930px;
	height:50px;
	border-radius:5px;
  }
  
  .textkeyword {
	float:left;
	margin-top:0;
	text-align:center;
	padding:0 10px 0 10px;
	font-family:arial;
  }
  
  #footerok {
	float:left;
	margin-top:0;
	/*top:10px;
	*/
  
	  background:rgb(32,0,0);
	background:-moz-linear-gradient(0deg,rgba(32,0,0,1) 0%,rgba(47,0,0,1) 20%,rgba(54,1,1,1) 80%,rgba(32,0,0,1) 100%);
	background:-webkit-linear-gradient(0deg,rgba(32,0,0,1) 0%,rgba(47,0,0,1) 20%,rgba(54,1,1,1) 80%,rgba(32,0,0,1) 100%);
	background:linear-gradient(0deg,rgba(32,0,0,1) 0%,rgba(47,0,0,1) 20%,rgba(54,1,1,1) 80%,rgba(32,0,0,1) 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#200000",endColorstr="#200000",GradientType=1);
	width:100%;
	height:43px;
	border:1px solid #ff0000;
	border-radius:10px;
	margin-bottom:20px;
  }
  
  .textfooter {
	float:left;
	color:#fff;
	font-size:12px;
	width:70%;
	margin:3px 15px;
	text-align:left;
  }
  
  .imglogo {
	float:right;
	color:#fff;
	width:13%;
	margin:2px 10px;
	border-radius:7px;
  }