@charset "utf-8";
/*
CSS Document made by haryo bayu
more about me : www.haryobayu.web.id | haryobayu.info@gmail.com
23 Oktober 2019
*/

@media only screen and (min-width: 1100px)  and (max-width: 1199px ) {
.wrapping { width:100% !important;}
.header-mobile { display:none !important;}
.list-lr { margin-left:10px !important; margin-right:10px !important;}
.mar-lr {margin-left:0px !important; margin-right:0px !important;}
.group-a { width:1000px;}
.group-b  { width:100px;}

}
@media only screen and (min-width: 1000px)  and (max-width: 1099px ) {
.wrapping { width: 100% !important;}
.header-mobile { display:none !important;}
.list-lr { margin-left:10px !important; margin-right:10px !important;}
.mar-lr {margin-left:0px !important; margin-right:0px !important;}
.group-a { width:900px;}
.group-b  { width:100px;}
}
@media only screen and (min-width: 901px)  and (max-width: 999px ) {
.wrapping { width: 100% !important;}
.header-mobile { display:none !important;}
.list-lr { margin-left:10px !important; margin-right:10px !important;}
.mar-lr {margin-left:0px !important; margin-right:0px !important;}
.group-a { width:800px;}
.group-b  { width:100px;}
}

@media only screen and (min-width: 850px)  and (max-width: 900px ) {
.wrapping { width: 100% !important;}
.header-mobile { display:block !important; position:fixed; top:0px;}
.header-desktop { display:none !important;}
.list-lr { margin-left:10px !important; margin-right:10px !important;}
.mar-lr {margin-left:0px !important; margin-right:0px !important;}
.group-a { width:740px;}
.group-b  { width:100px;}

}

@media only screen and (min-width: 769px)  and (max-width: 849px ) {
.wrapping { width: 100% !important;}
.header-desktop { display:none !important;}
.header-mobile { display:block !important;}
.list-lr { margin-left:10px !important; margin-right:10px !important;}
.mar-lr {margin-left:0px !important; margin-right:0px !important;}
.group-a { width:650px;}
.group-b  { width:100px;}
.wrap-foot .group-a .logo-cil { width:200px; height:auto !important; padding-bottom:10px;}

}
@media only screen and (min-width: 641px)  and (max-width: 768px ) {
.wrapping { width: 100% !important;}
.header-desktop { display:none !important;}
.header-mobile { display:block !important;}
.list-lr { margin-left:10px !important; margin-right:10px !important;}
.mar-lr {margin-left:0px !important; margin-right:0px !important;}
.group-a { width:500px;}
.group-b  { width:100px;}
.wrap-foot .group-a .logo-cil { width:160px; height:auto !important; padding-bottom:10px;}
}

@media only screen and (min-width: 481px)  and (max-width: 640px ) {
.wrapping { width: 100% !important;}
.header-desktop { display:none !important;}
.header-mobile { display:block !important;}
.list-lr { margin-left:10px !important; margin-right:10px !important;}
.mar-lr {margin-left:0px !important; margin-right:0px !important;}


.group-a { width:360px;}
.group-b  { width:100px;}
.wrap-foot .group-a .logo-cil { width:160px; height:auto !important; padding-bottom:10px;}

}

@media only screen and (min-width: 421px)  and (max-width: 480px ) {
.wrapping { width: 100% !important;}
.header-desktop { display:none !important;}
.header-mobile { display:block !important;}
.list-lr { margin-left:10px !important; margin-right:10px !important;}
.mar-lr {margin-left:0px !important; margin-right:0px !important;}

.group-a { width:320px;}
.group-b  { width:100px;}
.wrap-foot .group-a .logo-cil { width:160px; height:auto !important; padding-bottom:10px;}

}

@media only screen and (min-width: 360px)  and (max-width: 420px ) {
.wrapping { width: 100% !important;}
.header-desktop { display:none !important;}
.header-mobile { display:block !important;}
.list-lr { margin-left:10px !important; margin-right:10px !important;}
.mar-lr {margin-left:0px !important; margin-right:0px !important;}


.group-a { width:200px;}
.group-b  { width:100px;}
.wrap-foot .group-a .logo-cil { width:160px; height:auto !important; padding-bottom:10px;}

}

@media only screen and (max-width: 359px ) { 
.wrapping { width: 100% !important;}
.header-desktop { display:none !important;}
.header-mobile { display:block !important;}
.list-lr { margin-left:10px !important; margin-right:10px !important;}
.mar-lr {margin-left:0px !important; margin-right:0px !important;}


.group-a { width:200px;}
.group-b  { width:100px;}
.wrap-foot .group-a .logo-cil { width:160px; height:auto !important; padding-bottom:10px;}
}