@font-face{
  font-family: myCalibri;
  src: url(../font/Calibri.ttf);
}

@font-face{
  font-family: myMheiHK-Bold;
  src: url(../font/MHeiHK-Bold.otf);
}

@font-face{
  font-family: myMheiHK-Light;
  src: url(../font/MHeiHK-Light.otf);
}

@font-face{
  font-family: myMheiHK-Medium;
  src: url(../font/MHeiHK-Medium.otf);
}

@font-face{
  font-family: myMheiHK-Xbold;
  src: url(../font/MHeiHK-Xbold.otf);
}

body{
background-color: #221E1F;
}

h1, h2, h3, h4, h5, h6, small, p, a{
  --font-family: myCalibri;
  font-family: Tahoma, Geneva, sans-serif;
  color: #FEFEFE;
}

/**
--.img-responsive,
--.thumbnail > img,
--.thumbnail a > img,
**/

.img-responsive,
.carousel-inner > .carousel-item > img,
.carousel-inner > .carousel-item > a > img {
  display: block;
  width: 100%;
  height: auto;
}

.img-responsive2, .img-responsive3{
  display: block;
  width: 100%;
  height: auto;
}


/**
@media only screen and (min-width: 768px) and (max-width: 1200px) {
  .img-responsive2, .img-responsive3{
    display: block;
    width: 110px;
    height: 60px;
  }
}

@media only screen and (max-width: 767px) {
  .img-responsive2{
    display: block;
    width: 56px;
    height: 32px;
  }
}
**/

.img-large-logo{
  max-width: 86px;
  max-height: 86px;
}

.img-social{
  max-width: 76px;
  max-height: 30px;
}

.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-12
{
  padding-left: 0px;
  padding-right: 0px;
}

.carousel-control-prev, .carousel-control-next{
  opacity: 1;
}

.carousel-control-prev:hover, .carousel-control-next:hover{
  opacity: 1;
}

#main_carousel, #about_us, #product_pg, #multi_pg, #contact_pg, #project_pg, #design_pg {
  height: 430px;
  vertical-align: top;
}

/**
@media only screen and (max-width: 1200px) {
 #project_pg{
   min-height: 185px;
 }
}
**/

#Main_Table{
  width: 1140px;
  --border: 1px solid green;
}


/** top_menu **/
#top_menu .container-fluid{
  padding-left: 0px;
  padding-right: 0px;
}

#top_menu img{
  --vertical-align: top;
  --border: 1px solid red;
}

.lang-list{
  list-style: none;
  display: block;
  --padding-left: 120px;
  text-align: right;
}

.lang-list li img{
  opacity: 0;
}

.lang-list li img.active{
  opacity: 1;
}

.lang-list li a{
  font-size: 9px; --10px;
  color: #FEFEFE;
  text-algin: center;
  text-decoration: none;
  padding-left: 5px;
  display: inline-block;
}

.lang-list li a.active{
  cursor: default;
}

/** MainNav **/
#MainNav > td{
  padding-bottom: 17px;
}

.FirstLayer{
    background-color:transparent;
    float:left;
    padding-left: 125px;
    padding-right:10px;
    position: relative;
    z-index: 20;
}


.FirstLayer > li:first-child{
  padding-left: 10px;
}


.FirstLayer > li{
  padding-right: 8px;
  padding-left: 8px;
  padding-bottom: 0px;
  padding-top: 5px;
  display: inline;
  list-style: none;
  float:left;
  border-bottom: 10px solid #4A4646;
}

.FirstLayer > li > a{
  font-size: 16px;--18px;
  color: white;
  text-decoration: none;
  display:block; /**to make the block visble**/
}

.FirstLayer > li.active {
  border-bottom: 10px solid #F36F20;
}

.FirstLayer > li > a.active{
    cursor:default;
}

.FirstLayer > li > a > img{
  opacity: 0;
}

.FirstLayer > li > a > img.active {
  opacity: 1;
}

.SecondLayer{
  margin-top: 10px;
  margin-left: -8.5px;
  padding-left: 0px;
  background-color: rgba(83,84,86, 0.9);
  display:none;
  position:absolute;
  z-index: 8;
}

.SecondLayer > li{
  color: white;
  border-bottom: 1px solid #F36F20;
  padding-top: 5px;
  padding-bottom: 3px;
  padding-left: 0px;
  padding-right: 0px;
  height:32px;
}

.ZSL > li{
  padding-left: 15px;
  padding-right: 29px;
}

.SecondLayer > li:last-child{
  border-bottom: none;
}

.SecondLayer > li > a{
  font-size: 16px; --18px;
  color: rgba(255, 255, 255, 1);
  text-decoration: none;
  text-align: center;
  display:block; /**to make the block visble**/
  padding-right: 5px;
}

.SecondLayer > li , .ThirdLayer > li{
    list-style: none;
}

.FirstLayer > li:hover > ul {
    display:block;
    z-index: 1;
}

.SecondLayer > li:hover > ul{
    display: inline-block;
    --z-index: 1;
}

.SecondLayer > li > a > img{
  opacity:0;
}

.SecondLayer > li:hover .SLimg {
  opacity:1;
}

.FirstLayer > li:hover > ul > li > a{
  /**display: block;**/
}

.ThirdLayer{
  margin-top: -29px;
  margin-left: 106px;
  padding-left: 0px;
  background: #A4A7A9;
  position:absolute;
  display:none;
  z-index: 5;
}

.ZTL{
  margin-left: 85px;
}

.ThirdLayer > li{
  color: white;
  margin-left: 0px;
  height: 32px;
}

.ThirdLayer > li:last-child{
  border-bottom: none;
}

.ThirdLayer > li > a{
  font-size: 16px; --18px;
  color: white;
  text-decoration: none;
}


#MainNav .TLTable1{
  --width: 300px;
  display:block;
}

#MainNav .TLTable2{
  --width: 280px;
  display:block;
}

#MainNav tr {
  padding-top: 0px;
  margin-top: 0px;
  height: 32px;
}

.TLCol{
  padding: 0px;
  border-right: 1px solid #F36F20;
  text-align: center;
}

.TLColLast{
  padding-right: 3px;
  text-align: center;
}

.TLColLast2{
  padding-right: 6px;
}

.TLCol:hover, .TLColLast:hover {
  background-color: #7A7C7E;
}

.TLCol a, .TLColLast a{
  font-size: 16px; --18px;
  color: white;
  text-align: center;
  text-decoration: none;
  padding-top: 3px;
  padding-bottom: 0px;
  padding-left: 10px;
  padding-right: 10px;
  display:block;
}

.TLCol a.active, .TLColLast a.active{
  cursor:default;
}


/** end First_Layer **/

/** main_carousel **/
#main_carousel{
  --background-color: black;
}
#main_carousel hr{
  background-color: #F36F20;
  color: #F36F20;
  height: 15px;
  margin-top: 0px;
  margin-bottom: 0px;
}

#main_carousel .carousel-control-prev, #main_carousel .carousel-control-next{
  width: 8%;
}

#main_carousel .carousel-control-prev-icon{
  background-image: url(../img/left.png);
  width: 47px;
  height: 46px;
}

#main_carousel .carousel-control-next-icon{
  background-image: url(../img/right.png);
  width: 47px;
  height: 46px;
}


/**
@media only screen and (min-width: 768px) and (max-width: 1200px) {
  #main_carousel .carousel-control-prev-icon, #main_carousel .carousel-control-next-icon{
    width: 30px;
    height: 30px;
  }
}

@media only screen and (max-width: 767px) {
  #main_carousel .carousel-control-prev-icon, #main_carousel .carousel-control-next-icon{
    width: 20px;
    height: 20px;
  }
}
**/

#main_carousel .carousel-indicators li{
  width: 115px;
  height: 5px;
  margin-right: 30px;
}

#main_carousel .carousel-indicators .active {
    background-color: #F36F20;
}

#main_carousel .carousel-caption{
  text-align: left;
  left: 3%;
  bottom: 2px;
}

#main_carousel .carousel-caption h3{
  color: #BBBDBF;
  font-size: 14px;--16px;
  font-weight: bold;
}



/** main_footer **/
.fontaddress{
  font-size: 9px;
  color: #57585A;
  line-height: normal;
}

.zfontaddress{
  font-size: 9px;
--margin-bottom:18px;
}

#main_footer .footerrow_left img{
  padding-bottom: 6px;

}

#main_footer .footerrow_left{
  background-color: #E8E8E8;
  padding-top: 15px;
  padding-left: 10px;
  height: 111px;
  vertical-align: top;
  width:16.67%;
}

#main_footer .col-3{
  padding-top: 15px;
  padding-right: 15px;
}

#main_footer .footerrow_right{
  vertical-align: top;
}

#main_footer hr{
  background-color: #F36F20;
  color: #F36F20;
  height: 15px;
  margin-top: 0px;
  margin-bottom: 0px;
  border: 0px;
}

.fontname{
    text-align: right;
    margin-bottom: 0px;
}

.fontname span{
  padding-top: 3px;
  padding-bottom: 6px;
  border: 0.5px solid rgba(255,255,255,0.4);
  border-radius: 5px 0px 0px 5px;
}

.fontname img{
  padding-bottom: 0px;
  border-radius: 5px;
  border: 0.7px solid rgba(255,255,255,0.4);
  max-width: 29px;
  max-height: 28px;
}

.fontname a{
  font-size: 10px; --12px;
  font-weight: bold;
  line-height: normal;
  margin-bottom: 10px;
  color: #FEFEFE;
  border: 0.55px solid rgba(255,255,255,0.4);
  padding-top: 9px;
  padding-bottom:7px;
  padding-right: 5px;
  padding-left: 5px;
  margin-bottom: 0px;
  text-decoration: none;
  cursor: default;
}

.fontreserve{
  margin-top: 10px;
  font-size: 9px;
  text-align: right;
  line-height: normal;
}

/*
#main_footer p{
    border: 1px solid red;
}
*/

/**Product Page**/
#product_pg .product_icon, table, td{
  --border: 1px solid red;
}

#product_pg .col-7, #multi_pg .col-7{
  padding-left: 30px;
  padding-right: 60px;
}

.product_text, .about_text{
  margin-top: 30px;
  padding-left: 15px;
}

.product_text h6, .multi_text h6, .about_text h6{
  font-size: 14px; 16px;
  line-height: 25px;
  color: #BBBDBF;
  margin-bottom: 20px;
}

.product_text p, .about_text p{
  font-size: 12px;--14px;
  color: #BBBDBF;
  --line-height: normal;
}

.product_icon{
  margin-top: 30px;
  background-color: #FFFFFF;
  border-radius: 5px;
  padding-top: 30px;
  padding-bottom: 20px;
  padding-left: 10px;
}

.product_icon td{
  text-align: center;
  padding-top: 12px;
  padding-bottom: 12px;
  padding-left: 8px;
  padding-right: 8px;
}


.product_icon img{
  max-width: 195px;
  max-height: 86px;
}

.product_icon .img-Aplhaled{
  max-width: 148px;
  max-height: 62px;
  margin:0 auto;
}

.product_icon .img-side{
  max-width: 128px;
  max-height: 62px;
  margin:0 auto;
}



/**End Product Page**/

/**Multimedia Page**/
.multi_text{
  margin-top: 40px;
  padding-left: 15px;
}

.Zmulti_text{
  margin-top:103px;
}

.multi_block{
  padding-bottom: 26px;
}

.multi_text h6{
  margin-bottom: 3px;
}

.multi_icon{
  background-color: #FFFFFF;
  border-radius: 5px;
  margin-left: 15px;
}

.multi_icon_tb{
  max-height: 114px;
}

.multi_icon td{
  text-align: center;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 20px;
  padding-right: 20px;
}

.multi_icon img{
  max-width: 120px;
  max-height: 69px;
}

.design_icon td{
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 25px;
  padding-bottom: 25px;
}

.design_icon img{
  max-width: 122px;
  max-height: 50px;
}

#multi_carosuel{
  margin-top: 15px;
  margin-left: 50px;
}

#multi_carosuel img{
  max-width: 520px;
  max-height: 304px;
}

#multi_carosuel .carousel-control-prev, #multi_carosuel .carousel-control-next{
  width: 8%;
}

#multi_carosuel .carousel-control-prev-icon{
  background-image: url(../img/small_left.png);
  width: 36px;
  height: 37px;
}

#multi_carosuel .carousel-control-next-icon{
  background-image: url(../img/small_right.png);
  width: 36px;
  height: 37px;
}

/**
@media only screen and (min-width: 768px) and (max-width: 1200px) {
  #multi_carosuel .carousel-control-prev-icon, #multi_carosuel .carousel-control-next-icon{
    width: 25px;
    height: 25px;
  }
}

@media only screen and (max-width: 767px) {
  #multi_carosuel .carousel-control-prev-icon, #multi_carosuel .carousel-control-next-icon{
    width: 20px;
    height: 20px;
  }
}
**/


/**End Multimedia Page**/

/**Contact**/
.office1, .office2, .office3{
    border-radius: 5px;
    border: 1px solid white;
    margin-top: 10px;
    margin-left: 15px;
    padding-left: 20px;
    padding-top: 15px;
    padding-right: 15px;
    height: 280px;
}

/**
@media only screen and (max-width: 767px) {
.office1, .office2, .office3{
  height: 400px;
  }

}
**/

#contact_pg > .col-4{
  width: 33.3%;
}

#contact_pg > .col-3{
  width: 25%;
}

.office1{
  margin-left: 30px;
  padding-right: 15px;
  padding-bottom: 30px;
}

.office2{
  padding-bottom: 120px;
}

.office3{
  padding-bottom: 75px;
}

.Zoffice3{
  padding-bottom: 120px;
}

#contact_pg h4{
  font-size: 12px;--16px;
  color: #BBBDBF;
}

#contact_pg p, #contact_pg tr{
  font-size: 12px;--15px;
  color: #BBBDBF;
}

/**End Contact**/

/**About Us**/
.about_img {
  margin-top: 25px;
  margin-left: 70px;
  max-width: 500px;
  max-height: 260px;
}
/**End About Us **/

/** Project Page**/
#project_pg .container{
  padding-left: 0px;
  padding-right: 0px;
}

#project_pg{
  width:100%
}

#project_pg .col-2{
  width: 16.7%
}

#project_pg .col-8{
  width: 69%
}

.project_pg_row{
    background-image: url(../img/project_backgd.png);
}

.project_text{
  color: #DBDCDE;
  font-size: 12px;--15px;
  margin-left: 15px;
  margin-top: 8px;
  margin-bottom: 5px;
}

#ProjectCarousel .carousel-control-prev, #ProjectCarousel .carousel-control-next{
  width: 10%;
  bottom: 38%;
}

#ProjectCarousel .carousel-control-prev-icon{
  background-image: url(../img/small_left.png);
  width: 36px;
  height: 37px;
  display: block;
}

#ProjectCarousel .carousel-control-next-icon{
  background-image: url(../img/small_right.png);
  width: 36px;;
  height: 37px;
  display: block;
}

/**
@media only screen and (min-width: 768px) and (max-width: 1200px) {
  #ProjectCarousel .carousel-control-prev-icon, #ProjectCarousel .carousel-control-next-icon{
    width: 25px;
    height: 25px;
  }
}

@media only screen and (max-width: 767px) {
  #ProjectCarousel .carousel-control-prev-icon, #ProjectCarousel .carousel-control-next-icon{
    width: 20px;
    height: 20px;
  }
}
**/


#ProjectCarousel .carousel-indicators{
  margin-left: 50px;
  margin-right: 50px;
  margin-bottom: 0px;
  cursor: pointer;
}

#ProjectCarousel .carousel-indicators li{
  height: auto;
  width: auto;
  text-indent: 0px;
}

#ProjectCarousel .carousel-caption{
  bottom: 17%;
}

#ProjectCarousel .carousel-caption h3{
  color: #DBDCDE;
  font-size: 14px;
}

#ProjectCarousel img{
    max-width: 730px;
    max-height: 397px;
}

#ProjectCarousel .carousel-indicators img{
  max-width: 137px;
  max-height: 80px;
}

/** End Project Page**/

/** Design Page**/
/** End Design Page**/
/*
.col-2, .col-10{
  border: 1px solid red;
}
*/