/*
Added on 09/Apr/2018. Ref: testCss.css
*/


body {
  padding: 0;
  /* Must set CSS of body and #dvMenu to similar (max-width: 960px; or any px, but not %) and (margin: 0 auto;) */
  max-width: 2000px; /*1200px; Use 2000px from 18/Oct/2018*/
  margin: 0 auto;
  /* Added following on 27/Jun/2019 */
  font-family: Arial, Helvetica, sans-serif; /* Tested and added on 27/Jun/2019 Ref: https://www.w3schools.com/cssref/css_websafe_fonts.asp */
  font-size: 1em; /* Tested and added on 27/Jun/2019 Ref: https://www.w3schools.com/css/css_font.asp */
  /* 1em is equal to the current font size. The default text size in browsers is 16px. So, the default size of 1em is 16px. */
  background-color: lightcyan; /* Added 02/Jan/2020 LightCyan=#E0FFFF=#e0ffff=lightcyan, AliceBlue=#F0F8FF */
}


#dvHeader {
}


#dvBanner {
  /*background: url(../stzImg/picBlueHills.jpg) no-repeat 0 -150px; KIV on 18/Oct/2018*/ /* 16/Apr/2016, take away "" in url(...) */
  /*background-size: cover; KIV on 18/Oct/2018*/
  /*background-color: lightblue; lightgreen; 03/Jan/2019*/
  background-color: yellow; /*lightblue; 06/Mar/2019*/
  padding: 1px;
}


#dvMenu {
  position: relative;
  top: 0;
  left: 0;
  right: 0;
  background-color: lightgreen; /*lightblue; 03/Jan/2019*/
  /* Must set CSS of body and #dvMenu to similar (max-width: 960px; or any px, but not %) and (margin: 0 auto;) */
  max-width: 2000px; /*1200px; Use 2000px from 18/Oct/2018**/
  margin: 0 auto;
  z-index: 10; /* Added on 15/Aug/2022. Set at higher level so that elements with position:relative; or position:absolute; will not go on top of menu-bar. */
}

.main {
  background-color: xlightgreen;
  /*
  Added 1px, why?
  Because for div-elements, if we set their CSS padding, it seem like it can replace their system default margin ??? => no more gap between div.
  In our case here, we just need to add to 3 div, #dvBanner (in Header), .main (in Main) and #dvFooter (in Footer).
  */
  padding: 1px;
  /* Added following on 27/Jun/2019 */
  margin: 10px; /* Tested and added on 27/Jun/2019 */

/* Added on 13/Jul/2019:
//
Responsive Table
A responsive table will display a horizontal scroll bar if the screen is too small to display the full content.
Add a container element (like <div>) with overflow-x:auto around the <table> element to make it responsive.
Ref: https://www.w3schools.com/css/css_table.asp
//
NB1: For table, must add <div style="overflow-x:auto;"> to handle table over flow, else it may affect the proper functioning of javascript menu on mobile phone OS.
NB2: As font size within body-element can increase to max 40px, it can cause over-flow problem too, thus add style="overflow-x:auto;" to main class.
NB3: We can set <div style="overflow-x:auto;"> => can scroll to see the over-flow content, or <div style="overflow-x:hidden;"> to hide the content.
*/
  overflow-x: auto; /* Why need this here? Please see NB2 above. */ /* Not set to hidden so that if over flow happen, user can scroll to see the full content. */
}


#dvFooter {
  background-color: lightgreen; /*09/Mar/2019*/
  padding: 1px;
  clear: both; /* First added on 25/Apr/2018 */
}


/*
--------------------------------------------------------------------------------------------------
For topMenu to responsive to smaller screen sizes.
--------------------------------------------------------------------------------------------------
(Ref-1) http://www.w3schools.com/howto/howto_js_topnav.asp
(Ref-2) http://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_topnav
Please refer to the above two web pages by w3schools.com for more details explanation.
--------------------------------------------------------------------------------------------------
*/

ul.topMenu {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}


/* Float the list items side by side */

ul.topMenu li {
  float: left;
}


/* Style the links inside the list items */

ul.topMenu li a {
  display: inline-block;
  color: blue; /*brown; 09/Mar/2019*/ /*#f2f2f2; 03/Jan/2019*/
  text-align: center;
  padding: 14px 6px 14px 16px; /*14px 16px; 15/Feb/2020*/
  text-decoration: none;
  font-size: 17px;
}


/* Change background color of links on hover */

ul.topMenu li a:hover {
  /* background-color: lightyellow; Stop this on 02-05/Jul/2019, see reason below. */ /*#555; 03/Jan/2019*/
  /* color: red; Stop this on 02-05/Jul/2019, see reason below. */ /*09/Mar/2019*/
  background-color: palegreen; /* Started using this on 02-05/Jul/2019, see reason below. */
}


ul.topMenu li:first-child a:hover {
  background: url(../stzImg/home02.gif) no-repeat;
  /* background-color: lightyellow; Stop this on 02-05/Jul/2019, see reason below. */ /*yellow; 03/Jan/2019*/
  background-color: palegreen; /* Started using this on 02-05/Jul/2019, see reason below. */
}

/* Added on 02-05/Jul/2019.
//
// A common question: "Why a link will stick on its hover state when clicked on mobile device until we click at other screen area?"
//
NB1: For record only. A problem on mobile phone, but not a problem on labtop computer.
NB2: On Mobile phone, when we click on "字体 Font 1" to change font size, the hover background-color will stay until we click at other screen area.
NB3: Thus trying to solve this problem, we have added the followings to the end of the above function chgFontSz() from stzGenJs_10.js onwards.
NB4: But all the blur() or focus() method used on different html element failed to solve the problem.
NB5: Hence we just kept these as remarks here.
NB6: We have also tried <a href="javascript:void(0);" onclick="chgFontSz()" onfocus="blur()" ontouchend="blur()" id="fontSzLabel"> but failed too.
NB7: As other websites seem using a very light hover background-color so that user will not notice the color has remained there, thus unless a better method is found, we will follow what others are doing.
//
NB8: Our solution:
//
//   From stzGenCss_10.css onwards, we will set ul.topMenu li a:hover {background-color: palegreen;}
//   Where topMenu background-color is defined in #dvMenu {background-color: lightgreen;}
//   The 2 colours can match each other without big contrast, thus mobile phone users will not disturb by "hover background-color stays" problem.
//
NB9: It is a common problem faced by all mobile phone touch screens users! Even ontouchend="blur()" fail to work too!
//
Ref: https://stackoverflow.com/questions/34273775/hover-button-background-color-remains-on-mobile
Ref: https://stackoverflow.com/questions/23885255/how-to-remove-ignore-hover-css-style-on-touch-devices
Ref: https://stackoverflow.com/questions/45803520/why-does-my-link-stay-on-its-hover-state-when-on-a-mobile-device
//
document.getElementById("fontSzLabel").blur();
document.getElementById("stzTopMenu").blur();
var xCN=document.getElementsByClassName("genMenuIcon");xCN[0].blur();
xCN=document.getElementsByClassName("genMenuIcon");xCN[1].blur();xCN[2].focus();
xCN=document.getElementsByClassName("main");xCN[0].focus();
document.getElementById("fontSzLabel").style.backgroundColor = "transparent";
document.getElementById("fontSzLabel").style.color="inherit";
*/


/* For topMenu to responsive to smaller screen sizes. */
/* Hide the list item that contains the link that should open and close the topMenu on small screens */

ul.topMenu li.menuICON {
  display: none;
}


/* Add media queries: */
/* When the screen is less than 680/576px pixels wide, hide all list items, except for the first one ("Home"). Show the list item that contains the link to open and close the topMenu (li.menuICON) */

/* Change 680px to 576px 0n 10/Jul/2019. Ref: A simple reference to Bootstrap 4 Grid System.html */
@media screen and (max-width:576px) {

  ul.topMenu li:not(:first-child) {
    display: none;
  }

  ul.topMenu li.menuICON {
    float: right;
    display: inline-block;
  }

  /* Added and tested on 01-02/Jul/2019. To display those menu items with classname = genMenuIcon. */
  ul.topMenu li.genMenuIcon {
    float: left;
    display: inline-block;
  }

  #dvBanner {
    /*background: url(../stzImg/bg310[1].jpg); KIV on 18/Oct/2018*/ /* 16/Apr/2016, take away "" in url(...) */
    /*background-size:cover; KIV on 18/Oct/2018*/
  }

  /*
  #dvBanner h1, #dvBanner h3 {
    display: none;
  }
  */

  /* 03/Jan/2019
  #dvBanner h1, #dvBanner h3 {
    font-size: 100%;
  }
  */
  
  #dvBanner h1 {
    font-size: 120%; /* 03/Jan/2019 */
  }

  #dvBanner h3 {
    font-size: 100%; /* 03/Jan/2019 */
  }

}


/* The "responsive" class is added to the topMenu with JavaScript when the user clicks on the menuICON. This class makes the topMenu look good on small screens */

/* Change 680px to 576px 0n 10/Jul/2019. Ref: A simple reference to Bootstrap 4 Grid System.html */
@media screen and (max-width:576px) {

  ul.topMenu.responsive {
    position: relative;
  }

  ul.topMenu.responsive li.menuICON {
    position: absolute;
    right: 0;
    top: 0;
  }

  ul.topMenu.responsive li {
    float: none;
    /* display: inline; */
    display: block; clear:both; /* Replace the above by these two statements.*/
  }

  ul.topMenu.responsive li a {
    display: block;
    text-align: left;
  }

}


/* Added on 05/Jul/2019. */
/* Scroll and Appear Mtd: Go Top and Go Bottom buttons will appear when scroll downwards. */
/* How to create a "scroll to top" button that becomes visible when the user starts to scroll the page. */
/* Ref: https://www.w3schools.com/howto/howto_js_scroll_to_top.asp */
/* Ref: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_scroll_to_top */
#btnGoTop,#btnGoBottom {
  display: none;
  position: fixed;
  /*
  bottom: 20px;
  right: 30px;
  */
  z-index: 99;
  font-size: 16px;
  border: none;
  outline: none;
  /*background-color: lightgrey;*/
  /* background-color: rgb(211, 211, 211); lightgrey fallback color */
  /* background-color: rgba(211, 211, 211, 0.8); lightgrey w/opacity */
  /* background-color: rgb(169, 169, 169); darkgrey fallback color */
  /* background-color: rgba(169, 169, 169, 0.8); darkgrey w/opacity */
  /* background-color: rgb(128, 128, 128); grey fallback color */
  /* background-color: rgba(128, 128, 128, 0.8); grey w/opacity */
  /* background-color: rgb(230, 230, 250); lavender fallback color */
  /* background-color: rgba(230, 230, 250, 0.8); lavender w/opacity */
  background-color: rgb(192, 192, 192); /* silver fallback color */
  background-color: rgba(192, 192, 192, 0.8); /* silver w/opacity */
  color: white;
  cursor: pointer;
  padding: 10px;
  border-radius: 4px;
}

#btnGoTop {
  bottom: 80px;
  right: 5px;
}

#btnGoBottom {
  bottom: 30px;
  right: 5px;
}

#btnGoTop:hover,#btnGoBottom:hover {
  /*background-color: silver;*/
  /* background-color: rgb(192, 192, 192); silver fallback color */
  /* background-color: rgba(192, 192, 192, 0.8); silver w/opacity */
  background-color: rgb(230, 230, 250); /* lavender fallback color */
  background-color: rgba(230, 230, 250, 0.8); /* lavender w/opacity */
}

/* Added on 05/Jul/2019.
Smooth Scrolling
NB1: Add scroll-behavior: smooth to the <html> element to enable smooth scrolling for the whole page
NB2: (note: it is also possible to add it to a specific element/scroll container)
Ref: https://www.w3schools.com/howto/howto_css_smooth_scroll.asp#section2
Ref: https://www.w3schools.com/cssref/pr_scroll-behavior.asp
NB3: Not using this method because it fail to work for all local-links in t2BilingualPolicySporeConstitution.html
html {
	scroll-behavior: smooth;
}
*/


/*
--------------------------------------------------------------------------------------------------
For displaying an extra menu by using full screen overlay navigation menu method.
--------------------------------------------------------------------------------------------------
(Ref-1) http://www.w3schools.com/howto/howto_js_fullscreen_overlay.asp
(Ref-2) http://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_overlay
--------------------------------------------------------------------------------------------------
*/

/* The Overlay Extra Menu(background) */
#dvExtraMenu {
    /* Height & width depends on how you want to reveal the overlay Extra Menu(see JS below) */   
    height: 100%;
    width: 0;
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
	/* Change to white on 09/Mar/2019 */
    /*background-color: rgb(0,0,0);*/ /* Black fallback color */
    /*background-color: rgba(0,0,0, 0.9);*/ /* Black w/opacity */
    background-color: rgb(255,255,255); /* White fallback color */
    background-color: rgba(255,255,255, 0.9); /* White w/opacity */
    overflow-x: hidden; /* Disable horizontal scroll */
    transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay Extra Menu(height or width, depending on reveal) */
}


/* Position the content inside the overlay Extra Menu */
#dvExtraMenuContent {
    position: relative;
    top: 25%; /* 25% from the top */
    width: 100%; /* 100% width */
    text-align: center; /* Centered text/links */
    margin-top: 30px; /* 30px top margin to avoid conflict with the close button on smaller screens */
}


/* The navigation links inside the overlay Extra Menu */
#dvExtraMenu a {
    padding: 8px;
    text-decoration: none;
    font-size: 24px; /*36px;*/
    color: blue; /*#818181;*/
    display: block; /* Display block instead of inline */
    transition: 0.3s; /* Transition effects on hover (color) */
}


/* When you mouse over the navigation links, change their color */
#dvExtraMenu a:hover, #dvExtraMenu a:focus {
    color: red; /*#f1f1f1;*/
    background-color: lightgreen; /*Added on 11/Mar/2019*/
}


/* Position the close button (top right corner) */
#dvExtraMenu .closebtn {
    position: absolute;
    top: 20px;
    right: 45px;
    font-size: 36px; /*60px;*/
}


/* When the height of the screen is less than 450 pixels, change the font-size of the links and position the close button again, so they don't overlap */
@media screen and (max-height: 450px) {
    #dvExtraMenu a {font-size: 20px}
    #dvExtraMenu .closebtn {
        font-size: 36px; /*40px;*/
        top: 15px;
        right: 35px;
    }
}


/*
**************************************************
* =For general page.
* Added on 22/Apr/2019.
**************************************************
*/


* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; /* Note: With or without this seem not affecting the flexbox elements */
}

a:link {color:blue; background-color:transparent; text-decoration:none;}
a:visited {color:blue; background-color:transparent; text-decoration:none;}
a:hover {color:red; background-color:transparent; text-decoration:underline;}

.txt2Lt {text-align:left;}
.txt2Ct {text-align:center;}
.txt2Rt {text-align:right;}
.txt2Jt {text-align:justify;}

.txtUl {text-decoration: underline;} /* Added on 05/Oct/2021. */

.txt1 {
text-align: justify;
color: green; /* green is #008000 */
/* font-size: 2vw; Not use this, because for big screen 2vw will become too big, but for small screen, 2vw becomes too small. Tested 27/Jun/2019 */
/* NB1: Keep followings for ref. NB2: Default font size for p is 16px.
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
font-style: italic;
text-decoration: none;
line-height: 20px;
*/
}

.txt2 {
text-align: justify;
color: navy; /* navy is #000080 */
}

.hLTitle1 { /* hL = highLight */
text-align: center;
color: #ff0080; /* NB: #ff0080 has no name, magenta is #ff00ff */
text-decoration: underline;
}

.hLTitle2 {
text-align: center;
color: green;
}

.hLTitle3 { /* Use in h5_t1mysteriesOfLifeC.html on 27-28/03/2021, added here on 29/Apr/2021. */
text-align: center;
color: darkorange;
font-weight: bold;
text-decoration: underline;
}

.hLRef {
color: magenta; /* NB: magenta is #ff00ff */
font-weight: bold;
text-decoration: underline;
}

.hLMagenta {
color: magenta; /* NB: magenta is #ff00ff */
}

.hLDarkOrange {
color: darkorange; /* NB: darkorange is #ff8c00 */ /* Added on 07/Jul/2019, original using #ff8000 but no colour name. */
}

.hLNavy {
color: navy; /* navy is #000080 */
}

/* --- Basic 7 colours -------------------------------------- */
.hLRed {
color: red; /* red is #ff0000 */
}
.hLOrange {
color: orange; /* orange is #ffa500 */ /* Added on 27/Aug/2020. */
}
.hLYellow {
color: yellow; /* yellow is #ffff00 */ /* Added on 27/Aug/2020. */
}
.hLGreen {
color: green; /* green is #008000 */ /* Added on 27/Aug/2020. */
}
.hLBlue {
color: blue; /* blue is #0000ff */
}
.hLBrown {
color: brown; /* brown is #a52a2a */ /* Added on 27/Aug/2020. */
}
.hLPurple {
color: purple; /* purple is #800080 */ /* Added on 27/Aug/2020. */
}
/* --- Basic 7 colours -------------------------------------- */

.hLTeal {
color: teal; /* teal is #008080 */
}

.hLMediumPurple {
color: mediumpurple ; /* mediumpurple is #9370db, purple is #800080, original using #8000ff but no colour name. */
}

/* ------------- Added on 07/Sep/2024 */
.hLBgLightYellow {background-color: lightyellow;} /* need not do yellow as the html < mark >< /mark > command will heightlight background-color to yellow. */
.hLBgLightBlue {background-color: lightblue;}
.hLBgLightGreen {background-color: lightgreen;}
.hLBgLightGrey {background-color: lightgrey;}
.hLBgWhite {background-color: white;}
.hLBgMagenta {background-color: magenta;}
.hLBgCyan {background-color: cyan;}
.hLBgLightCyan {background-color: lightcyan;}

/* Added following on 27/Jun/2019, 28/Jun/2019. */
/* For list of reference notes. */
/* Can keep this as in-page style for stand alone usage. Genereally keep in stzGenCss.css */
/* Ref: t2BilingualPolicySporeConstitutionNew.html */
ul.listOfRef {
  list-style-type: none; /* Tested and added on 27/Jun/2019, 28/Jun/2019. */
  margin: 0;
  padding: 0;
  /*overflow: hidden; KIV on 12-14/Aug/2020, use overflow-x below.*/
  overflow-x:auto; /* 12-14/Aug/2020: Added this to provide one overflow-x scroll bar for entire (ul) if any (li) within it overflowed. */
}

/* Added and use the following css style for general Table on 06-09/Sep/2019. 10/Sep/2019. */
/* Can keep this as in-page style for stand alone usage. Genereally keep in stzGenCss.css */
/* Ref: t2SpeakMandarinCampaign40Years.html */
/* ------------------------------------------------------------------------------------------------------------------------------------ */
/* Responsive Table */
/* A responsive table will display a horizontal scroll bar if the screen is too small to display the full content. */
/* Add a container element (like <div>) with overflow-x:auto around the <table> element to make it responsive. */
/* Ref: https://www.w3schools.com/css/css_table.asp */
/* NB1: For all tables used, we must add a div-container element <div style="overflow-x:auto;"> to handle table over flow, else it may affect the proper functioning of javascript menu on mobile phone OS.
/* NB2: We will set <div style="overflow-x:auto;"> => can scroll to see the over-flow content, or <div style="overflow-x:hidden;"> to hide the content.
/* NB3: As all tables will need to enclose in div-container & to cater for possible stand alone usage, the css-style of <div style="overflow-x:auto;"> */
/*      will be coded in-line. Thus we need not create a css style, such as a class, says, table.divOverFlow {overflow-x:auto;} here. */
/* ------------------------------------------------------------------------------------------------------------------------------------ */
table {
  width: 100%;
  text-align: justify;
}

table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}

th, td {
  padding: 5px;
  text-align: center;
}

table.useTbColor01 th { /* Use Table Color 01 */
  background-color: lightgreen;
  color: white;
}

table.useTbColor01 tr:nth-child(odd) {
  background-color: lightyellow;
}

table.useTbColor01 tr:nth-child(even) {
  background-color: white;
}


/*
**************************************************
* =homePg
* Added on 02/May/2019.
Ref1: Edited from stzHtml5_home_7.html
Ref2: LearnHtmlCssIn30day_eg4D.html
NB1: Provide class="homePg" to body-tag of stzHtml5_home.html so that CSS styling can be specific when same tag/class/id names in different pages are to be styled differently.
NB2: For common style settings, we need not specify .homePg infront, for eg, a:hover {...}, else, we may need to do .homePg a:hover {...}, etc.
NB3: So far, for use in stzHtml5_home.html only.
**************************************************
*/

/* Added on 10/Apr/2019 for 3 column, => flex-ctner can have many div within it, but it will group every 3 div into 3 column, each div or column = max-width 33.33%. */
.homePg .flex-ctner {
  display: flex;
  background-colorxxx: DodgerBlue;
  clear:both; /* Added 10/Apr/2019*/
}

/* Added on 10/Apr/2019 for 3 column, => flex-ctner can have many div within it, but it will group every 3 div into 3 column, each div or column = max-width 33.33%. */
.homePg .flex-ctner > div {
  background-color: #f1f1f1;
  margin: 3px; /* 10px; Changed on 07/Jul/2019 */
  padding: 5px; /* 20px; Changed on 07/Jul/2019 */
  max-width: 33.33%; /* => flex-ctner will group every 3 div into 3 column, each div or column = max-width 33.33%. */
}

/* Added on 10/Jul/2019 for 2 column, => flex-ctner-2Col can have many div within it, but it will group every 2 div into 2 column, each div or column = max-width 50%. */
.homePg .flex-ctner-2Col {
  display: flex;
  background-colorxxx: DodgerBlue;
  clear:both; /* Added 10/Apr/2019*/
}

/* Added on 10/Jul/2019 for 2 column, => flex-ctner-2Col can have many div within it, but it will group every 2 div into 2 column, each div or column = max-width 50%. */
.homePg .flex-ctner-2Col > div {
  background-color: #f1f1f1;
  margin: 3px; /* 10px; Changed on 07/Jul/2019 */
  padding: 5px; /* 20px; Changed on 07/Jul/2019 */
  max-width: 50%; /* => flex-ctner-2Col will group every 2 div into 2 column, each div or column = max-width 50%. */
}

/* Change 768px to 576px 0n 10/Jul/2019. Ref: A simple reference to Bootstrap 4 Grid System.html */
@media only screen and (max-width: 576px) { /* For mobile phones: */
  .homePg .flex-ctner, .homePg .flex-ctner-2Col { /* Added (.homePg .flex-ctner-2Col) on 10/Jul/2019 for 2 column. */
    flex-direction: column;
  }

  .homePg .flex-ctner, .homePg .flex-ctner-2Col > div { /* Added (.homePg .flex-ctner-2Col) on 10/Jul/2019 for 2 column. */
    max-width: 100%;
  }
}

/* .homePg .width33 {float:left;max-width:33.33%;padding:5px;} */ /* Added 10-11/Apr/2019*/ /* KIV on 16/Aug/2020, use width:33.33% not max-width:33.33% below. */
.homePg .width33 {float:left;width:33.33%;padding:5px;} /* Changed (max-width:33.33%) to (width:33.33%) on 16/Aug/2020 => the 3-columns will fix, not flexible, at 33.33%. */
.homePg .width50 {float:left;max-width:50%;padding:5px;} /* Added on 10/Jul/2019 for 2 column, => max-width for each column = 50%. */


/* Added on 27/Apr/2021 for one column, => flex-ctner-oneCol can have many div within it, but it will group every 1 div into 1 column, each div or column = max-width 100%. */
.homePg .flex-ctner-oneCol {
  display: flex;
  background-colorxxx: DodgerBlue;
  clear:both; /* Added 10/Apr/2019*/
  flex-direction: column;
}

/* Added on 27/Apr/2021 for one column, => flex-ctner-oneCol can have many div within it, but it will group every 1 div into 1 column, each div or column = max-width 100%. */
.homePg .flex-ctner-oneCol > div {
  background-color: #f1f1f1;
  margin: 3px; /* 10px; Changed on 07/Jul/2019 */
  padding: 5px; /* 20px; Changed on 07/Jul/2019 */
  max-width: 100%; /* => flex-ctner-oneCol group every 1 div into 1 column, each div or column = max-width 100%. */
}