.flip-container{
	-webkit-perspective: 1700px;
	-moz-perspective: 1700px;
	perspective: 1700px;
	-webkit-perspective-origin: 0 50%;
	-moz-perspective-origin: 0 50%;
	perspective-origin: 0 50%;
}

.flip-container figure {
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
}

.flip-container figure > div {
	overflow: hidden;
}

.flip-container figure img {
	-webkit-transition: -webkit-transform ease-in 0.6s;
	-moz-transition: -moz-transform ease-in 0.6s;
	transition: transform ease-in 0.6s;
}

.flip-container figure:hover img,
.flip-container figure.cs-hover img {
	-webkit-transform: translateX(5%);
	-moz-transform: translateX(5%);
	-ms-transform: translateX(5%);
	transform: translateX(5%);
}

.flip-container figcaption {
	height: 100%;
	width: 50%;
	opacity: 0;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transform-origin: 0 0;
	-moz-transform-origin: 0 0;
	transform-origin: 0 0;
	-webkit-transform: rotateY(-90deg);
	-moz-transform: rotateY(-90deg);
	transform: rotateY(-90deg);
	-webkit-transition: -webkit-transform 0.4s, opacity 0.1s 0.3s;
	-moz-transition: -moz-transform 0.4s, opacity 0.1s 0.3s;
	transition: transform 0.4s, opacity 0.1s 0.3s;

    position: absolute;
    top: 0;
    left: 0;
    padding: 20px;
    background: #2c3f52;
    color: #ed4e6e;
}

.flip-container figure:hover figcaption,
.flip-container figure.cs-hover figcaption {
	opacity: 1;
	-webkit-transform: rotateY(0deg);
	-moz-transform: rotateY(0deg);
	transform: rotateY(0deg);
	-webkit-transition: -webkit-transform 0.4s, opacity 0.1s;
	-moz-transition: -moz-transform 0.4s, opacity 0.1s;
	transition: transform 0.4s, opacity 0.1s;
}

.flip-container figcaption div{
    width: 50%;
    height: 100%;
    position: relative;
}

.flip-container figcaption a{
	position: absolute;
	bottom: 20px;
	left: 20px;
}

.x0 {
    float:left;
    width:100%;
}
.x1 {
    margin:0px auto;
}
.x2 {
    overflow:hidden;
    display:block;
    float:left;
    width:auto;
    height:auto;
    position: relative;
    border-radius:50%;
    -moz-border-radius:50%;
    -webkit-border-radius:50%;
    -khtml-border-radius: 50%;
    background: rgba(255, 0, 0, 1);
}

.midtext {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -22px;
  margin-top: -9px;
}
/* END Content */
@media (max-width: 320px) 
{
    .x2 {padding: 50%;}
}

@media (min-width: 321px) and (max-width: 800px)
{
    .x2 {padding: 25%;}
}

@media (min-width: 801px)
{
    .x1 {width:800px}
    .x2 {padding: 12.5%;}
}