/* Menu Responsive */
.menu-wrap{margin:0 auto;padding:1.5% 0%}
.menu-wrap img.LogoSideMenu{margin-left:auto;margin-right:auto;display:block;width:33.333%;}
.menu-wrap input#txtSearch2{width:97%;background:#f7f7f7;}
.menu-wrap input#btnSearch2{width:97%;background:#f7f7f7;}
.menu-sidebar{width:97%;margin-top:25%;}
.menu-sidebar nav{width:97%;}
.menu-sidebar li{border-bottom:1px solid rgba(0,0,0,.12);font-size:14px;font-weight:bold;}
.menu-sidebar li i{float:left}
.menu-sidebar li > a{color:#fff;font-weight:normal;font-size:.85em;position:relative;}
.menu-sidebar li > a:hover:after{background-position:-100% 0;background:#e8b463}
.menu-sidebar .menu-item-has-children{position:relative;}
.menu-sidebar .menu-item-has-children .sub-menu{display:none;}
.sidebar-menu-arrow:after{padding:5px;color:#f7941d;background:#e8b463;position:relative;}
.sidebar-menu-arrow:hover:after{cursor:pointer;color:red;}
.sidebar-menu-arrow:active:after{top:2px;background:#e8b463}
/*SIDE NAV*/
.sidenav{width:100%;height:100%;width:0;position:absolute;z-index:1;top:0;right:0;background:#323131;overflow-x:hidden;transition:0.5s;padding-top:1px;float:left;position:fixed;z-index:10000000000;}
.sidenav a{padding:8px 8px 8px 32px;text-decoration:none;font-size:25px;color:#818181;display:block;transition:0.3s;padding-left:1px;}
.sidenav a:hover, .offcanvas a:focus{color:#ef704c;}
.sidenav .closebtn{position:absolute;top:0;left:5px;font-size:1.5em;}

.Side-MenuRe{display:none;}

/*Responsive*/
@media only screen and (max-width:1800px) {

}

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

}
@media only screen and (max-width:1500px){
}

@media only screen and (max-width:1450px) {
#header div#logo{width:70%}
.textfield__field.is-dirty .textfield__input, .textfield__input{padding:1%;}
.divCatHome{padding:1% 2%}

}


@media only screen and (max-width:1300px){
ul.ruby-menu > li{font-size:.7em !important;}
ul.ruby-menu > li > a:only-child{padding:0 10px;}
.HomeCat{padding:1% 5%;margin:0 auto}
}


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

}
@media only screen and (max-width:1100px){
ul.ruby-menu > li > a:only-child{padding:0 6px;}
#header div#logo{width:90%}
.SecProjectHome div.divProjectR{width:100%;}
.SecProjectHome div.divProjectR img{width:15%;}
.SecProjectHome div.divProjectL{width:100%;}
.divContent .divContentR{width:100%}
.divContent .divContentL{width:100%}

}
@media only screen and (max-width:999px){
ul.ruby-menu > li{font-size:.6em !important;}
ul.ruby-menu > li > a:only-child{padding:0 5px;}
div.divMigrationTop{min-height:initial;}
.divCommentTop{margin:1% 1%;padding:3%;}
div#divProduct div#divProductimg{width:100%;}
div#divProduct div#divProductdetail{width:100%;}
.divProductIn{width:24%;}
div#divProduct div#divProductdetail h1{font-size:.9em}
div#divProduct div#divProductdetail h3{font-size:.8em}
div#divProduct div#divProductdetail p{font-size:.8em;line-height:2em}
}

@media only screen and (max-width:830px){
 .HomeCat{flex-wrap:wrap;}
.ruby-menu-demo-header{display:none}
#Searchbox{display:none;}
.Side-MenuRe{display:block;position:absolute;top:55%;transform:translateY(-50%);right:1%;}

#header div#logo img{margin-right:auto;margin-left:auto;display:block;width:100%}
#header div#logo{margin:.25% 5%;width:10%;}
div.divTel{width:50%;left:1% !important}
div.divTel a{font-size:.8em}
.HomeCat .container{width:27.333%;}
div.divMigrationTop div.divMigrationOn h1{font-size:1em}
.divCommentTop{font-size:.8em}
h2.BackgroundTitle{font-size:.9em}
.BackgroundTitle::before{background:url('/images/BackTitle2.png');width:25px;height:25px;}
.divProductIn{width:32.3333%;}

}

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

.HomeCat{flex-wrap:wrap !important;}

.vc_col-lg-6 {width:50%;margin-bottom:7%;}
.mkdf-banner-holder .mkdf-banner-text-inner{font-size:.7em}
.divProducts{flex-wrap:wrap}
.divProducts .divProduct{width:48%;}
.divBanner{display:block;margin:2% 1%;}
.divBanner{margin-bottom:0 !important}
.BoxPM{margin-top:0 !important}
div.Marquee ul{top:0;width:100%;height:initial;left:initial;margin-top:-1%}
div.Marquee{padding:15% 0}
div#divAboutHome div#divAboutHomeIn2{width:100%;margin-right:0 !important;font-size:.8em}
div#divAboutHome div#divAboutHomeIn1{width:100%;display:none}
div#divAboutHome{padding:1.5% 5%;}
div#divFooter div.divFooterIn{width:100%;}
div#divFooter div.divFooterIn2{width:100%;margin:4% 0}
div#divFooter img{width:50%}
div#divAboutHome h1{text-align:center}
.SecProjectHome div.divProjectR img{width:50%}
.divshopserv{padding:2% 5%;}
.SecProjectHome div.divProjectR{border-radius:10px;}
.divContent{padding:1% 2%}
div#divAll div.divContent2{width:99%}
div#divAll div.divContent div.divContent-L{width:100%;float:none}
div#divAll div.divContent div.divContent-R{position:initial;width:100%;float:none}
.divContent .divContentR li{font-size:.75em}
.divArticle{font-size:.8em}
div.divMigrationTop div.divMigrationOn{position:initial;}
.slider{margin:2% 10% !important;}
.slick-prev{left:-22px}
.card{width:49%}
div.divAbout div.divAboutIn{width:95%;margin:0 auto;float:none}
#divMenuIntro h1{font-size:1em;}
#divMenuIntro{position:initial;transform:initial}
div#divContent-contact div#divContent-contactIn div#divContact-Tel div.divPart1{width:100%}
div#divContent-contact div#divContent-contactIn div#divContact-Tel div.divPart2{width:100%;margin:15% 0}
div#divContent-contact div#divContent-contactIn div#divContact-Tel div.divPart3{width:100%}
div.divOnlineOrder{width:48% !important}
.TitleOnlinedetail{font-size:.8em !important;line-height:3em}
div.divOnlinedetail div.Inputdetail2{width:100% !important;font-size:.7em !important}
.box{width:48% !important}
table.Orw{width:98% !important;font-size:.8em !important}
div.divonlinereview div.divoreviewIn{width:100% !important;}
div#divAll div.divCategory3{width:49%}
div.divOnlineOrder a{font-size:.8em}
.OnlineDesign h2{line-height:3.2em;font-size:.85em}
}
 
@media only screen and (max-width:580px) {
#header div#logo{width:15%}
div.divTel span{display:none}
.HomeCat .container{width:44%;margin-bottom:7%;font-size:.8em;text-align:center}
div#divProduct div#divProductdetail div#divProductdetailL{width:100%;}
div#divProduct div#divProductdetail div#divProductdetailPrice{width:100%;margin-top:5%;}
div#divAll div.divContent2 div.divContent-L2 div.L2R{width:100%;}
div#divAll div.divContent2 div.divContent-L2 img.L2L{width:100%;}
.divProductIn{width:49%;}
div.divTel P{font-size:.65em}
.divProductIn .divTitle{font-size:.9em}
div#divAll div.divService-c1 div.divServiceIMG{width:50%;display:block;margin-left:auto;margin-right:auto;float:none}
div#divAll div.divService-c2 div.divServiceIMG{width:50%;display:block;margin-left:auto;margin-right:auto;float:none}
}

@media only screen and (max-width:480px){
#header div#logo{width:15%;margin:.25% 8%;}
.SecProjectHome div.divProjectR img{width:50%;}
.card{width:95%;margin:2% auto;display:table}
.divshopserv .divshopservin{width:31.333%}
div#divAll div.divCategory3{width:99%;margin-bottom:4%}
div#divAll div.divCategory3 div.divTitle{font-size:.8em}
div.divTel i{font-size:.9em;padding:8px 8px 7px 6px;}
div.divTel div.divTelIn2{margin-right:2%}
.slick-prev{left:-7%;}
div#divFooter img{width:20%;}

}

@media only screen and (max-width:410px) {
.vc_col-lg-6 {width:100%;margin-bottom:11%;}

}
@media only screen and (max-width:350px) {
#header div#logo{width:18%;margin:1% 9%;}

}