/*
Theme Name: memokonbini
Author: pomchips
Description: memokonbini woocommerce template
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/old-licenses/gpl-2.0.html
*/

@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700;800&display=swap');

*,
*:before,
*:after {
  box-sizing: border-box;
}

@font-face {
    font-family: 'yancha_pop_font_familyregular';
    src: url('/wp-content/themes/memokonbini/fonts/yanda-pop-rounded-webfont.eot');
    src: url('/wp-content/themes/memokonbini/fonts/yanda-pop-rounded-webfont.eot?#iefix') format('embedded-opentype'),
         url('/wp-content/themes/memokonbini/fonts/yanda-pop-rounded-webfont.woff') format('woff'),
         url('/wp-content/themes/memokonbini/fonts/yanda-pop-rounded-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
  font-family: 'icomoon-ultimate';
  src:  url('/wp-content/themes/memokonbini/fonts/icomoon-ultimate.eot?fx5o37');
  src:  url('/wp-content/themes/memokonbini/fonts/icomoon-ultimate.eot?fx5o37#iefix') format('embedded-opentype'),
    url('/wp-content/themes/memokonbini/fonts/icomoon-ultimate.ttf?fx5o37') format('truetype'),
    url('/wp-content/themes/memokonbini/fonts/icomoon-ultimate.woff?fx5o37') format('woff'),
    url('/wp-content/themes/memokonbini/fonts/icomoon-ultimate.svg?fx5o37#icomoon-ultimate') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^="icon-"], [class*=" icon-"] {
  font-family: 'icomoon-ultimate' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.icon-cart-add:before {
  content: "\ea03";
  font-size: 28px;
}
.icon-store:before {
  content: "\e9fc";
  font-size: 30px;
  font-weight: 400;
  color: #a00063!important;
  text-shadow: 
        /* first layer at 1px */
        -1px -1px 0px #fff,
         0px -1px 0px #fff,
         1px -1px 0px #fff,
        -1px  0px 0px #fff,
         1px  0px 0px #fff,
        -1px  1px 0px #fff,
         0px  1px 0px #fff,
         1px  1px 0px #fff,
        /* second layer at 2px */
        -2px -2px 0px #fff,
        -1px -2px 0px #fff,
         0px -2px 0px #fff,
         1px -2px 0px #fff,
         2px -2px 0px #fff,
         2px -1px 0px #fff,
         2px  0px 0px #fff,
         2px  1px 0px #fff,
         2px  2px 0px #fff,
         1px  2px 0px #fff,
         0px  2px 0px #fff,
        -1px  2px 0px #fff,
        -2px  2px 0px #fff,
        -2px  1px 0px #fff,
        -2px  0px 0px #fff,
        -2px -1px 0px #fff;
}

body {
	margin: 0!important;
  	scroll-behavior: smooth!important;
  	line-height: 1.5!important;
  	background-color: #ccecd7!important;
  	font-family: 'Rubik', sans-serif!important;
  	-webkit-font-smoothing: antialiased!important;
    -moz-osx-font-smoothing: grayscale!important;
}

.woocommerce ul.products.columns-3 li.product, .woocommerce-page ul.products.columns-3 li.product {
}


#sidebar_right {
border-left: 1px solid black;
}

/* ##########  HEADER ##########  */

#memoHeader {
}

.header {
  	background-color: #00a03a;
  	height: 250px;
    top: 0;
    right: 0;
    left: 0;
    z-index: 9991;
}
.header:after {
  background-color: #00a03a;
  content: '';
  position: absolute;
  width: 100%;
  left: 0;
  -webkit-transform: skewY(-2.2deg);
  transform: skewY(-2.2deg);
  height: 4.25rem;
  z-index: -1;
  top: 215px;
  box-shadow: 2px 3px 3px rgb(0 0 0 / 30%);
}
.header-logo {
  width: 38%;
  margin: 0 auto;
}
.header-menu {
	margin-top: 15px;
	display: flex;
	justify-content: center;
}
.header-menu:after {
  background-color: #00a03a;
  content: '';
  position: absolute;
  width: 100%;
  left: 0;
  -webkit-transform: skewY(-2.2deg);
  transform: skewY(-2.2deg);
  height: 8.5rem;
  z-index: -1;
  top: -50px;
  box-shadow: 2px 3px 3px rgb(0 0 0 / 30%)
}
.header-menu img {
	display: none;
	width: 20%;
	position: absolute;
	left: 0;
	z-index: 1;
	padding: 0 20px;
	
}
.sticky {
  z-index: inherit;
  position: fixed;
  top: 0;
  width: 100%;
  animation: smoothScroll .5s forwards;
}
@keyframes smoothScroll {
	0% {
		transform: translateY(-40px);
	}
	100% {
		transform: translateY(0px);
	}
}
.sticky-pop {
	animation: swal2-show 0.5s;
}
@keyframes swal2-show { 
  0% { 
   transform:scale(.7);
   }
  45% {
   transform:scale(1.05);
   }
  80% {
   transform:scale(.95);
   }
100% {
   transform:scale(1);
   }
}

.btn-cart {
    color: #fff;
    background-color: transparent;
    font-family: 'yancha_pop_font_familyregular';
  	font-weight: 400;
  	font-size: 16px;
  	backface-visibility: hidden;
  	text-shadow: 2px 2px #000;
  	padding-top: 10px;
  	text-decoration: none;
}
.btn-cart:hover {
	color: #fff;
    animation: bounce 0.7s;
}

@keyframes bounce {
  0%, 20%, 60%, 100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  40% {
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }

  80% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }
}


@media only screen and (min-width: 1920px) {
  .header-menu {
	margin-top: 10px;
	}
  .header-menu:after {
	top: -48px;
	height: 9.4rem;
	}
  .header:after {
	top: 302px;
	height: 4.6rem;
	}
  .header {
	height: 339px;
	}
  .snip1450 {
	font-size: 20px!important;
  	-webkit-transform: translateZ(0) translateX(-100px)!important;
  	transform: translateZ(0) translateX(-100px)!important;
	}
}

@media only screen and (min-width: 1680px) and (max-width: 1900px) {
  .header-menu {
	margin-top: 10px;
	}
  .header-menu:after {
	top: -45px;
	}
  .header:after {
	top: 235px;
	height: 5.3rem;
	}
  .header {
	height: 275px;
	}
  .snip1450 {
  	-webkit-transform: translateZ(0) translateX(-85px)!important;
  	transform: translateZ(0) translateX(-85px)!important;
	}
}

@media only screen and (max-width: 1400px) {
  .header:after {
	top: 200px;
	}
  .header {
	height: 235px;
	}
  .snip1450 {
    font-size: 17px!important;
  	-webkit-transform: translateZ(0) translateX(-65px)!important;
  	transform: translateZ(0) translateX(-65px)!important;
	}
}

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


/* ########## CONTAINER ########## */

.container {
	padding-top: 100px;
}


/* ########## CONTAINER ########## */

.memoFooter {
	-webkit-transform: skewY(1.2deg);
    transform: skewY(1.2deg);
    height: 2.2rem;
    background: #00a03a;
    position: relative;
    bottom: -20px;
}

#footer {
    width: 100%;
    text-align: center;
    padding: 30px;
    background: #00a03a;
    box-shadow: 2px 3px 3px rgb(0 0 0 / 30%);
}

#footer h1 {
    color: #fff;
    font-size: 25px;
    font-family: 'yancha_pop_font_familyregular';
    text-shadow: 2px 2px #000;
}


/* ##########  MENU ##########  */


.snip1450 {
  text-align: center;
  -webkit-transform: translateZ(0) translateX(0px);
  transform: translateZ(0) translateX(0px);
  z-index: 9992;
  font-family: 'yancha_pop_font_familyregular';
  font-weight: 400;
  font-size: 18px;
  backface-visibility: hidden;
  text-shadow: 2px 2px #000;
  padding-top: 5px;
  padding-right: 2rem;
}
.snip1450 * {
  box-sizing: border-box;
}
.snip1450 li {
  display: inline-block;
  list-style: outside none none;
  margin: 0.5em 1em;
  overflow: hidden;
  position: relative;
  border-radius: 3px;
}
.snip1450 li.current {
  box-shadow: 2px 2px 3px rgb(0 0 0 / 30%);
  text-shadow: none;
  backface-visibility: hidden;
}
.snip1450 li:before,
.snip1450 li:after {
  display: block;
}
.snip1450 li:before {
  bottom: 0%;
}
.snip1450 li:after {
  bottom: 50%;
}
.snip1450 a {
  color: #fff;
  display: block;
  padding: 0.5em 1em;
  position: relative;
  text-align: center;
  text-decoration: none;
}
.snip1450 a:before {
  bottom: 25%;
}
.snip1450 a:after {
  bottom: 75%;
}
.snip1450 a:hover {
  color: #fff;
  box-shadow: 2px 2px 3px rgb(0 0 0 / 30%);
  text-shadow: none;
}
.snip1450 li:before,
.snip1450 li:after,
.snip1450 a:before,
.snip1450 a:after {
  background-color: #a00063;
  position: absolute;
  height: 25%;
  left: 50%;
  right: 50%;
  content: '';
  z-index: -1;
  opacity: 0;
  -webkit-transition: all 0.3s steps(4);
  transition: all 0.3s steps(4);
  color: #fff;
}
.snip1450 li:before {
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}
.snip1450 li:after {
  -webkit-transition-delay: 0.1s;
  transition-delay: 0.1s;
}
.snip1450 a:before {
  -webkit-transition-delay: 0.05s;
  transition-delay: 0.05s;
}
.snip1450 a:after {
  -webkit-transition-delay: 0.15s;
  transition-delay: 0.15s;
}
.snip1450 li.current a {
  color: #fff;
}
.snip1450 li:hover:before,
.snip1450 li.current:before,
.snip1450 li:hover:after,
.snip1450 li.current:after,
.snip1450 li:hover a:before,
.snip1450 li.current a:before,
.snip1450 li:hover a:after,
.snip1450 li.current a:after {
  left: 0;
  right: 0;
  opacity: 1;
}
.snip1450 li:hover:before,
.snip1450 li.current:before {
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}
.snip1450 li:hover:after,
.snip1450 li.current:after {
  -webkit-transition-delay: 0.2s;
  transition-delay: 0.2s;
}
.snip1450 li:hover a:before,
.snip1450 li.current a:before {
  -webkit-transition-delay: 0.1s;
  transition-delay: 0.1s;
}
.snip1450 li:hover a:after,
.snip1450 li.current a:after {
  -webkit-transition-delay: 0.3s;
  transition-delay: 0.3s;
}



.title
{
font-size: 11pt;
font-family: verdana;
font-weight: bold;
}
#main {
    margin-bottom: 50px;
}
a {
    color: #34393e;
    text-decoration: none;
}
.woocommerce ul.products li.product .price {
  	color: #fdfcf8;
  	position: sticky;
    background: #a00063;
    margin: 0;
    font-size: 1.1em;
    padding: 0 10px
}
.woocommerce ul.products li.product .price ins{
	text-decoration: none;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: 1.125rem;
  line-height: 1.25;
  color: #fdfcf8;
  display: inline-block;
  position: sticky;
  padding: 10px;
  color: #fff;
  text-decoration: none;
  background: #a00063;
  width: 100%;
  min-height: 65px;
}
.woocommerce ul.products li.product h2.woocommerce-loop-product__title:hover {
  text-decoration: underline;
}
/* 
.woocommerce ul.products li.product .woocommerce-loop-product__title:after {
  	content: "";
  	display: block;
  	width: 0;
  	height: 2px;
  	background: #fff;
  	transition: width 0.3s;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title:hover:after {
	width: 100%;
}
 */

.woocommerce ul.products li.product a img {
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
  margin: 0;
}
.woocommerce ul.products li.product a:hover img {
  -webkit-transform: scale(1.3);
  transform: scale(1.3);
}
.woocommerce nav.woocommerce-pagination ul {
    border:none;
}
.woocommerce .woocommerce-pagination ul.page-numbers li, .woocommerce-page .woocommerce-pagination ul.page-numbers li {
    display: inline-block;
    margin: 5px;
    border: none;
    box-shadow: 2px 3px 3px rgb(0 0 0 / 30%);
}
.woocommerce nav.woocommerce-pagination ul li span.current {
    background: #a00063;
    color: #fff;
    padding: 12px;
}
.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li a:focus {
	background: #a00063;
    color: #fff;
} 
.woocommerce-pagination ul.page-numbers a.page-numbers {
    color: #fff;
    padding: 12px;
    margin: 0px;
    background: #00a03a;
}
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
  border-radius: 0.25rem;
  text-decoration: none;
  font-weight: 400;
  transition: 0.25s ease;
  overflow: hidden;
  -webkit-box-shadow: 3px 4px 9px 1px rgb(0 0 0 / 30%);
  box-shadow: 3px 4px 9px 1px rgb(0 0 0 / 30%);
  background-color: #a00063;
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before {
  border-bottom: 1px solid #a00063;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background-color: #a00063;
  border: 1px solid #a00063;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before {
  border: 1px solid #a00063;
  border-left: 0;
  border-top: 0;
  border-bottom-right-radius: 3px;
  box-shadow: none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
  border: 1px solid #a00063;
  border-right: 0;
  border-top: 0;
  border-bottom-left-radius: 3px;
  box-shadow: none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
  color: #fff;
}
.woocommerce ul.products li.product:hover, .woocommerce-page ul.products li.product:hover,
.woocommerce ul.products li.product:focus, .woocommerce-page ul.products li.product:focus {
  outline: none;
  box-shadow: 0 0 0 0.25rem #a00063;
}
.woocommerce ul.products li.product .button {
  color: #fff;
  background: #a00063;
  font-weight: 400;
  transition: .25s ease-in-out;
  -webkit-transition: .25s ease-in-out;
  float: right;
  visibility: hidden;
  margin: 0;
}
.woocommerce ul.products li.product .button:after {
  font-family: 'icomoon-ultimate' !important;
  content: "\ea03";
  font-size: 28px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  visibility: visible;
}
.woocommerce ul.products li.product .button:hover {
  -webkit-transform: scale(1.15);
  -ms-transform: scale(1.15);
  transform: scale(1.15);
}
select {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 0;
  outline: 0;
  font: inherit;
  /* Personalize */
  width: 20em;
  height: 3em;
  padding: 0 4em 0 1em;
  background: url("./images/down.svg") no-repeat right 0.8em center/1.4em, linear-gradient(to left, #ba0073 3em, #a00063 3em);
  color: white;
  border-radius: 0.25em;
  box-shadow: 0 0 1em 0 rgba(0, 0, 0, 0.2);
  cursor: pointer;
}
select option {
  color: inherit;
}
select:focus {
  outline: none;
}
select::-ms-expand {
  display: none;
}

.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit.alt, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button.alt, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button.alt, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button.alt, :where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce #respond input#submit.alt, :where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce a.button.alt, :where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce button.button.alt, :where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce input.button.alt {
  background-color: #a00063;
}
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit.alt:hover, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button.alt:hover, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button.alt:hover, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button.alt:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce #respond input#submit.alt:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce a.button.alt:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce button.button.alt:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce input.button.alt:hover {
  background-color: #91005a;
}
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button, :where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce #respond input#submit, :where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce a.button, :where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce button.button, :where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce input.button {
  background-color: #a00063;
  color: #fff;
}
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit:hover, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button:hover, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button:hover, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce #respond input#submit:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce a.button:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce button.button:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce input.button:hover {
  background-color: #91005a;
  color: #fff;
}
.woocommerce-message, .woocommerce-message::before {
  border-top-color: #a00063;
}
.woocommerce div.product p.price, .woocommerce div.product span.price {
  color: #000;
}
.woocommerce div.product div.images .woocommerce-product-gallery__image:nth-child(n+2) {
  margin-top: 20px;
}