html {
line-height:1.15;
-webkit-text-size-adjust:100%;
}

body {
margin:0;
}

h1 {
font-size:2em;
margin:.67em 0;
}

hr {
box-sizing:content-box;
height:0;
overflow:visible;
}

a {
background-color:transparent;
}

abbr[title] {
border-bottom:none;
text-decoration:underline dotted;
}

b,strong {
font-weight:bolder;
}

small {
font-size:80%;
}

sub,sup {
font-size:75%;
line-height:0;
position:relative;
vertical-align:baseline;
}

sub {
bottom:-.25em;
}

sup {
top:-.5em;
}

img {
border-style:none;
}

button,input,optgroup,select,textarea {
font-family:inherit;
font-size:100%;
line-height:1.15;
margin:0;
}

button,input {
overflow:visible;
}

button,select {
text-transform:none;
}

button,[type="button"],[type="reset"],[type="submit"] {
-webkit-appearance:button;
}

button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner {
border-style:none;
padding:0;
}

button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring {
outline:1px dotted ButtonText;
}

fieldset {
padding:.35em .75em .625em;
}

legend {
box-sizing:border-box;
color:inherit;
display:table;
max-width:100%;
white-space:normal;
padding:0;
}

progress {
vertical-align:baseline;
}

textarea {
overflow:auto;
}

[type="checkbox"],[type="radio"] {
box-sizing:border-box;
padding:0;
}

[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button {
height:auto;
}

[type="search"] {
-webkit-appearance:textfield;
outline-offset:-2px;
}

[type="search"]::-webkit-search-decoration {
-webkit-appearance:none;
}

::-webkit-file-upload-button {
-webkit-appearance:button;
font:inherit;
}

details {
display:block;
}

summary {
display:list-item;
}

pre,code,kbd,samp {
font-family:monospace, monospace;
font-size:1em;
}

template,[hidden] {
display:none;
}

/*
** Clearfix
*/

.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
} 
.clearfix:after {
  clear: both;
}
.clearfix {
  zoom: 1; /* For IE 6/7 (trigger hasLayout) */
}

/*
** LILO
*/

@import url('https://fonts.googleapis.com/css?family=Karla:400,700');



/* Globals */

body{
    font-family: Karla,Helvetica, sans-serif;
    -webkit-font-smoothing: antialiased;
    color: #222;
}

.main-header{ max-width: 700px; width:100%; margin: 0 auto; padding:50px 0 30px; }
.main-header .logo-container{ text-align: center; }
.main-header .logo-container img {  display: inline-block; width: 90px; height: 90px; vertical-align: middle;
  background-color: rgba(0,0,0,.1); border-radius: 50%; }
.main-header .logo-container .go{ font-size: 13px; display: block; color: #8c8c8c; }
.main-header .logo-container .go span{ font-size: 17px; }

.main-header p.description { text-align: center; margin: 5px 0 0; color: #fff; padding: 0 15px; }

.main-header .name-container{ text-align: center; margin: 7px 0 0; }
.main-header .name-container a{ color: #fff; border-color: #fff; }

.body-nav{ max-width: 700px; width:100%; margin: 0 auto 50px; }
.body-nav .links{ list-style: none; margin: 0; padding: 0; }
.body-nav .links a{ 
    color: #fff;
    border-color: #fff;
    border-width: 2px;
    border-style: solid;
    border-radius: 25px;
    text-align: center;
    position: relative;
    -webkit-transition: all .25s cubic-bezier(.08,.59,.29,.99);
    transition: all .25s cubic-bezier(.08,.59,.29,.99);
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
    -ms-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
    white-space: normal;
    padding: 15px 10px;
    margin: 0 10px 15px;
    width: calc(100%-20px);
    display: block;
    font-size:1rem;
    font-weight:700;
  }

.body-nav .links a:hover {
    color: #4c6f9a;
    background-color: #fff;
}

/* Footer */

#main-footer{ border-top: 1px solid #e0eded; background: rgba(252,252,252,1); background: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(252,252,252,1) 10%); position: relative; color:#616161; }
#main-footer .footer-container{ max-width: 700px; width: calc(100% - 40px); margin: 20px auto; padding:10px 20px; display: flex; }

#main-footer section{ flex:33%;  }
#main-footer section.about{ padding-right: 40px;  }
#main-footer h3{ font-size: 14px; margin:0; text-transform: uppercase; margin: 0 0 3px; }
#main-footer p{ font-size: 13px; margin: 0; }
#main-footer ul{ list-style: none; margin: 0; padding: 0; font-size: 13px; }
#main-footer ul li a, #main-footer ul li a:visited{color: #e74c3c;}

@media only screen and (max-width: 640px) {
    #main-footer .footer-container{ display: block; }
    #main-footer section{ flex:0; margin-bottom: 15px;  }
}


/* Utilities */
a{ text-decoration: none; color: #000; }

/* BG animation */
.bg-rainbow-vomit{
    background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
    background-size: 400% 400%; -webkit-animation: HeroGradient 15s ease infinite; -moz-animation: HeroGradient 15s ease infinite;
    animation: HeroGradient 15s ease infinite;
}

.bg-rainbow-vomit:after{
    content: '';
    display: block; width: 100%;
    background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
    background-size: 400% 400%; -webkit-animation: HeroGradient 15s ease infinite; -moz-animation: HeroGradient 15s ease infinite;
    animation: HeroGradient 15s ease infinite;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

@-webkit-keyframes HeroGradient {0% {background-position: 0% 50% } 50% {background-position: 100% 50% } 100% {background-position: 0% 50% } }
@-moz-keyframes HeroGradient {0% {background-position: 0% 50% } 50% {background-position: 100% 50% } 100% {background-position: 0% 50% } }
@keyframes HeroGradient {0% {background-position: 0% 50% } 50% {background-position: 100% 50% } 100% {background-position: 0% 50% } }

/* Pagination */
.pagination-container{ max-width: 700px; width: 100%; margin: 5px auto 50px; }
.pagination-container .pagination{ text-align: right; margin-right: 35px; }
.pagination-container .pagination .next,
.pagination-container .pagination .prev{ display: inline-block; background: #fff; width: 12px; color: rgba(0,0,0,.54);
    padding: 2px 11px; border-radius: 100%; border: 1px solid #e0e0e0; font-size: 25px; cursor: pointer; margin-left: 5px; }

/* Page: Home */
.page-home .bg-rainbow-vomit:after{
    position: absolute;
}

/* Page: Browse */

.comms-container{ max-width: 700px; width: 100%; margin: 0 auto 50px;
    display:flex; flex-direction: row; justify-content: space-around;
    border-top: 1px solid #efefef; border-bottom: 1px solid #efefef;
    padding:10px 0;}
.comms-container .comm{ text-align: center; }
.comms-container .comm .caption{ text-transform: uppercase; font-size: 13px; }
.comms-container .icon{ width:30px; display: inline-block; }
.comms-container .icon img{ display: block; width: 100%; }

.page-browse .items-container{ max-width: 700px; width: 100%; margin: 0 auto 35px; }

.page-browse .item{ width: 33%; float: left; }
.page-browse .item:last-child{ margin-right: 0; }

.page-browse .item-image{ margin: 0; width: calc(100% - 20px); text-align: center; padding: 10px;}
.page-browse .item-image img{ display: block; width: 100%; }

.page-browse .item-desc{ margin: 0 8px; }
.page-browse .item-name{ margin: 0; font-size: 12px; height: 35px; text-align: center; }
.page-browse .item-price{ text-align: center; }
.page-browse .price-slashed{  font-size: 10px; text-decoration: line-through; }
.page-browse .price{ font-size: 12px;  }

@media only screen and (max-width: 640px) {
    .page-browse .items-container{ width: calc(100% - 14px); padding-left: 7px; }
    .page-browse .items-container .item{ width: 48%; float: left; }
    .page-browse .item-image{width: calc(100% - 26px); padding: 13px;}
}

@media only screen and (max-width: 560px) {
    .page-browse .comms-container{ margin-bottom: 0; }
	.page-browse .items-container .item{ margin-right: 2px; }

    .page-browse .header-container{ border-bottom: 1px solid #efefef; }
    .page-browse .main-header{ padding: 0; }
    .page-browse .logo-container img{ width:50px; height: 50px; margin:0; }
}

/* Page: Single */

.page-single .item-container{ max-width: 700px; width: calc(100% - 20px); margin: 0 auto 50px;  padding: 0 10px; }
.page-single .item-header{ width: 100%; display:flex; }

.page-single .item-figure{ flex: calc(100% - 295px); }
.page-single .item-meta{ flex: 280px; margin-left:15px; }

.page-single .item-meta .title{ margin:0; font-size: 21px; }
.page-single .item-meta .desc{ margin: 10px 0; font-size: 15px; white-space: pre-line; }
.page-single .item-meta .links{ list-style: none; margin: 0; padding:0; }

.page-single .item-meta .links li{ border-top: 1px solid #efefef; padding: 8px 0; }
.page-single .item-meta .links li a{ display:flex; text-decoration: none; }
.page-single .item-meta .links li a:hover { background-color:rgba(0,0,0,0.03); }
.page-single .item-meta .links .part-icon{ flex: 20%; }
.page-single .item-meta .links .part-text{ flex: 70%; padding: 8px 0; }
.page-single .item-meta .links .part-raquo{ flex: 10%; padding: 8px 0; }

.page-single .item-meta .links .part-icon img{ display: block; width: 32px; }

.page-single .item-meta .links .part-text .shop-txt{ display: block }
.page-single .item-meta .links .part-text .shop-promo{ display: block; font-size: 12px; color:#691919; }

.page-single .item-figure figure{ margin: 0; width: 100%; }
.page-single .item-figure figure img{ width:100%; display: block;}

.page-single .shippings .info{ margin: 14px 0 20px; font-weight: bolder; font-style: italic; }
.page-single .shippings .kurir{ display: flex; margin-bottom: 15px; }
.page-single .shippings .kurir figure{ flex: 30px; margin: 0; }
.page-single .shippings .kurir img{ width: 60px; }
.page-single .shippings .kurir ul{ flex: 60%; list-style: none; margin: 0; padding: 0; font-size: 12px; color:rgba(0,0,0,0.5); }

@media only screen and (max-width: 560px) {
    .page-single .header-container{ border-bottom: 1px solid #efefef; }
    .page-single .main-header{ padding: 0; }
    .page-single .logo-container img{ width:50px; height: 50px; margin:0; }
    .page-single .logo-container .go{ position: absolute; right: 15px; top: 21px; }

	.page-single .item-container{ width: 100%; padding:0; }
	.page-single .item-header{ display: block; }
	.page-single .item-meta{ margin:15px; }
    .page-single .shippings .kurir figure{ flex: 0px; }
}

/* Page: Catatan */
.page-catatan .catatan-container{ max-width: 700px; width: calc(100% - 20px); margin: 0 auto 50px; padding: 0 10px; }