/* 

	ART.LOGUE ESSENTIALS 
	AUTHOR : YOHANES STEVEN

*/

* { margin:0; padding:0; }
body, html { margin:0; padding:0; width:100%; height:100%; }

.pconly { display:inline-block !important; } .mobileonly { display:none !important; }

.left { float:left; } .right { float:right; } .middle { margin:0px auto; } .center { text-align:center; }
.no-border { border:0 !important; } .padding { padding:30px; } .padding60 { padding:60px; } .pojok { margin-right:0 !important; }

strong { font-weight:black; } em { font-style:italic; }

.col100 { width:100%; } .col90 { width:90%; } .col80 { width:80%; } .col70 { width:70%; } .col60 { width:60%; } .col50 { width:50%; } .col40 { width:40%; } .col30 { width:30%; } .col20 { width:20%; } .col10 { width:10%; }
.col4 { width:4%; } .col32 { width:32%; } .col48 { width:48%; }

.margin-right2 { margin-right:2%; }

.h100 { height:100%; }

.text-big { font-size:1.2em; } .text-large { font-size:1.6em; } .text-huge { font-size:2.4em; }
.text-brown { color:#a97224; }

.cover { width:100%; height:100%; position:absolute; }

.ptop20 { padding-top:20px; } .p20 { padding:20px; }

.bgwhite { background:#FFF; } .border-radius10 { border-radius:10px; }

/* MAIN */

body { font-family:"Montserrat", Arial, Helvetica; background:#e6e6e6; color:#000; }

.wrapper { width:90%; margin:0 auto; }

#slider-pc { position:relative; top:0; left:0; width:100%; height:100%; z-index:0; cursor:pointer; }
#slider-pc .slick-list, #slider-pc .slick-track { height:100%; }
#slider-pc img { width:100%; height:100%; object-fit:cover; }

#pc-web header { height:60px; line-height:60px; top:20px !important; width:100%; position:absolute; z-index:1; }
#pc-web header a { color:#000; }
#pc-web footer { position:absolute; bottom:20px; height:60px; line-height:60px; width:100%; z-index:1; }

#main-nav { position:fixed; width:100%; height:100%; opacity:0; z-index:-3; top:0; left:0; }
#main-nav h2 { color:#FFF; padding:0; margin:0; font-size:1.6em; font-weight:bold; }
#main-nav .nav-list a { display:block; color:#FFF; text-decoration:none; }
#main-nav .nav-list a:hover { text-decoration:underline; }

#main-nav .nav-banner img { width:100%; margin-bottom:-20px; }

#main-nav-mobile { position:fixed; width:100%; height:100%; opacity:0; z-index:-3; top:0; left:0; transition:0.7s; }
#main-nav-mobile h2 { color:#FFF; padding:0; margin:0; font-size:1.6em; font-weight:bold; }
#main-nav-mobile .nav-list a { display:block; color:#FFF; text-decoration:none; line-height:2em;  }
#main-nav-mobile .nav-list a:hover { text-decoration:underline; }

#main-nav-mobile .nav-banner img { width:100%; margin-bottom:-20px; }

table.full-height { width:100%; height:100%; position:absolute; top:0; z-index:-1; }
table.full-height tr { width:100%; height:100%; }
table.full-height td { width:100%; height:100%; }

#pc-web .bg-profile { width:100%; position:relative; z-index:-1; }
#pc-web #profile { background:#FFF; width:80%; margin:-350px auto 0 auto; padding:60px 90px; text-align:center; }
#pc-web #profile p { line-height:2em; margin-bottom:20px; }

.navbar a { text-transform:uppercase; display:inline-block; margin-right:30px;}

#promotions-pc { width:100%;  }
#promotions-pc img { width:100%;  }

h1 { font-weight:bold; font-size:4.6em; }
h2 { font-size:3em; font-weight:bold; }
h3 { font-size:3em; font-style:italic; margin:30px 0 60px 0; }

p.subtitle { margin-top:-10px; }

.contact-form input, .contact-form textarea { width:100%; padding:10px; margin-bottom:20px; }

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

a { color:#000; }	

.mobileonly { display:inline-block !important; } .pconly { display:none !important; }

#mobile-web { background:#f9f9f9; }
#mobile-web header { height:60px; line-height:60px; margin-top:0; width:100%; background:#FFF; box-shadow:0px 5px 20px #EAEAEA; }
#mobile-web header #logo-mobile img { height:36px; }

#mobile-web .img-mobile { width:92%; margin:10px 4% 18px 4%; box-shadow:0px 5px 20px #EAEAEA; }
#mobile-web #profile { background:#FFF; width:92%; margin:0 auto 0 auto; padding:30px; text-align:center; font-size:80%; }
#mobile-web #profile p { line-height:2em; margin-bottom:20px; }

#slider { width:92%; margin:18px 4% 40px 4%; box-shadow:0px 0px 10px #EAEAEA; height:150px; text-align:center; background:#FFF; border-radius:10px; }
#slider img { border-radius:10px; height:150px; object-fit:cover; }
#slider .slick-track, #slider .slick-list { height:150px; }
#slider .slick-dots { bottom:-32px !important; }

.box { width:92%; margin:20px 4% 10px 4%; }

h2 { font-size:1.2em; }
h3 { font-size:3em; font-style:italic; margin:30px 0; }

p.subtitle { margin-top:-6px; font-size:0.8em; }

.nav-banner { }
.nav-banner img { width:100%; margin-bottom:-10px; }
.nav-banner .col50 { padding:10px 4%; }
.nav-banner .col50 img { box-shadow:0px 0px 10px #EAEAEA; }

.online-order select, .online-order input { width:92%; margin:0 4%; padding:10px; }

#product-list { display:none; width:100%; margin:0;  }
#product-list .product { margin-bottom:20px; padding-bottom:10px; border-bottom:1px dashed #EAEAEA; }
#product-list .product .product-image { width:15%; float:left; }
#product-list .product .product-image img { width:100%; height:60px; object-fit:cover; }
#product-list .product .product-detail { width:50%; float:left; height:60px; font-size:0.8em; line-height:20px; padding:10px 5px 0 15px; box-sizing:border-box; }
#product-list .product .product-price { width:35%; line-height:60px; float:left; text-align:right; }

	
}