/* Responsif */
.container{
	margin-top: -2%;
	max-width: 1000px;
	margin: 20px auto;
	background-color:rgba(0,0,0, 0.3) ;
	overflow: hidden;
	padding: -50px;
}
.container5{
	margin-top: -2%;
	max-width: 400px;
	margin: 20px auto;
	background-color:	rgba(0,0,0, 0.3) ;
	overflow: hidden;
	padding: -50px;
}
.header{
	border: 1px solid #0000FF;
	padding: 10px;
	margin: 10px;
}

/* Main */
	.left{
		width: 300px;
		border: 3px solid #0000FF;
		border-radius: 8px;
		background: rgba(0,0,0, 0.1) ;
		padding: 10px;
		margin: 10px;
		float: left;
	}
.left img{
			width: 100%;
			height: auto;
			
		}
	.center img{
			max-width: 100%;
			height: auto;
			width:  auto;
		}	
	.middle{
		width: 600px;
		border: 3px solid #0000FF;
		border-radius: 8px;
		background:	rgba(0,0,0, 0.1);
		padding: 10px;
		margin: 10px;
		float: left;
	}
	
	
	
		.middle img{
			max-width: 100%;
			height: auto;
		}
.alogin{
		width: 100px center;
        height: 300px;
		border: 3px solid #0FA70F;
		border-radius: 500px;
		background: rgba(0,0,0, 0.1) ;
		padding: 10px;
		margin: 10px;
		
	}		
		

.footer{
	clear: both;
	border: 4px solid #0000FF;
	border-radius: 6px;
	background: rgba(0,0,0, 0.1);
}
.footer0{
	
	clear: both;
	border: 3px solid #0000FF;
	border-radius: 6px;
	padding: 10px;
	margin: 10px;
		background:	rgba(0,0,0, 0.1);
}
.footer1{
	
	clear: both;
	border: 3px solid #0000FF;
	border-radius: 6px;
	padding: 10px;
	margin: 10px;
		background:	rgba(0,0,0, 0.1);
}
.footer2{
	
	clear: both;
	border: 3px solid #0000FF;
	border-radius: 6px;
	padding: 10px;
	margin: 10px;
	background:rgba(0,0,0, 0.1);
}
.footer3{
	clear: both;
	border: 4px solid #0000FF;
	border-radius: 6px;
	padding: 10px;
	margin: 10px;
		background:rgba(0,0,0, 0.1) ;
}
.middle img{
	max-width: 100%;
	height: auto;
}

@media screen and (max-width: 1080px) {
	
	.container {
		width: 100%;
	}
	.left {
		width: 25%;
		background:	rgba(0,0,0, 0.1) ;
	}
	.middle {
		width: 58%;
		float: right;
		background:	rgba(0,0,0, 0.1) ;
	}
	
	.right {
		clear: both;
		padding: 1% 4%;
		width: auto;
		float: none;
		background:	rgba(0,0,0, 0.1) ;
	}
}

@media screen and (max-width: 780px) {
	
	.header, 
	.footer{
		text-align: center;
	}
	.left {
		width: auto;
		float: none;
	}
	
	.middle {
		width: auto;
		float: none;
	}
	
	.right {
		width: auto;
		float: none;
	}

}

/* Isi */
.form_login {
	display: block;
	border: 1px solid  #9932CC;
	border-radius: 6px;
width: 100%;
height: 40px;
padding: 5px 5px;
font-size: 20px;
line-height: 1.42857143;
color: #fff;
text-align:center;
	background: rgba(0,0,0, 0.6) ;
	color: #fff;
	opacity: 0.9;
	-webkit-transition: background-color 0.2s;
	transition: background-color 0.2s;
	
}
.form_login1 {
	display: block;
	border: 2px solid  #9932CC;
	border-radius: 6px;
width: 99%;
height: 40px;
padding: 5px 5px;
font-size: 20px;
line-height: 1.42857143;
color: #fff;
text-align:center;
	background: rgba(0,0,0, 0.1) ;
	color: #fff;
	opacity: 0.9;
	-webkit-transition: background-color 0.2s;
	transition: background-color 0.2s;
	
}
.login1 {
	width: 99%;
	height: 40px;
	line-height: 10px;
	padding: 5px 5px;
	border: 1px solid #8A2BE2;
	border-radius: 6px;
	margin-bottom: 10px;
	background-color:#8A2BE2;
	color:#fff;
	font-size:20px;
	opacity: 0.9;
	-webkit-transition: background-color 0.2s;
	transition: background-color 0.2s;
	box-shadow: 1px 1px 10px 3px rgba(0,0,0,0.5);
}

.login1:hover {
    box-shadow: 1px 1px 10px 3px rgba(0,0,0,0.5);
	color:#fff;
	font-size:20px;
	opacity: 0.9;
	border: 1px solid #663399;
	border-radius: 6px;
	margin-bottom: 10px;
	background-color:#663399;
	
}



.main-menu {
	margin-top: 15px;
	text-align: center;
}
.main-menu a {
	margin-right: 12px;
	font-size: 16px;
}	
.main-menu :hover {
	color:#00BFFF;
	font-weight:bold;	
}
.login:before,
.package:before,
.coverage:before
.android:before
.laptop:before,
.contact:before,
.status:before {
	-webkit-font-smoothing: antialiased;
	display: inline-block;
	text-decoration: inherit;
	vertical-align: text-bottom;
}
.table,.table2{
	width:100%;
	font-size:14px;
	border-collapse:collapse!
important}.notice{
	background-color:#fff8e1;
	border-radius:3px;
	padding:5px;
	margin-bottom:10px;
    font-size:11px;
    color:#fff}
.table td,
.table th{
	padding:3px;
    border:1px solid #0000FF!
important;
    color:#999}
.table td,a,th{
	color:#999;
    text-decoration:none}
.table2{
	background-color:transparent;
	text-align:left}
.table2 td,
.table2 th{
	padding:4px;
	padding-left:10px;
	border:2px solid #0000FF!
important}
.table2 td,a,th{
	color:#fff;
	text-decoration:none}@media screen and (max-width:600px){
		
}
.notice{
  background-color:#6495ED;
  border-radius:3px;
  padding:5px;
  margin-bottom:10px;
  font-size:14px;
  color: #FFF;
}		

.small-button1{
	background-color:#8A2BE2;
    background-image:none;
	border:1px solid transparent;
	border-radius:4px;
	border-color:#8A2BE2;
	margin-top:4px;
	color:#fff;
	font-weight:700;
	text-align:center;
	vertical-align:middle;
	text-decoration:none;
	display:inline-block;
	cursor:pointer;
	height:30px;
	width:48%;
	box-shadow: 1px 1px 10px 3px rgba(0,0,0,0.5);
	}

.small-button1:hover {
	color:#fff;
	background-color:#BA55D3;
	border-color:#BA55D3;
	box-shadow: 1px 1px 10px 3px rgba(0,0,0,0.5);
}
.small-button2{
	background-color:#DAA520;
background-image:none;
	border:1px solid transparent;
	border-radius:4px;
	border-color:#999;
	margin-top:4px;
	color:#fff;
	font-weight:700;
	text-align:center;
	vertical-align:middle;
	text-decoration:none;
	display:inline-block;
	cursor:pointer;
	height:30px;
	width:49%}
.small-button2:hover {
	color:#fff;
	background-color:#B78B1B;
	border-color:#777;	
}	





body {
     background-image: url('img/bg.jpg');
	 background-position: center center;
  background-repeat:  no-repeat;
  background-attachment: fixed;
  background-size:  cover;
}