/******** DEFAULT SETTING ********/
.wrapper {
  width:90%;
}


/**** Default:834px ****/
@media screen and (max-width:834px) {
  
  img.qr,
  img.qr2 {
    position:fixed;
    bottom:10px;
    right:10px;
    width:70px;
  }

}

/**** Default:480px ****/
@media screen and (max-width:480px) {
  
  .wrapper {
    margin:40px auto 60px;
    position:relative;
  }
  
  img.qr2 {
    position:absolute;
    top:10px;
    right:10px;
    width:50px;
  }
  
  img.decoleft {
    position:fixed;
    bottom:15%;
    left:0;
    width:18%;
    z-index:-1;
  }

  img.decoright {
    position:fixed;
    top:25%;
    right:0;
    display:block;
    width:18%;
    z-index:-1;
  }


}


/**** Default:414px ****/
@media screen and (max-width:414px) {
  
  img.qr {
    width:60px;
  }
  
  img.qr2 {
    width:40px;
  }

}




/******** Home ********/
.hmsec {
  width:80%;
}

/**** Home:834px ****/
@media screen and (max-width:834px) {
  
  .hmsec {
    width:92%;
  }
  
  article.hmtxt {
    margin-top:30px;
  }

}

/**** Home:640px ****/
@media screen and (max-width:640px) {
  
  .hmsec {
    margin:0 auto;
  }
  
  nav.hmnav {
    margin-top:-70px;
  }

}

/**** Home:480px ****/
@media screen and (max-width:480px) {
  
  img.hmlogo {
    width:80%;
  }
  
  nav.hmnav {
    margin-top:-50px;
  }
  
  nav.hmnav a {
    font-size:0.8em;
  }
  
  article.hmtxt h1 {
    font-size:1.5em;
  }
  
  article.hmtxt h2 {
    font-size:1.2em;
  }
  
  article.hmtxt p {
    font-size:0.8em;
  }
  
  article.hmtxt h3 {
    font-size:0.9em;
  }

}


/**** Home:414px ****/
@media screen and (max-width:414px) {
  
  img.hmlogo {
    width:90%;
  }
  
  nav.hmnav i {
    margin:0 10px;
  }

}


/**** Home:375px ****/
@media screen and (max-width:375px) {
  
  article.hmtxt h1 {
    font-size:1.3em;
  }
  
  article.hmtxt h2 {
    font-size:1em;
  }
  
  article.hmtxt p {
    font-size:0.7em;
  }

}


/**** Home:320px ****/
@media screen and (max-width:320px) {
  
  nav.hmnav a {
    font-size:0.7em;
  }
  
  nav.hmnav i {
    margin:0 6px;
  }
  
  article.hmtxt h3 {
    margin-top:20px;
  }
 
}



/******** Header & Nav ********/

/**** H & N:834px ****/
@media screen and (max-width:834px) {
  
  figure.logo {
    width:30%;
  }
  
  .hdcol {
    width:70%;
  }
  
  p.slogan {
    font-size:0.9em;
  }
  
  nav.pgnav {
    margin-top:20px;
  }
  
  nav.pgnav a {
    font-size:0.8em;
  }
  
 
}


/**** H & N:640px ****/
@media screen and (max-width:640px) {
  
  figure.logo {
    width:35%;
  }
  
  .hdcol {
    width:65%;
  }
  
  p.slogan {
    font-size:0.9em;
  }
  
  nav.pgnav {
    margin-top:15px;
  }
  
  nav.pgnav i {
    margin:0 10px;
  }
  
 
}


/**** H & N:480px ****/
@media screen and (max-width:480px) {
  
  figure.logo {
    float:none;
    width:45%;
    margin:0 auto;
  }
  
  .hdcol {
    float:none;
    width:86%;
    margin:10px auto;
    padding-bottom:10px;
    text-align:center;
    border-bottom:1px solid #ff1128
  }
  
  nav.pgnav {
    margin-top:20px;
    text-align:center;
  }
 
}


/**** H & N:414px ****/
@media screen and (max-width:414px) {
  
  figure.logo {
    float:none;
    width:50%;
    margin:0 auto;
  }
  
  .hdcol {
    width:100%;
  }
  
}

/**** H & N:320px ****/
@media screen and (max-width:320px) {
  
  nav.pgnav a {
    font-size:0.7em;
  }
  
  nav.pgnav i {
    margin:0 6px;
  }
  
}


/****** Menu Landing ******/
.menu-container {
  width:100%;
}

p.mcoltxt {
  font-size:0.9em;
}

/**** M Landing:834px ****/
@media screen and (max-width:834px) {

  .menu-container {
    width:86%;
  }
  
  .mcol {
    width:48%;
  }
  
  .mcol2 {
    margin-right:0;
  }
  
}


/**** M Landing:480px ****/
@media screen and (max-width:480px) {

  h1.menutag {
    font-size:1.8em;
  }

  hr.line1 {
    width:60px;
  }

  .mcol {
    float:none;
    width:100%;
    margin-right:0;
  }
  
  p.mcoltxt {
    font-size:1em;
    padding:15px 0;
  }
  
}




/**** Menu:1024px ****/
.menu-container {
  width:92%;
}

aside {
  width:20%;
}

section.menusec {
  width:80%;
}



/**** Menu:834px ****/
@media screen and (max-width:834px) {

  .pmicon {
    display:inline-block;
  }

  
  .menu-container2 {
    margin-top:0;
    width:96%;
  }
  
  aside {
    float:none;
    width:100%;
    position:relative;
  }
  
  ul.manunav {
    display:none;
    position:absolute;
    top:-4px;
    left:0;
    z-index:500;
    width:100%;
    text-align:center;
    background-color:#99020a;
    background:rgba(153,2,10,0.9);
    border:3px solid #cccccc;
  }
  
  ul.manunav li {
    margin-bottom:0;
    border-bottom:1px solid #d1343c;
  }
  
  ul.manunav li:last-child {
    border-bottom:none;
  }
  
  ul.manunav a {
    display:block;
    font-size:0.9em;
    padding:8px 0;
    color:#ffffff;
  }
  
  ul.manunav a:hover {
    color:#ffffff;
    background-color:#7f0108;
  }

  ul.manunav hr {
    display:none;
  }

  section.menusec {
    float:none;
    width:100%;
    padding-left:0;
    padding-top:40px;
    border-left:none;
  }
  
  p.mchi {
    font-size:0.9em;
  }

  p.meng {
    font-size:0.9em;
  }
  

}


/**** Menu:640px ****/
@media screen and (max-width:640px) {
  
  .menu-container2 {
    width:80%;
  }
  
  .menuboard {
    float:none;
    width:100%;
  }
  
  .menupic {
    float:none;
    width:100%;
  }
  
  .menuboard2 {
    float:none;
    width:100%;
  }
  
  .menupic2 {
    float:none;
    width:100%;
  }
  
  figure.mpic-single {
    width:30%;
    float:left;
    margin-right:5%;
    margin-bottom:30px;
    border:4px solid #cccccc;
  }
  
  figure.mpic-single3 {
    margin-right:0;
  }
  
  figure.mpiccolfour {
    width:48%;
  }
  
  figure.mpiccolfour2 {
    margin-right:0;
  }

}


/**** Menu:480px ****/
@media screen and (max-width:480px) {
  
  .menu-container2 {
    width:94%;
  }
  
  .menuboard,
  .menurow,
  .menuboard3a {
    background-color:#ffffff;
    background:rgba(255,255,255,0.8);
    padding:20px;
  }
  
  .menuboard3b {
    background-color:#ffffff;
    background:rgba(255,255,255,0.8);
    padding:0 20px 20px 20px;
    position:relative;
    bottom:20px;
  }

  h3.mnamesub2 {
    font-size:0.95em;
  }
  
  ul.menulist {
    font-size:0.9em;
  }
  
  figure.mpiccolL {
    float:none;
    width:100%;
    margin-bottom:20px;
    -webkit-transform:rotate(0deg);
    -moz-transform:rotate(0deg);
    transform:rotate(0deg);
  }
  
  figure.mpiccolR {
    float:none;
    width:100%;
    margin-bottom:20px;
    -webkit-transform:rotate(0deg);
    -moz-transform:rotate(0deg);
    transform:rotate(0deg);
  }
  
  .menucol1a {
    float:none;
    width:100%;
    margin-bottom:0;
  }

  .menucol1b {
    float:none;
    width:100%;
    margin-bottom:0;
    margin-top:20px;
  }
  
  .menucol1b-malay {
    margin-top:0;
  }
  
  .menupicrow {
    margin-top:40px;
  }
  
  figure.mpiccol {
    float:none;
    width:100%;
    margin:0 0 20px 0;
    -webkit-transform:rotate(0deg);
    -moz-transform:rotate(0deg);
    transform:rotate(0deg);
  }
  
  
  figure.mpic-single {
    float:none;
    width:100%;
    margin-right:0;
    margin-bottom:20px;
    -webkit-transform:rotate(0deg);
    -moz-transform:rotate(0deg);
    transform:rotate(0deg);
  }
  
  .menuboard3a {
    float:none;
    width:100%;
    margin-top:30px;
  }

  .menuboard3b {
    float:none;
    width:100%;
    margin-top:5px;
  }
  
  figure.mpiccolfour {
    float:none;
    width:100%;
    margin-bottom:20px;
    -webkit-transform:rotate(0deg);
    -moz-transform:rotate(0deg);
    transform:rotate(0deg);
  }
  
  h3.mnamesub {
    font-size:0.95em;
  }
  

}






/******** Page Setting  ********/
h3.pgtitle {
  font-size:3.4em;
}

h3.pgtitle-ct {
  top:105px;
  right:160px;
}

@media screen and (max-width:834px) {
  
  .pgcol1 {
    float:none;
    width:100%;
    padding-right:0;
  }
  
  h3.pgtitle {
    font-size:2.5em;
    color:#cd9a34;
    position:relative;
    top:0;
    -webkit-transform:rotate(0deg);
    -moz-transform:rotate(0deg);
    transform:rotate(0deg);
  }
  
  h3.pgtitle-ct {
    top:0;
    right:0;
    width:auto;
    color:#cd9a34;
  }
  
  .pgcol2 {
    float:none;
    width:100%;
    padding-left:0;
    border-left:none;
    margin-top:30px;
  }
  
}


@media screen and (max-width:480px) {
  
  h3.pgtitle {
    text-align:center;
  }
  
}

@media screen and (max-width:414px) {
  
  h3.pgtitle {
    font-size:2em;
  }
  
}






/******** About Us ********/
article.abtcontent {
  width:60%;
}

/**** About:834px ****/
@media screen and (max-width:834px) {
  
  article.abtcontent {
    width:70%;
  }
  
  article.abtcontent h1 {
    font-size:1.5em;
  }
  
  article.abtcontent h2 {
    font-size:1.1em;
  }
  
}


/**** About:480px ****/
@media screen and (max-width:480px) {
  
  article.abtcontent {
    width:100%;
  }
  
  article.abtcontent h1 {
    font-size:1.5em;
    text-align:center;
    
  }
  
  article.abtcontent h2 {
    font-size:1.1em;
    text-align:center;
  }
  
}

/**** About:414px ****/
@media screen and (max-width:414px) {
  
  p.abteng,
  p.abtchi {
    font-size:0.8em;
  }
  
}



/******** GALLERY ********/

/**** Gallery:480px ****/
@media screen and (max-width:480px) {
  
  .galrow {
    margin-bottom:20px;
  }
  
  .galcolL{
    float:none;
    width:100%;
    margin-bottom:20px;
  }

  .galcolR{
    float:none;
    width:100%;
  }
  
  .gal {
    width:30%;
    margin-right:5%;
  }
  
  .gal3 {
    margin-right:0;
  }
  
}


/**** Gallery:414px ****/
@media screen and (max-width:414px) {
  
  .galrow {
    margin-bottom:0;
  }
  
  .galcolL{
    margin-bottom:0;
  }
  
  .gal {
    float:none;
    width:100%;
    margin-right:0;
    margin-bottom:20px;
  }

}



/******** CONTACT US ********/

/**** Contact:640px ****/
@media screen and (max-width:640px) {
  
  .ctcolL {
    float:none;
    width:100%;
  }
  
  .ctcolR {
    margin-top:40px;
    float:none;
    width:100%;
  }

}


/**** Contact:480px ****/
@media screen and (max-width:480px) {
  
  .ctcolL {
    float:none;
    width:100%;
    text-align:center;
  }
  
  .ctcolR {
    margin-top:40px;
    float:none;
    width:100%;
  }

}

/**** Contact:375px ****/
@media screen and (max-width:375px) {
  
  .ctcolL h1 {
    font-size:0.95em;
  }

  .ctcolL address {
    font-size:0.8em;
  }

  .ctcolL p {
    font-size:0.8em;
  }
  
  .ctcolR {
    padding:30px 20px 20px;
  }
  
  label.info {
    font-size:0.85em;
  }
  

}


/******** Footer ********/
@media screen and (max-width:480px) {
  
  p.cright {
    font-size:0.65em;
    color:#bbbbbb;
  }
  
}



/****** Goodmail ******/
@media screen and (max-width:768px) {
  
  .goodmail {
    padding-top:200px;
  }
  
  img.gdmail-logo {
    width:200px;
  }

}


@media screen and (max-width:414px) {
  
  .goodmail {
    padding-top:150px;
  }
  
  img.gdmail-logo {
    width:200px;
  }


}