html, body {
bgcolor:#ffffff; margin: 0;
padding: 0;
box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: inherit;
}
/* PC display PC display PC display PC display PC display PC display PC display PC display */
div.MainCtn {position:relative; top:0; left:0px; width:100%; height:auto; display:flex; flex-wrap:wrap; }
div.ban-PCcnt {position: relative; display: block; top: 7.5vw; left: 0; margin:0 ; width: 100%; }
div.ban-MPcnt {position:relative; display: none; top:0, left:0; width:100%; }
img.ban-size {width:97%; height:auto; border-radius:22px; }
/* Shared text box styles (text always visible) */
div.publicity, div.Bally, div.expansion-2025, div.bally-edge {
position: absolute; z-index: 2; }
/* Background starts transparent; text remains visible */
div.publicity, div.expansion-2025, div.bally-edge {
padding: 12px 1.5%; border-radius: 18px;
font-family: "Arial", "Helvetica", "sans-serif";
transition: background-color 1.2s ease; }
/* only animate bg */
/* PC setting Ref: My Viewpoint: 1366 x 768px, 1vw=13.66 px, PC setting PC setting PC setting */
div.publicity {
top: 1.1vw; left: 39%; width:auto; font-size: 1.76vw; color: yellow; font-weight: bold;
line-height: 1.2; background-color: rgba(255, 255, 255, 0.3); text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7); }
div.expansion-2025 {
top: 9.52vw; left: 39%; width:auto; font-size: 1.76vw; color:yellow; font-weight: bold;
line-height: 1.2; background-color: rgba(255, 255, 255, 0.3); text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7); }
/* PC setting PC setting PC setting PC setting PC setting */
div.bally-edge {
top: 15.13vw; left:38.5%; width: 45%; font-size: 1.32vw; color: white; line-height: 1.3; font-weight: normal;
background-color: rgba(255, 255, 255, 0); text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7); }
/* Hover the banner: only the background fades in */
div.ban-PCcnt:hover div.publicity {
font-size: 26px; color: white ; background-color: rgba(255, 255, 255, 0.5);
/* Optional: add a subtle pop */
box-shadow: 0 8px 24px rgba(0,0,0,0.15);
backdrop-filter: blur(4px); }
div.ban-PCcnt:hover div.expansion-2025 {
font-size: 26px; color: white ; background-color: rgba(255, 255, 255, 0.5); font-weight:bold;
/* Optional: add a subtle pop */
box-shadow: 0 8px 24px rgba(0,0,0,0.15);
backdrop-filter: blur(4px); }
div.ban-PCcnt:hover div.bally-edge {
color: #303030 ; background-color: rgba(255, 255, 255, 0.2);
/* Optional: add a subtle pop */
box-shadow: 0 8px 24px rgba(0,0,0,0.15);
backdrop-filter: blur(4px); }
div#Bally-reg {position:relative; top: 0; width:auto; margin-top:20px; margin-bottom:50px; margin-left:30%; margin-right:20%; height:auto;
padding: 15px 1.5%; font-size:1.8vw; color: #0000ff; font-weight:normal; font-style:standard; text-decoration:none;
font-family: "Arial", "Helvetica", "sans-serif"; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); background-color: #f3f3f0;
box-shadow: 0 8px 24px rgba(0,0,0,0.7); backdrop-filter: blur(4px); border-radius:30px; }
/* PC setting PC setting PC setting PC setting PC setting */
div.Certs-Cnt {position:relative; display:flex; flex-wrap:wrap; top:0; margin-top:30px; left:0; width:100%; height:auto;
padding-top:2.20vw; padding-left:3vw; padding-right:3vw; padding-bottom:2.22vw; border-raduius:15px;
background-color:#e8e8e8; border-radius:10px; }
div.cert1, div.cert2, div.cert3, div.certGr {width:10.5vw; height:auto; padding-left:3vw; padding-right:0; }
div.cert1, div.cert2, div.cert3 {padding-top:13px; padding-bottom:13px; }
div.certGr {padding-top:10px; padding-bottom:13px; }
img.cert-w {width:53%; height:auto; border:0 ; }
div.Bally-gallery {width:24vw; height:auto; padding-top:5px ; padding-left:8vw; padding-right:0; padding-bottom:10px; line-height: 1.5; }
a.Bally-qz:link, a.Bally-qz:visited
{font-size:17px; color:#0000e0; font-weight:normal; font-style:standard; text-decoration:none ; padding: 0.5vw 0.5vw;
background-color:#c0c0c0; font-family: "Arial", "Helvetica", "sans-serif"; text-shadow: 2px 2px 5px rgba(0, 0, 0, 0);
line-height:2.5 ; border-radius:10px; }
a.Bally-qz:active, a.Bally-qz:hover
{font-size:17px; color:white; text-decoration:underline; background-color:#8080ff ; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);}
/* PC display PC display PC display PC display PC display PC display PC display PC display */
/* PC display PC display PC display PC display PC display PC display PC display PC display */
#Bally-reg, #bally-intro, #bally-basic, #bally-carrara, #bally-calacatta {scroll-margin-top: 110px; }
div.Quartz {position:relative; top:0; left:0px; width:100%; height:auto; display:flex;flex-wrap:wrap; }
div.Intro-txt, div.Intro-pic
{width:25%; margin-top:50px; }
div.Intro-txt {padding-top:20px; padding-bottom:0 ; padding-left:10px; padding-right:10px; font-size:16px;color:#303030;
font-weight:bold;font-style:italic; font-family: "Arial", "Helvetica", "sans-serif"; line-height: 1.5; }
div.Intro-pic {width:25%; padding-left:10px; padding-right:10px; padding-top:0; padding-bottom:30px; }
img.intro-size {width:100%; height:auto; border:0; border-radius:20px; }
div.Bally-Fty-L, div.Bally-Fty-R
{width:50%; padding-top:50px; padding-bottom:30px; font-size:22px;color:#303030; font-weight:bold;
font-style:italic; font-family: "Arial", "Helvetica", "sans-serif"; }
div.Bally-Fty-L {padding-left:30px; padding-right:10px; }
div.Bally-Fty-R {padding-left:10px; padding-right:30px; }
div.size-available {
position: absolute;
top : 240px; /* adjust vertical position */
left: 75%;
transform: translateX(-50%);
background: rgba(255, 255, 255, 0.5);
font-size: clamp(8px, 1.25vw, 24px);
color: #303030;
font-weight:bold;
padding: 4px 6px;
text-align: center;
font-family: "Arial", "Helvetica", sans-serif;
line-height: 1.2;
pointer-events: none; /* lets clicks go through to the image */
border-radius: 6px;
}
div.Bally-Quartz-L, div.Bally-Quartz-R {width:50%; padding-top:30px; padding-bottom:30px; font-size:22px;color:#303030; font-weight:bold;
font-style:italic; font-family: "Arial", "Helvetica", "sans-serif"; }
div.Bally-Quartz-L {padding-left:30px; padding-right:10px; }
div.Bally-Quartz-R {padding-left:10px; padding-right:30px; }
img.sep {width:100%; height:auto; border:0; border-radius:18px; }
/* PC display PC display PC display PC display PC display PC display PC display PC display */
/* PC display PC display PC display PC display PC display PC display PC display PC display */
a.B:link {text-decoration:none;font-size:20px;color:#303030;font-family="arial";font-weight:bold;}
a.B:active {color:#806060;}
a.B:visited {text-decoration:none;color:#303030;font-weight:bold;}
a.B:hover {text-decoration:underline;color:#303030;font-weight:bold;}
a.inqa {text-decoration:underline; font-size:20px;color:#0000c0;font-weight:bold; font-family: "Arial", "Helvetica", "sans-serif";}
a.inqa:active {color:#0000c0;}
a.inqa:visited {color:#0000c0;}
a.inqa:hover{color:#0000f0; }
div.Lft {width:42.5%; padding-left:0.5%; height:auto ;}
div.Rgt {width:57.5%; padding-right:1%; height:auto ;}
/* PC display PC display PC display PC display PC display PC display PC display PC display */
/* PC display PC display PC display PC display PC display PC display PC display PC display */
img.detail {position:relative; width:100%; height:auto; border:0; }
img.slab {position:relative; width:100%; height:auto; border:0; border-radius:20px; }
div.Prom {width:100%; height:auto; padding-top:50px; padding-bottom:10px; padding-left:7.5%; padding-right:7.5%;
font-size:22px;color:#606060;font-weight:normal; font-style:standard ; font-family: "Arial", "Helvetica", "sans-serif"; }
font.ProB {font-size:20px;color:#606060;font-weight:bold; font-style:standard ; font-family: "Arial", "Helvetica", "sans-serif"; }
/* ============== PC display ============== PC display ============== PC display ============== C display ============== */
/* PC display PC display PC display PC display PC display PC display PC display PC display */
/* ============== MOBILE display ============== MOBILE display ============== MOBILE display ============== */
/* MOBILE display MOBILE display MOBILE display MOBILE display MOBILE display MOBILE display MOBILE display */
@media only screen and (max-width: 768px) {
body {background-color:#ffffff; }
div.MainCtn {position:relative; top:0; left:0; 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:16.5vw; left:0; width:100%; height:auto; margin:0; padding:0; display: block; }
img.ban-size {width:98%; height:auto; border-radius:1.2vw; }
/* Shared text box styles (text always visible) */
div.publicity,
div.Bally,
div.expansion-2025,
div.bally-edge {
position: absolute; z-index: 2; border-radius: 7px; }
/* MOBILE display MOBILE display MOBILE display MOBILE display MOBILE display MOBILE display MOBILE display */
div.publicity, div.expansion-2025, div.bally-edge {
padding: 3px 8px;
font-family: "Arial", "Helvetica", "sans-serif";
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
/* Background starts transparent; text remains visible */
transition: background-color 0.8s ease; /* only animate bg */
}
div.publicity {
top: 8px; left: 37%; padding: 5px 7px; width:auto; font-size: 12px; line-height: 1.2; color:#fff800; font-weight: bold;
background-color: rgba(255, 255, 255, 0.8); }
div.Bally {
top: 8px; left: 75%; width:20%; padding: 5px 7px; height:auto; background-color: rgba(255, 255, 255, 0.7); }
img.BaLogo {width:100%; height:auto; }
div.expansion-2025 {
top: 75px; left: 37%; padding: 5px 7px; width:auto; font-size: 14px; line-height: 1.2; color:#fff800; font-weight: bold;
background-color: rgba(255, 255, 255, 0.7); }
div.bally-edge {top: 145px; left: 37%; width: 51%; font-size: 11px; line-height: 1.2; color: white ; font-weight: bold;
background-color: rgba(255, 255, 255, 0.3); }
/* MOBILE display MOBILE display MOBILE display MOBILE display MOBILE display MOBILE display MOBILE display */
/* Hover the banner: only the background fades in */
div.ban-MPcnt:active div.publicity {
font-size: 14px; color: white ; background-color: rgba(255, 255, 255, 0); }
div.ban-MPcnt:active div.expansion-2025 {
font-size: 16px; color: white ; background-color: rgba(255, 255, 255, 0.5); }
div.ban-MPcnt:active div.bally-edge {
color: #303030 ; background-color: rgba(255, 255, 255, 0.7); }
/* MOBILE display MOBILE display MOBILE display MOBILE display MOBILE display MOBILE display MOBILE display */
div#Bally-reg
{position:relative; width:auto; height:auto; top:10; margin-top:0; margin-bottom:0; margin-left:20vw; margin-right:20vw;
padding:5px 8px; font-size:13px; color:#0000f0; font-weight:normal;
font-style:standard;
text-decoration:none; font-family: "Arial", "Helvetica", "sans-serif"; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
background-color: rgba(255, 255, 255, 0.5); box-shadow: 0 8px 24px rgba(0,0,0,0.3); line-height:1.5; border-radius:8px; }
div.Certs-Cnt {position:relative; display:flex; flex-wrap:wrap; top:0; left:0; width:100%; height:auto;
padding-top:20px; padding-left:0; padding-right:0; padding-bottom:20px; }
div.cert1, div.cert2, div.cert3, div.certGr
{width:25%; height:auto; padding-left:0; padding-right:0; }
div.cert1, div.cert2, div.cert3
{padding-top:3px; padding-bottom:3px; }
div.certGr {padding-top:0; padding-bottom:0; }
img.cert-w {width:45%; height:auto; border:0 ; }
div.Bally-gallery {width:50%; height:auto; padding-top:25px ; padding-left:15vw; padding-right:0; padding-bottom:5px; line-height: 2.0; }
a.Bally-qz:link {font-size:13px; color:#0000f0; font-weight:bold; font-style:standard; text-decoration:underline;
font-family: "Arial", "Helvetica", "sans-serif"; text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7); }
a.Bally-qz:active {font-size:15px; color:#0000ff;text-decoration:none; }
a.Bally-qz:visited {font-size:13px; color:#0000f0; text-decoration:underline; }
a.Bally-qz:hover {font-size:15px; color:#0000ff; text-decoration:none; }
a.bally-class:link {font-size:13px; color:#0000f0; font-weight:bold; font-style:standard; text-decoration:underline;
font-family: "Arial", "Helvetica", "sans-serif"; text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);}
a.bally-class:active {font-size:15px; color:#0000ff;text-decoration:none; }
a.bally-class:visited {font-size:13px; color:#0000f0; text-decoration:underline; }
a.bally-class:hover {font-size:15px; color:#0000ff; text-decoration:none; }
/* MOBILE display MOBILE display MOBILE display MOBILE display MOBILE display MOBILE display MOBILE display */
/* MOBILE display MOBILE display MOBILE display MOBILE display MOBILE display MOBILE display MOBILE display */
#Bally-reg, #bally-intro, #bally-basic, #bally-carrara, #bally-calacatta {scroll-margin-top: 100px; }
div.Quartz {position:relative;top:0; left:0; width:100%; height:auto; display:flex;flex-wrap:wrap;}
div.Bally-Fty-L {width:100%; padding-top:10px; padding-bottom:10px; padding-left:2%; padding-right:1%;
font-size:15px; color:#303030;font-weight:bold; font-style:italic; font-family: "Arial", "Helvetica", "sans-serif"; line-height: 1.2; }
div.Bally-Fty-R {width:100%; padding-top:10px; padding-bottom:10px; padding-left:1%; padding-right:2%;
font-size:15px; color:#303030;font-weight:bold; font-style:italic; font-family: "Arial", "Helvetica", "sans-serif"; line-height: 1.2; }
div.size-available {position: absolute; z-index: 2; top:360px; left:50vw; width:auto; height:auto; padding: 6px 8px; border-radius:8px;
height:auto; background-color: rgba(255, 255, 255, 0.7); font-size:12px; color:#202020; font-weight:bold;
font-style:standard; font-family: "Arial", "Helvetica", "sans-serif"; line-height: 1.1; }
div.Intro-txt {width:50%; margin-top:20px; margin-bottom:0; margin-left:0; margin-right:0;
padding-top:20px; padding-bottom:20px; padding-left:3%; padding-right:3%; font-size:10px;
color:#303030;font-weight:bold;font-style:italic; font-family: "Arial", "Helvetica", "sans-serif"; line-height: 1.2; }
div.Intro-pic {width:50%; margin-top:20px; margin-bottom:0; padding-top:0; padding-bottom:20px; padding-left:2%; padding-right:3%; }
div.Bally-Quartz-L {width:100%; padding-top:10px; padding-bottom:10px; padding-left:2%; padding-right:1%;
font-size:15px; color:#303030;font-weight:bold; font-style:italic; font-family: "Arial", "Helvetica", "sans-serif"; line-height: 1.2; }
div.Bally-Quartz-R {width:100%; padding-top:10px; padding-bottom:10px; padding-left:1%; padding-right:2%; font-size:15px;
color:#303030;font-weight:bold; font-style:italic; font-family: "Arial", "Helvetica", "sans-serif"; line-height: 1.2; }
img.sep {width:95%; height:auto; border-radius:8px;}
a.inqa {font-size:8px;color:#0000c0;font-weight:bold;text-decoration:underline; font-family: "Arial", "Helvetica", "sans-serif";}
a.inqa:hover {color:#0000f0; }
div.Lft {width:42.5%; padding-left:0.5%; height:auto ; }
div.Rgt {width:57.5%; padding-right:1%; height:auto ; }
a.B:link {text-decoration:none;font-size:10px;color:#606060; font-weight:bold; font-family: "Arial", "Helvetica", "sans-serif";}
a.B:active {color:#806060;}
a.B:visited {text-decoration:none;color:#606060;font-weight:bold;}
a.B:hover{text-decoration:underline;color:#606060;font-weight:bold;}
/* MOBILE display MOBILE display MOBILE display MOBILE display MOBILE display MOBILE display MOBILE display */
/* MOBILE display MOBILE display MOBILE display MOBILE display MOBILE display MOBILE display MOBILE display */
div.Prom {width:100%; height:auto; padding-top:3%; padding-bottom:0.5%; font-size:9px; color:#606060;font-weight:normal;
font-style:normal; font-family: "Arial", "Helvetica", "sans-serif"; line-height:1.2; }
font.ProB {font-size:10px; color:#606060;font-weight:bold;
font-style:normal; font-family: "Arial", "Helvetica", "sans-serif"; line-height:1.2; }
}
/* MOBILE display MOBILE display MOBILE display MOBILE display MOBILE display MOBILE display MOBILE display */
/* MOBILE display MOBILE display MOBILE display MOBILE display MOBILE display MOBILE display MOBILE display */