.rowIMG {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
  margin-left: 30px;
  margin-right: 20px;
  margin-bottom: 10px;
}

/* Create four equal columns that sits next to each other */
.columnIMG {
  flex: 48%;
  max-width: 50%;
  padding: 0 4px;
}

.columnIMG img {
  margin-top: 8px;
  vertical-align: middle;
  width: 100%;
}

.handpon{margin:20px;}
.gambargalery{width:80%}
.marginhp{margin-top:-50px}
.ukuranfont{font-family: FF-MarkPro; font-size:15px;}
#accordion .login{background-color:#e0e0e0; text-align:center;padding:100px 0 0 0}

#layarlaptop {display: block;}
#layarmobile {display: none;}

/* ==================== START LAYOUT HP MINI======================== */
@media only screen and (min-width: 100px) and (max-width: 320px) {
	.rowIMG {
		margin:0 5px 0 0;
		padding: 0;
	}
	.columnIMG {
		flex: 100%;
		max-width: 100%;
	}
	.handpon{margin:10px 0 10px 0;}
	.handpon span{font-size:12px;}
	.gambargalery{width:100%;}
	.marginhp{margin-top:-30px;}
	.marginhp span{font-size:12px;}
	.ukuranfont{font-size:12px;}
	#accordion .login{background-color:#e0e0e0; text-align:center;padding:20px 0 0 0;}
	
	#layarlaptop {display: none;}
	#layarmobile {display: block;}
}
/* ==================== START LAYOUT HP TERKINI======================== */
@media only screen and (min-width: 321px) and (max-width: 413px) {
	.rowIMG {
		margin:0 5px 10px 1px;
	}
	.columnIMG {
		flex: 100%;
		max-width: 100%;
	}
	.handpon{margin:10px 0 10px 0;}
	.handpon span{font-size:14px;}
	.gambargalery{width:100%;}
	.marginhp{margin-top:-30px;}
	.marginhp span{font-size:14px;}
	.ukuranfont{font-size:14px;}
	#accordion .login{background-color:#e0e0e0; text-align:center;padding:20px 0 0 0;}
	
	#layarlaptop {display: none;}
	#layarmobile {display: block;}
	
}
/* ==================== START LAPTOP SMALL======================== */
@media only screen and (min-width: 414px) and (max-width: 1024px) {
	
	
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
  .column {
    -ms-flex: 50%;
    flex: 50%;
    max-width: 50%;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    -ms-flex: 100%;
    flex: 100%;
    max-width: 100%;
  }
}