#scene{
 height: 400px;
}

.cube{
 height: 400px;
}

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

#head_news>.content_left{
 width: 100%;
 height: 35%;
 padding-top: 25px;
}

#head_news>.content_left>h1{
 font-size: 2em;
 margin: 0;
}


#head_news>#content_right{
 width: 100%;
 height: 65%;
  background: url("picture/news/bottle.jpg") left center/40% no-repeat;	
}

#content_news{
 align-items: center;
 width: 100%;
 padding-left: 100px;
 padding-right: 100px;
 background-color: white; /* rgb(41,184,0)green*/
}

#content_news>p{font-size: 1em;
 line-height: 2em;}
 
.pic_news_2{
  background: url("picture/news/plastic_waste.jpg") left center/40% no-repeat !important;	
}



@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);}
	
	
	#head_news{
	 padding-left: 50px;
	 padding-right: 50px;
	}




	#head_news>.content_left{
	 width: 100%;
	 height: 30%;
	 color: black;
	}
	

	#head_news>#content_right{
	 width: 100%;
	 height: 70%;
	 line-height: 1.2;
	 background: url("picture/news/bottle.jpg") center/50% no-repeat;	
	}
	
	.pic_news_2{
	 background: url("picture/news/plastic_waste.jpg") center/50% no-repeat !important;	
	}
	
	#content_news{
	 padding-left: 50px;
	 padding-right: 50px;
	}
}

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

	#head_news{
	 flex-direction: column;
	 width: 768px;
	 height: 100%;
	}
	
	#head_news>.content_left{
		width: 768px;
		height: 40%;
		color: black;
		display:flex;
		flex-direction: column;
		padding-top: 50px;
		padding-left: 50px;
		padding-right: 50px;
	}
	
	#head_news>#content_right{
	 width: 768px;
	 height: 60%;
	 line-height: 1.2;
	 background: url("picture/news/bottle.jpg") center/60% no-repeat;	
	}
	
	.pic_news_2{
	 background: url("picture/news/plastic_waste.jpg") center/60% no-repeat !important;	
	}
	
	#content_news{
	 padding-left: 50px;
	 padding-right: 50px;
	}




}

@media only screen and (max-width: 500px){
	  /* For mobile phone: portrait */ 
	#scene{
		width: 360px;
		height: 500px;
	}
	  
	.cube{
		transform: translateZ(-180px);
		width: 360px;
		height: 500px;
	}
	
	.face_front{transform: rotateY(0deg) translateZ(180px);}
	
	#head_news{
	 flex-direction: column;
	 width: 360px;
	 height: 100%;
	 padding-left: 15px;
	 padding-right: 15px;
	}
	
	#head_news>.content_left{
		width: 100%;
		height: 50%;
		color: black;
		display:flex;
		flex-direction: column;
		padding-top: 15px;
	}

	#head_news>#content_right{
	 width: 360px;
	 height: 50%;
	 line-height: 1.2;
	  background: url("picture/news/bottle.jpg") center/80% no-repeat;	
	}
	
	.pic_news_2{
	 background: url("picture/news/plastic_waste.jpg") center/80% no-repeat !important;	
	}
	
	#content_news{
	 padding-left: 15px;
	 padding-right: 15px;
	}
	
	#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: 400px;
	}
	  
	.cube{
		transform: translateZ(-180px);
		width: 760px;
		height: 400px;
	}
	
	.face_front{transform: rotateY(0deg) translateZ(180px);}
	
	#head_news{

	 flex-direction: column;
	 width: 760px;
	 height: 100%;
	 padding-left: 15px;
	 padding-right: 15px;
	}
	
	#head_news>.content_left{
		width: 100%;
		height: 40%;
		color: black;
		display:flex;
		flex-direction: column;
		padding-top: 15px;
	}

	#head_news>#content_right{
	 width: 760px;
	 height: 60%;
	 line-height: 1.2;
	  background: url("picture/news/bottle.jpg") center/50% no-repeat;	
	}
	
	.pic_news_2{
	 background: url("picture/news/plastic_waste.jpg") center/50% no-repeat !important;	
	}
	
	#content_news{
	padding-left: 15px;
	 padding-right: 15px;
	}

	#product_content{
	 margin-top: 0;
	}

}