body.simple-bkgd {
    background-color:#ffffff; }

div.MainCtn {position:relative; top:0px; left:0px; width:100%; height:auto; display:flex;flex-wrap:wrap; }
div.ban-PCcnt {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  display: block;
}
div.ban-MPcnt {position:relative; top:0, left:0; width:100%; display: none;}
img.ban-size  {width:95%; height:auto; border-radius:22px; }

/* Shared text box styles (text always visible) */
div.publicity, div.expansion-2025, div.SDC-edge, div.show-color {
  position: absolute; z-index: 2; 
  font-family: "Arial", "Helvetica", "sans-serif"; }
div.publicity, div.expansion-2025, div.SDC-edge {
  transition: background-color 0.8s ease; 
  padding: 10px 1.5%; border-radius: 16px; }
  /* only animate bg */

/* PC setting  My Desktop ViewPoint 1366 x 768px thus 1vw=13.66px PC setting  PC setting  PC setting  */
div.publicity {
  top: 1.1vw; left: 21vw; width:auto; font-size: 2.05vw; color:blue; font-weight: normal ; font-style:italic; 
  line-height: 1.2;  background-color: rgba(255, 255, 255, 0.8); text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7); }
div.expansion-2025 {
  top:7.32vw ; left: 39%; width:auto; font-size: 1.9vw; color:white; font-weight: normal; font-style:italic; 
  line-height: 1.2;  background-color: rgba(255, 255, 255, 0.7); text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7); }
div.SDC-edge {
  top:13.9vw; left:39%; width:auto; font-size: 1.46vw; color: white; line-height: 1.3; font-weight: normal; 
  background-color: rgba(255, 255, 255, 0.2); text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7); }
div.show-color {
	top:25.6vw; left:82%; width:auto; height:auto ; padding-top:0 ; padding-bottom:0; }

/* Hover the banner: only the background fades in */
div.ban-PCcnt:hover div.publicity  {
  font-size: 2.2vw; color: white ; background-color: rgba(255, 255, 255, 0.8); font-weight:bold; font-style:italic;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  backdrop-filter: blur(4px);  }
div.ban-PCcnt:hover div.expansion-2025  {
  font-size: 2.05vw; color: blue ; background-color: rgba(255, 255, 255, 0.5); font-weight:bold; font-style:italic; 
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  backdrop-filter: blur(4px);  }
div.ban-PCcnt:hover div.SDC-edge  {
  color: #303030 ; background-color: rgba(255, 255, 255, 0.3); 
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  backdrop-filter: blur(4px);  }
a.inqa {background-color:#f00000 ; padding:5px 8px; border-radius: 5px; transition: background-color 0.8s ease; 
        font-size:1.17vw;color:#ffffff; font-weight:normal; text-decoration:underline; font-family: "Arial", "Helvetica", "sans-serif"; }
a.inqa:active, visited {color:#ffffff;}
a.inqa:hover {color:#000000; text-decoration:none;  font-weight:bold; }

a.inqb {font-size:1.17vw; color:#ffffff; background-color:#0000f0 ; 
        padding-left:5px; padding-top:5px; padding-right:5px; padding-bottom:5px;
        font-weight:normal; text-decoration:underline; font-family: "Arial", "Helvetica", "sans-serif"; }
a.inqb:active {color:#ffffff;}
a.inqb:visited {color:#ffffff;}
a.inqb:hover {color:#000000; text-decoration:none;  font-weight:bold; }

div.Color {position:relative; top:0; left:0; width:100%; height:auto; padding-top:0; padding-bottom:20px;  display:flex;flex-wrap:wrap; 
           font-size:1.9vw; color:#d82828 ; font-weight:bold; font-style:italic; font-family: "Arial", "Helvetica", "sans-serif"; }

#smple 		{ scroll-margin-top: 120px; }
#granite-vn { scroll-margin-top: 100px; /* Suggested value: Adjust as needed */ }

div.CntFty, div.Cnt2w, div.Cnt1w 	{height:auto; padding-top:0; padding-bottom: 30px; font-size:26px; color:#d82828; 
									font-weight:bold; font-style:italic; font-family: "Arial", "Helvetica", "sans-serif"; }
div.CntFty {margin-top:2.2vw; width:100%; }
div.Cnt2w {width:66.66%; }
div.Cnt1w {width:33.33%; }

img.SDC {width:95%; height:auto; border-radius:18px; }
img.gs {width:98%; height:auto; border-radius:10px; }

div.gc1, div.gc2, div.gc3, div.gc4, div.gc5, div.gc6, div.gc7, div.gc8, div.gc9, div.gca, div.gcb, div.gcc 
			{width:25%; height:auto; margin:0; padding:0; font-size:1.61vw; font-weight:bold; color:#303030; 
			font-family: "Arial", "Helvetica", "sans-serif";}

a.D:link {text-decoration:none;font-size:1.17vw;color:#303030;font-family:"arial";font-weight:bold;}
a.D:active {color:#303030;}
a.D:visited {text-decoration:none; color:#303030;}
a.D:hover{text-decoration:underline; color:#c0c0c0;}

a.E:link {text-decoration:none;font-size:1.025vw;color:#202020;font-family:"arial";font-weight:bold;}
a.E:active {color:#202020;}
a.E:visited {text-decoration:none; color:#202020;font-weight:normal;}
a.E:hover{text-decoration:underline; color:#c0c0c0;}

a.P:link {text-decoration:none;font-size:1.5vw; color:#f00000;font-family:"arial";font-weight:bold;}
a.P:active {color:#f00000;}
a.P:visited {text-decoration:none; color:#f00000;font-weight:normal;}
a.P:hover{text-decoration:underline; color:#000000;}

div.foot {width:100%;height:auto; 
          text-decoration:none;font-size:18px;color:#303030;font-family:"arial""Helvetica", "sans-serif";font-weight:normal;}





/* MOBILE display  MOBILE display  MOBILE display  MOBILE display  MOBILE display  MOBILE display  MOBILE display  */
@media only screen and (max-width: 580px) {
body.simple-bkgd {
    background-color:#ffffff; }
div.MainCtn {position:relative; top:0px; left:0px; width:100%; height:auto; display:flex;flex-wrap:wrap; }
div.ban-PCcnt {position:relative; top:0, left:0; width:100%; display: none; }
div.ban-MPcnt {position:relative; top:0, left:0; width:100%; height:auto; margin:0; padding:0; display: block; }
img.ban-size  {width:98%; height:auto; border-radius:20px; }

/* MOBILE display  MOBILE Viewpoint 720 x 1600px 1vw=7.2px 1vh=16px   MOBILE display  MOBILE display  */
div.publicity, div.Bally, div.expansion-2025, div.SDC-edge, div.show-color {
  position: absolute; z-index: 2; border-radius: 5px;   
  font-family: "Arial", "Helvetica", "sans-serif"; 
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
  transition: background-color 0.8s ease; }
div.publicity, div.expansion-2025, div.SDC-edge {
  padding: 3px 6px; }
div.publicity {
  top: 1.11vw; left:12%; width:auto; font-size: 3.48vw; line-height: 1.2; color: red; font-weight: bold;
  background-color: rgba(255, 255, 255, 0.7); }
div.expansion-2025 {
	top: 10.5vw; left: 12%; width:auto; font-size: 3.48vw; line-height: 1.2; color: white; font-weight: bold;
	background-color: rgba(255, 255, 255, 0.7); }
div.SDC-edge {
	top:20.0vw; left: 12%; width:auto; font-size: 2.75vw; line-height: 1.3; color:#303030 ; font-weight:normal ;
	background-color: rgba(255, 255, 255, 0.7); }
div.ban-MPcnt:active div.publicity {
  left:6%; font-size: 4.21vw; color: white ; background-color: rgba(255, 255, 255, 0); }
div.ban-MPcnt:active div.expansion-2025 {
  left:6%; font-size: 4.21vw; color: red ; background-color: rgba(255, 255, 255, 0.5); }
div.ban-MPcnt:active div.SDC-edge {
  left:6%; font-size:3.33vw; color: black ; background-color: rgba(255, 255, 255, 0.9); }
div.show-color {top:61.0vw; left:68%; width:auto; height:auto ; padding:0; margin:0;  }
a.inqa {font-size:2.7vw;color:#ffffff; background-color:#f00000 ; border-radius: 4px; 
        padding :2px 4px; font-weight:normal; text-decoration:underline; 
		font-family: "Arial", "Helvetica", "sans-serif";}
a.inqa:active {color:#ffffff}
a.inqa:visited {color:#ffffff}
a.inqa:hover,focus {color:#000000 }
/* MOBILE display  MOBILE display  MOBILE display  MOBILE display  MOBILE display  MOBILE display  MOBILE display  */

div.Color {position:relative; margin:0; top:0; left:0; width:100%; height: auto; margin:0; padding:0; display:flex; flex-wrap:wrap; 
           font-size:1.11vw;color:#d82828;font-weight:bold;font-style:italic;font-family: "Arial", "Helvetica", "sans-serif";}

#smple { scroll-margin-top: 70px; }

a.inqb {font-size:9px;color:#ffffff; background-color:#0000f0 ;
        padding-left:2px; padding-top:1px; padding-right:2px; padding-bottom:1px;
        font-weight:normal; text-decoration:underline; font-family: "Arial", "Helvetica", "sans-serif";}
a.inqb:active {color:#ffffff}
a.inqb:visited {color:#ffffff}
a.inqb:hover,focus {color:#000000 }

#granite-vn { scroll-margin-top: 70px; }

div.CntFty, div.Cnt2w, div.Cnt1w	{height:auto; top:10px; left:0; padding:0; margin: 0; font-size:12px; color:#d82828; font-weight:bold; 
									font-style:italic; font-family: "Arial", "Helvetica", "sans-serif"; }
div.CntFty, div.Cnt2w	{width:100%; }
div.Cnt1w				{width:50%; }

img.SDC {width:98%; height:auto; border:0; border-radius:12px; }
img.gs {width:98%; height:auto; border:0; border-radius:3px; }

div.gc1, div.gc2, div.gc3, div.gc4, div.gc5, div.gc6, div.gc7, div.gc8, div.gc9, div.gca, div.gcb, div.gcc 
		{width:33%; height:auto;  margin:0; padding:0; font-size:12px; font-weight:bold; color:#303030; 
          font-family: "Arial", "Helvetica", "sans-serif";}

a.D:link {font-size:2vw; text-decoration:none; font-weight:bold; color:#303030; 
          font-family: "Arial", "Helvetica", "sans-serif";}
a.D:active {color:#303030; font-weight:normal;}
a.D:visited {color:#303030; text-decoration:none; font-weight:bold; }
a.D:hover{text-decoration:underline; color:#808080;}

a.E:link {text-decoration:none;font-size:1.62vw;color:#000000;
		  font-family:"arial";font-weight:bold; font-family: "Arial", "Helvetica", "sans-serif";}
a.E:active {color:#000000; }
a.E:visited {text-decoration:none; color:#000000;;}
a.E:hover{text-decoration:underline; color:#808080; }

a.P:link {text-decoration:none;font-size:2vw;color:#f00000; font-weight:bold; font-family: "Arial", "Helvetica", "sans-serif";}
a.P:active {color:#f00000;}
a.P:visited {text-decoration:none; color:#f00000;font-weight:normal;}
a.P:hover{text-decoration:underline; color:#000000; font-weight:bold; }


