*{
	margin: 0;
	padding: 0;
	box-size: border-box;
}

.container{
	width: 90%;
	justify-content: center;
	align-items: center;
	perspective: 1200px;
	
}

.card{
	background: rgba(50,50,50,0.7);
	transform-style: preserve-3d;
	border-radius: 30px;
	padding: 0rem 2.2rem;
	box-shadow: 0px 20px 20px rgba(0,0,0,0.2), 0px 0px 50px rgba(0,0,0,0.2);
	margin-left: 1vw;
	margin-right: 1vw;
	margin-bottom: 10px;
}

.snaker{
	min-height: 35vh;
	display: flex;
	align-items: center;
	justify-content: center;
}

.sneaker img{
	margin-top: 15px;
	transition: all 0.75s ease-out;
	border-radius: 5px;
}

.info h1{
	text-align: center;
	font-size: 1.4rem;
	transition: all 0.75s ease-out;
	margin-bottom: 40px;
	color: white;
	padding-top: 10px;
}

.info h3{
	text-align: center;
	font-size: 0.9rem;
	padding: 1rem 0rem;
	margin-bottom: 2rem;
	font-weight: lighter;
	transition: all 0.75s ease-out;
	color: white;
}

.sizes{
	display: flex;
	justify-content: space-between;
	transition: all 0.75s ease-out;
}

.sizes button{
	padding: 0.8rem 1.4rem; 
	background: none;
	border: none;
	box-shadow: 0px 5px 10px rgba(0,0,0,0.2);
	border-radius: 5px;
	cursor: pointer;
	font-weight: bold;
	font-size: 1.2rem;
}

button.active{
	background: lightblue;
	color: darkblue;
}
.purchase{
	margin-top: 4rem;
	transition: all 0.6s ease-out;
}

.purchase button{
	width: 100%;
	padding: 10px;
	background: gray;
	border: none;
	color: white;
	cursor: pointer;
	border-radius: 10px;
	font-weight: bolder;
	transition: all 0.6s ease-out;
	font-size: 1.2rem;
	margin-bottom: 10px;
}





.flip-card {
  
  width: 330px;
  height: 220px;
  padding: 10px;
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
}

/* This container is needed to position the front and back side */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 2.1s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
 background: rgba(50,50,50,0.7);
 color: black;
}

/* Style the back side */
.flip-card-back {
   background: rgba(50,50,50,0.7);
  color: white;
  transform: rotateY(180deg);
}


.titleslide{
	text-align: center;
	font-size: 25px;
	padding-top: 20px;
	padding-bottom: 20px;
	color: white;
}
.col{
	text-align: center;
}
.row p{
	font-size: 20px;
	color: white;
	text-align: center;
}

.csik{
margin: 0 auto;
background:rgba(50,50,50,0.9);	
height: 5px;
max-width: 1280px;
margin-top: 100px;
}


.mainbox{
	owerflow: hidden;
	transform-style: preserve-3d;
	
}
.sub{
	
}
.submainbox{
	owerflow: hidden;
	transform-origin: left;
	transform-style: preserve-3d;
	transition: 0.5s;
	z-index: 2;
}
.next{
	cursor: pointer;
}
.mainbox.active .submainbox{
	animation: submainbox-animation 0.5s ease;
	transform: perspective(1200px) rotateY(20deg) translateZ(410px) scale(0.4);	
	cursor: pointer; 
}
@keyframes submainbox-animation{
	from{
		transform: translate(0);
	}
	to{
		transform: perspective(1200px) rotateY(20deg) translateZ(410px) scale(0.4);	
	}
}
.links{
	owerflow: hidden;
	background:rgba(50,50,50,0.7);	
	position: absolute;
	left: 60%;
	width: 0;
	top: 10%;
	height: 0;
	display: flex;	
	justify-content: center;
	opacity: 0;
	transform: perspective(1200px) rotateY(20deg) translateZ(410px) scale(0.7);
	margin-right: 20px;
}
ul{
	list-style: none;
}
.links a{
	color: white;
	text-decoration: none;
	padding: 0.7rem 0;
	display: inline-block;
	font-size: 1.2rem;
	margin-top: 5px;
	margin-bottom: 5px;
}
.mainbox.active .links{
	animation: menu 0.6s forwards ease 0.3s;
	height: 75%;
	width: 20%;
}
@keyframes menu{
	0%{opacity: 0;}
	100%{opacity: 1;}
}