#body.en .general .grid figcaption h2 { font-size:20px; line-height:normal;}
	.grid figcaption p { font-size:16px;}
	
	/* Common style */
	.grid 					{ width:100%; margin-bottom:30px;}
	.grid a 				{ float:left; max-width:250px; width:25%; color:#333;}
	.grid a:nth-child(odd) 	{ margin:30px 0 -30px 0;}
	.grid figure 			{ position:relative; overflow:hidden; margin:5px; background:#333;}
	.grid figure img 		{ position:relative; display:block; width:100%; opacity:0.7;
								-webkit-transition: opacity 0.3s;
								        transition: opacity 0.3s; }

	.grid figcaption 		{ position:absolute; top:0; z-index:11; padding:10px; width:100%; height:100%; text-align:center;}
	.grid figcaption h2 	{ margin:0 0 20px 0; text-transform:uppercase; 
								-webkit-transition: -webkit-transform 0.3s;
							   	        transition: transform 0.3s;}

	#body .general .grid figcaption h2 {  font-size:20px; margin-bottom:8px; }

	.grid figcaption p 		{ padding:0 20px; color:#333; font-weight:300;
								-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
										transition: opacity 0.3s, transform 0.3s;}

	.grid figcaption h2,
	.grid figcaption p 		{ 	-webkit-transform: translateY(50px);
										transform: translateY(50px);}

	.grid figcaption,
	.grid figcaption h2,
	.grid figcaption p 		{	-webkit-backface-visibility: hidden;
										backface-visibility: hidden;}


	/* Style for SVG */
	.grid svg 			{ position:absolute; top:-1px; /* fixes rendering issue in FF */
						  z-index:10; width:100%; height:100%; }

	#body.d-template1 .grid svg path 		{ fill:#ffe5d9;}
	#body.d-template2 .grid svg path 		{ fill:#e0ecf3;}
	#body.d-template3 .grid svg path 		{ fill:#dcf0c4;}
	#body.d-template4 .grid svg path 		{ fill:#edd8f0;}


	/* Hover effects */
	.grid a:hover figure img 		{ opacity:1; }

	.grid a:hover figcaption h2,
	.grid a:hover figcaption p 		{ -webkit-transform: translateY(0);
											  transform: translateY(0); }

	.grid a:hover figcaption p 		{ opacity:0;}

	
	/* ==========================================================================
	    Media Style
	============================================================================= */
	@media screen and (max-width: 58em) {
	.grid a 					{ width:33.333%;}
	.grid a:nth-child(odd) 		{ margin:0;}
	.grid a:nth-child(3n-1) 	{ margin:30px 0 -30px 0;}
	}

	@media screen and (max-width: 45em) {
	.grid 						{ max-width:500px;}
	.grid a 					{ width:50%;}
	.grid a:nth-child(3n-1) 	{ margin:0;}
	.grid a:nth-child(even) 	{ margin: 30px 0 -30px 0;}
	.grid figcaption h2 		{ margin-bottom:0px;
								-webkit-transform: translateY(30px);
										transform: translateY(30px);}
	.grid figcaption p 	{ margin:0; padding:0 10px;}
	}


	@media only screen and (min-device-width : 768px) and (max-device-width : 1024px)  { 

	.grid svg 	{ display:none}

	.grid a:hover figcaption h2,
	.grid a:hover figcaption p 		{ -webkit-transform: none;
											  transform: none;}
	
	.grid figcaption,
	.grid figcaption h2,
	.grid figcaption p 		{	-webkit-backface-visibility: visible;
									    backface-visibility: visible;
										   webkit-transform: none;
											      transform: none; }
	.grid a:hover figcaption p	{ opacity:1;}
	.grid figure img  { opacity:1; margin:0 auto;}

	.grid figcaption p 							{ background-color:#fff; padding:0 5px;}
	#body .general .grid figcaption h2 		{ font-size:20px; background-color:#fff; margin:0; }
	#body.cn .general .grid figcaption h2 	{ padding:5px 0; }
	#body.en .general .grid figcaption h2 	{ padding:0; }

	}


	@media screen and (max-width: 27em) {
	.grid 					{ max-width:250px; margin:0 auto;}
	.grid a 				{ width:100%;}
	.grid a:nth-child(even) { margin:0;}


	/* New add */
	.grid 					{ max-width:100%; width:100%; margin:0 auto;}

	.grid svg 	{ display:none}

	.grid a 	{ margin:0; margin-bottom:10px!important; width:100%; max-width:100%; background-color:#ececec;}
	.grid a:hover figcaption h2,
	.grid a:hover figcaption p 		{ -webkit-transform: none;
											  transform: none;}
	
	.grid figcaption,
	.grid figcaption h2,
	.grid figcaption p 		{	-webkit-backface-visibility: visible;
									    backface-visibility: visible;
										   webkit-transform: none;
											      transform: none; }
	.grid a:hover figcaption p,
	.grid figure img 		{ opacity:1;}

	.grid figure 			{ overflow:visible; width:100%; margin:0; background-color:#fff}

	#body.en .general .grid figcaption h2,
	#body.cn .general .grid figcaption h2 	{ text-align:left; padding:15px 15px 0 15px; font-size:20px}

	.grid figcaption p 							{ text-align:left; padding:0 15px 15px 15px;}


	.grid figcaption 		{ background-color:#ececec; opacity:1; width:70%; padding:0; position:relative; display:inline-block; float:left;}

	.grid figure img 		{ position:relative; display:inline-block; width:30%; height:auto; opacity:1; float:left;
								-webkit-transition: none;
								        transition: none; }

	}