html,
body {
  font-family: 'Open Sans', sans-serif;
  background-color: rgb(255, 255, 255);

}

main {
  min-height:calc(100vh - 12.5rem);
  /* background-color: whitesmoke; */
}

footer#main-footer{ 
  margin-top: 2rem;
  height: 2.5rem;  
}

.itemHover:hover{
    /* border: 1px solid rgba(0, 0, 0, 0.397) !important;    */
    background-color: rgba(245, 245, 245, 0.534)
}

/* change background color for modal */
.modal-background {
    background-color: rgba(10, 10, 10, 0.5) !important;
}

/* loading icon */
#page {
    display: none;
}
@keyframes lds-ripple {
  0% {
    top: 90px;
    left: 90px;
    width: 0;
    height: 0;
    opacity: 1;
  }
  100% {
    top: 55px;
    left: 55px;
    width: 70px;
    height: 70px;
    opacity: 0;
  }
}
@-webkit-keyframes lds-ripple {
  0% {
    top: 90px;
    left: 90px;
    width: 0;
    height: 0;
    opacity: 1;
  }
  100% {
    top: 55px;
    left: 55px;
    width: 70px;
    height: 70px;
    opacity: 0;
  }
}
.lds-ripple {
  position: relative;
}
.lds-ripple div {
  box-sizing: content-box;
  position: absolute;
  border-width: 10px;
  border-style: solid;
  opacity: 1;
  border-radius: 50%;
  -webkit-animation: lds-ripple 1.4s cubic-bezier(0, 0.2, 0.8, 1) infinite;
  animation: lds-ripple 1.4s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.lds-ripple div:nth-child(1) {
  border-color: #4658ac;
}
.lds-ripple div:nth-child(2) {
  border-color: #e7008a;
  -webkit-animation-delay: -0.7s;
  animation-delay: -0.7s;
}
.lds-ripple {
  width: 200px !important;
  height: 200px !important;
  -webkit-transform: translate(-100px, -100px) scale(1) translate(100px, 100px);
  transform: translate(-100px, -100px) scale(1) translate(100px, 100px);
}

/* REFERNCE: https://codepen.io/nohoid/pen/kIfto */
#special-item-category { 
background: linear-gradient(124deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3);
background-size: 1800% 1800%;

-webkit-animation: rainbow 18s ease infinite;
-z-animation: rainbow 18s ease infinite;
-o-animation: rainbow 18s ease infinite;
  animation: rainbow 18s ease infinite;}

@-webkit-keyframes rainbow {
    0%{background-position:0% 82%}
    50%{background-position:100% 19%}
    100%{background-position:0% 82%}
}
@-moz-keyframes rainbow {
    0%{background-position:0% 82%}
    50%{background-position:100% 19%}
    100%{background-position:0% 82%}
}
@-o-keyframes rainbow {
    0%{background-position:0% 82%}
    50%{background-position:100% 19%}
    100%{background-position:0% 82%}
}
@keyframes rainbow { 
    0%{background-position:0% 82%}
    50%{background-position:100% 19%}
    100%{background-position:0% 82%}
}
/* end of reference */