
.force-background{
  z-index: 0 !important;
}

#product-section{
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-gap: 2rem;
  	min-height: 30rem;
}
#filter-menu{
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	position: absolute;
}
#filter-menu li{
  font-size: 17px;
}

.collections-menu{
	list-style: none;
	font-size: 19px;
	align-self: center;
	cursor: pointer;
	margin: 2rem 0rem 1rem 0rem;
	max-height: 20.5rem;
	overflow: hidden;
}

#collection-filter{
  position: absolute;
}

#empty-box{
  pointer-events: none;
  opacity: 0;
}

.no-products-message{
	grid-column-start: 3;
	grid-column: span 8;
	margin: 1rem;
	justify-self: center;
	position: relative;
	top: 21vh;
  	height: 24rem;
}


/* pagination */

#new-arrivals-pagination{
  	display: flex;
  	justify-content: space-between;
  	font-size: 14px;
    margin: 1rem auto 0rem auto;
}
#new-arrivals-pagination span {
  margin: 0.2rem;
}
.pagination-link-hidden{
  opacity: 0;
}
.current{
  color: #0066FF;
}



/* product box */
.product-box{
	grid-column: span 4;
}
.product-vendor{
	margin: 5px 0 0 0;
	font-size: 12px;
	letter-spacing: 0.17em;
}
.product-img{
	height: 23.5rem;
	overflow: hidden;
	align-content: center;
  	justify-content: center;
	display: grid;
	background-color: #f5f5f5;
}
.product-img img{
	mix-blend-mode: darken;
  	max-width: none;
  	height: inherit;
  	justify-self: center;
}

.product-title{
	margin: 0;
	font-size: 16px;
  	font-family: 'Avenir Next', sans-serif;
}
.product-price{
	margin: 0;
	font-size: 15px;
}
#original-price{
	text-decoration: line-through;
}
.sale-amount{
  position: absolute;
  background-color: #000000;
  color: #fff;
    letter-spacing: 0.025em;
    line-height: 1.5;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-size: 0.68824em;
    line-height: 1;
    padding: 6px 6px 6px 8px;
  	z-index: 1;
}

.load-animation { 
    animation: fadeIn ease 1s;
    animation-iteration-count: 1;
} 
  
@keyframes fadeIn { 
    0% { 
        opacity: 0; 
    } 
    100% { 
        opacity: 1; 
     } 
} 

/* product box hover */

.preview-img{
  opacity: 1;
  transition: all 0.3s ease-out;
}

.reveal-img{
  transition: all 0.3s ease-out;
  opacity: 0;
  margin-bottom: -23.5rem;
}

.preview-img-general{
  opacity: 1;
  transition: all 0.3s ease-out;
}

.reveal-img-general{
  transition: all 0.3s ease-out;
  opacity: 0;
  margin-bottom: -25rem;
}
  



/* quick view button */
.quick-view-btn{
	opacity: 0;
	position: relative;
	left: 82%;
  	top: 1rem;
	background-color: black;
	color: white;
  	margin: -20px;
	transition: 0.3s;
}
.quick-view-btn:hover{
	opacity: 1;
}
.product-box:hover .quick-view-btn{
	opacity: 1;
}

.product-box-general:hover .quick-view-btn{
	opacity: 1;
}  

/* general collections */

.product-box-general{
	grid-column: span 3;
}

.product-img-general{
	height: 25rem;
	overflow: hidden;
	align-content: center;
	display: grid;
	background-color: #f5f5f5;
}
.product-img-general img{
	mix-blend-mode: multiply;
  	max-width: 113%;
  	justify-self: center;
}

/* wishlist */
.product-box-text{
  display: flex;
  justify-content: space-between;
}
.wishlist-heart-add{
  display: flex;
}
.usability-test-heart{
  position: relative;
  margin: auto;
}
.usability-test-heart i{
  font-size: 20px;
  margin: 1rem 0rem 0rem 0.5rem;
}
.wishlist-heart-remove {
  display: none;
}

.iwishMsgInfo{
    grid-column: span 12;
    justify-self: center;
    position: relative;
    top: 21vh;
  	width: 100%;
    text-align: center;
}
.iwishMsgSuccess{
    grid-column: span 12;
    justify-self: center;
    position: relative;
  	height: 3.2rem;
}


@media (max-width: 425px){
  	#filter-menu li{
  		font-size: 4vw !important;
	}
  	.product-img{
		height: 13.8rem;
	}
  	.reveal-img{
      	margin-bottom: -13.8rem;
    }
  	.product-box-general{
		grid-column: span 6;
	}
    .collections-menu {
     	margin: 0rem 0rem 1rem 0rem;
      	max-height: 14.5rem;
    }
}

@media (max-width: 590px){
  	#filter-menu li{
  		font-size: 3.5vw;
	}
    .collections-menu {
     	margin: 0rem 0rem 1rem 0rem;
    }
}
@media (max-width: 767px) and (min-width: 426px){
	.product-box{
		grid-column: span 6;
	}
    .product-vendor{
      font-size: 13px;
  	}
    .product-title{
      font-size: 15px;
  	}
  	.product-price{
      font-size: 14px;
  	}
	 .product-img{
		height: 22rem;
	}
  	.reveal-img{
      margin-bottom: -22rem;
    }
  	.no-products-message{
		grid-column-start: 6;
		grid-column: span 6;
      	top: 17vh;
    }
   	/* general collection */
   	.product-box-general{
		grid-column: span 6;
	}
   	.product-img-general{
      height: 19rem;
    }
  	.reveal-img-general{
  	  margin-bottom: -19rem;
	}
    /* brukerundersøkelse */
    .usability-test{
    	display: flex;
        justify-content: flex-end;
      
  	}

}
@media (max-width: 991px) and (min-width: 768px){
	.product-box{
		grid-column: span 6;
	}
     .product-vendor{
      font-size: 13px;
  	}
    .product-title{
      font-size: 16x;
  	}
  	.product-price{
      font-size: 14px;
  	}
	 .product-img{
		height: 20rem;
	}
  	.reveal-img{
      margin-bottom: -20rem;
    }

	.no-products-message{
	grid-column-start: 6;
	grid-column: span 6;
    }
  
 	/* general collection */
  	.product-box-general{
		grid-column: span 4;
	}
  	.product-img-general{
      height: 18rem;
    }
  	.reveal-img-general{
  	  margin-bottom: -18rem;
	}
  
  	/* brukerundersøkelse */
    .wishlist-heart-add{
    	display: flex;
        justify-content: flex-end;
  	}
    .usability-test-heart i{
      font-size: 20px;
    }

}
@media (max-width: 1199px) and (min-width: 992px){
  	.product-box-general{
		grid-column: span 3;
	}
  	
  	.product-img{
      	height: 20rem;
	}
  	.reveal-img{
      margin-bottom: -20rem;
    }
}
@media (min-width: 1200px){
	.product-box{
		grid-column: span 4;
	}
    .product-vendor{
      font-size: 12px;
  	}
    .product-title{
      font-size: 16px;
  	}
  	.product-price{
      font-size: 15px;
  	}
  
  
    .product-box-reveal:hover .reveal-img{
      bottom: 0px;
      opacity: 1;
    }

    .product-box-reveal:hover .preview-img{
      opacity: 0;
    }
    .product-box-reveal:hover .reveal-img-general{
      bottom: 0px;
      opacity: 1;
    }

    .product-box-reveal:hover .preview-img-general{
      opacity: 0;
    }


  
  	/* general collection */
  	.product-box-general{
		grid-column: span 3;
	}
  
  	#filter-menu li{
  		font-size 17px;
	}	
  
  	.usability-test-heart i{
      font-size: 22px;
    }

  
  
}
@media (width: 767.2px){
	.product-box{
		grid-column: span 6;
	}
	 .product-img{
		height: 60vw;
	}
  	
  	/* general collection */
  	.product-box-general{
		grid-column: span 6;
	}
  
}
