#body {background-color: yellow;font-family:"Impact, Charcoal, sans-serif";}


h1 { margin-left: 5px; font-size: 58px; text-align:center; color:white; font-family: Tahoma, Verdana, sans-serif;}
h3 { margin-left: 5px; font-size: 18px;}
h4 { margin-left: 5px; font-size: 38px; text-align:center; color:white; font-family: Tahoma, Verdana, sans-serif;}
h  {font-family: "Trebuchet MS", Helvetica, sans-serif; color:#1B4D66; font-size: 40px;text-align: justify;}
p  {font-size: 20px; font-family: "arial";text-align: justify;}

#container {background: white;}


#header {background-image:url('image/.png');font-family:"Impact, Charcoal, sans-serif"; 
padding: 0px 0px; position: relative; text-align: right; background-size: cover;  position: relative;  height: 50%;  background-position: center;}
#bottom-left {position: absolute; bottom: 8px; left: 16px;}
#top-left {position: absolute; top: 8px; left: 16%;}
#top-right {position: absolute; top: 8px; right: 16px;}
#bottom-right {position: absolute;bottom: 8px; right: 16px;}
#centered {position: absolute; top: 50%; left: 30%;transform: translate(-50%, -50%);}

#header1 {background-image:url('image/HK view.jpg');font-family:"Impact, Charcoal, sans-serif"; 
padding: 0px 0px; position: relative; text-align: right; background-size: cover;  position: relative;  height: 50%;  background-position: center;}
#bottom-left {position: absolute; bottom: 8px; left: 16px;}
#top-left {position: absolute; top: 8px; left: 16%;}
#top-right {position: absolute; top: 8px; right: 16px;}
#bottom-right {position: absolute;bottom: 8px; right: 16px;}
#centered {position: absolute; top: 50%; left: 30%;transform: translate(-50%, -50%);}

#header2 {background-image:url('image/inventory.jpg');font-family:"Impact, Charcoal, sans-serif"; 
padding: 0px 5px; position: relative; text-align: right; background-size: cover;  position: relative;  height: 50%;  background-position: center;}
#bottom-left {position: absolute; bottom: 8px; left: 16px;}
#top-left {position: absolute; top: 8px; left: 16%;}
#top-right {position: absolute; top: 8px; right: 16px;}
#bottom-right {position: absolute;bottom: 8px; right: 16px;}
#centered {position: absolute; top: 50%; left: 30%;transform: translate(-50%, -50%);}

#header3 {background-image:url('image/th (1).jpg');font-family:"Impact, Charcoal, sans-serif"; 
padding: 0px 5px; position: relative; text-align: right; background-size: cover;  position: relative;  height: 50%;  background-position: center;}
#bottom-left {position: absolute; bottom: 8px; left: 16px;}
#top-left {position: absolute; top: 8px; left: 17%;}
#top-right {position: absolute; top: 8px; right: 16px;}
#bottom-right {position: absolute;bottom: 8px; right: 16px;}
#centered {position: absolute; top: 50%; left: 30%;transform: translate(-50%, -50%);}

#header4 {background-image:url('image/CE1.jpg');font-family:"Impact, Charcoal, sans-serif"; 
padding: 0px 5px; position: relative; text-align: right; background-size: cover;  position: relative;  height: 50%;  background-position: center;}
#bottom-left {position: absolute; bottom: 8px; left: 16px;}
#top-left {position: absolute; top: 8px; left: 17%;}
#top-right {position: absolute; top: 8px; right: 16px;}
#bottom-right {position: absolute;bottom: 8px; right: 16px;}
#centered {position: absolute; top: 50%; left: 30%;transform: translate(-50%, -50%);}

#header5 {background-image:url('image/star-war.png');font-family:"Impact, Charcoal, sans-serif"; 
padding: 0px 5px; position: relative; text-align: right; background-size: cover;  position: relative;  height: 50%;  background-position: center;}
#bottom-left {position: absolute; bottom: 8px; left: 16px;}
#top-left {position: absolute; top: 8px; left: 17%;}
#top-right {position: absolute; top: 8px; right: 16px;}
#bottom-right {position: absolute;bottom: 8px; right: 16px;}
#centered {position: absolute; top: 50%; left: 30%;transform: translate(-50%, -50%);}


#header6 {background-image:url('image/galaxy3.jpg');font-family:"Impact, Charcoal, sans-serif"; 
padding: 0px 5px; position: relative; text-align: right; background-size: cover;  position: relative;  height: 50%;  background-position: center;}
#bottom-left {position: absolute; bottom: 8px; left: 16px;}
#top-left {position: absolute; top: 8px; left: 17%;}
#top-right {position: absolute; top: 8px; right: 16px;}
#bottom-right {position: absolute;bottom: 8px; right: 16px;}
#centered {position: absolute; top: 50%; left: 30%;transform: translate(-50%, -50%);}


#header7 {background-image:url('image/CE1.jpg');font-family:"Impact, Charcoal, sans-serif"; 
padding: 0px 5px; position: relative; text-align: right; background-size: cover;  position: relative;  height: 50%;  background-position: center;}
#bottom-left {position: absolute; bottom: 8px; left: 16px;}
#top-left {position: absolute; top: 8px; left: 17%;}
#top-right {position: absolute; top: 8px; right: 16px;}
#bottom-right {position: absolute;bottom: 8px; right: 16px;}
#centered {position: absolute; top: 50%; left: 30%;transform: translate(-50%, -50%);}


#header8 {background-image:url('image/CE1.jpg');font-family:"Impact, Charcoal, sans-serif"; 
padding: 0px 5px; position: relative; text-align: right; background-size: cover;  position: relative;  height: 50%;  background-position: center;}
#bottom-left {position: absolute; bottom: 8px; left: 16px;}
#top-left {position: absolute; top: 8px; left: 17%;}
#top-right {position: absolute; top: 8px; right: 16px;}
#bottom-right {position: absolute;bottom: 8px; right: 16px;}
#centered {position: absolute; top: 50%; left: 30%;transform: translate(-50%, -50%);}


#header9 {background-image:url('image/door.jpg');font-family:"Impact, Charcoal, sans-serif"; 
padding: 0px 5px; position: relative; text-align: right; background-size: cover;  position: relative;  height: 50%;  background-position: center;}
#bottom-left {position: absolute; bottom: 8px; left: 16px;}
#top-left {position: absolute; top: 8px; left: 17%;}
#top-right {position: absolute; top: 8px; right: 16px;}
#bottom-right {position: absolute;bottom: 8px; right: 16px;}
#centered {position: absolute; top: 50%; left: 30%;transform: translate(-50%, -50%);}

#header10 {background-image:url('image/Power generation.png');font-family:"Impact, Charcoal, sans-serif"; 
padding: 0px 5px; position: relative; text-align: right; background-size: cover;  position: relative;  height: 50%;  background-position: center;}
#bottom-left {position: absolute; bottom: 8px; left: 16px;}
#top-left {position: absolute; top: 8px; left: 17%;}
#top-right {position: absolute; top: 8px; right: 16px;}
#bottom-right {position: absolute;bottom: 8px; right: 16px;}
#centered {position: absolute; top: 50%; left: 30%;transform: translate(-50%, -50%);}

#header11 {background-image:url('image/103.png');font-family:"Impact, Charcoal, sans-serif"; 
padding: 0px 5px; position: relative; text-align: right; background-size: cover;  position: relative;  height: 50%;  background-position: center;}
#bottom-left {position: absolute; bottom: 8px; left: 16px;}
#top-left {position: absolute; top: 8px; left: 17%;}
#top-right {position: absolute; top: 8px; right: 16px;}
#bottom-right {position: absolute;bottom: 8px; right: 16px;}
#centered {position: absolute; top: 50%; left: 30%;transform: translate(-50%, -50%);}

#header12 {background-image:url('image/race.png');font-family:"Impact, Charcoal, sans-serif"; 
padding: 0px 5px; position: relative; text-align: right; background-size: cover;  position: relative;  height: 50%;  background-position: center;}
#bottom-left {position: absolute; bottom: 8px; left: 16px;}
#top-left {position: absolute; top: 8px; left: 17%;}
#top-right {position: absolute; top: 8px; right: 16px;}
#bottom-right {position: absolute;bottom: 8px; right: 16px;}
#centered {position: absolute; top: 50%; left: 30%;transform: translate(-50%, -50%);}

#content {background-color:white; color:black; font-family: "Trebuchet MS", Helvetica, sans-serif; margin-right: 10px; margin-left: 10px; 
background-repeat:no-repeat; text-align: justify;
text-align: left; width:auto; height:auto; margin-bottom:0px; padding:20px 20px 0px 20px; }


#gallery {margin: 0px 20px; float: left; width: 180px;text-align: center; margin-bottom: 50px;font-family: "Trebuchet MS", Helvetica, sans-serif;}
#gallery:hover { box-shadow: 0 0 2px 5px rgba;}
#gallery img  {border: 1px solid #ccccb3; border-radius: 1px; padding: 5px; width: 150px; }
* {box-sizing: border-box;}

.zoom {transition: transform .2s;padding: 1px;}
.zoom:hover { 
  -ms-transform: scale(3); /* IE 9 */
  -webkit-transform: scale(3); /* Safari 3-8 */
  transform: scale(3); }
#desc {padding: 15px; text-align: center;}


#box1{float: left; width: 30%; height: 30%;float: left; margin: 5px; }  
#box1:hover { box-shadow: 0 0 2px 5px rgba(0, 140, 186, 0.5);}
#box1 img  { border: 2px solid #ddd; border-radius: 10px; padding: 5px; width: 150px;}
#desc {padding: 15px; text-align: center; border: 2px solid #ddd; border-radius: 10px; padding: 5px; width: 150px;}
.middle {transition: .5s ease;opacity: 0; float: left; top: 30%; left: 25%;
  transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); text-align: center;}


  ul {font-family: "Trebuchet MS", Helvetica, sans-serif; background-color: white; border-bottom: 1px solid  #ccccb3;  list-style-type: none; margin: 0; 
    padding: 0; overflow: hidden; border-bottom-width:absolute;padding:20px 20px 0px 20px; }
  li {float: left;font-size:1em;  border-right: 1px solid #ccccb3;}
  li a, .dropbtn {background:white; color: black; font-family: "Trebuchet MS", Helvetica, sans-serif; border-left: 1px solid white; display: inline-block; text-align: center; padding: 7px 8px; text-decoration: none;}
  li a:hover, .dropdown:hover .dropbtn {color: red;}
  li.dropdown {display: inline-block;}
  .dropdown-content {background-color: white; display: none; position: absolute; 
    min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1;}
  .dropdown-content a {color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left;}
  .dropdown-content a:hover {background-color: ;}
  .dropdown:hover .dropdown-content {display: block;}

  
  

#card {max-width: 500px; margin: auto; text-align: center; padding: 5px 0px 5px 55px; margin-bottom:20px;}
#title {color: grey;font-size: 12px;}
button {
  border-radius: 4px;
  background-color: #f4511e;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 14px;
  padding: 20px;
  width: 150px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
}

button span {cursor: pointer;display: inline-block;position: relative;transition: 0.5s;}
button span:after {content: '\00bb';position: absolute;opacity: 0;top: 0;right: -20px;transition: 0.5s;}
button:hover span {padding-right: 25px;}
button:hover span:after {opacity: 1;right: 0;}


table {font-family: Arial, Helvetica, sans-serif; font-size: 18px;text-align: center;
  border-collapse: collapse; width: 100%;}
td, th {font-size: 18px; text-align: center;
  border: 1px solid #ddd; padding: 8px; }
tr:nth-child(even) {background-color: #ccccb3;}

#Block {padding:10px;}

#Box{margin:0px 0px 0px 0px; width:auto; height: auto;font-family: "ITC Avant Garde Gothic";}
.clearfix::after {content: ""; display: table;}
.floating-box1  {font-family: "Trebuchet MS", Helvetica, sans-serif;float: left; width: 100%; padding: 0px 20px 0px 20px; }
.floating-box2  {font-family: "Trebuchet MS", Helvetica, sans-serif;float: right; width: 100%; padding: 0px 300px 0px 1px; background-position: right top; background-image: url("image/ASI 2060_S.png"); background-repeat:no-repeat;}
.floating-box3  {font-family: "Trebuchet MS", Helvetica, sans-serif;width: 100%; padding: 1px; margin: 0px 150px;}
.floating-box4  {font-family: "Trebuchet MS", Helvetica, sans-serif;width: 100%; margin: 0px 100px 0px; height: 200px;}
.floating-box5 {text-align: center; ;font-family: "Trebuchet MS", Helvetica, sans-serif; padding: 10px; float: left; width:20%; height:40%; margin:0px 0px 0px 100px; border: 1.5px solid #ccccb3; font-size: 12px;}
.floating-box6 {font-family: "Trebuchet MS", Helvetica, sans-serif;padding: 10px; float: left; width:40%; height:40%; margin:0px; border-top: 1.5px solid #ccccb3; border-bottom: 1.5px solid #ccccb3; font-size: 12px;}
.floating-box7 {font-family: "Trebuchet MS", Helvetica, sans-serif; padding: 10px; float: left; width:20%; height:40%; margin:0px; border-top: 1.5px solid #ccccb3; border-bottom: 1.5px solid #ccccb3; border-right: 1.5px solid #ccccb3;margin-bottom: 20px;}
.floating-box8 
.a-bs { margin: 0; padding: 5px; background-color: #ccccb3;}
.a-bs > h1, .b {margin: 10px; padding: 5px;}
.b { background: white;}
.b > h2, p { margin: 4px; font-size: 90%;}
.floating-box9  {font-family: "Trebuchet MS", Helvetica, sans-serif;float: left; width: 100%; padding: 0px 20px 0px 20px; background-color: #1B4D66;}
.floating-box11 {padding: 60px 50px 10px 50px;float: left; width: 40%; height:50%; border-top: 10px solid black; border-right: 10px solid black; border-bottom: 30px solid black;  margin: 0px 10px 0px 0px;  background-color:#ff8000; font-size: 20px;  font-family: Eras Light ITC; color: white;}
.floating-box12 {padding: 0px 0px 10px 0px;float: left; width: 40%; height:50%;   margin: 0px 10px 0px 0px;  font-size: 30px;     font-family: Eras Light ITC; color: white;}
.floating-box13 {padding: 10px; float: left; width:100%; height:100%; margin:0px 5px 50px; font-family: "ITC Avant Garde Gothic"; color: white; }
p {font-size:20px; text-align: left;}
.floating-box14 {padding: 10px; float: left; width:100%; height:100%; margin:0px 5px 50px; font-family: "ITC Avant Garde Gothic"; color: white; }
p {font-size:20px; text-align: left;}
.floating-box15 {padding: 10px; float: left; width:100%; height:100%; margin:0px 5px 50px; font-family: "ITC Avant Garde Gothic"; color: white; }
.floating-box16 {font-family: "Trebuchet MS", Helvetica, sans-serif;float: left; width: 100%; padding: 0px 10px 0px 10px;} 
.floating-box17 { margin: 10; padding: 5px; background-color: lightgray;}
.b > h2, p { margin: 4px; font-size: 90%;}
.floating-box19 {padding: 10px; float: left; width:30%; height:70%; margin:0px 5px 50px; background-color: #1B4D66; font-size: 30px; test-align:left; font-family: "ITC Avant Garde Gothic"; color: white; }
.floating-box20 {padding: 10px; float: left; width:30%; height:70%; margin:0px 5px 50px; background-color: #384E63; font-size: 30px; test-align:left; font-family: "ITC Avant Garde Gothic"; color: white; }
.floating-box21 {padding: 10px; float: left; width:30%; height:70%; margin:0px 5px 50px; background-color: #ff0066; font-family: "ITC Avant Garde Gothic"; color: white;}
p {font-size:20px; text-align: left;}
.floating-box31 {width:100%; text-align: center; background-color: #1B4D66; font-size: 30px; font-family: "ITC Avant Garde Gothic"; color: white; }
.floating-box32 {text-align: center; ;font-family: "Trebuchet MS", Helvetica, sans-serif;padding: 10px; float: left; width:20%; height:40%; margin:0px 0px 0px 150px; border: 1.5px solid #ccccb3; font-size: 12px;}
.floating-box33 {font-family: "Trebuchet MS", Helvetica, sans-serif;padding: 10px; float: left; width:40%; height:40%; margin:0px; border-top: 1.5px solid #ccccb3; border-bottom: 1.5px solid #ccccb3; font-size: 12px;}
.floating-box34 {font-family: "Trebuchet MS", Helvetica, sans-serif;float: left; width: 100%; padding: 0px 30px 0px 30px;}