/* sedikit beda antar halaman
   topmenu bgcolor : beda tiap hal (catat sebelum copy). tiap naskah sama / hitam
   ban bg
   ada yg hrs keluar krn blok background
*/


/*


@font-face {
  font-family: "proxi";
  font-style: normal;
  font-weight: normal;
  src: url("Mark Simonson - Proxima Nova Light.otf") format("opentype");
}

@font-face {
  font-family: "proxireg";
  font-style: normal;
  font-weight: normal;
  src: url("Mark Simonson - Proxima Nova Regular.otf") format("opentype");
}

@font-face {
    font-family: "roboto2";
    src: url("font2/Roboto-Regular.woff") format("woff"); 
    font-style: normal;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}

@font-face{font-family:Roboto;font-style:normal;font-weight:100;src:local('Roboto Light'),local('Roboto-Light'),url(https://fonts.gstatic.com/s/roboto/v18/Hgo13k-tfSpn0qi1SFdUfT8E0i7KZn-EPnyo3HZu7kw.woff) format('woff'),url(https://fonts.gstatic.com/s/roboto/v18/Hgo13k-tfSpn0qi1SFdUfVtXRa8TVwTICgirnJhmVJw.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2212,U+2215}
@font-face{font-family:Roboto;font-style:normal;font-weight:300;src:local('Roboto Light'),local('Roboto-Light'),url(https://fonts.gstatic.com/s/roboto/v18/Hgo13k-tfSpn0qi1SFdUfT8E0i7KZn-EPnyo3HZu7kw.woff) format('woff'),url(https://fonts.gstatic.com/s/roboto/v18/Hgo13k-tfSpn0qi1SFdUfVtXRa8TVwTICgirnJhmVJw.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2212,U+2215}
@font-face{font-family:Roboto;font-style:normal;font-weight:400;src:local('Roboto'),local('Roboto-Regular'),url(https://fonts.gstatic.com/s/roboto/v18/2UX7WLTfW3W8TclTUvlFyQ.woff) format('woff'),url(https://fonts.gstatic.com/s/roboto/v18/CWB0XYA8bzo0kSThX0UTuA.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2212,U+2215}
@font-face{font-family:Roboto;font-style:normal;font-weight:500;src:local('Roboto Medium'),local('Roboto-Medium'),url(https://fonts.gstatic.com/s/roboto/v18/RxZJdnzeo3R5zSexge8UUT8E0i7KZn-EPnyo3HZu7kw.woff) format('woff'),url(https://fonts.gstatic.com/s/roboto/v18/RxZJdnzeo3R5zSexge8UUVtXRa8TVwTICgirnJhmVJw.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2212,U+2215}
@font-face{font-family:Roboto;font-style:normal;font-weight:700;src:local('Roboto Bold'),local('Roboto-Bold'),url(https://fonts.gstatic.com/s/roboto/v18/d-6IYplOFocCacKzxwXSOD8E0i7KZn-EPnyo3HZu7kw.woff) format('woff'),url(https://font.gstatic.com/s/roboto/v18/d-6IYplOFocCacKzxwXSOFtXRa8TVwTICgirnJhmVJw.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2212,U+2215}



@font-face {
    font-family: "roboto-light";
    src: url("font2/Roboto-Light.woff") format("woff"); 
    font-style: normal;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}

@font-face {
    font-family: "LatoWebLight";
    src: url("Lato-Light.woff2") format("woff2"); 
    font-style: normal;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}

.rob { font-family: roboto2; font-size: 16px;
  letter-spacing: 0.01em;
  text-rendering: optimizeSpeed;
  -webkit-font-smoothing: subpixel-antialiased;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.robo {
  font-family: 'Roboto';
  text-rendering: optimizeSpeed;
	color: #424242 ;
	font-size: 16px;
	font-weight: 400;
	letter-spacing: 0.01em;
	line-height: 22px;
	margin: 1em 0;  
}
.proxi { font-family: proxi; font-size: 16px; color: black; }
.proxireg { font-family: proxireg; font-size: 16px; color: black; }

*/

@font-face {
  font-family: "banner";
  font-style: normal;
  font-weight: normal;
  src: url("banner") format("woff");
}

@font-face {
  font-family: "paragraph";
  font-style: normal;
  font-weight: normal;
  src: url("paragraph") format("woff");
}

@font-face {
  font-family: "tagline";
  font-style: normal;
  font-weight: normal;
  src: url("tagline") format("woff");
}

@font-face {
  font-family: "title";
  font-style: normal;
  font-weight: normal;
  src: url("title") format("woff");
}

@font-face {
    font-family: "prolight2";
    src: url("Proxima Nova Light.woff") format("woff"); 
    font-style: normal;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }
html,body{ height:100%; }
body{margin:0; padding:0;font-family:paragraph, Arial, Helvetica ; font-size:16px; color: rgb(70,80,80); background-color:white; line-height:150% ; }
.bodi { font-family: prolight2; font-size: 16px; color: black; }
.par { font-family: paragraph; font-size: 16px; color: black; }

div2 {pointer-events: none; }
p { margin-top:0; margin-bottom: 30px ;} /*40px*/
ul { margin-bottom: 40px ;}
ol { margin-bottom: 40px ;}
li { margin-bottom: 10px ;}
.lingkar { list-style-type: circle; margin-bottom:0; margin-top:0; }
.alfa { list-style-type: lower-alpha; margin-bottom:0; }
ul.dashed {
  list-style-type: none;
}
ul.dashed li:before {
  content: '-';
  position: absolute;
  margin-left: -10px;	
}

.p2 { margin-bottom: 20px ;}
.p3 { margin-bottom: 20px ;  }
.p4 { margin-bottom: 0 ; }
b { font-weight:normal;}
img { margin:0; padding:0; border: 0 none; pointer-events: none; }

.urlkecil { text-decoration: underline; font-size:13px; 
  word-wrap: break-word;
  word-break: break-all;
  word-break: break-word;
}

.urlkecil2 { text-decoration: underline; font-size:13px; 
 overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-all;
  word-break: break-word;
  hyphens: auto;
}

.grs_bawah { text-decoration: underline; }
/* beda antar hal
#topmenu {position: fixed; top: 0; left: 0; width: 100%; min-height: 50px ; overflow: hidden; z-index: 300; color: white; background-color:rgba(50, 50, 50, 0.3);}
#topmenu.no_ban {color: white; background-color: rgb(50,50,50); }
*/
/* absolute tabrakan dg overflow pd container ma. pd browser samsung menyebabkan onclick tidak stabil  
#topmenu_icon {cursor: pointer; display: inline-block; margin:0; position: absolute ; right: 15px; top: -300px; } 
*/
#topmenu_icon {float:right; margin: 8px 15px 0 0; cursor: pointer; display: none; }
#topmenu_cek { position: absolute; margin:0; top:10px; right:100px ; font-size: 22px; line-height: 170%; color: red ; background-color:white; }	
.topmenu_iconb1, .topmenu_iconb2, .topmenu_iconb3 {width: 35px; height: 5px; background-color: rgb(0,255,0); margin: 6px 0; transition: 0.4s; }
/* #topmenu_icon.terang .topmenu_iconb1, #topmenu_icon.terang .topmenu_iconb2, #topmenu_icon.terang .topmenu_iconb3 {background-color: rgb(0,255,0); } */
.change .topmenu_iconb1  {-webkit-transform: rotate(-45deg) translate(-9px, 6px); transform: rotate(-45deg) translate(-9px, 6px); }
.change .topmenu_iconb2 {opacity: 0;}
.change .topmenu_iconb3  {-webkit-transform: rotate(45deg) translate(-8px, -8px); transform: rotate(45deg) translate(-8px, -8px); }

#topmenu_item {float:right; overflow: hidden;  min-height:50px; margin-right:30px; display: block; background:transparent; }
#topmenu_item a {font-family: "Times New Roman", Times, serif, Garamond, Arial; font-size:17px; text-decoration: none; color: inherit; float: left; display: block; text-align: center; padding: 9px; }
#topmenu_item a:hover {text-decoration: underline ; }
#topmenu_item .ditem {font-family: "Times New Roman", Times, serif, Garamond, Arial; font-size:13px; text-decoration: none; color: inherit; 
        float: left; display: block; text-align: center; padding: 9px; cursor: -webkit-grab; cursor: grab; }
#topmenu_item .ditem:hover {text-decoration: underline ; }
.fbesar {font-size:17px; }

.logo {position:fixed; top:9px; left:20px; z-index: 302;} 
/* beda antar hal
#ban {position: relative ; width : 100% ; height:107% ; max-height : 680px ; background-color:rgb(160,160,160) ;
	background-image: url("ds.jpg"); background-position: 50% 50% ; background-repeat: no-repeat; background-attachment: scroll; background-size:cover; }
*/	
.ban_tag { max-width:700px; color:white;  position: absolute ; left: 9%; top: 48%;
	transform: translate(0,-40%); -ms-transform: translate(0,-40%); -webkit-transform: translate(0,-40%); } 
h1 {font-family: banner ; font-size: 50px; font-weight:normal ; line-height: 100%; margin:0 0 35px 0 ; }
h2 {font-family: title; font-size: 60px; line-height: 100%; margin:0; font-weight:normal ;  }
h3 {font-family: inherit ; font-weight:normal ; font-size: inherit; line-height: inherit; margin: 0 ;  }
#ban_tag_moto { max-width:403px ; font-family: tagline; font-size: 28px; line-height: 170%; margin:0 ; }
	
#ban_cek { position: absolute; bottom:30px; left:20px; font-size: 22px; line-height: 170%; color: red ; background-color:white; }	

#nas_ban {max-width:800px; margin:auto ; padding:100px 25px 10px 25px ; float:none; text-align:center; }
.h2nas {font-size: 50px !important; } 
.nas {min-height: 680px ; max-width:800px; margin:auto ; padding:40px 0 ; }
.nas_par {width:100%; padding: 0 10px ; float:none; }
/*utk semua  padding-left======= padding:60px 0 0 10px;} 30 vs 69 */
.nas_kiri1 {width:20%; float:left; padding:10px 0 0 10px;} 
.nas_kiri2 {width:79%; padding: 0 10px 0 30px ; float:right; }
.nas_kanan1 {width:79%; float:left; padding: 0 30px 0 10px ;} 
/*utk semua  padding-right==== */
.nas_kanan2 {width:20%; float:right; padding:10px 10px 0 0; } 
.judulbk2 {font-weight: normal; font-family:paragraph; font-size:26px; margin:0 0 10px 0; color:rgb(80,80,80);  }
.judulbk3 {font-weight: normal; font-family:paragraph; font-size:28px; margin:0 0 10px 0; color:rgb(80,80,80);  }
.judulbk4 {font-weight: normal; font-family:paragraph; font-size:20px; margin:0 0 10px 0; color:rgb(80,80,80); text-decoration:underline; }
.judulbk5 {font-weight: normal; font-family:paragraph; font-size:18px; margin:0 0 10px 0; color:rgb(80,80,80); text-decoration:underline; }
.inh {font-weight: inherit; font-family:inherit; font-size:inherit; margin:inherit; color: inherit; line-height:inherit; }

.judul3  {font-family: title; font-size: 45px; line-height: 100%; margin: 0 0 35px 0 ; }
.judul3b  {font-family: arial; font-size: 30px; line-height: 100%; margin: 0 0 25px 0 ; font-weight: normal; }
.blok_hitam { width:100%; color:white; background-color:rgb(100,100,100) ;  }
.blok_abu { width:100%; background-color:rgb(225,225,225) ;  }
.kanan {float:right; margin:0 ;}

.isi1 {max-width:900px; margin:auto ; }
.isi2 {max-width:800px; margin:auto ; }
.garis {max-width:900px; margin:auto; border-bottom: 1px solid rgb(200,200,200) ; }
.isi1_j {font-family: arial, helvetica; font-size: 16px; line-height:90%; margin:0; padding-bottom:10px; font-weight: bold; }
.bot0 { margin-bottom:0; }
.bot5 { margin-bottom: 5px ;}
.bot10 { margin-bottom: 10px ;}
.bot15 { margin-bottom: 15px ;}
.bot30 { margin-bottom: 30px ;}
.bot50 { margin-bottom: 50px ;}
.bot100 { margin-bottom: 100px ;}
.top100 { margin-top: 100px ;}
.top100t { margin-top: 100px ;}
.top0 { margin-top: 0;}
.top15 { margin-top: 15px ;}
.top30 { margin-top: 30px ;}
.top50 { margin-top: 60px ;}
.padv50 {padding-top:50px ; padding-bottom:50px ;}

.left20 {margin-left:20px;}
.left25 {margin-left:25px;}

.toko {min-height: 680px ; max-width:1100px; margin:auto ; padding:40px 0 ;  }
.toko1 {width:44%; float:left; padding-top:60px;} /*belum padding*/
.toko2 {width:55%; padding: 0 10px 0 30px ; float:right; }
.apotek {min-height: 650px ; max-width:980px; margin:auto ; padding:90px 0 ;  }
.apotek1 {width:50%; float:left; padding-top:20px; }
.apotek2 {width:50%; padding: 0 10px 0 30px ; float:right; }

.bk11 {width:25%; margin:auto; }
.bk12 {width:75%;  padding: 0 20px; }
.fleft {float:left; }
.fright {float:right; }
.fright2 {float:right; }


.dist_bengkel {width:100%; max-width:550px; color:white;  }
.gambar1 { display: block; max-width: 100%; height: auto; margin-left:auto; margin-right:auto; }	
.gambar2 { display: block; max-width: 90%; height: auto; margin-left:auto; margin-right:auto; }	
.gambar0 { display: block; max-width: 100%; height: auto; margin-left:auto; margin-right:auto; }	
.scrgambar0{width:100%; margin-left:auto; margin-right:auto; }

.scrgambar {max-width: 90%; overflow:auto; margin-left:auto; margin-right:auto; }
.judul1 {font-family: title; font-size: 55px; line-height: 100%; margin: 0 0 55px 0 ; }
.judul2 {font-family: title; font-size: 30px; line-height: 100%; margin: 0 0 15px 0 ; }
.judul2b {font-family: title; font-size: 25px; line-height: 100%; margin: 0 0 15px 0 ; }
.tebal{margin:0 0 10px 0; font-family: banner; font-size:18px; color: rgb(70,70,70); line-height: 100%; }
.tebal2{margin:0 0 10px 0; font-family: banner; font-size:22px; color: rgb(90,90,90); line-height: 100%; }
.lihat {color: rgb(255,130,0); text-decoration: underline; cursor: -webkit-grab; cursor: grab; pointer-events: auto; }
.link {color: rgb(255,130,0); text-decoration: underline; cursor: -webkit-grab; cursor: grab; pointer-events: auto; }
.kursor1 {cursor: -webkit-grab; cursor: grab; }
.putih {color:white;}
.bputih {background-color:white;}
.hitam {color:rgb(90,90,90);}
.kami { width:100% ; padding:60px 0 60px 0 ; background-color:rgb(245,245,245) ; }			
.kami2 { max-width:1100px; margin:auto ; font-size:16px ; }
.kami2_text { width:33% ; padding-left:26px ; float:left ; }
.kami1 { max-width:500px ; font-family: title; font-size: 38px; line-height: 100%; color:rgb(90,90,90); 
	margin: auto;  padding:15px 0 65px 0; }
.gbkami {display:block; float:left ; width:100px; height:90px; margin-top:-15px; }	
.rapat { margin: 0 0 25px 0 ;}

.footer {width:100% ; min-height:240px; background-color:rgb(60,60,60); padding:50px 0 ; color:white ; }
.foot { max-width: 480px ; margin:0 auto ; }
.foot1 {float:left ; }
.foot2 {float:left ; margin-left:50px ; }
/*
#pop1 { position: -webkit-sticky; position: sticky ;
top:55px; left:0; max-width: 590px; padding:20px 15px 15px 20px; background-color:rgb(232,252,250); display:none; z-index: 333; }
*/
#pop1 {position: absolute; top:55px; left:-1000px; max-width: 700px; padding:20px 15px 15px 20px; background-color:rgb(232,252,250); display:block; z-index: 1; font-size:15px; color:black ; font-family:arial, Helvetica; }
#pop2 {position: absolute; top:55px; left:-1000px; max-width: 590px; padding:20px 30px; background-color:rgb(250,255,200); display:block; z-index: 1; }
#pop3 {position: absolute; top:55px; left:-1000px; max-width: 500px; padding:20px 40px; background-color:rgb(250,255,200); display:block; z-index: 1; }
#pop4 {position: absolute; top:55px; left:-1000px; max-width: 500px; padding:20px 40px; background-color:rgb(250,255,200); display:block; z-index: 1; }
.pop2f1 { background-image: url("gambarb.php?b=1"); background-repeat: no-repeat; background-size:contain; pointer-events: none;  width:50%; float:left ; margin:0; height: 0; padding-top: 14.59%;}
.pop2f2 { background-image: url("gambarb.php?b=2"); background-repeat: no-repeat; background-size:contain; pointer-events: none;  width:50%; float:left ; margin:0; height: 0; padding-top: 14.59%;}
.pop2f3 { background-image: url("gambarb.php?b=3"); background-repeat: no-repeat; background-size:contain; pointer-events: none;  width:50%; float:left ; margin:0; height: 0; padding-top: 14.59%;}
.pop2f4 { background-image: url("gambarb.php?b=4"); background-repeat: no-repeat; background-size:contain; pointer-events: none;  width:50%; float:left ; margin:0; height: 0; padding-top: 14.59%;}
.pop2f5 { background-image: url("gambarb.php?b=5"); background-repeat: no-repeat; background-size:contain; pointer-events: none;  width:50%; float:left ; margin:0; height: 0; padding-top: 14.59%;}
.pop2f6 { background-image: url("gambarb.php?b=6"); background-repeat: no-repeat; background-size:contain; pointer-events: none;  width:50%; float:left ; margin:0; height: 0; padding-top: 14.59%;}


/*-------------------------------------------------------------
memahami beberapa class ditulis bersamaan :
.element .symbol
means .symbol inside .element

.element.symbol
means .element that has the class symbol as well.

.element.large .symbol
means .symbol inside .element that has the class large as well.

#topmenu_icon.no_ban .topmenu_iconb1, #topmenu_icon.no_ban .topmenu_iconb2, #topmenu_icon.no_ban .topmenu_iconb3 {background-color: red ; }
----------------------------------------------------------------*/ 

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

@media screen and (max-width: 960px ) {
	/* non pc */
	/* pd css lain
	#topmenu {background-color:transparent; }
	#ban { background-position: 45% 50% ; }
	*/
	#topmenu_icon {display:block ; } 
	#topmenu_item {display: none;} 
	/* calc gagal pada android. resiko margin kanan berkurang / hilang. aman 95% krn ada margin kanan */
	#topmenu_item.responsive {display:block; float:none ; margin: 50px 20px 0 auto ;
		width:92% ; max-width:250px; background-color:rgb(70,70,70); color:white; }  
	#topmenu_item.responsive a {float: none; text-align: left; padding: 9px 6px 9px 14%; font-size:14px; }
	#topmenu_item.responsive a:nth-child(-n+12) { border-bottom: 1px solid rgb(100,100,100);}
	#topmenu_item.responsive a:hover {  background-color: rgb(120,120,120);} 
	#topmenu_item.responsive .ditem {float: none; text-align: left; padding-left: 14%; font-size:14px; }
	#topmenu_item.responsive .ditem:nth-child(-n+12) { border-bottom: 1px solid rgb(100,100,100);}
	#topmenu_item.responsive .ditem:hover {  background-color: rgb(120,120,120);} 
	
	h1 { font-size: 40px; }
	h2 { font-size: 45px; }
	.h2nas {font-size: 35px !important; } 
   .judul3 {font-size: 35px; }
	.judul3b  {font-size: 25px; }
   	.judul2 {font-size: 25px; }
   	.judul2b {font-size: 20px; }
	.logo {position:absolute; top:12px; left:15px; }	
	.toko {min-height: 0; }	
	.apotek {min-height: 0; padding:40px 0 ;}
	.toko2, .apotek2, .nas_kanan1 {width:100%; float:none; padding: 0 4% 5px 9% ; }
	.toko1, .apotek1, .nas_kanan2 {width:100%; float:none; padding:0 5px ;  }
	.judul1 {font-size: 42px; text-align:center ; }
	
	.kami { padding:30px 0 40px 0 ; }	
	.kami1 { padding-bottom: 45px; }
	.kami2_text { width:100% ; padding: 0 4% 26px 9%; float:none ; }
	.nas_kiri2, .nas_kanan1 {width:100%; float:none; padding: 0 4% 5px 9% ; }
	.nas_kiri1, .nas_kanan2 {width:100%; float:none; padding:0 5px ;  }
	.nas_par {padding: 0 9%  ; }
    #nas_ban {padding:100px 9% 10px 9% ; }

	.isi1 {padding: 0 9% ;}
	.isi2 {padding: 0 9% ;}
	.bot100 { margin-bottom: 40px ;}
	.top100 { margin-top: 40px ;}	
	.top100t { margin-top: 60px ;}	
	.fleft, .fright {float:none; }
	.gambar1 { max-width: 80%; }	
	.bk11 {width:100%; padding-left:5px; padding-right:5px; padding-bottom:20px;}
	.bk12 {width:100%; padding-left:9%; padding-right:4%; }
 } 

@media screen and (max-width: 700px) {
	/* background full - hp landscape */
	.footer { padding:50px 5% 50px 9%;}		
	
}

@media screen and (max-width: 503px) { 
    /* center gambar trust vs text tumpuk */
	.gbkami {margin-top:-5px; }	
	.pop2f1, .pop2f2, .pop2f3, .pop2f4, .pop2f5, .pop2f6 {width:100%; float:none ; padding-top: 29.20%; }
}

@media screen and (max-width: 415px ) {
	/* font banner, bakground gelap - hp portrait */
	h1 { font-size: 34px; }
	#ban_tag_moto { font-size: 26px; line-height: 150%; }

}