/* SET DEFAULT */
.wrapper {
  width:94%;
}

/****** Header ******/

/**** Header: 1024px ****/
#headerwrap {
  width:94%;
}

.navi {
  width:62%;
}

ul.dropdown {
  width:22%;
}

/*
ul.dropdown-latest {
    width:16%;
}
*/



/**** Header: 768px ****/
@media screen and (max-width:800px) {
  
  #headerwrap {
    width:100%;
    padding-bottom:0;
  }
  
  .logo {
    float:none;
    width:22%;
    margin:0 auto 2%;
  }
  
  .navi {
    float:none;
    width:100%;
    background:#111111;
    position:relative;
  }
  
  
  ul.nav {
    margin-top:0;
  }
  
  ul.nav li {
    margin-left:4%;
    margin-right:4%;
  }
  
  ul.nav a {
    display:block;
    padding:10px 0;
  }
  
  
  ul.dropdown {
    width:29%;
    right:2%;
  }
  
  /*
  ul.dropdown-latest {
    width:22%;
  }
  */
  
  ul.dropdown a
  /*ul.dropdown-latest a*/ {
    padding:4px 0;
  }

  
}

/**** Header: 640px  ****/
@media screen and (max-width:640px) {
  
  
  ul.nav li {
    margin-left:3%;
    margin-right:3%;
  }
  
  ul.dropdown {
    width:35%;
    right:4%;
  }
  
  /*
  ul.dropdown-latest {
    width:26%;
  }
  */
  
  ul.dropdown a
  /*ul.dropdown-latest a*/ {
    font-size:0.8em;
  }

}


/**** Header: 480px ****/
@media screen and (max-width:480px) {
  
  .logo {
    width:30%;
    margin:0 0 0 3%;
    padding-bottom:2%;
  }
  
  i.navbtn {
    display:block;
  }
  
  .navi {
    position:relative;
  }
  
  ul.nav {
    position:absolute;
    top:0;
    left:0;
    overflow:none;
    background:#111111;
    text-align:center;
    width:100%;
    display:none;
  }
  
  ul.nav li {
    float:none;
    margin-left:0;
    margin-right:0;
    border-bottom:1px solid #333333;
  }
  
  ul.nav li:last-child {
    border-bottom:none;
  }
  
  ul.nav a {
    padding:7px 0;
  }
  
  ul.dropdown
  /*ul.dropdown-latest*/ {
    display:none;
  }
  
}

/**** Header: 414px ****/
@media screen and (max-width:414px) {
  #header {
    background:rgba(0,0,0,0.3);
  }

}


/**** Header: 375px ****/
@media screen and (max-width:375px) {
  
  .logo {
    width:33%;
  }
  
}


/****** Home: Main Works ******/

/**** Home main works: 1024px ****/
#mainworks {
  width:94%;
}

p.location {
  height:90px;
}

/**** Home main works: 768px ****/
@media screen and (max-width:800px) {
  
  .slogan,
  span.slogan2 {
    float:none;
    text-align:center;
  }
  
  h2.intro {
    text-align:center;
    margin:10% 0 0;
  }
  
  .homelatest {
    width:47%;
    margin:3% 6% 0 0;
  }
  
  .homelatest2,
  .homelatest4 {
    margin-right:0;
  }
  
  p.location {
    height:auto;
  }
  
}

/**** Home main works: 480px ****/
@media screen and (max-width:480px) {
  .slogan h1 {
    font-size:3.5em;
  }
  
  .homelatest {
    float:none;
    width:100%;
  }
  
  
}

/**** Home main works: 414px ****/
@media screen and (max-width:414px) {
  
  .background {
    display:none;
  }
  
  
  .view {
    text-align:center;
    padding-top:4%;
  }
  
}


/**** Home main works: 375px ****/
@media screen and (max-width:375px) {
  
  .slogan h1 {
    font-size:3em;
  }
  
  span.slogan2 {
    font-size:0.5em;
  }

}

/****** HOME SECTION 2 ******/

/**** Home section2: 1024px ****/
.section2wrap {
  width:94%;
}

#section2-left {
  width:45%;
}

#section2-right {
  width:50%;
}

/**** Home main works: 768px ****/
@media screen and (max-width:800px) {
  
  .section2wrap {
    padding:4% 0;
  }
  
  .hmpromo1 {
    float:none;
    width:100%;
    margin-top:4%;
  }

  .hmpromo2 {
    float:none;
    width:100%;
    margin-top:4%;
    text-align:center;
  }
  
  

}

/**** Home main works: 480px ****/
@media screen and (max-width:480px) {
  
  #section2 h2 {
    font-size:1.4em;
  }
  
  
  .hsec2colF,
  .hsec2col {
    float:none;
    width:100%;
    margin:3% 0 0 0;
  }

}






/****** HOME SECTION 3 ******/

/**** Home section3: 1024px ****/

#section3 {
  width:94%;
}

p.circletext {
  font-size:1.1em;
}

a.circle:hover img.plus {
  margin:40px auto 0;
}

/**** Home section3: 768px ****/
@media screen and (max-width:800px) {
  p.circletext,
  p.circletext2 {
    font-size:1em;
  }
}

/**** Home section3: 640px ****/
@media screen and (max-width:640px) {
  
  #section3 h2 {
    font-size:1.4em;
  }
  
  img.plus {
    width:35px;
    height:35px;
  }
  
  p.circletext {
    font-size:0.9em;
  }
  
  a.circle:hover img.plus {
    margin:30px auto 0;
  }
  
}

/**** Home section3: 480px ****/
@media screen and (max-width:480px) {
  
  
  h1.selesa {
    font-size:1.1em;
  }
  
  h1.homearticle {
    font-size:1.3em;
  }
  
  p.homearticle {
    font-size:0.9em;
  }
  
  hr.line {
    margin:6% auto;
  }
  
  a.circle {
    float:none;
    width:60%;
    height:0;
    padding-bottom:60%;
    margin:4% auto 8% auto;
  }
  
  img.plus {
    width:50px;
    height:50px;
  }
  
  a.circle:hover img.plus {
    margin:80px auto 0;
  }
  
  p.circletext {
    font-size:1.2em;
  }
  
}

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

  a.circle:hover img.plus {
    margin:60px auto 0;
  }

}

/**** Home section3: 360px ****/
@media screen and (max-width:360px) {
  
  p.circletext {
    font-size:1.1em;
  }
  
}

/**** Home section3: 360px ****/
@media screen and (max-width:360px) {
  
  img.plus {
    width:40px;
    height:40px;
  }
  
  a.circle:hover img.plus {
    margin:50px auto 0;
  }
  
  p.circletext {
    font-size:1em;
  }
  
}


/****** ABOUT ******/

/**** About: 1024px ****/
#aboutleft {
  width:50%;
}

#aboutright {
  width:44%;
}

/**** About: 768px ****/
@media screen and (max-width:800px) {
  
  #aboutleft {
    float:none;
    width:100%;
  }

  #aboutright {
    float:none;
    width:100%;
    margin-top:7%;
  }
  
}

/**** About: 375px ****/
@media screen and (max-width:375px) {
  
  p.linktag {
    font-size:0.95em;
  }
  
}


/****** LATEST WORKS ******/

/**** Latest Works: 768px ****/
@media screen and (max-width:800px) {
  
  .workswrapper {
    margin:0 auto;
    width:100%;
  }
  
  #aside h3 {
    display:none;
  }
  
  a.locmenubtn {
    display:block;
  }
  
  #aside {
    float:none;
    width:100%;
    padding-top:1.5%;
    position:relative;
  }
  
  #works-section {
    float:none;
    width:100%;
    border-left:none;
    padding:3%;
  }
  
  ul.area {
    width:100%;
    background:#111111;
    margin-top:0;
    padding-top:7%;
    position:absolute;
    top:0;
    left:0;
    z-index:1000;
    display:none;
  }

  ul.area li {
    margin-bottom:0;
    border-top:1px solid #333333;
  }
  
  ul.area li:last-child {
    border-bottom:1px solid #333333;
  }

  ul.area li a {
    display:block;
    padding:1% 0;
    text-align:center;
    font-size:0.9em;
    color:#e3e3e3;
    text-decoration:none;
    
  }

  ul.area li a:hover {
    color:#ed1d24;
    background:#000000;
  }
  
  .worksphoto {
    width:30%;
    margin:0 5% 3% 0;
  }
  
  .worksphoto3,
  .worksphoto6 {
    margin-right:0;
  }
  
}



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

  a.locmenubtn {
    width:40%;
    padding:1% 3%;
  }
  
  ul.area {
    padding-top:10%;
  }
  
  #works-section {
    padding:8% 3% 3% 3%;
  }
  
  h2.latest {
    margin:8% 0 2%;
  }
  
  .works {
    float:none;
    width:100%;
  }
  
}

/**** Latest Works: 414px ****/
@media screen and (max-width:414px) {
  
  .worksphoto {
    float:none;
    width:100%;
    margin:0 0 3% 0;
  }
  
}


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

  a.locmenubtn {
    width:45%;
    font-size:0.9em;
  }
  
  ul.area {
    padding-top:12%;
  }
  
}


/****** PROMOTION ******/
/**** 640px ****/
@media screen and (max-width:640px) {

  .pmcol1 {
    float:none;
    width:100%;
  }

  .pmcol2 {
    float:none;
    width:100%;
  }

  
  
  
}




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

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

  .gallerytitle {
    float:none;
    width:100%;
  }

  .gallerycontent {
    float:none;
    width:100%;
  }
  
}

/**** Gallery: 640px ****/
@media screen and (max-width:640px) {

  .gallery {
    width:48%;
  }
  
  .gallery2 {
    margin-right:0;
  }
  
  img.plus2 {
    width:16%;
    left:42%;
    bottom:40%;
  }
  
}

/**** Gallery:414px ****/
@media screen and (max-width:414px) {
  
  
  .gallery {
    float:none;
    width:100%;
  }
  
  img.plus2 {
    width:14%;
    left:43%;
    bottom:45%;
  }
  
}



/****** GALLERY SHOWCASE ******/

/**** Showcase: 768px ****/
@media screen and (max-width:800px) {
  
  .galwrapper {
    margin:0 auto;
    width:100%;
  }
  
  #category h3 {
    display:none;
  }
  
  a.galmenubtn {
    display:block;
  }
  
  #category {
    float:none;
    width:100%;
    padding-top:1.5%;
    position:relative;
  }
  
  #showcase {
    float:none;
    width:100%;
    border-left:none;
    padding:5% 3%;
  }
  
  ul.cabinetnav {
    width:100%;
    background:#111111;
    margin-top:0;
    padding-top:7%;
    position:absolute;
    top:0;
    left:0;
    z-index:1000;
    display:none;
  }
  
  ul.cabinetnav li {
    margin-bottom:0;
    border-top:1px solid #333333;
  }
  
  a.act,
  a.notact {
    display:block;
    text-align:center;
    padding:1% 0;
  }
  
  a.act:hover,
  a.notact:hover {
    background:#000000;
  }
  
  a.actdrop {
    color:#ed1d24;
  }
  
  a.notact {
    pointer-events:auto;
    cursor:pointer;
  }
  
  
  ul.cabinetnav ul {
    padding-left:0;
    background:#000000;
  }
  
  ul.cabinetnav ul li {
    margin-bottom:0;
  }
  
  ul.cabinetnav ul i {
    display: none;
  }
  
  ul#kitchennav,
  ul#wardrobenav {
    display:none;
  }
  
  
  .showcasepanel {
    margin-bottom:0;
  }
  
  .panel {
    width:30%;
    margin:0 5% 3% 0;
  }
  
  .panel3,
  .panel6 {
    margin-right:0;
  }
  
}


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

  a.galmenubtn {
    width:30%;
  }
  
  ul.cabinetnav {
    padding-top:8%;
  }
  
}

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

  a.galmenubtn {
    width:32%;
  }
  
  ul.cabinetnav {
    padding-top:9%;
  }
  
  #showcase {
    padding:7% 3% 5%;
  }
  
}


/**** Showcase: 375px ****/
@media screen and (max-width:375px) {
  
  a.galmenubtn {
    width:35%;
  }
  
  ul.cabinetnav {
    padding-top:9%;
  }
  
  .panel {
    float:none;
    width:100%;
  }
  
}

/**** Showcase: 320px ****/
@media screen and (max-width:320px) {
  
  a.galmenubtn {
    width:40%;
  }
  
  ul.cabinetnav {
    padding-top:10%;
  }

}




/****** LOCATION ******/

/**** Location: 768px ****/
@media screen and (max-width:800px) {
  
  .wrapper-location {
    width:80%;
  }
  
  #location {
    float:none;
    width:100%;
  }
  
  #contact {
    float:none;
    width:100%;
    margin-top:6%;
  }
  
}

/**** Location: 640px ****/
@media screen and (max-width:640px) {
  
  .wrapper-location {
    width:90%;
  }
  
}

/**** Location: 480px ****/
@media screen and (max-width:480px) {
  
  .showroom {
    float:none;
    width:100%;
    margin-bottom:5%;
  }
  
  .map {
    float:none;
    width:100%;
    margin:0 0 10% 0;
  }
  
}

/**** Location: 414px ****/
@media screen and (max-width:414px) {
  
  #contact h1 {
    font-size:1.1em;
  }

  span.contact {
    font-size:1.8em;
  }
  
}

/**** Location: 375px ****/
@media screen and (max-width:375px) {
  
  table.inquiry {
    font-size:0.8em;
  }
  
}

/**** Location: 320px ****/
@media screen and (max-width:320px) {
  
  table.info {
    font-size:0.8em;
  }
  
  table.inquiry {
    font-size:0.7em;
  }
}




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

  h1.article {
    font-size:1.1em;
  }
  
}



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

/**** Footer: 1024px ****/
#footerwrap {
  width:94%;
}

.footerlogo {
  width:13%;
  margin-right:3%;
}

.footercontact2 {
  width:24%;
}


/**** Footer: 768px ****/
@media screen and (max-width:800px) {
  
  .footerlogo {
    width:22%;
    margin-right:8%;
  }
  
  .footercontact1 {
    width:30%;
    margin-bottom:3%;
  }
  
  .footercontact2 {
    width:40%;
  }

  .sitemap {
    clear:both;
    float:none;
    width:70%;
    margin:0 0 0 30%;
  }
  
  .sitemap1 {
    width:31%;
  }
  
  .sitemap2 {
    width:69%;
  }
  
}


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

  .footercontact1 {
    width:35%;
  }
  
  .footercontact2 {
    width:35%;
  }
  
  
}


/**** Footer: 480px ****/
@media screen and (max-width:480px) {
  
  .footerlogo {
    float:none;
    width:35%;
    margin:2% auto 3%;
  }
  
  .footercontact1 {
    clear:both;
    width:50%;
    padding-left:4%;
    margin-bottom:5%;
  }
  
  .footercontact2 {
    float:right;
    width:48%;
  }
  
  h4.footertitle {
    margin-bottom:2%;
  }
  
  .sitemap {
    width:100%;
    margin:0 0 0 0;
    padding-left:4%;
  }
  
  .sitemap1 {
    width:31%;
  }
  
  .sitemap2 {
    width:69%;
  }
  

}

/**** Footer: 414px ****/
@media screen and (max-width:414px) {
  
   .footercontact1 {
    float:none;
    width:80%;
    margin:0 auto 4%;
    padding-left:0;
    text-align:center;
  }
  
  .footercontact2 {
    float:none;
    width:100%;
    text-align:center;
    margin-bottom:5%;
  }
  
  address.ft span {
    display:inline;
    margin-right:1%;
  }
  
  h4.footertitle414 {
    text-align:center;
    margin-bottom:2%;
  }
  
  .sitemap {
    padding-left:0;
  }
  
  .sitemap1 {
    width:28%;
  }
  
  .sitemap2 {
    width:72%;
  }
  
  ul.footer a {
    font-size:0.7em;
  }
  
  p.cpright {
    font-size:0.7em;
  }

}

/**** Footer: 375px ****/
@media screen and (max-width:375px) {
  
  .footercontact1 {
    width:85%;
  }
  
  .sitemap1 {
    width:100%;
    float:none;
    text-align:center;
  }
  
  .sitemap2 {
    width:100%;
    float:none;
    margin-top:3%;
  }
  
  a.ftgal375 {
    display:block;
    text-align:center;
  }
  
  .ftgal {
    margin-top:3%;
  }
  
  
  ul.footer a {
    text-transform:uppercase;
  }
  
  p.cpright {
    font-size:0.6em;
  }

}

/**** Footer: 360px ****/
@media screen and (max-width:360px) {
  
  .footercontact1 {
    width:100%;
  }

}