/* Product grid */

.grid {
	position: relative;
	overflow: hidden;
	width: 90%;
	margin: 0 auto;
	padding: 1.5em 0 8em;
	text-align: center;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
	-khtml-user-select: none;
}

.grid.scrolled{
    margin-top: 75px;
}

/* Loader */
.grid__loader {
	display: none;
	margin: 3em auto 0;
}

.grid--loading .grid__loader {
	display: block;
}

/* Clearfix */

.grid:after {
	content: '';
	display: block;
	clear: both;
}

/* Grid items */

.grid__sizer,
.grid__item {
	position: relative;
	width: 33.3333333333%;
}

.grid__item a{
	color: black;
}

.no-touch .grid__sizer,
.no-touch .grid__item {
	padding: .75em .75em 1.25em;
}

.grid--loading .grid__item {
	visibility: hidden;
}

.grid__item--size-a {
	width: 40%;
}

.grid__item--size-b {
	width: 30%;
}

/* Gallery */

.slider {
	padding: 0;
	background: #fff;
}

.no-touch .slider {
	padding: 0;
}

.slider__item {
	width: 100%;
	padding: 1em;
}

.slider__item img {
	width: 100%;
}
/* Flickity page dots */

.slider .flickity-page-dots {
	bottom: 20px;
	opacity: 0;
	-webkit-transition: opacity .3s;
	transition: opacity .3s;
}

.no-touch .slider:hover .flickity-page-dots {
	opacity: 1;
}

.slider .flickity-page-dots .dot {
	background: #131417;
}

/* Product meta */

.meta {
	position: relative;
	margin: 0;
	text-align: center;
}


.meta__title {
	font-size: 1.5em;
	font-weight: 400;
	margin: 0;
	padding: .4em 0 .1em;
	font-family: 'Raleway', sans-serif;
}

.meta__subtitle {
	font-size: 1em;
	font-family: 'Raleway', sans-serif;
	font-weight: 300;
	color: #999;
	margin: 0;
	padding: .4em 0 .1em;
}

/* Action style */

.action {
	font-family: 'Raleway', sans-serif;
	font-size: 1.2em;
	position: relative;
	overflow: hidden;
	margin: 0;
	padding: .25em;
	cursor: pointer;
	color: #fff;
	border: none;
	background: none;
}

.subbar .action{
	font-size: 1.1em;
}

.action:focus {
	outline: none;
}

.action--button {
	color: #5c5edc;
}

.no-touch .action--button:hover {
	color: #fff;
	outline: none;
}

.text-hidden {
	position: absolute;
	top: 200%;
}

/* Add to cart button */

.action--buy {
	position: absolute;
	top: 0;
	right: 0;
	padding: 1.85em 2.35em;
	-webkit-transition: opacity .3s, -webkit-transform .3s;
	transition: opacity .3s, transform .3s;
	-webkit-transform: translate3d(-5px, 0, 0);
	transform: translate3d(-5px, 0, 0);
}

.no-touch .action--buy {
	opacity: 0;
}

.no-touch .grid__item:hover .action--buy {
	opacity: 1;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}



.flexbox .filter {
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	-webkit-justify-content: center;
	justify-content: center;
}

/* Filter */

.filter__label {
	font-size: .85em;
	display: inline-block;
	margin: 0 2%;
	color: #393A3F;
}

.filter__item {
	margin: 0 2%;
	padding: .1em;
	vertical-align: middle;
	color: #fff;
	border-bottom: 2px solid transparent;
}


.filter__item--selected {
	color: #018CFD;
	border-color: #018CFD;
}

.subbar .filter__item--selected {
	color: white;
	border-color: white;
}


.filter__item .product--icon {
	display: none;
}

/* Shopping cart */

.cart {
	font-size: 1.5em;
	position: absolute;
	top: 0;
	right: 0;
	overflow: hidden;
	height: 100%;
	padding: 0 1.195em;
	cursor: pointer;
	color: #abacae;
	border: none;
	background-color: #131415;
}

.no-touch .cart:focus,
.no-touch .cart:hover {
	color: #fff;
	outline: none;
}

.cart--animate .cart__icon {
	-webkit-animation: cartAnim .4s forwards;
	animation: cartAnim .4s forwards;
}

.filter__item .product--icon{
	width: 30px;
	height: 30px;
	opacity: 0.6;
	transition: all 0.2s ease-in;
}

.filter__item--selected .product--icon{
	opacity: 1;
}

.icon--hh{
	background-image: url('../img/icons/hh.png');
	background-size: 100% 100%;
}

.icon--rfid-tag{
	background-image: url('../img/icons/rfid-tag.png');
	background-size: 100% 100%;
}

.icon--tunel{
	background-image: url('../img/icons/tunel.png');
	background-size: 100% 100%;
}

.icon--unidosis{
	background-image: url('../img/icons/unidosis.png');
	background-size: 100% 100%;
}

.icon--cards{
	background-image: url('../img/icons/cards.png');
	background-size: 100% 100%;
}

.icon--brazalete{
	background-image: url('../img/icons/brazalete.png');
	background-size: 100% 100%;
}

@-webkit-keyframes cartAnim {
	50% {
		opacity: 0;
		-webkit-transform: translate3d(50px, 0, 0);
		transform: translate3d(50px, 0, 0);
	}
	51% {
		opacity: 0;
		-webkit-transform: translate3d(-50px, 0, 0);
		transform: translate3d(-50px, 0, 0);
	}
	100% {
		opacity: 1;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}

@keyframes cartAnim {
	50% {
		opacity: 0;
		-webkit-transform: translate3d(50px, 0, 0);
		transform: translate3d(50px, 0, 0);
	}
	51% {
		opacity: 0;
		-webkit-transform: translate3d(-50px, 0, 0);
		transform: translate3d(-50px, 0, 0);
	}
	100% {
		opacity: 1;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}

.cart__count {
	font-size: 9px;
	font-weight: bold;
	line-height: 15px;
	position: absolute;
	top: 50%;
	right: 20px;
	width: 15px;
	height: 15px;
	margin: -16px 0 0 0;
	text-align: center;
	color: #fff;
	border-radius: 50%;
	background: #5c5edc;
}

.cart--animate .cart__count {
	-webkit-animation: countAnim .4s forwards;
	animation: countAnim .4s forwards;
}

@-webkit-keyframes countAnim {
	50% {
		opacity: 0;
		-webkit-transform: translate3d(0, 80px, 0);
		transform: translate3d(0, 80px, 0);
	}
	51% {
		opacity: 0;
		-webkit-transform: translate3d(0, -80px, 0);
		transform: translate3d(0, -80px, 0);
	}
	100% {
		opacity: 1;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}

@keyframes countAnim {
	50% {
		opacity: 0;
		-webkit-transform: translate3d(0, 80px, 0);
		transform: translate3d(0, 80px, 0);
	}
	51% {
		opacity: 0;
		-webkit-transform: translate3d(0, -80px, 0);
		transform: translate3d(0, -80px, 0);
	}
	100% {
		opacity: 1;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}
/* Resize grid items on smaller screens */




@media screen and (max-width:700px){
	.productscontainer .bar,
  .productscontainer .subbar{
    position: fixed;
  }

	.productscontainer .subbar {
    padding: 0.3em 0;
	}

  .productscontainer .subbar{
    top: 114px;
    z-index: 9;
  }
}

@media screen and (min-width: 70em) {
	.grid__sizer,
	.grid__item,
	.grid__item--size-a {
		width: 25%;
	}
}

@media screen and (max-width: 65em) {
	.grid__sizer,
	.grid__item,
	.grid__item--size-a {
		width: 33.333%;
	}
}

@media screen and (max-width: 50em) {
	.grid__sizer,
	.grid__item,
	.grid__item--size-a {
		width: 50%;
	}
}

@media screen and (max-width: 700px) {
	.productscontainer .bar {
		padding: .5em 0;
	}
	.flexbox .filter {
		-webkit-justify-content: space-around;
		justify-content: space-around;
	}
	.filter__item {
		height: 100%;
		padding: .5em .1em;
		border: none;
	}
	
	.cart {
		padding: 0 1em;
	}
    .flickity-prev-next-button{
        display: none;
    }
    .meta__title{
        font-size: 4vw;
    }
    .meta__subtitle{
        font-size: 4vw;
    }
    .slider__item{
        padding-bottom: 0;
    }
}

@media screen and (max-width: 23.3em) {
	.grid {
		max-width: 75%;
	}
	.grid__loader {
		margin: 0 auto;
	}
	.grid__sizer,
	.grid__item,
	.grid__item--size-a {
		width: 100%;
	}
	.action--buy {
		font-size: 1.5em;
		padding: 1.15em 1.5em;
		-webkit-tap-highlight-color: transparent;
	}
}