* {
  box-sizing: border-box;
}

#content_container{
 width: 100%;
 background: white;
}

video{
 width: 100%;
 height: 650px;
 margin: auto;
 background: black;
 overflow: hidden;
}

#scene{
 display: flex;
 width: 1280px;
 height: 600px;
 margin: auto;
 perspective: 600px;
 background: rgb(0,160,135);
 overflow: hidden;
}

.cube{
 display:flex;
 position: relative;
 align-items: center;
 margin: auto;
 width: 100%;
 height: 100%;
 
 transform: translateZ(-640px); 
 /*transform-origin: center left;*/
 transition: 1s;
 transform-style: preserve-3d;
}

.face_front{transform: rotateY(0deg) translateZ(640px);}
.face_right{transform: rotateY(90deg) translateZ(640px);}
.face_back{transform: rotateY(180deg) translateZ(640px);}
.face_left{transform: rotateY(-90deg) translateZ(640px);}

 
.show_front{transform: translateZ(-640px) rotateY(0deg);
	animation-timing-function: ease;
}

.show_right{transform: translateZ(-640px) rotateY(-90deg);
	 animation-timing-function: ease;
}

.show_back{transform: translateZ(-640px) rotateY(-180deg);
	 animation-timing-function: ease;
}
.show_left{transform: translateZ(-640px) rotateY(90deg);
	 animation-timing-function: ease;
}

@keyframes transparent1{
  0% {opacity:1;}
  50% {opacity: 0.8;}
 100% {opacity:1;}
}
 
@keyframes transparent2{
  0% {opacity:1;}
  50% {opacity: 0.8;}
 100% {opacity:1;}
}

@keyframes transparent3{
  0% {opacity:1;}
  50% {opacity: 0.8;}
 100% {opacity:1;}
}

@keyframes transparent4{
  0% {opacity:1;}
  50% {opacity: 0.8;}
 100% {opacity:1;}
}

#content_flip_front{
 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_flip_right{
 display: flex;
 position: absolute;
 align-items: center;
 width: 100%;
 height: 600px;
 padding-left: 100px;
 padding-right: 100px;
 background-color:  white; /*green rgb(41,184,0);*/

}

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

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


h1{
	font-family: swis721 cn bt bold;
	font-size: 2.5em;
	color: rgb(0,160,135);
	margin-top: 20%;
	margin-bottom: 0;
}

p{
 font-size: 0.9em;
 line-height: 1.5em;
}

.content_left{
 width: 320px;
 height: 100%;
 color: black;
 display:flex;
 flex-direction: column;
}



/*-------------------front content----------------*/

.recycle_man{
 background: url(picture/recycle_man.png) 30% 90% no-repeat;
 background-size: 90%;
}

#content_flip_front>#content_right{
 width: 760px;
 height: 600px;
 line-height: 1.2;
 background: url("picture/kincir.png") center no-repeat;
 background-size: 500px;

 /*animation: right 2s;
 animation-timing-function: ease;
 animation-delay: 10s;
 animation-fill-mode: forwards;
 */}
 
 @keyframes right{
  0% {opacity:1;}
  50% {transform: rotate(360deg) scale(0); opacity:0;}
 100% {transform: rotate(720deg) scale(1); opacity:1;}
 }
 
 
 #desc_1{
 transform: translate(510px,220px);
 opacity:0;
 animation: desc_1 1s;
 animation-timing-function: ease;
 animation-delay: 1s;
 animation-fill-mode: forwards;
 }
 
@keyframes desc_1 {
  from {
	 transform: translate(430px,210px);
	 opacity:0;}
  to {
	 transform: translate(510px,210px);
	 opacity:1;
	}
 }
 
 #desc_2{
 transform: translate(400px,420px);
 opacity:0;
 animation: desc_2 1s;
 animation-delay: 3s;
 animation-timing-function: ease;
 animation-fill-mode: forwards;
 }
 
 @keyframes desc_2 {
  from {
	 transform: translate(330px,420px);
	 opacity:0;}
  to {
	 transform: translate(400px,420px);
	 opacity:1;
	}
 }
 
#desc_3{
 flex-direction: row-reverse;
 transform: translate(60px,180px);
 opacity:0;
 animation: desc_3 1s;
 animation-delay: 5s;
 animation-timing-function: ease;
 animation-fill-mode: forwards;
 }
 
@keyframes desc_3 {
  from {
	 transform: translate(0px,180px);
	 opacity:0;}
  to {
	 transform: translate(60px,180px);
	 opacity:1;
	}
}

#desc_4{
 align-items: flex-end;
 flex-direction: row-reverse;
 opacity:0;
 animation: desc_4 1s;
 animation-delay: 7s;
 animation-timing-function: ease;
 animation-fill-mode: forwards;
 }
 
  @keyframes desc_4 {
  from {
	 transform: translate(140px,-150px);
	 opacity:0;}
  to {
	 transform: translate(160px,-150px);
	 opacity:1;
	}
 }
 
 .desc{
 color: black;
 font-size: 0.70em;
 display: flex;
 width: 210px;
 color: rgb(0,160,135);
 }
 
 #desc_number{
  font-family: swis721 cn bt bold;
  padding-right: 10px;
  font-size: 3.5em;
  line-height: 1;
 }
 
 #desc_text{
  color: black;
 }
 
 .desc_number_right{
  padding-right: 0px;
  padding-left: 10px;
 }
 
 .desc_text_right{
   text-align: right;
 }
 
 #desc_text{
  border-bottom: 1px solid rgb(0,160,135);
  padding-bottom: 7px;
 }
 
 #cloud_a{
  background: url("picture/cloud a.png") center no-repeat;
  background-size: 99px;
  width: 99px;
  height: 31px;
  transform: translate(600px,-170px);
   animation: cloud_a ease 10s infinite;
 }
 
 @keyframes cloud_a {
   0% {transform: translate(600px,-170px);}
  50% {transform: translate(550px,-170px);}
 100% {transform: translate(600px,-170px);}
 }
 
 #cloud_b{
  background: url("picture/cloud b.png") center no-repeat;
  background-size: 190px;
  width: 190px;
  height: 54px;
  transform: translate(50px,150px);
  animation: cloud_b ease 10s 1s infinite;
 }
 
 @keyframes cloud_b {
   0% {transform: translate(50px,150px);}
  50% {transform: translate(0px,150px);}
 100% {transform: translate(50px,150px);}
 }
 
 
 /*-------------------right content----------------*/


 #content_flip_right>#content_right{
 width: 760px;
 height: 600px;
 line-height: 1.2;
 background: url("picture/plastic recycle.png") center no-repeat;
 background-size: 500px;

 /*animation: right 2s;
 animation-timing-function: ease;
 animation-delay: 10s;
 animation-fill-mode: forwards;
 */}
 
 #sun{
 	position: absolute;
	width: 49px;
	height: 49px;
	margin-left: 330px;
    margin-top: 60px;
	background: url(picture/sun.png) center no-repeat;
	background-size: 49px;
	}
	
 #sunshine{
 	position: absolute;
	width: 138px;
 	height: 138px;
	margin-left: 285px;
    margin-top: 15px;
	background: url(picture/sunshine.png) center no-repeat;
	background-size: 137px;
    animation: bigger linear 5s infinite;

	}
	
@keyframes bigger {
   0% {transform: scale(1.5,1.5);}
  50% {transform: scale(1,1);}
 100% {transform: scale(1.5,1.5);}
 }
 
 #baling_1{
	position: absolute;
	width: 58px;
 	height: 58px;
    margin-left: 228px;
    margin-top: 230px;
	background: url(picture/baling.png) center no-repeat;
	background-size: 58px;
    animation: rotate linear 5s infinite;
 }
 
#baling_2{
 	position: absolute;
	width: 58px;
 	height: 58px;
    margin-left: 179px;
    margin-top: 255px;
	background: url(picture/baling.png) center no-repeat;
	background-size: 58px;
    animation: rotate linear 5s infinite;
 }

 
 @keyframes rotate{
   0% {transform: rotate(0deg);}
 100% {transform: rotate(1080deg);}
 }
 
 
 #content_flip_right_cloud{
  background: url("picture/cloud a.png") center no-repeat;
  background-size: 88px 21px;
  width: 88px;
  height: 21px;
  transform: translate(260px,65px);
  animation: right_cloud ease 7s infinite;
}
 
 @keyframes right_cloud {
   0% {transform: translate(260px,65px);}
  50% {transform: translate(280px,65px);}
 100% {transform: translate(260px,65px);}
 }
 
 /*-------------------content back----------------*/

#content_flip_back>#content_right{
 display: flex;
 width: 760px;
 height: 600px;
 line-height: 1.2;
 align-items: center;
 justify-content: center;
 flex-wrap: wrap;

  
 /*animation: right 2s;
 animation-timing-function: ease;
 animation-delay: 10s;
 animation-fill-mode: forwards;
 */}
 
 .recycle_yellow_bin{
 background: url("picture/recycle yellow bin.png") 30% 90% no-repeat;
 background-size: 40%;
}


.comodity_cat{
 display: flex;
 align-items: center;
 margin: 0;
 flex-wrap: wrap;
 width: 52%;
 height: 80%;
}

.non_comodity_cat{
 display: flex;
 align-items: center;
 margin: 0;
 flex-wrap: wrap;
 width: 39%;
 height: 80%;
}
 
.cat_title{
 font-size: 0.9em;
 font-weight: 600;
 text-align: center;
 width: 100%;
 height: 8%;
 }
 
.cat_title img{width: 21px;  margin-right: 5px;}

.comodity_cat .cat_title{border-bottom: 4px solid rgb(0,160,135);}
.non_comodity_cat .cat_title{border-bottom: 4px solid rgb(102,102,102);}
 
 .col_1{
 display:flex;
 width: 25%;
 height: 100%;
 flex-direction: column;
 }
 
.col_2{
 display:flex;
 width: 25%;
 height: 100%;
 flex-direction: column;
 }
 
.col_4{
 display:flex;
 width: 25%;
 height: 100%;
 flex-direction: column;
 }
 
.col_5{
 display:flex;
 width: 25%;
 height: 100%;
 flex-direction: column;
 }
 
 .col_3{
   display:flex;
 width: 33.3%;
 height: 100%;
 flex-direction: column;
 }
 
 .col_6{
  display:flex;
 width: 33.3%;
 height: 100%;
 flex-direction: column;
 }
 
 .col_7{
  display:flex;
 width: 33.3%;
 height: 100%;
 flex-direction: column;
 }
 
.cat_logo_1{
 height: 23%;
 background: url("picture/1.jpg") center no-repeat;
}

.cat_logo_2{
 height: 23%;
 background: url("picture/2.jpg") center no-repeat;
}

.cat_logo_4{
 height: 23%;
 background: url("picture/4.jpg") center no-repeat;
}

.cat_logo_5{
 height: 23%;
 background: url("picture/5.jpg") center no-repeat;
}

.cat_logo_3{
 height: 23%;
 background: url("picture/3.jpg") center no-repeat;
}

.cat_logo_6{
 height: 23%;
 background: url("picture/6.jpg") center no-repeat;
}

.cat_logo_7{
 height: 23%;
 background: url("picture/7.jpg") center no-repeat;
}

.cat_name{
 height: 6%;
 font-size: 0.7em;
 text-align: center;
}


.cat_pic_1{
 height: 27%;
 background: url("picture/1_pic.jpg") center no-repeat;
}

.cat_pic_2{
 height: 27%;
 background: url("picture/2_pic.jpg") center no-repeat;
}

.cat_pic_4{
 height: 27%;
 background: url("picture/4_pic.jpg") center no-repeat;
}

.cat_pic_5{
 height: 27%;
 background: url("picture/5_pic.jpg") center no-repeat;
}

.cat_pic_3{
 height: 27%;
 background: url("picture/3_pic.jpg") center no-repeat;
}

.cat_pic_6{
 height: 27%;
 background: url("picture/6_pic.jpg") center no-repeat;
}

.cat_pic_7{
 height: 27%;
 background: url("picture/7_pic.jpg") center no-repeat;
}

.cat_desc{font-size: 0.6em; text-align: center; padding: 5px 5px}



 /*-------------------left content----------------*/

#content_flip_left>#content_right{
 display: flex;
 width: 760px;
 height: 600px;
 line-height: 1.2;
 align-items: center;
 justify-content: center;
 background: url("picture/sorting.jpg") bottom right no-repeat;
 background-size: 70%;
}

.high_eco{
 width: 40%;
 height: 80%;
}

.low_eco{
 width: 40%;
 height: 80%;
 margin-left: 3em;
}


.row_1{
 display: flex;
 align-items: center;
 font-size: 0.8em;
 height: 20%;
 background: url("picture/bin_blue.jpg") left center no-repeat;
 padding-left: 25%;
}

.row_2{
 display: flex;
 align-items: center;
 font-size: 0.8em;
 height: 20%;
 background: url("picture/bin_green.jpg") left center no-repeat;
 padding-left: 25%;

}

.row_3{
 display: flex;
 align-items: center;
 font-size: 0.8em;
 height: 20%;
 background: url("picture/bin_red.jpg") left center no-repeat;
 padding-left: 25%;

}

.row_4{
 display: flex;
 align-items: center;
 font-size: 0.8em;
 height: 20%;
 background: url("picture/garbage.png") left center/30% no-repeat;
 padding-left: 35%;

}



@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);}
	.face_right{transform: rotateY(90deg) translateZ(512px);}
	.face_back{transform: rotateY(180deg) translateZ(512px);}
	.face_left{transform: rotateY(-90deg) translateZ(512px);}

	 
	.show_front{transform: translateZ(-512px) rotateY(0deg); 
		 animation-timing-function: ease;
	}

	.show_right{transform: translateZ(-512px) rotateY(-90deg);
		 animation-timing-function: ease;
	}

	.show_back{transform: translateZ(-512px) rotateY(-180deg);
		 animation-timing-function: ease;
	}
	
	.show_left{transform: translateZ(-512px) rotateY(90deg);
		 animation-timing-function: ease;
	}
	
	#content_flip_front, #content_flip_right, #content_flip_left,
	#content_flip_back{
	 padding-left: 50px;
	 padding-right: 50px;
	}


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

	p{
	 font-size: 0.8em;
	}

	.content_left{
	 width: 308px;
	 height: 100%;
	 color: black;
	 display:flex;
	 flex-direction: column;
	}
	
	/*front content*/	
	.recycle_man{
	 background: url(picture/recycle_man.png) 30% 90% no-repeat;
	 background-size: 90%;
	}

	#content_flip_front>#content_right{
	 width: 616px;
	 height: 600px;
	 line-height: 1.2;
	 background: url("picture/kincir.png") center no-repeat;
	 background-size: 450px;
	}
	 
	 #desc_1{
	 transform: translate(430px, 230px);
	 opacity:0;
	 animation: desc_1 1s;
	 animation-timing-function: ease;
	 animation-delay: 1s;
	 animation-fill-mode: forwards;
	 }
	 
	@keyframes desc_1 {
	  from {
		 transform: translate(410px, 230px);
		 opacity:0;}
	  to {
		 transform: translate(430px, 230px);
		 opacity:1;
		}
	 }
	 
	 #desc_2{
	 transform: translate(400px,420px);
	 opacity:0;
	 animation: desc_2 1s;
	 animation-delay: 3s;
	 animation-timing-function: ease;
	 animation-fill-mode: forwards;
	 }
	 
	 @keyframes desc_2 {
	  from {
		 transform: translate(300px,380px);
		 opacity:0;}
	  to {
		 transform: translate(320px,380px);
		 opacity:1;
		}
	 }
	 
	#desc_3{
	 flex-direction: row-reverse;
	 transform: translate(60px,180px);
	 opacity:0;
	 animation: desc_3 1s;
	 animation-delay: 5s;
	 animation-timing-function: ease;
	 animation-fill-mode: forwards;
	 }
	 
	@keyframes desc_3 {
	  from {
		 transform: translate(0px,180px);
		 opacity:0;}
	  to {
		 transform: translate(10px,180px);
		 opacity:1;
		}
	}

	#desc_4{
	 align-items: flex-end;
	 flex-direction: row-reverse;
	 opacity:0;
	 animation: desc_4 1s;
	 animation-delay: 7s;
	 animation-timing-function: ease;
	 animation-fill-mode: forwards;
	 }
	 
	 @keyframes desc_4 {
	  from {
		 transform: translate(80px,-100px);
		 opacity:0;}
	  to {
		 transform: translate(100px,-100px);
		 opacity:1;
		}
	 }
	 
	 .desc{
	 color: black;
	 font-size: 0.70em;
	 display: flex;
	 width:190px;
	 color: rgb(0,160,135);
	 }
	 
	 #cloud_a{
	  background: url("picture/cloud a.png") center no-repeat;
	  background-size: 99px;
	  width: 99px;
	  height: 31px;
	  transform: translate(600px,-170px);
	  animation: cloud_a ease 10s infinite;
	 }
	 
	 @keyframes cloud_a {
	   0% {transform: translate(450px,-170px);}
	  50% {transform: translate(500px,-170px);}
	 100% {transform: translate(450px,-170px);}
	 }
	 
	 #cloud_b{
	  background: url("picture/cloud b.png") center no-repeat;
	  background-size: 170px;
	  width: 170px;
	  height: 54px;
	  transform: translate(50px,180px);
	  animation: cloud_b ease 10s 1s infinite;
	 }
	 
	 @keyframes cloud_b {
	   0% {transform: translate(50px,180px);}
	  50% {transform: translate(0px,180px);}
	 100% {transform: translate(50px,180px);}
	 }
	 
	
	/* right content */
	 #content_flip_right>#content_right{
		width: 616px;
	}
	
	 #baling_1{
		margin-left: 156px;
		margin-top: 230px;
	 }
	 
	#baling_2{
		margin-left: 108px;
		margin-top: 255px;
	}

	/* back content */
	 #content_flip_back>#content_right{
		width: 616px;
	}
		
	.cat_logo_1{
	 height: 23%;
	 background-size: 80%;
	}

	.cat_logo_2{
	 height: 23%;
	 background-size: 80%;
	 }

	.cat_logo_4{
	 height: 23%;
	 background-size: 80%;
	 }

	.cat_logo_5{
	 height: 23%;
	 background-size: 80%;
	 }

	.cat_logo_3{
	 height: 23%;
	 background-size: 80%;
	 }

	.cat_logo_6{
	 height: 23%;
	 background-size: 80%;
	 }

	.cat_logo_7{
	 height: 23%;
	 background-size: 80%;
	 }

	.cat_name{
	 height: 6%;
	 font-size: 0.6em;
	 text-align: center;
	}

	.cat_pic_1, .cat_pic_2, .cat_pic_4, .cat_pic_5, .cat_pic_3, .cat_pic_6, .cat_pic_7{
	 height: 25%;
	 background-size: 90%;
	}

	.cat_desc{font-size: 0.6em; text-align: center; padding: 5px 5px}
}

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

	 
	.show_front{transform: translateZ(-384px) rotateY(0deg); 
	 animation-timing-function: ease;
	}

	.show_right{transform: translateZ(-384px) rotateY(-90deg);
	 animation-timing-function: ease;
	}

	.show_back{transform: translateZ(-384px) rotateY(-180deg);
	 animation-timing-function: ease;
	}
	
	.show_left{transform: translateZ(-384px) rotateY(90deg);
	 animation-timing-function: ease;
	}

	#content_flip_front, #content_flip_right, #content_flip_back, #content_flip_left{
		flex-direction: column-reverse;
		width: 768px;
		height: 900px;
		padding-left: 50px;
		padding-right: 50px;
	}
	
	.content_left{
		 width: 768px;
		 height: 350px;
		 color: black;
		 display:flex;
		 flex-direction: column;
		 padding-left: 50px;
		 padding-right: 50px;
	}
	
	#content_right{
	 width: 768px;
	 height: 550px;
	}
	
	
	#content_flip_front>#content_right{
	 background: url("picture/kincir.png") center no-repeat;
	 background-size: 500px;
	}
	
	
	
	#content_flip_back>.content_left{
		height: 350px;
	}
	
	#content_flip_back>#content_right{
		height: 550px;
	}

		
	h1{
		margin-top: 0;
	}
	
	#content_flip_left>.content_left>h1{
		margin-top: 5%;
	}
		
	.recycle_man{
	 background: url(picture/recycle_man.png) 50% 80% no-repeat;
	 background-size: 30%;
	}

	@keyframes desc_1 {
	  from {
		 transform: translate(430px,200px);
		 opacity:0;}
	  to {
		 transform: translate(510px,200px);
		 opacity:1;
		}
	 }
	 
	 
	 @keyframes desc_2 {
	  from {
		 transform: translate(330px,380px);
		 opacity:0;}
	  to {
		 transform: translate(400px,380px);
		 opacity:1;
		}
	 }
	 
	@keyframes desc_3 {
	  from {
		 transform: translate(0px,160px);
		 opacity:0;}
	  to {
		 transform: translate(60px,160px);
		 opacity:1;
		}
	}

	 
	  @keyframes desc_4 {
	  from {
		 transform: translate(140px,-130px);
		 opacity:0;}
	  to {
		 transform: translate(160px,-130px);
		 opacity:1;
		}
	 }

		 
	#baling_1{
		margin-left: 228px;
		margin-top: 210px;
	}
	 
	#baling_2{
		margin-left: 180px;
		margin-top: 235px;
	}

	.recycle_yellow_bin{
		background: url("picture/recycle yellow bin.png") 50% 80% no-repeat;
		background-size: 14%;	
	}	  
	


}

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

	#scene{
		width: 360px;
		height: 750px;
	}
	  
	.cube{
		transform: translateZ(-180px);
		width: 360px;
		height: 750px;
	}
	
	.face_front{transform: rotateY(0deg) translateZ(180px);}
	.face_right{transform: rotateY(90deg) translateZ(180px);}
	.face_back{transform: rotateY(180deg) translateZ(180px);}
	.face_left{transform: rotateY(-90deg) translateZ(180px);}
	 
	.show_front{transform: translateZ(-180px) rotateY(0deg); 
	 animation-timing-function: ease;
	}

	.show_right{transform: translateZ(-180px) rotateY(-90deg);
	 animation-timing-function: ease;
	}

	.show_back{transform: translateZ(-180px) rotateY(-180deg);
	 animation-timing-function: ease;
	}
	
	.show_left{transform: translateZ(-180px) rotateY(90deg);
	 animation-timing-function: ease;
	}

	#content_flip_front, #content_flip_back, #content_flip_left{
		flex-direction: column;
		width: 360px;
		height: 750px;
		padding-left: 15px;
		padding-right: 15px;
	}
	
	#content_flip_right{
		flex-direction: column-reverse;
		width: 360px;
		height: 750px;
		padding-left: 15px;
		padding-right: 15px;

	}
	
	.content_left{
		width: 360px;
			padding-left: 15px;
		padding-right: 15px;

	}
	
	/*-----FLIP_FRONT-----*/
	

	#content_flip_front>.content_left{
		 height: 100px;
		 flex-direction: column;
		 padding-top:15px;
 		 padding-bottom:15px;
	}
	
	
	#content_flip_front>.content_left>p{
		display: none;
	}
	

	#content_flip_front>#content_right{
	 background: url("picture/recycle_man.png") 95% 45% no-repeat,
	 url("picture/kincir.png") 40% 0% no-repeat;


	 background-size: 120px, 300px;
	 width: 360px;
	 height: 620px;
	}
	
		
	h1{
		font-size: 2em;
		margin-top: 0;
	}
	
	p{
	 font-size: 0.8em;
	}

	
	.recycle_man{
	  background: none;
	}

	 
	@keyframes desc_1 {
	  from {
		 transform: translate(10px,330px);
		 opacity:0;}
	  to {
		 transform: translate(20px,330px);
		 opacity:1;
		}
	 }
	 
	 
	 @keyframes desc_2 {
	  from {
		 transform: translate(10px,340px);
		 opacity:0;}
	  to {
		 transform: translate(20px,340px);
		 opacity:1;
		}
	 }
	 
	@keyframes desc_3 {
	  from {
		 transform: translate(10px,350px);
		 opacity:0;}
	  to {
		 transform: translate(20px,350px);
		 opacity:1;
		}
	}

	  @keyframes desc_4 {
	  from {
		 transform: translate(10px,360px);
		 opacity:0;}
	  to {
		 transform: translate(20px,360px);
		 opacity:1;
		}
	 }

	#desc_3, #desc_4{
	 flex-direction: row;
	}

	 .desc{
	 color: black;
	 font-size: 0.8em;
	 display: flex;
	 width: 300px;
	 color: rgb(0,160,135);
	 }
	 
	 #desc_number{
	  font-family: swis721 cn bt bold;
	  padding-right: 10px;
	  font-size: 3em;
	  line-height: 1;
	 }
	 
	 #desc_text{
	  color: black;
	 }
	 
	 .desc_number_right{
	  padding-right: 0px;
	  padding-left: 0px;
	 }
	 
	 .desc_text_right{
	   text-align: left;
	 }
	 
	 #desc_text{
	  border-bottom: 1px solid rgb(0,160,135);
	  padding-bottom: 7px;
	 }
	 
	#cloud_a{
	  background: url("picture/cloud a.png") center no-repeat;
	  background-size: 80px;
	  width: 80px;
	  height: 30px;
	}
 
	 @keyframes cloud_a {
	   0% {transform: translate(250px,-230px);}
	  50% {transform: translate(220px,-230px);}
	 100% {transform: translate(250px,-230px);}
	 }
	 
	#cloud_b{
	   background: url("picture/cloud b.png") center no-repeat;
	  background-size: 130px;
	  width: 130px;
	  height: 45px;
	}
	
	 @keyframes cloud_b {
	   0% {transform: translate(50px,30px);}
	  50% {transform: translate(0px,30px);}
	 100% {transform: translate(50px,30px);}
	 }
 
 
	
	/*-------FLIP_RIGHT------*/
	
	#content_flip_right>#content_right{
		background: url("picture/plastic recycle.png") center no-repeat;
		background-size: 320px;
		width: 360px;
		height: 330px;
	}
	
	#content_flip_right>.content_left{
		height: 420px;
	}
 
	#sun{
		position: absolute;
		width: 38px;
		height: 38px;
		margin-left: 60px;
		margin-top: 20px;
		background: url(picture/sun.png) center no-repeat;
		background-size: 35px;
		}
		
	#sunshine{
		position: absolute;
		width: 90px;
		height: 90px;
		margin-left: 35px;
		margin-top: -7px;
		background: url(picture/sunshine.png) center no-repeat;
		background-size: 120px;
		animation: bigger linear 5s infinite;
	}
	
	@keyframes bigger {
	   0% {transform: scale(1.1,1.1);}
	  50% {transform: scale(1,1);}
	 100% {transform: scale(1.1,1.1);}
	 }
	
	 #content_flip_right_cloud{
		background-size: 60px 18px;
		width: 60px;
		height: 18px;
	}
	 
	 @keyframes right_cloud {
	   0% {transform: translate(40px,45px);}
	  50% {transform: translate(70px,45px);}
	 100% {transform: translate(40px,45px);}
	 }
 
		 
		 
	#baling_1{
		margin-left: 78px;
		margin-top: 110px;
		width: 48px;
		height: 48px;
		background-size: 48px;
	}
	 
	#baling_2{
		margin-left: 47px;
		margin-top: 125px;
		width: 48px;
		height: 48px;
		background-size: 48px;
	}

	
	/*-------FLIP_BACK------*/
	#content_flip_back>#content_right{
		width: 300px;
		height: 570px;
		align-content: flex-start;
		background: url("picture/recycle yellow bin.png") 50% 90% no-repeat;
		background-size: 20%;
	}
	
	#content_flip_back>.content_left{
		height: 130px;
		padding-top:15px;
	}
	
	.recycle_yellow_bin{
		background: none;
	}	  
	
	.comodity_cat{
	 display: flex;
	 flex-direction: row;
	 align-items: center;
	 margin: 0;
	 flex-wrap: wrap;
	 width: 100%;
	 height: 200px;
	}

	.non_comodity_cat{
	 display: flex;
	 flex-direction: row;
	 align-items: center;
	 margin: 0;
	 flex-wrap: wrap;
	 width: 100%;
	 height: 200px;
	}
	 
	.cat_title{
	 font-size: 0.9em;
	 font-weight: 600;
	 text-align: center;
	 width: 340px;
	 height: 35px;
	 margin: 0;
	 }
	 
	.cat_title img{width: 20px;}

		
	 .col_1, .col_2, .col_4, .col_5, .col_3, .col_6, .col_7{
	 width: 25%;
	
	 flex-direction: column;
	 flex-wrap: wrap;
	 overflow: hidden;

	 }
	 
	.cat_logo_1, .cat_logo_2, .cat_logo_4, .cat_logo_5,
	.cat_logo_3, .cat_logo_6, .cat_logo_7{
	 background-size: 50px;
	 width: 100%;
	 height: 40%;
	 margin: 0;
	}

	.cat_name{
	 display: none;
	 height: 6%;
	 font-size: 0.7em;
	 text-align: center;
	}


	.cat_pic_1, .cat_pic_2, .cat_pic_4, .cat_pic_5,
	.cat_pic_3, .cat_pic_6, .cat_pic_7{
	 background-size: 95%;
	 margin: 0;
	 width: 75px;
	 height: 75px;
	}


	.cat_desc{display: none;font-size: 0.7em; text-align: left; padding: 5px 5px; width: 80%;}

	
	/*-----FLIP LEFT-----*/	
	#content_flip_left>#content_right{
	 width: 100%;
	 height: 500px;
	 flex-wrap: wrap;
	 align-items: center;
	 justify-content: center;
	 align-content: flex-start;
	 background: url("picture/sorting.jpg") bottom right no-repeat;
	 background-size: 100%;
	}
	
	#content_flip_left>.content_left{
	 height: 200px;
	}

	#content_flip_left>.content_left>h1{
	 margin-top: 5%;
	}

	.high_eco{
	 width: 300px;
	 height: 200px;
	}

	.low_eco{
	 width: 300px;
	 height: 200px;
	 margin-left: 0;
	 margin-top: 10%;
	}
	
	.high_eco>.cat_title, .low_eco>.cat_title{
	 width: 100%;
	}


	.row_1{
	 display: flex;
	 align-items: center;
	 font-size: 0.8em;
	 height: 30%;
	 background: url("picture/bin_blue.jpg") left center no-repeat;
	 background-size: 12%;
	 padding-left: 20%;
	}

	.row_2{
	 display: flex;
	 align-items: center;
	 font-size: 0.8em;
	 height: 30%;
	 background: url("picture/bin_green.jpg") left center no-repeat;
	 background-size: 12%;
	 padding-left: 20%;

	}

	.row_3{
	 display: flex;
	 align-items: center;
	 font-size: 0.8em;
	 height: 30%;
	 background: url("picture/bin_red.jpg") left center no-repeat;
	 background-size: 12%;
	 padding-left: 20%;

	}

	.row_4{
	 display: flex;
	 align-items: center;
	 font-size: 0.8em;
	 height: 30%;
	 background: url("picture/garbage.png") left center no-repeat;
	 background-size:18%;
	 padding-left: 20%;

	}
}


@media screen and (min-width: 550px) and (max-width: 900px) and (orientation: landscape){
	  /* For MOBILE PHONE: landscape*/
  	video{
		height: 300px;
	}

	  #scene{
		width: 760px;
		height: 700px;
	}
	  
	.cube{
		transform: translateZ(-380px);
		width: 760px;
		height: 700px;
	}
	
	.face_front{transform: rotateY(0deg) translateZ(380px);}
	.face_right{transform: rotateY(90deg) translateZ(380px);}
	.face_back{transform: rotateY(180deg) translateZ(380px);}
	.face_left{transform: rotateY(-90deg) translateZ(380px);}
	 
	.show_front{transform: translateZ(-380px) rotateY(0deg); 
	 animation-timing-function: ease;
	}

	.show_right{transform: translateZ(-380px) rotateY(-90deg);
	 animation-timing-function: ease;
	}

	.show_back{transform: translateZ(-380px) rotateY(-180deg);
	 animation-timing-function: ease;
	}
	
	.show_left{transform: translateZ(-380px) rotateY(90deg);
	 animation-timing-function: ease;
	}

	 #content_flip_front, #content_flip_back, #content_flip_left{
		flex-direction: column;
		width: 760px;
		height: 700px;
		padding-left: 15px;
		padding-right: 15px;
	}
	
	#content_flip_right{
		flex-direction: column-reverse;
		width: 760px;
		height: 700px;
		padding-left: 15px;
		padding-right: 15px;
	}
	
	.content_left{
		 width: 760px;
		 height: 300px;
		 color: black;
		 display:flex;
		 flex-direction: column;
		 padding-left: 40px;
		 padding-right: 40px;
	}
	
	/*FRONT*/
	#content_flip_front>#content_right{
	 background: url("picture/kincir.png") center 5% no-repeat,
	 url("picture/recycle_man.png") 10% 90% no-repeat;
	 background-size: 330px, 200px;
	 width: 760px;
	 height: 500px;
	}
	
	#content_flip_front>.content_left{
		 width: 760px;
		 height: 200px;
		 color: black;
		 display:flex;
		 flex-direction: column;
		 padding-top: 20px;
		 padding-left: 40px;
		 padding-right: 40px;
	}
	
		
	h1{
		margin-top: 0;
	}
	
	.recycle_man{
	 background: none;
	}

	@keyframes desc_1 {
	  from {
		 transform: translate(430px,110px);
		 opacity:0;}
	  to {
		 transform: translate(480px,110px);
		 opacity:1;
		}
	 }
	 
	 
	 @keyframes desc_2 {
	  from {
		 transform: translate(350px,230px);
		 opacity:0;}
	  to {
		 transform: translate(400px,230px);
		 opacity:1;
		}
	 }
	 
	@keyframes desc_3 {
	  from {
		 transform: translate(2px,60px);
		 opacity:0;}
	  to {
		 transform: translate(70px,60px);
		 opacity:1;
		}
	}

	  @keyframes desc_4 {
	  from {
		 transform: translate(110px,-180px);
		 opacity:0;}
	  to {
		 transform: translate(160px,-180px);
		 opacity:1;
		}
	 }

	#cloud_a{
	  background: url("picture/cloud a.png") center no-repeat;
	  background-size: 99px;
	  width: 99px;
	  height: 31px;
	  transform: translate(600px,-170px);
	  animation: cloud_a ease 10s infinite;
	}
	 
	 @keyframes cloud_a {
	   0% {transform: translate(600px,-200px);}
	  50% {transform: translate(550px,-200px);}
	 100% {transform: translate(600px,-200px);}
	 }
	 
	#cloud_b{
	   background: url("picture/cloud b.png") center no-repeat;
	  background-size: 140px;
	  width: 140px;
	  height: 40px;
	}
	
	 @keyframes cloud_b {
	   0% {transform: translate(50px,20px);}
	  50% {transform: translate(0px,20px);}
	 100% {transform: translate(50px,20px);}
	 }
 
		 /*RIGHT*/
	
	#content_flip_right>#content_right{
		background: url("picture/plastic recycle.png") 50% 5% no-repeat;
		background-size: 400px;
		width: 760px;
		height: 400px;
	}
	
	#sun{
		position: absolute;
		width: 38px;
		height: 38px;
		margin-left: 260px;
		margin-top: 20px;
		background: url(picture/sun.png) center no-repeat;
		background-size: 35px;
		}
		
	#sunshine{
		position: absolute;
		width: 90px;
		height: 90px;
		margin-left: 235px;
		margin-top: -7px;
		background: url(picture/sunshine.png) center no-repeat;
		background-size: 120px;
		animation: bigger linear 5s infinite;
	}
	
	@keyframes bigger {
	   0% {transform: scale(1.1,1.1);}
	  50% {transform: scale(1,1);}
	 100% {transform: scale(1.1,1.1);}
	 }
	
	 #content_flip_right_cloud{
		background-size: 60px 18px;
		width: 60px;
		height: 18px;
	}
	 
	 @keyframes right_cloud {
	   0% {transform: translate(220px,45px);}
	  50% {transform: translate(250px,45px);}
	 100% {transform: translate(220px,45px);}
	 }
 
	#baling_1{
		margin-left: 258px;
		margin-top: 120px;
		width: 48px;
		height: 48px;
		background-size: 48px;
	}
	 
	#baling_2{
		margin-left: 220px;
		margin-top: 140px;
		width: 48px;
		height: 48px;
		background-size: 48px;
	}
	
	/*BACK CONTENT*/
	#content_flip_back>#content_right{
		width: 760px;
		height: 550px;
		align-items: flex-start;
	}
	
	 	
	#content_flip_back>.content_left{
		 width: 760px;
		 height: 150px;
		 color: black;
		 display:flex;
		 flex-direction: column;
		 padding-top: 20px;
		 padding-left: 40px;
		 padding-right: 40px;
	}
	
	 
	.recycle_yellow_bin{
		background: none;
	}	  
	
	.comodity_cat{
	 display: flex;
	 align-items: center;
	 margin: 0;
	 flex-wrap: wrap;
	 width: 52%;
	 height: 85%;
	}

	.non_comodity_cat{
	 display: flex;
	 align-items: center;
	 margin: 0;
	 flex-wrap: wrap;
	 width: 39%;
	 height: 85%;
	}
	
	.cat_logo_1, .cat_logo_2, .cat_logo_4, .cat_logo_5,
	.cat_logo_3, .cat_logo_6, .cat_logo_7{
	 height: 100px;
	}
	
	/*----RIGHT CONTENT----*/
	
	#content_flip_left>#content_right{
		height: 600px;
	}
	
	#content_flip_left>.content_left{
		height: 100px;
	}
	
	#content_flip_left>.content_left>h1{
		margin-top: 20px;
	}

}