/********** Default Setting **********/
.wrapper {
  width:95%;
}


/********** HEADER & NAV **********/

/**** Header, Nav: 1024px ****/
.headerwrap {
  width:95%;
}

figure.lalogo {
  width:25%;
}

nav.mainnav {
  width:60%;
}


/**** Header, Nav: 768px ****/
@media screen and (max-width:768px) {
  
  nav.mainnav {
    width:70%;
  }
  
  ul.nav1 {
    margin-bottom:1.5%;
  }
  
  ul.nav1 a, ul.nav2 a {
    font-size:0.8em;
  }
  
}

/**** Header, Nav: 640px ****/
@media screen and (max-width:640px) {
  
  figure.lalogo {
    width:30%;
  }
  
  nav.mainnav {
    width:48%;
  }
  
  .nav1sec, .nav2sec {
    float:left;
    width:50%;
  }
  
  ul.nav1 li, ul.nav2 li {
    float:none;
    margin-right:0;
  }
  
}


/**** Header, Nav: 480px ****/
@media screen and (max-width:480px) {
  .headerwrap {
    width:100%;
  }

  figure.lalogo {
    float:none;
    width:42%;
    padding:2%;
  }
  
  nav.mainnav {
    position:absolute;
    display:none;
    z-index:9000;
  }
  
  nav.mainnav,
  .nav1sec,
  .nav2sec {
    float:none;
    width:100%;
    text-align:center;
    background:#222222;
    padding:1% 0 0;
  }
  
  nav.mainnav p {
    font-size:0.8em;
  }
  
  ul.nav1 li, ul.nav2 li {
    border-top:1px solid #444444;
  }
  
  ul.nav1 a, ul.nav2 a {
    display:block;
    font-size:0.9em;
    color:#a6aab0;
    padding:1.2% 0;
  }
  
  ul.nav1 a:hover, ul.nav2 a:hover {
    background:#0e0e0e;
    color:#ffffff;
    -webkit-transition:all 0.3s ease;
    -moz-transition:all 0.3s ease;
    transition:all 0.3s ease;
  }
  
  i.navicon {
    display:block;
  }


}


/**** Header, Nav: 414px ****/
@media screen and (max-width:414px) {

  figure.lalogo {
    width:50%;
  }
  

}


/******* BANNER *******/

/**** Home Banner: 480px ****/
@media screen and (max-width:480px) {

  .bannercontainer {
    display:none;
  }
  
  .bannermobile {
    display:block;
  }
  
}

/**** Home Banner: 414px ****/
@media screen and (max-width:414px) {

  .bannermobile h1 {
    font-size:1.3em;
  }
  
}

/**** All Banner: 1024px ****/
#banner-translation,
#banner-copywriting,
#banner-graphic,
#banner-other {
  height:400px;
}

.pgbanner-wrap {
  height:400px;
  width:95%;
}

h1.language-bannertext {
  font-size:1.5em;
  width:40%;
  left:0;
}

h1.about-bannertext {
  font-size:1.5em;
  width:50%;
  left:0;
  top:50%;
}



/**** All Banner: 768px ****/
@media screen and (max-width:768px) {

  #banner-translation,
  #banner-copywriting,
  #banner-graphic,
  #banner-other {
    height:300px;
  }
  .pgbanner-wrap {
    height:350px;
  }
  
  h1.eng {
    font-size: 2.2em;
  }

  h1.chi {
    font-size: 1.6em;
  }
  
  h1.language-bannertext {
    font-size:1.3em;
    top:48%;
    left:0;
  }
  
  h1.about-bannertext {
    font-size:1.3em;
    width:50%;
    left:0;
    top:50%;
  }
  
  h1.client-bannertext {
    font-size:1.3em;
    width:50%;
    left:0;
    top:50%;
  }
  
  h1.career-bannertext {
    font-size:1.5em;
    color:#ffffff;
  }

}

/**** All Banner: 640px ****/
@media screen and (max-width:640px) {
  
  #banner-translation,
  #banner-copywriting,
  #banner-graphic,
  #banner-other {
    height:270px;
  }
  
  .pgbanner-wrap {
    height:300px;
  }
  
  h1.language-bannertext {
    text-align:center;
    width:100%;
    top:60%;
    left:0;
  }
  
  h1.about-bannertext {
    text-align:center;
    width:100%;
    left:0;
    top:60%;
  }
  
  h1.client-bannertext,
  h1.career-bannertext {
    text-align:center;
    width:100%;
    left:0;
    top:65%;
  }
  
  h1.contact-bannertext {
    width:60%;
    top:60%;
  }
  

}

/**** All Banner: 480px ****/
@media screen and (max-width:480px) {
  
  #banner-translation,
  #banner-copywriting,
  #banner-graphic,
  #banner-other {
    height:240px;
  }
  
  .pgbanner-wrap {
    height:270px;
  }
  
  h1.eng {
    font-size: 1.8em;
  }

  h1.chi {
    font-size: 1.3em;
  }
  
  .tranbanner-col {
    width:100%;
    padding-top:35%;
  }
  
  .copybanner-col {
    width:88%;
    padding-top:33%;
  }
  
  .graphicbanner-col {
    padding-top:25%;
    text-align:center;
  }
  
  .otherbanner-col {
    padding-top:33%;
  }
  
  h1.language-bannertext {
    top:50%;
  }
  
  h1.about-bannertext {
    top:50%;
    font-size:1.2em;
  }
  
  h1.client-bannertext {
    top:50%;
  }
  
  h1.career-bannertext {
    top:60%;
  }
  
  h1.contact-bannertext {
    width:100%;
    top:60%;
    text-align:center;
    font-size:1.5em;
  }

}

/**** All Banner: 414px ****/
@media screen and (max-width:414px) {

  #banner-translation,
  #banner-copywriting,
  #banner-graphic,
  #banner-other {
    height:220px;
  }
  
  .pgbanner-wrap {
    height:250px;
  }
  
  h1.language-bannertext {
    top:45%;
    font-size:1.2em;
  }
  
  h1.about-bannertext {
    top:45%;
    font-size:1.1em;
  }
  
  h1.client-bannertext,
  h1.career-bannertext {
    font-size:1.2em;
  }
  
  
}

/**** All Banner: 375px ****/
@media screen and (max-width:375px) {

  #banner-translation,
  #banner-copywriting,
  #banner-graphic,
  #banner-other {
    height:200px;
  }
  
  h1.eng {
    font-size: 1.6em;
  }

  h1.chi {
    font-size: 1.1em;
  }
  
  h1.language-bannertext {
    top:40%;
  }
  
  h1.about-bannertext {
    font-size:1em;
  }
  
}


/**** All Banner: 320px ****/
@media screen and (max-width:320px) {

  .tranbanner-col {
    padding-top:45%;
  }
  
  .copybanner-col {
    padding-top:42%;
  }
  
  .graphicbanner-col {
    padding-top:40%;
    text-align:center;
  }
  
  .otherbanner-col {
    padding-top:42%;
  }
  
  h1.eng {
    font-size: 1.4em;
  }
  
}


/******* Home Section: 1024px *******/
article.homesec-col {
  width:50%;
}

article.homesec-col h2 {
  font-size:2em;
}

p.homesec3-text1 {
  font-size:1em;
}

p.homesec3-text2 {
  font-size:1.3em;
}

p.homesec3-text3 {
  font-size:1.2em;
}

/******* Home Section: 768px *******/
@media screen and (max-width:768px) {
  
  .intro-l {
    float:none;
    width:100%;
  }
  
  .intro-r {
    float:none;
    width:100%;
  }
  
  figure.introicon {
    width:13%;
  }

  article.introtext {
    width:82%;
  }
  
  
  article.homesec-col {
    width:45%;
  }

  article.homesec-col h2 {
    font-size:1.5em;
  }

  p.homesec3-text1 {
    font-size:0.9em;
  }

  p.homesec3-text2 {
    font-size:1.2em;
  }

  p.homesec3-text3 {
    font-size:1.2em;
  }

}


/******* Home Section:480px *******/
@media screen and (max-width:480px) {
  
  header#main {
    background-color:#f5f5f5;
  }

  
  article.introtext h1 {
    font-size:1em;
  }

  
  article.homesec-col {
    float:none;
    width:100%;
    text-align:center;
    padding-top:40%;
  }

  p.homesec3-text1 {
    margin-top:3%;
  }
  
  article.homesec-col h2,
  p.homesec3-text1,
  p.homesec3-text2,
  p.homesec3-text3 {
    text-shadow:2px 2px 3px #000000;
  }

}


/******* Home Section:414px *******/
@media screen and (max-width:414px) {

  section#homesec2 {
    padding-top:8%;
  }

}

/******* Home Section:375px *******/
@media screen and (max-width:375px) {
  
  article.homesec-col h2 {
    font-size:1.3em;
  }
  
  p.homesec3-text1,
  p.homesec3-text2,
  p.homesec3-text3 {
    font-size:0.9em;
  }

}


/*********** TRANSLATION PAGE **********/

/******* Translation: 800px *******/
@media screen and (max-width:800px) {
  
  article.transec2col-l,
  article.transec2col-r {
    float:none;
    width:100%;
    margin:6% 0 8% 0;
  }

}


/******* Translation: 480px *******/
@media screen and (max-width:480px) {
  
  h3.tran-subtitle {
    font-size:1.5em;
  }
  
  p.tran-text {
    font-size: 1em;
  }
  
  p.tran-text2 {
    font-size: 1em;
  }
  
  figure.mistranimg1 {
    width:78%;
    margin:2% 0 2% 0;
  }

  figure.mistranimg2 {
    float:right;
    width:22%;
    margin:30% 0 0 0;
  }
  
  h4.tran-subtitle2 {
    text-align:center;
  }
  
  figure.mistranimg3 {
    float:none;
    width:100%;
    margin-top:4%;
  }

  article.mistran3col-r {
    float:none;
    width:100%;
    margin-top:4%;
  }
  
  article.mistran3col {
    width:48%;
    margin-top:4%;
  }
  
  article.mistran3col2 {
    margin-right:0;
  }

}


/******* Translation: 414px *******/
@media screen and (max-width:414px) {

  section#transec1 p {
    font-size:0.9em;
  }
  
  h4.tran-subtitle2 {
    font-size:0.8em;
  }
  
  ul.article {
    font-size:0.85em;
  }

}


/*********** COPYWRITING PAGE **********/

/******* Copywriting: 800px *******/
@media screen and (max-width:800px) {

  figure.copycol-img {
    float:right;
    width:53%;
    margin:1% 0 0 0;
  }
  
  ul.copylist {
    margin-left:15%;
  }
  
}

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

  article.copycol-l {
    float:none;
    width:100%;
    margin-top:6%;
  }

  
  figure.copycol-img {
    display:none;
  }
  
  ul.copylist {
    margin-left:0;
    margin-bottom:4%;
    text-align:center;
  }
  
}

/******* Copywriting: 375px *******/
@media screen and (max-width:375px) {

  ul.copylist {
    font-size:1em;
  }
  
}


/*********** GRAPHIC DESIGN PAGE **********/

/******* Graphic Design: 480px *******/
@media screen and (max-width:480px) {

  .workscol {
    width:48%;
    margin:2% 4% 2% 0
  }
  
  .workscol2, .workscol4 {
    margin-right:0;
  }
  
  .workstitle {
    background:rgba(0,0,0,0.7);
    -webkit-transform:translateY(0);
    -moz-transform:translateY(0);
    transform:translateY(0);
  }
  
  h2.comname1 {
    font-size:0.85em;
  }
  
}

/******* Graphic Design: 414px *******/
@media screen and (max-width:414px) {

  .workscol {
    float:none;
    width:100%;
  }
  
  h2.comname1 {
    font-size:1em;
  }
  
}


/*********** OTHER SERVICES PAGE **********/

/******* Other Services: 800px *******/
@media screen and (max-width:800px) {

  p.othtext1 {
    font-size:1em;
  }
  
  figure.pfimg {
    width:30%;
    margin:3% 5% 0 0;
  }
  
  figure.clearmargin {
    margin-right:0;
  }
  
  article.othcol2 {
    width:49%;
  }
  
  h2.title2other {
    font-size:1em;
  }
  
  ul.othlist {
    font-size:0.9em;
  }
  
}

/******* Other Services: 480px *******/
@media screen and (max-width:480px) {

  p.othtext1 {
    text-align:center;
  }
  
  article.othcol1,
  article.othcol2 {
    float:none;
    width:100%;
    margin:7% 0 7%;
  }
  
}

/******* Other Services: 414px *******/
@media screen and (max-width:414px) {

  figure.pfimg {
    width:100%;
    float:none;
  }

}

/******* Other Services: 360px *******/
@media screen and (max-width:360px) {

  h2.title2other {
    font-size:0.95em;
  }

}


/*********** ALL ABOUT LA SSTUDIO PAGES CONTENTS **********/


/******* About Language:800px ******/
@media screen and (max-width:800px) {
 
  article.langcol1 {
    float:none;
    width:100%;
    text-align:center;
    margin-bottom:3%;
  }

  article.langcol2 {
    float:none;
    width:100%;
    margin-bottom:3%;
  }
  
  article.langcol3 {
    float:none;
    width:100%;
  }
  
  figure.langcol3a {
    width:75%;
    margin:2% auto 0;
  }
  
  article.langcol4 {
    float:none;
    width:100%;
    margin:6% 0 6% 0;
  }
  
  h3.subtitle-table {
    text-align:center;
  }

}


/******* About Language:480px ******/
@media screen and (max-width:480px) {

  table.table1 th,
  table.table1 h4,
  table.table1 p {
    font-size:0.8em;
  }
  
  article.langcol5 {
    float:none;
    width:100%;
  }
  
  article.langcol5 p {
    font-size:1em;
  }
  
  article.langcol6 {
    float:none;
    width:80%;
    margin:5% auto;
  }

}

/******* About Language:375px ******/
@media screen and (max-width:375px) {

  table.table1 th,
  table.table1 h4,
  table.table1 p {
    font-size:0.7em;
  }
  
}


/******* About Us: 480px ******/
@media screen and (max-width:480px) {

  article.aboutcol1 {
    float:none;
    width:100%;
  }

  article.aboutcol2 {
    float:none;
    width:100%;
    margin-top:4%;
  }

}


/******* Our Clients:768px ******/
@media screen and (max-width:800px) {
  
  p.clname {
    font-size:0.8em;
  }
  
  ul.cllist {
    font-size:0.85em;
  }

}

/******* Our Clients:480px ******/
@media screen and (max-width:480px) {
  
  
  /*
  .clcol {
    width:30%;
    margin:2% 5% 0 0;
  }
  
  
  .clearclcolmargin {
    margin-right:0;
  }
  
  .clcolboth {
    clear:both;
  }
  
  .removeclearfix {
    display:none;
  }
  */
  
  
  .clcol {
    width:30%;
    margin:2% 5% 0 0;
  }
  
  .clcol3, .clcol6 {
    margin-right:0;
  }
  
  
  
  
  ul.cllist {
    margin:10% 0 5% 5%;
  }
  
}

/******* Our Clients:414px ******/
@media screen and (max-width:414px) {

  p.clname {
    font-size:0.75em;
  }

}


/******* Career:800px ******/
@media screen and (max-width:800px) {

  article.careercol1 {
    width:38%;
  }
  
  .careercol2 {
    width:54%;
  }
  
  article.careercol1 p {
    font-size:1em;
  }

}


/******* Career:480px ******/
@media screen and (max-width:480px) {
  
  article.careercol1,
  .careercol2 {
    float:none;
    width:100%;
    margin-bottom:7%;
  }
  
}



/******* Contact Us:800px ******/
@media screen and (max-width:800px) {
  
  .contactcol1 {
    width:42%;
  }

  .contactcol2 {
    width:54%;
  }
  
  .hq {
    float:none;
    width:100%;
  }

  map {
    float:none;
    width:100%;
  }
  
  
  h4.location {
    margin-top:4%;
  }

  address.venue span {
    display:inline;
  }
  
  .info1 {
    width:30%;
  }

  .info2 {
    width:70%;
  }
  

}


/******* Contact Us:640px ******/
@media screen and (max-width:640px) {
  .info1, .info2 {
    width:100%;
    float:none;
  }

}


/******* Contact Us:480px ******/
@media screen and (max-width:480px) {
  
  .contactcol1,
  .contactcol2 {
    width:100%;
    float:none;
    margin-bottom:8%;
  }
  
  .info1 {
    float:left;
    width:35%;
  }

  .info2 {
    float:left;
    width:65%;
  }
  
  

}



/***** FORM:800px *****/
@media screen and (max-width:800px) {
  
  .formcol1 p,
  label.ticktext {
    font-size:0.85em;
  }
  
  input.btn {
    width:20%;
  }

}


/***** FORM:414px *****/
@media screen and (max-width:414px) {
  
  .formcol1 {
    width:40%;
  }

  .formcol2 {
    width:60%;
  }
  
  .formcol1 p,
  label.ticktext {
    font-size:0.8em;
  }
  
  input.btn {
    width:20%;
  }

}

/***** FORM:375px *****/
@media screen and (max-width:375px) {
  
  .formcol1 {
    width:100%;
    float:none;
  }

  .formcol2 {
    width:100%;
    float:none;
    margin-bottom:3%;
  }
  
  .formcol1 p,
  label.ticktext {
    font-size:0.85em;
  }
  
  .formcol1 i {
    display:none;
  }

}

/***** FORM:320px *****/
@media screen and (max-width:320px) {
  
  input.btn {
    width:25%;
    font-size:0.85em;
  }
  
}



/*********** FONT **********/
@media screen and (max-width:480px) {
  
  h2.title {
    font-size:1.1em;
    text-align:center;
    margin-top:3%;
  }

  h2.title2 {
    font-size:1.1em;
    text-align:center;
    margin-top:3%;
  }
  
  h2.title3 {
    font-size:1em;
  }
  
  h3.subtitle {
    font-size:1.2em;
  }

}

@media screen and (max-width:480px) {

  h3.subtitle {
    font-size:1.1em;
  }

}




/*** tag: 1024px ***/
.subtitle-tag i {
  width:12%;
}

.subtitle-tag h3 {
  width:85%;
  margin-top:2%;
}

/*** tag: 800px ***/
@media screen and (max-width:800px) {
  
  .subtitle-tag i {
    width:8%;
  }

  .subtitle-tag h3 {
    width:81%;
    margin-top:2%;
  }

}
/*** tag: 480px ***/
@media screen and (max-width:480px) {
  
  .subtitle-tag h3 {
    font-size:1em;
  }

}



/********** FOOTER **********/

/******* Footer: 800px *******/
@media screen and (max-width:800px) {

  figure.ftlogo {
    float:none;
    width:20%;
    margin:0 auto;
  }
  
  section.ft {
    float:none;
    width:100%;
  }
  
  section.ft h4 {
    text-align:center;
    margin-top:1%;
  }
  
  .ftcol1 {
    width:24%;
    margin:2% 4% 0 0;
  }

  .ftcol2 {
    width:24%;
    margin:2% 4% 0 0;
  }

  .ftcol3 {
    width:20%;
    margin:2% 4% 0 0;
  }

  .ftcol4 {
    width:20%;
    margin:2% 0 0 0;
  }
  
  .ftcol5 {
    clear:both;
    float:none;
    width:40%;
    margin:3% auto;
  }
  
  i.fticon {
    width:13%;
    margin:5% 5% 0 0;
  }
  
  i.fticon1 {
    margin-left:12%;
  }
  
  i.fticon4 {
    width:22%;
    margin-top:5%;
    margin-right:0;
  }

  footer#copyright {
    padding:1% 0;
    text-align:center;
  }

}


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

  figure.ftlogo {
    width:30%;
  }
  
  .ftcol1 {
    width:47%;
    margin:3% 0 0 8%;
  }

  .ftcol2 {
    float:right;
    width:40%;
    margin:3% 0 0 0;
  }

  .ftcol3 {
    clear:both;
    width:47%;
    margin:3% 0 0 8%;
  }

  .ftcol4 {
    float:right;
    width:40%;
    margin:3% 0 0 0;
  }
  
  h5.ft,
  address.ftvenue,
  ul.navft a {
    font-size:0.9em;
  }
  
  .ftcol5 {
    width:50%;
  }

}


/******* Footer: 414px *******/
@media screen and (max-width:414px) {

  .ftcol1 {
    width:47%;
    margin:3% 0 0 3%;
  }

  .ftcol2 {
    width:45%;
    margin:3% 0 0 0;
  }

  .ftcol3 {
    width:47%;
    margin:5% 0 4% 3%;
  }

  .ftcol4 {
    width:45%;
    margin:5% 0 4% 0;
  }
  
  .ftcol5 {
    width:70%;
  }
  
  h5.ft,
  address.ftvenue,
  ul.navft a {
    font-size:0.85em;
  }

}

/******* Footer: 360px *******/
@media screen and (max-width:360px) {

  h5.ft,
  address.ftvenue,
  ul.navft a {
    font-size:0.8em;
  }
  
  footer#copyright p {
    font-size:0.75em;
    color:#d8d8d8;
  }

}

/******* Footer: 320px *******/
@media screen and (max-width:320px) {

  section.ft h4 {
    font-size:0.8em;
  }
  
  h5.ft,
  address.ftvenue,
  ul.navft a {
    font-size:0.7em;
  }

}