body {}

#theArt {
  padding: .5em 0;
  overflow: hidden;
  /*background: whitesmoke;*/
  width: 100%;
  margin: auto;
  display:table-cell;
  }

#theArt2 {
  padding: .5em 0;
  overflow: hidden;
  /*background: whitesmoke;*/
  width: 100%;
  margin: auto;
  display:table-cell;
  
  background:url(../images/bg5zean.jpg)no-repeat;
	background-size: 100% 100%;
}

.artGroup {
  display: block;
  width: 180px;
  height: 180px;
  position: relative;
  margin: 3px;
  float: left;
}

.result111{
  display: block;
  width: 280px;
  position: relative;
  margin: 3px;
  float: left;
  background-color:#000000;
}

.result222{
  display: block;
 width: 550px;
  position: relative;
  margin: 3px;
  float: left;
  background-color:#000000;
}

.result5zean2{
  display: block;
  width: 235px;
  position: relative;
  margin: 3px;
  float: left;
}

.result5zean{
  display: block;
 width: 600px;
  position: relative;
  margin: 3px;
  float: left;
}

.result111 table{
  width:100%;
  height:180px;
  text-align:center;
  border:1px solid #FFFFFF;
}

.result222 table{
  width:100%;
  height:180px;
  text-align:center;
  border:1px solid #FFFFFF;
}

.result5zean2 table{
  width:100%;
  text-align:center;
  border:1px solid #FFFFFF;
}

.result5zean table{
  width:100%;
  text-align:center;
  border:1px solid #FFFFFF;
}

.result111 table td{
  border:1px solid #FFFFFF;
  color:#FFFFFF;
}

.result222 table td{
  border:1px solid #FFFFFF;
  color:#FFFFFF;
}

.result5zean2 table td{
  border:1px solid #FFFFFF;
  color:#FFFFFF;
  height:50px;
}

.result5zean table td{
  border:1px solid #FFFFFF;
  color:#FFFFFF;
  height:50px;
}

.result222 table td h2.step{
  font-size:23px;
  line-height:1.3;
}

.result5zean table td h2.step{
  font-size:15px;
  margin-bottom:0px;
  margin-top:0px;
}

.result222 table td.step3main{
	background:url(../images/bannerstep.png)no-repeat;
	background-size: 100% 100%;
	height: 100%;
}

.result222 table td.step3main1{
	background:url(../images/step1.png)no-repeat;
	background-size: 100% 100%;
	height: 100%;
}

.result222 table td.step3main2{
	background:url(../images/step2.png)no-repeat;
	background-size: 100% 100%;
	height: 100%;
}

.result222 table td.step3main3{
	background:url(../images/step3.png)no-repeat;
	background-size: 100% 100%;
	height: 100%;
}

.artwork {
  display: block;
  width: 100%;
  height: 100%;
}

.artGroup img {
  width: 100%;
  height: 100%;
  position: absolute;
  display: block;
  border: 1px solid #333;
}

.artGroup .detail {
  display: block;
  background: #000000;
  width: 100%;
  height: 100%;
  position: absolute;
}

.artGroup .detail h3 {
  font-size: 2em;
  text-align: center;
  color: #FFFFFF;
  margin:.8em auto;
}

.artGroup .detail h3 a{
	color:#FFFFFF;
}

.artGroup .detail h3 a:hover{
	text-decoration:underline;
}

.artGroup .detail p {
  width:100%;
  position: absolute;
  bottom:0px;
  text-align: center;
  font-size: 1em;
  padding: .5em;
  color:#FFFFFF;
}

/* 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 .detail,
.artGroup.flip .theFlip {
  -webkit-transform: rotateY(-180deg);
  transform: rotateY(-180deg);
}

.artGroup.flip img,
.artGroup.flip .detail {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

@media (max-width:768px){
	
	#theArt {
	  display:block;
	}

	.artGroup {
	  width: 100%;
	  height:250px;
	}

	.artGroup2 {
	  width: 100%;
	}

	.artGroup .detail h3 {
	  margin:3em auto;
	}

	.result222 table td h2.step{
	  font-size:20px;
	}
}