*{
transition:1s;
box-sizing:border-box;
}

html{
    font-family:"Myriad Pro Light";
    color:black;
    height:100%;
}

body{
 background: white;
 background-repeat:no-repeat;
 text-align:center;
 margin:0;
}

.half{
width:50%;
background:purple;
float:left;
height:100vh;
color:red !important;
text-decoration:none;
font-size:30px;
}

.half:hover{
background:yellow;
transition:1s all;
}

.ver_center{
padding-top:6%;
}

.instaput{
border: none;
background: rgba(130,130,130,0.6);
font-size: 25px;
border-radius: 10px;
padding: 10px 0;
color: white;
text-align:center;
width:100%;
}

.instamit{
font-size: 25px;
background: transparent;
border: 1px solid red;
color: white;
padding: 10px 0px;
cursor: pointer;
border-radius: 10px;
margin-top:15px;
margin-bottom:15px;
width:100%;
}

.instamit:hover{
background:red;
}

.cek{
	width:90%;
	margin:auto;
}

.row{
	padding-top:7%;
	margin-bottom:40px;	
}
.row::after{
	content:"";
	clear:both;
	display:table;	
}

/*Desktop Web*/

.username, .password{
	height:50px;
	width:250px;	
}
.navbar{
	background-color:white;	
	height:40px;
	padding:8px;
	text-align:left;
	width:100%;
	overflow:hidden;
}
.navbar a{
	text-decoration:none;
	font-size:20px;	
	padding:10px;
}
.navbar a:hover{
	background-color:red;
	color:white;
}

.formSize{
    width:30%; 
    height:80px;
}

.formSize input[type="submit"]{
    height:100px;
}

/*sidenav*/
@media only screen and (min-width : 1280px){
	.ham, .sidenav{display:none}
	.navbar {
		float:left;
	} 
}
@media only screen and (max-width : 1279px){
	.ham, .sidenav{display:block}
	.navbar {display:none}
}
.ham{
	background-color:white;
	height:40px;	
	overflow:hidden;
}
.ham .logout{
	font-size:20px;
	float:right;
	padding:10px;
	margin:0px;
	text-decoration:none;	
}
.ham .logout:hover{
	background-color:black;
	color:white;	
}
.ham .ico{
	cursor:pointer;	
	margin-top:-4px;
	float:left;
	padding:10px;
	margin-top:-3px;
}
.ham .ico:hover{
	background-color:black;	
}

.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: white;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
}

.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 20px;;
    color: black;
    display: block;
    transition: 0.3s;
	text-align:left;
}

.sidenav a:hover, .offcanvas a:focus{
    color: white;
	background-color:red;
}

.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 0px;
    font-size: 36px;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}
@media screen and (max-width : 980px){
	input[type='text'].search{
		width:60%;	
	}
	.formAll,.form-cek input {
		width:80%;
		height:60px;	
	}
	
}
@media screen and (min-width : 981px){
	.formAll,.form-cek input{
		width:600px;
		height:60px;	
	}
	.formRegist{
	}
}

.tableMember{
	border-collapse:collapse;
    border: 2px solid black;
	width:70%;
	background-color:white;
}
.tableMember td{
	border: 2px solid black;
	height:60px;		
}
input[type='submit']{
	border:2px white;
	cursor:pointer;
	background-color: #F00;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;	
}
input[type='submit']:hover{
	background-color:#000;
	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

.tableMember a{
	text-decoration:none;
	color:red;
	margin:0px;
	padding:0px;	
}
.redeem{
	margin:0;
	padding:0px;
	background-color:#FF0;
	cursor:pointer;
}

.logout{
	text-decoration:none;	
}

table {
  display: table;
  width: 70%;
}

.tableMember thead,
.tableMember tbody {
  width: 100%;
}

.table-history{
width:100%;
}

.table-history th{
text-align:center;
}

.table-history td, .table-history th{
border:1px solid black;
border-collapse:collapse;
}
@media only screen and (min-width:601px){
	.tableMember tbody {
	  overflow: auto;
	  height: 370px;
	  display: block;
	}
}

@media only screen and (max-width:600px){
	.tableMember tbody {
	  overflow: auto;
	  height: 440px;
	  display: block;
	}	
}
.tableMember tr {
  width: 100%;
  text-align: center;
  display: table;
  table-layout: fixed;
}

a.logout:hover{
	background-color:black;
	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
@media only screen and (min-width:500px){
	.logo{
        width:400px;
        margin-left:80px;
    }
    a.logout{
    	text-decoration:none;
    	color:white;
    	background-color:red;
    	padding:20px;
    }
}
@media only screen and (max-width:500px){
	.logo{
        width:250px;
        margin-left:10px;
    }
    a.logout{
    	text-decoration:none;
    	color:white;
    	background-color:red;
    	padding:20px;
    }
}
form.form-cek{
	padding-top:10px;	
}
.footer{
    padding:20px;   
}
.footer a{
    padding:20px;
}
.footer i{
    color:red;   
}
.message{
    font-size:20px;
    position:relative;
    margin-left:-35px;
    margin-top:15px;
}
.regist:disabled{
    background-color:gray;
    cursor:not-allowed;
}
@media only screen and (max-width:350px){
    .logo{
        width:180px;
        margin-left:50px;
    }
}
@media only screen and (min-width:351px){
    .form-cek{
        margin-top:-80px;
    }
    .logo{
        margin-left:80px;
    }
}
@media only screen and (max-width:350px){
    .form-cek{
        margin-top:-60px;
    }
}