body{
	background-color: #EDEFF0;
	position: relative;
	font-family: helvetica, arial, sans-serif;
}
*{
	@include box-sizing(border-box);	
}
h1{
	text-align: center;
	padding: 2.6rem 0;
	background-color: #fff;
	font-size: 30px;
	text-transform: uppercase;
	font-weight: 100;
	color: #777;
	margin-bottom: 50px;
}
.container{
	text-align: center;
}
/* Swatch Styles */	
/* ---------------------------------------- */ 
.swatch-container {
	@include perspective(1000);
	cursor: pointer;
	display: inline-block;
	text-align: left;
	&:hover .inner{
		@include rotateY(180deg);
	}
	.inner{
		@include transition(.6s);
		@include transform-style(preserve-3d);
		position: relative;
	}
}

.swatch-container, 
.front, 
.back {
	width: 200px;
	height: 246px;
}

.front, 
.back {
	@include backface-visibility(hidden);
	@include box-shadow(0 2px 0 rgba(0,0,0,.06));
	position: absolute;
	top: 0;
	left: 0;
}

.front {
	z-index: 2;
	background: #3cdbc0;
}

.back {
	@include rotateY(180deg);
	background: #fafafa;
}

footer.details{
	position: absolute;
	bottom: 0;
	height: 26%;
	width: 100%;
	background-color: #fff;
	color: #222;
	padding: 10px;
	font-weight: 800;
	span{
		font-weight: normal;
		display: block;
	}
}

.back{
	padding: 12px;
  padding-top: 40px;
	p{
		text-align: center;
		margin-bottom: 20px;
		text-transform: uppercase;
	}
	ul{
		background-color: #fff;
		@include border-radius(3px);
		overflow: hidden;
	}
	li{
		font-weight: 800;
		padding: 10px 5px;
		border-bottom: 1px solid #eee;
		color: #888;
		font-size: 12px;
		cursor: text;
    @include transition(color .3s);
    &:hover{
      color: #444;
    }
		&:last-child{
			border-bottom: none;
		}
		span{
			font-weight: normal;
			text-transform: uppercase;
			float: right;
		}
	}
}

//colors
.pt-7241c{
	.front{
		background-color: #6A1B32;
	}
}
.pt-565c{
	.front{
		background-color: #9FD5CA;
	}
}
.pt-7506c{
	.front{
		background-color: #F4DBB2;
	}
}
.pt-1555c{
	.front{
		background-color: #FFBA8E;
	}
}
.pt-170c{
	.front{
		background-color: #FF8671;
	}
}