.random{
	width: 900px;
	min-height: auto;
	margin: 20px auto;
}
.random ul{
	list-style: none;
	padding: 0;
	margin-left:5%;
}


.random ul:after{
	content: '';
	display: table;
	clear: both;
}
.random ul li{
	width: calc(20% - 0px);
	margin: 30px 15px 0;
	height: 150px;

	background-position: center center;
	/*background-color: #F1F1F1;*/
	float: left;
	/*box-shadow: 0 5px 5px 0.2px rgba(0, 0, 0, 0.5);*/
}

li {
	background-size: 100%;
	background-repeat:no-repeat;
	color:black;
	z-index:-1;

}

.pic{
	margin-top:10%;
	filter: invert(48%) sepia(79%) saturate(2476%) hue-rotate(86deg) brightness(0%) contrast(119%);
	z-index:-1;

}

.random ul li:nth-child(1n + 5){
	max-height: 0;
	opacity: 0;
	transition: 0.2s ease-in;
	display:none;
}
.random .btn-area{
	display: block;
	background: #4AAD52;
	color: #fff;
	cursor: pointer;
	text-align: center;
	font-size: 1.3vw;
	width: 180px;
	line-height: 50px;
	margin: 30px auto 0;
	border-radius: 50px;
	position:relative;
}

.btn-area{
	z-index:5; 	
}
.random .btn-area .btn2 {
  display: none;
}
.random #btnBox {
  display: none;
}
.random #btnBox:checked ~ ul li:nth-child(1n + 5) {
  max-height: 1000px;
  opacity: 1;
  transition: 1s ease-in-out;
  display:block;
}
.random #btnBox:checked ~ .btn-area .btn2 {
  display: block;
  margin: 50px auto 0;
}
.random #btnBox:checked ~ .btn-area .btn1 {
  display: none;
}

@media screen and (max-width: 820px){
    
	.random{
		display:none;
	}
		   
}