﻿
#theArt {
    
    margin: 5% auto;
}
.artGroup {
	display: block;
	width: 15.9%;
	height: 150px;
	margin: 2%;
	float: left;
    border-radius:10px;
    overflow:hidden;
    cursor:pointer;
}
.artwork {
    position:absolute;
	display: block;
	width: 100%;
	height: 100%;
    top:0
}

.artGroup .title { 
    color: aliceblue;
    border-radius:10px;
    width:100%;
    height:100%;
    position:absolute
}

.artGroup .title p { 
    font: 200 0.8em fontNameRegular,Arial, sans-serif;
    margin:auto  20px;
    text-align:left;
}
.artGroup .detail {
	color:#ffffff;
	width: 100%;
	height: 100%;
	position: absolute;
    border-radius: 10px;     
}


.artGroup .title h3 {
	font: 600 1.76em fontNameRegular,Arial, sans-serif;
	text-align: center;
    margin-top:15%
}
.artGroup .detail .p {
	font: 200 1em fontNameRegular,Arial, sans-serif;
	text-align: left;
	padding: 0 0.25em;
    white-space: -o-ellipsis-lastline;
    overflow:hidden;
    text-overflow:ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3; 
    -webkit-box-orient: vertical;
}
article {
	clear: both;
	font: 300 1em fontNameRegular,Arial, sans-serif;
	margin: 2em auto;
	max-width: 600px;
}

/* Older Browsers */
.artGroup.slide {
	overflow: hidden;
}
.artGroup.slide .detail {
	bottom: -364px;
}

/* Newer Browsers */
.artGroup.flip {
	-webkit-perspective: 800px;
	perspective: 800px;
}
.artGroup.flip .artwork {
	-webkit-transition: -webkit-transform 1s ease; 
	transition: transform 1s ease; 

	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
}

.artGroup.flip .title {
	-webkit-transition: -webkit-transform 1s ease; 
	transition: transform 1s ease; 

	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
}



.artGroup.flip .detail, .artGroup.flip .theFlip {
	-webkit-transform: rotateY(-180deg);
	transform: rotateY(-180deg);
}

.artGroup.flip img, .artGroup.flip .detail {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}


.artGroup.flip a, .artGroup.flip .title {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}