*{
	transition: all 200ms cubic-bezier(0.2, 0, 0, 1);
}
/*
.nav-condoms{
	background: url(../img/art/condoms-nav.png);
	background-size: contain;
	background-repeat: repeat;
	height: auto;
}*/

.product-container{
	width: 100%;
	height: 100%;
	display: grid;
	grid-template-columns: 1fr 1fr;
	place-items: center;
}

.product-image{
	height: 100%;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.product-image img{
	width: 60%;
	height: auto;
}

.product-desc-container{
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.product-desc{
	margin: 50px 0;
}

.product-name h1{
	margin: 0;
}

.product-btn{
	border: 1px solid #fff;
	padding: 10px 15px;
	border-radius: 5px;
}

.product-btn:hover{
	box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.product-opt-container{
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	margin: 25px 0;
}

.btn-size-active{
	border-color: var(--primary-color);
	background-color: var(--primary-color);
	color: #000;
}

.btn-pack-active{
	border-color: var(--secondary-color);
	background-color: var(--secondary-color);
	color: #000;
}

.add-to-cart-btn{
	border: 1px solid #fff;
	padding: 10px 15px;
	border-radius: 5px;
	cursor: pointer;
}
.add-to-cart-btn:hover{
	box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
	background-color: var(--primary-color);
}

.collectibles-container{
	padding: 50px 0;
	width: 100%;
	height: 100vh;
	display: grid;
	grid-template-rows: 1fr 1fr;
	grid-template-columns: 1fr 1fr 1fr;
	place-items: center;
}

.collectibles-container h1{
	font-size: 3rem;
}

.collectibles img{
	width: 100%;
	height: auto;
}

.cards-back-scroll{
	overflow-x: scroll;
	white-space: nowrap;
	overflow: hidden;
}
.cards-back-scroll img{
	width: 100%;
	height: auto;
	display: inline-block;
}
.card1 {
	animation: scroll 20s linear infinite;
}
.card2 {
	transform: translateX(100%);
	animation: scroll 20s linear infinite;
}
	  
@keyframes scroll {
	from {
	  transform: translateX(0);
	}
	to {
	  transform: translateX(-100%);
	}
  }