.banner{
 width: 100%;
 height: 550px;
 background: url("picture/flow 15.png")  center no-repeat;
 background-size: 100%;
 background-color: black;
}

#content_development{
 display: flex;
 position: absolute;
 align-items: center;
 width: 100%;
 height: 600px;
 padding-left: 100px;
 padding-right: 100px;
 background-color: white; /* rgb(41,184,0)green*/
}

#content_development>#content_right{
 display: flex;
 flex-direction: row;
 align-items: center;
 justify-content: center;
 width: 768px;
 height: 600px;
 background: none;	
}

#content_development>.content_left{
 background: url("picture/development.jpg") center bottom/70% no-repeat;	
}

#content_development>#content_right>#csr_1{
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	background: url("picture/product/tempat sampah_resize.png") center top/90% no-repeat;
	width: 22vw;
	height: 22vw;
	margin: 1vw;
	border-radius: 5px;
	border: 1px solid rgb(214,236,250);
	
}

#content_development>#content_right>#csr_2{
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	background: url("picture/product/pallet.png") center/100% no-repeat;
	width: 22vw;
	height: 22vw;
	margin: 1vw;
	border-radius: 5px;
	border: 1px solid rgb(214,236,250);

	
}

#development_label{
	display:flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 3vw;
	padding: 1vw;
	background: rgb(214,236,250);
}

#development_label>#name{color: gray; font-size: 0.9em; text-align: center;}






@media screen and (min-width: 1024px) and (max-width: 1200px) and (orientation: landscape){
	  /* For Tab: landscape*/
	#scene{
		width: 1024px;
	}
	
	.cube{
	 transform: translateZ(-512px); 
	}
	
	.face_front{transform: rotateY(0deg) translateZ(512px);}
	
	
	#content_development{
	 padding-left: 50px;
	 padding-right: 50px;
	
	}


	h1{
		font-size: 2.5em;
		margin-top: 25%;
		margin-bottom: 0;
	}

	p{
	 font-size: 0.8em;
	}

	#content_development>.content_left{
	 width: 308px;
	 height: 100%;
	 color: black;
	 display:flex;
	 flex-direction: column;
	}
	
	#content_development>.content_left>p{
	 width: 95%;
	}

	#content_development>#content_right{
	 width: 616px;
	 height: 600px;
	 line-height: 1.2;
	 background: none;
	 align-items: center;
	 padding-top: 10%;
	}
	
	
	#content_development>#content_right>#csr_1{
		display: flex;
		align-items: flex-end;
		overflow: hidden;
		background: url("picture/product/tempat sampah_resize.png") center 30%/90% no-repeat;
		width: 28vw;
		height: 28vw;
		margin: 1vw;
		border-radius: 5px;
		border: 1px solid rgb(214,236,250);
		
	}

	#content_development>#content_right>#csr_2{
		display: flex;
		align-items: flex-end;
		overflow: hidden;
		background: url("picture/product/pallet.png") center/100% no-repeat;
		width: 28vw;
		height: 28vw;
		margin: 1vw;
		border-radius: 5px;
		border: 1px solid rgb(214,236,250);

		
	}

	#development_label{
		width: 100%;
		height: 4vw;
		padding: 1vw;
	}


}

@media screen and (min-width: 767px) and (orientation: portrait){
	  /* For TAB: portrait */
	#scene{
		width: 768px;
		height: 850px;
	}
	  
	.cube{
		transform: translateZ(-384px); 
		width: 768px;
		height: 850px;
	}
	
	.face_front{transform: rotateY(0deg) translateZ(384px);}

	#content_development{
	 flex-direction: column;
	 width: 768px;
	 height: 850px;
	 
	 padding-left: 50px;
	 padding-right: 50px;
	}
	
	#content_development>.content_left{
		width: 768px;
		height: 200px;
		color: black;
		display:flex;
		flex-direction: column;
		padding-top: 50px;
		padding-left: 50px;
		padding-right: 50px;
		background: none;	

	}
	
	#content_development>#content_right{
	
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	justify-content: center;
	padding-top: 0;
	 width: 768px;
	 height: 650px;
	 line-height: 1.2;
/*	 background: url("picture/development.jpg") center bottom/35% no-repeat;*/
	 background: url("picture/development.jpg") 30% 95%/30% no-repeat,
	 url("picture/csr.jpg") 90% 100%/40% no-repeat;
	}

		
	#content_development>#content_right>#csr_1{
		display: flex;
		align-items: flex-end;
		overflow: hidden;
		background: url("picture/product/tempat sampah_resize.png") center 30%/90% no-repeat;
		width: 40vw;
		height: 40vw;
		margin: 1vw;
		border-radius: 5px;
		border: 1px solid rgb(214,236,250);
		
	}

	#content_development>#content_right>#csr_2{
		display: flex;
		align-items: flex-end;
		overflow: hidden;
		background: url("picture/product/pallet.png") center/100% no-repeat;
		width: 40vw;
		height: 40vw;
		margin: 1vw;
		border-radius: 5px;
		border: 1px solid rgb(214,236,250);

		
	}

	#development_label{
		width: 100%;
		height: 5vw;
		padding: 1vw;
	}

	#development_label>#name{font-size: 0.9em; text-align: center;}





}

@media only screen and (max-width: 500px){
	  /* For mobile phone: portrait */ 
	  
	.banner{
		width: 100%;
		height: 200px;
	}

	#scene{
		width: 360px;
		height: 1200px;
	}
	  
	.cube{
		transform: translateZ(-180px);
		width: 360px;
		height: 1200px;
	}
	
	.face_front{transform: rotateY(0deg) translateZ(180px);}
	
	#content_development{
	 flex-direction: column;
	 width: 360px;
	 height: 1200px;
	 padding-left: 15px;
	 padding-right: 15px;
	}
	
	#content_development>.content_left{
		width: 100%;
		height: 500px;
		color: black;
		display:flex;
		flex-direction: column;
		padding-top: 15px;
		background: url("picture/csr.jpg") 100% 95%/80% no-repeat;

	}
	
	#content_development>#content_right{
	 width: 360px;
	 height: 700px;
	 line-height: 1.2;
	 flex-direction: column;
	 background: none;
	 }

	 
	#content_development>#content_right>#csr_1{
		display: flex;
		align-items: flex-end;
		overflow: hidden;
		background: url("picture/product/tempat sampah_resize.png") center 30%/80% no-repeat;
		width: 85vw;
		height: 75vw;
		margin: 0;
		margin-bottom: 5vw;
		border-radius: 5px;
		border: 1px solid rgb(214,236,250);
		
	}

	#content_development>#content_right>#csr_2{
		display: flex;
		align-items: flex-end;
		overflow: hidden;
		background: url("picture/product/pallet.png") center/90% no-repeat;
		width: 85vw;
		height: 75vw;
		margin: 0;
		margin-bottom: 5vw;
		border-radius: 5px;
		border: 1px solid rgb(214,236,250);

		
	}

	#development_label{
		width: 100%;
		height: 10vw;
		padding: 1vw;
		background: rgb(214,236,250);
	}

	#development_label>#name{font-size: 0.9em; text-align: center;}


	 
	#product_content{
	 margin-top: 0;
	}
}


@media screen and (min-width: 550px) and (max-width: 900px) and (orientation: landscape){
	  /* For MOBILE PHONE: landscape*/
	  
	#scene{
		width: 760px;
		height: 700px;
	}
	  
	.cube{
		transform: translateZ(-380px);
		width: 760px;
		height: 700px;
	}
	
	.face_front{transform: rotateY(0deg) translateZ(380px);}
	
	.banner{
		height: 300px;
	}


	 
	#product_content{
	 margin-top: 0;
	}

}