﻿/*-----------------------------------------------------------------------------
		BIG DIV (4 columns Narrow Width) updated-2021
------------------------------------------------------------------------------*/	


:root { 
	--BigDiv4_ST_divbg:none;
	--BigDiv4_ST_textcolor:#000; 
	--BigDiv4_ST_imagebg:none;  
	
	--BigDiv4_RC_divbg:#eeefef;
	--BigDiv4_RC_textcolor:#000000; 
	--BigDiv4_RC_imagebg:none;
}




/*********************
		DESKTOP
**********************/	


.BigDiv4 {    
    display:block;
	width: 100%;
	height:auto;
	margin:0 auto;
    padding:30px 10%;
    text-align:center;
    overflow:hidden; 
	box-sizing: border-box;
}


/*---------------------STYLES (OPTIONS)-------------------*/	


/*---------------------------------
	--OPTION 1 --
	Standard Square Div 
	(Class: BigDiv4__Standard)
----------------------------------*/

.BigDiv4__Standard{
	float:left;
   	display:inline;
	width:22%;
	height:auto;
	margin-left:3%;
	margin-bottom:50px;
	text-align:center;
	background:var(--BigDiv4_ST_divbg);
	color:var(--BigDiv4_ST_textcolor);
}

.BigDiv4__Standard img{
	max-width:40%;
	height:auto;
	background:var(--BigDiv4_ST_imagebg);
}

.BigDiv4__Standard h3{
	text-align:center;
	margin:5px auto;
}

.BigDiv4__Standard p{
	text-align:justify; /*for Chinese*/
	text-justify: inner-word; /*for Chinese*/
	margin:0 auto;
	padding:0 6%;
}

.BigDiv4__Standard h4{ 
    text-align:center;
}

.BigDiv4 div p.small{
	text-align:justify;
	text-justify: inner-word;
	margin:0;
}


/*-----------------------------------
	--OPTION 2--
	Rounded Corners Div 
	(Class: BigDiv4__RoundedC)
------------------------------------*/

.BigDiv4__RoundedC{
	float:left;
   	display:inline;
	width:22%;
	height:auto;
	margin-left:3%;
	padding:2% 0;
	text-align:center;
	background:var(--BigDiv4_RC_divbg);
	color:var(--BigDiv4_RC_textcolor);
	border-radius:20px;
}


.BigDiv4__RoundedC img{
	max-width:40%;
	height:auto;
	background:var(--BigDiv4_RC_imagebg);
}

.BigDiv4__RoundedC h3{
	text-align:center;
	margin:5px auto;
}

.BigDiv4__RoundedC p{
	text-align:justify; /*for Chinese*/
	text-justify: inner-word; /*for Chinese*/
	margin:0 auto;
	padding:0 6%;
}

.BigDiv4__RoundedC h4{ 
    text-align:center;
}


/*OPTIONAL: shadows*/
.BigDiv4--shadows{
	box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.2);
}




/*************************
		iPad Air & Mini
**************************/	

@media screen and (max-width: 820px){
 
/*--------------------BIG DIV (MAIN)---------------------*/	
	
.BigDiv4{
	display:block;
	width:70%;
	height:auto;
	margin:0 auto;
	padding:20px 0;
	overflow:hidden;    
}
		
/*---------------------
	--OPTION 1 --
	Standard Square 
----------------------*/
		
.BigDiv4__Standard{  
	float:left;
	display:inline;
	width:22%;
	height:auto;
	margin:0 auto;
	margin-left:2%;
	margin-bottom:5%;
	text-align:center;	
}
		
.BigDiv4__Standard img{
	max-width:60%;
	height:auto;
}
		
.BigDiv4__Standard h3{ 
	text-align:left;
	margin:5px auto;
}
		
.BigDiv4__Standard p{
	margin:0;
	padding:0 6%;
}
		
.BigDiv4 div p.small{
	margin:0;	
}

/*-----------------------------------
	--OPTION 2--
	Rounded Corners Div 
	(Class: BigDiv4__RoundedC)
------------------------------------*/

.BigDiv4__RoundedC{  
	float:left;
	display:inline;
	width:22%;
	height:auto;
	margin:0 auto;
	margin-left:2%;
	margin-bottom:5%;
	text-align:center;	
}
		
.BigDiv4__RoundedC img{
	max-width:60%;
	height:auto;
}
		
.BigDiv4__RoundedC h3{ 
	text-align:left;
	margin:5px auto;
}
		
.BigDiv4__RoundedC p{
	margin:0;
	padding:0 6%;
}
		
}
	

/***************************
		iPhone
****************************/	
	
@media screen and (max-width: 470px){
	 
/*--------------------BIG DIV (MAIN)---------------------*/	
	
.BigDiv4{
	display:block;
	width:90%;
	height:auto;
	margin:0 auto;
	padding:20px 0%;
	overflow:hidden; 
	box-sizing:border-box;
}
		
/*---------------------
	--OPTION 1 --
	Standard Square 
----------------------*/
	
.BigDiv4__Standard{  
	display:inline-block;
	width:45%;
	height:auto;
	margin-left:2%;
	margin-right:2%;
	margin-bottom:15%;
	text-align:center;	
}
				
.BigDiv4__Standard img{
	max-width:40%;
	height:auto;
	margin:0 auto;
	padding:0;
	text-align:center;
}
		
.BigDiv4__Standard h3{ 
	text-align:center;
	margin:2px 5%;
}
		
.BigDiv4__Standard p{
	margin:0;
	padding:5%;
}

/*-----------------------------------
	--OPTION 2--
	Rounded Corners Div 
	(Class: BigDiv4__RoundedC)
------------------------------------*/

.BigDiv4__RoundedC{  
	display:inline-block;
	width:45%;
	height:auto;
	margin-left:2%;
	margin-right:2%;
	margin-bottom:15%;
	text-align:center;	
}
				
.BigDiv4__RoundedC img{
	max-width:40%;
	height:auto;
	margin:0 auto;
	padding:0;
	text-align:center;
}
		
.BigDiv4__RoundedC h3{ 
	text-align:center;
	margin:2px 5%;
}
		
.BigDiv4__RoundedC p{
	margin:0;
	padding:5%;
}

}




/*---------------------------------------------------
		BIG DIV (4 columns Wider Width) updated-2021
-----------------------------------------------------*/	



/*********************
		DESKTOP
**********************/	

/*--------------------BIG DIV (MAIN)---------------------*/	


.BigDiv4W{
	display:block;
	width:92%;
	height:auto;
	margin:0 auto;
    padding:30px 8%;
    text-align:center;
    overflow:hidden;
	box-sizing: border-box;
}

/*---------------------STYLES (OPTIONS)-------------------*/

/*---------------------
	--OPTION 1--
	Separation Line
-----------------------*/

.BigDiv4W__SLine{
	float:left;
   	display:inline;
	width:23%;
	height:210px;
	text-align:center;
	margin-bottom:50px;
	padding-top:20px;
	text-align:center;   
}

.BigDiv4W__SLine--Rightborder{
	border-right:1px solid #eeefef;
}



/*************************
		iPad 
**************************/	

@media screen and (max-width: 768px){
 
/*--------------------BIG DIV (MAIN)---------------------*/	

.BigDiv4W{
	display:block;
	width:100%;
	height:auto;
	margin:0 auto;
	padding:30px 0;
	margin-left:6%;
	margin-right:6%;
	text-align:center;
	overflow:hidden;
}
	
.BigDiv4W__SLine{
	float:left;
	display:inline;
	width:22%;
	height:180px;
	text-align:center;
	margin-bottom:50px;
	text-align:center;
}
	
}
	


/*****************************
		iPhone
******************************/	

@media screen and (max-width: 470px){

/*--------------------BIG DIV (MAIN)---------------------*/	
.BigDiv4W{
	display:block;
	width:90%;
	height:auto;
	margin:0 auto;
	padding:0;
	overflow:hidden;
}

.BigDiv4W__SLine{
	display:inline;
	width:45%;
	height:200px;
	text-align:center;
	margin:0 2% 5% 2%;
	border:1px solid #eeefef;
}	
}
	
	
	