@import url("https://fonts.googleapis.com/css?family=Lato:300,400,700,900");
@import url(https://fonts.googleapis.com/css?family=Pacifico);
body {
  font-family: "Lato", Helvetica, Arial;
  font-size: 16px;
}

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


.container {

}
.container > ul {
  list-style: none;
  padding: 0;
  margin: 4em 0 20px 0;

}

.title {
  font-family: 'Pacifico';
  font-weight: norma;
  font-size: 40px;
  text-align: center;
  line-height: 1.4;
  color: #01215E;
}

.dropdown {
  position: relative;
}
.dropdown a {
  text-decoration: none;
}
.dropdown [data-toggle="dropdown"] {
  display: block;
  color: #01215E;
  /* background: #01215E; */
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  padding: 10px;
  border-radius: 6px;;
}
.dropdown [data-toggle="dropdown"]:before {
  position: absolute;
  display: block;
  content: '\25BC';
  font-size: 0.7em;
  color: #01215E;
  top: 13px;
  right: -5px;
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  -moz-transition: -moz-transform 0.6s;
  -o-transition: -o-transform 0.6s;
  -webkit-transition: -webkit-transform 0.6s;
  transition: transform 0.6s;
}
.dropdown > .dropdown-menu {
  max-height: 0;
  overflow: hidden;
  list-style: none;
  padding: 0;
  margin: 0;
  -moz-transform: scaleY(0);
  -ms-transform: scaleY(0);
  -webkit-transform: scaleY(0);
  transform: scaleY(0);
  -moz-transform-origin: 50% 0%;
  -ms-transform-origin: 50% 0%;
  -webkit-transform-origin: 50% 0%;
  transform-origin: 50% 0%;
  -moz-transition: max-height 0.6s ease-out;
  -o-transition: max-height 0.6s ease-out;
  -webkit-transition: max-height 0.6s ease-out;
  transition: max-height 0.6s ease-out;
  animation: hideAnimation 0.4s ease-out;
  -moz-animation: hideAnimation 0.4s ease-out;
  -webkit-animation: hideAnimation 0.4s ease-out;
}
.dropdown > .dropdown-menu li {
  padding: 0;
}
.dropdown > .dropdown-menu li a {
  display: block;
  color: #000000;
  -moz-box-shadow: 0 1px 0 white inset, 0 -1px 0 #d5d5d5 inset;
  -webkit-box-shadow: 0 1px 0 white inset, 0 -1px 0 #d5d5d5 inset;
  box-shadow: 0 1px 0 white inset, 0 -1px 0 #d5d5d5 inset;
  text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.3);
  padding: 10px 10px;
}

.dropdown > input[type="checkbox"] {
  opacity: 0;
  display: block;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.dropdown > input[type="checkbox"]:checked ~ .dropdown-menu {
  max-height: 9999px;
  display: block;
  -moz-transform: scaleY(1);
  -ms-transform: scaleY(1);
  -webkit-transform: scaleY(1);
  transform: scaleY(1);
  animation: showAnimation 0.5s ease-in-out;
  -moz-animation: showAnimation 0.5s ease-in-out;
  -webkit-animation: showAnimation 0.5s ease-in-out;
  -moz-transition: max-height 2s ease-in-out;
  -o-transition: max-height 2s ease-in-out;
  -webkit-transition: max-height 2s ease-in-out;
  transition: max-height 2s ease-in-out;
}
.dropdown > input[type="checkbox"]:checked + a[data-toggle="dropdown"]:before {
  -moz-transform: rotate(-180deg);
  -ms-transform: rotate(-180deg);
  -webkit-transform: rotate(-180deg);
  transform: rotate(-180deg);
  -moz-transition: -moz-transform 0.6s;
  -o-transition: -o-transform 0.6s;
  -webkit-transition: -webkit-transform 0.6s;
  transition: transform 0.6s;
}

@keyframes showAnimation {
  0% {
    -moz-transform: scaleY(0.1);
    -ms-transform: scaleY(0.1);
    -webkit-transform: scaleY(0.1);
    transform: scaleY(0.1);
  }
  40% {
    -moz-transform: scaleY(1.04);
    -ms-transform: scaleY(1.04);
    -webkit-transform: scaleY(1.04);
    transform: scaleY(1.04);
  }
  60% {
    -moz-transform: scaleY(0.98);
    -ms-transform: scaleY(0.98);
    -webkit-transform: scaleY(0.98);
    transform: scaleY(0.98);
  }
  80% {
    -moz-transform: scaleY(1.04);
    -ms-transform: scaleY(1.04);
    -webkit-transform: scaleY(1.04);
    transform: scaleY(1.04);
  }
  100% {
    -moz-transform: scaleY(0.98);
    -ms-transform: scaleY(0.98);
    -webkit-transform: scaleY(0.98);
    transform: scaleY(0.98);
  }
  80% {
    -moz-transform: scaleY(1.02);
    -ms-transform: scaleY(1.02);
    -webkit-transform: scaleY(1.02);
    transform: scaleY(1.02);
  }
  100% {
    -moz-transform: scaleY(1);
    -ms-transform: scaleY(1);
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
  }
}
@-moz-keyframes showAnimation {
  0% {
    -moz-transform: scaleY(0.1);
    -ms-transform: scaleY(0.1);
    -webkit-transform: scaleY(0.1);
    transform: scaleY(0.1);
  }
  40% {
    -moz-transform: scaleY(1.04);
    -ms-transform: scaleY(1.04);
    -webkit-transform: scaleY(1.04);
    transform: scaleY(1.04);
  }
  60% {
    -moz-transform: scaleY(0.98);
    -ms-transform: scaleY(0.98);
    -webkit-transform: scaleY(0.98);
    transform: scaleY(0.98);
  }
  80% {
    -moz-transform: scaleY(1.04);
    -ms-transform: scaleY(1.04);
    -webkit-transform: scaleY(1.04);
    transform: scaleY(1.04);
  }
  100% {
    -moz-transform: scaleY(0.98);
    -ms-transform: scaleY(0.98);
    -webkit-transform: scaleY(0.98);
    transform: scaleY(0.98);
  }
  80% {
    -moz-transform: scaleY(1.02);
    -ms-transform: scaleY(1.02);
    -webkit-transform: scaleY(1.02);
    transform: scaleY(1.02);
  }
  100% {
    -moz-transform: scaleY(1);
    -ms-transform: scaleY(1);
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
  }
}
@-webkit-keyframes showAnimation {
  0% {
    -moz-transform: scaleY(0.1);
    -ms-transform: scaleY(0.1);
    -webkit-transform: scaleY(0.1);
    transform: scaleY(0.1);
  }
  40% {
    -moz-transform: scaleY(1.04);
    -ms-transform: scaleY(1.04);
    -webkit-transform: scaleY(1.04);
    transform: scaleY(1.04);
  }
  60% {
    -moz-transform: scaleY(0.98);
    -ms-transform: scaleY(0.98);
    -webkit-transform: scaleY(0.98);
    transform: scaleY(0.98);
  }
  80% {
    -moz-transform: scaleY(1.04);
    -ms-transform: scaleY(1.04);
    -webkit-transform: scaleY(1.04);
    transform: scaleY(1.04);
  }
  100% {
    -moz-transform: scaleY(0.98);
    -ms-transform: scaleY(0.98);
    -webkit-transform: scaleY(0.98);
    transform: scaleY(0.98);
  }
  80% {
    -moz-transform: scaleY(1.02);
    -ms-transform: scaleY(1.02);
    -webkit-transform: scaleY(1.02);
    transform: scaleY(1.02);
  }
  100% {
    -moz-transform: scaleY(1);
    -ms-transform: scaleY(1);
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
  }
}
@keyframes hideAnimation {
  0% {
    -moz-transform: scaleY(1);
    -ms-transform: scaleY(1);
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
  }
  60% {
    -moz-transform: scaleY(0.98);
    -ms-transform: scaleY(0.98);
    -webkit-transform: scaleY(0.98);
    transform: scaleY(0.98);
  }
  80% {
    -moz-transform: scaleY(1.02);
    -ms-transform: scaleY(1.02);
    -webkit-transform: scaleY(1.02);
    transform: scaleY(1.02);
  }
  100% {
    -moz-transform: scaleY(0);
    -ms-transform: scaleY(0);
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
  }
}
@-moz-keyframes hideAnimation {
  0% {
    -moz-transform: scaleY(1);
    -ms-transform: scaleY(1);
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
  }
  60% {
    -moz-transform: scaleY(0.98);
    -ms-transform: scaleY(0.98);
    -webkit-transform: scaleY(0.98);
    transform: scaleY(0.98);
  }
  80% {
    -moz-transform: scaleY(1.02);
    -ms-transform: scaleY(1.02);
    -webkit-transform: scaleY(1.02);
    transform: scaleY(1.02);
  }
  100% {
    -moz-transform: scaleY(0);
    -ms-transform: scaleY(0);
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
  }
}
@-webkit-keyframes hideAnimation {
  0% {
    -moz-transform: scaleY(1);
    -ms-transform: scaleY(1);
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
  }
  60% {
    -moz-transform: scaleY(0.98);
    -ms-transform: scaleY(0.98);
    -webkit-transform: scaleY(0.98);
    transform: scaleY(0.98);
  }
  80% {
    -moz-transform: scaleY(1.02);
    -ms-transform: scaleY(1.02);
    -webkit-transform: scaleY(1.02);
    transform: scaleY(1.02);
  }
  100% {
    -moz-transform: scaleY(0);
    -ms-transform: scaleY(0);
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
  }
}


/* my styles */

  #custom-catalogue{
    display: flex;
    justify-content: center;
    width:100%;
    padding:0.5em;
    overflow-y: auto;
    position: relative;
    max-height:100vh;
  }

.right{
  width: 100%;
}

.left-container{
  width:100%;
  position:relative;
}


#product-list{
  padding-top:2em;
  padding-bottom: 2em;
}
.product-card{
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  display:flex;
  right: -1em;
  position: relative;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 3em;
  padding:1.8em;
  border-radius: 12px;
}

.product-card button{
  background: none !important;
  transition: 0.3s ease;
  padding: 0 !important;
  width: 25px;
  height:25px;
  filter:drop-shadow(1px 2px 4px rgba(1, 29, 84))
}


/* .product-card button:hover{
  filter:drop-shadow(1px 2px 4px rgba(1, 29, 84))
} */

.product-card .share-btn{
  margin-bottom: 3em;
  margin-top: 2em;
}
.product-side{
  width:100%;
  display:flex;
  flex-direction: column;
  justify-content: space-between;
}


.fav-btn img{
  width: 100% !important;
  height:100% !important;
}

.product-main{
  display: flex;
  align-items: center;
  justify-content: center;
  width:100%;
}

.product-main a{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.product-title{
  margin-right: 2em;
  margin-top: 1em;
  font-weight: 700;
  width:100%;
  font-size: 23px;
}


.brand-btn.active,
.model-btn.active {
  background-color: #011C4F; /* WP blue */
  color: #fff;
  border-radius: 4px;
  font-weight: 600;
  color:white !important;
}


/* sidebar css */
/* Sidebar hidden by default */
.sidebar {
  position: fixed;
  top: 0;
  right: -300px; /* hide it */
  width: 45%;
  height: 100vh;
  background: #fff;
  box-shadow: -2px 0 8px rgba(0,0,0,0.2);
  transition: right 0.3s ease;
  z-index: 1000;
  padding: 20px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* When open */
.sidebar.active {
  right: 0;
}




/* Close button inside */
.close-btn {
  padding:0 !important;
  font-size: 24px;
  cursor: pointer;
  background: none;
  border: none;
  position: absolute;
  top: 1em;
  left: 1em;
}

.reset-filter-btn{
  padding:0 !important;
  cursor: pointer;
  background: none;
  border: none;
  position: absolute;
  top: 2em;
  right: 1em;

}

.reset-filter-btn img{
  width: 2em;
  height: auto;
  background-color: #011C4F;
  padding: 0.3em;
  filter: drop-shadow(0px 2px 1px black);
}
.close-btn img{
  width: 1em;
  height: auto;
}

.hamburger{
  max-height: 2em;
  top:0em;
  font-size: 24px;
  cursor: pointer;
  background: none;
  border: none;
  z-index: 999;
  position: sticky;
  padding: 0 !important;
}
#filter-icon{
  width: 2em;
  height: auto;
  filter: drop-shadow(0px 2px 2px black);
  padding: 0.4em;
  background-color: #011C4F ;
}



/* reset filter button anim */
/* rotate */
.rotate-anim {
  animation: rotateAnim 0.5s forwards;
}

@keyframes rotateAnim {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* shake */
.shake-anim {
  animation: shakeAnim 0.4s;
}

@keyframes shakeAnim {
  0% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  50% { transform: translateX(4px); }
  75% { transform: translateX(-4px); }
  100% { transform: translateX(0); }
}

.product-shop-container{
  width: 100%;
  display:flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.add-to-cart-btn{
  border-radius: 8px;
  text-align: center;
  padding: 0.8em !important;
  position: relative;
  left: -1em;
  text-decoration:none !important;
}

.product-child-category{
  font-weight: 800;
  font-size:2em;
  padding-top: 1em;
}

.product-price{
  position: relative;
  right: -1em;
  font-size: 1em;
  font-weight: 700;
}

.add_to_cart_button{
  text-decoration:none !important;
}