body {
   margin:0;
   padding:0;
}
#container {
   font-size:1em;
   font-family:Arial;
   overflow:hidden;
   width: 970px;
   height:250px;
   position:relative;
}


#group_wrapper {
   transition:transform 1s;
}
#group_wrapper.shifted{
   transform: translateX(-900px);
}

/* Group 1 Styles */
#group_1 {
   position: relative;
   top: 0;
   left: 0;
   width: 970px;
}
#group_1_1 {
   position: absolute;
   top: 0;
   left: 0;
   z-index: 95;
   display: block;
   width: 225px;
   height: 250px;
   opacity: 1;
}
#group_1_2 {
   position: absolute;
   top: 0;
   left: 225px;
   z-index: 95;
   display: block;
   width: 295px;
   height: 250px;
   opacity: 1;
}
#group_1_3 {
   position: absolute;
   top: 0;
   left: 520px;
   z-index: 95;
   display: block;
   width: 225px;
   height: 250px;
   opacity: 1;
}
#group_1_4 {
   position: absolute;
   top: 0;
   left: 745px;
   z-index: 95;
   display: block;
   width: 225px;
   height: 250px;
   opacity: 1;
 }

 #group_2_1 {
   position: absolute;
   top: 0;
   left: 0;
   z-index: 95;
   display: block;
   width: 225px;
   height: 250px;
   opacity: 1;
}
#group_2_2 {
   position: absolute;
   top: 0;
   left: 225px;
   z-index: 95;
   display: block;
   width: 225px;
   height: 250px;
   opacity: 1;
}
#group_2_3 {
   position: absolute;
   top: 0;
   left: 450px;
   z-index: 95;
   display: block;
   width: 225px;
   height: 250px;
   opacity: 1;
}
#group_2_4 {
   position: absolute;
   top: 0;
   left: 675px;
   z-index: 95;
   display: block;
   width: 225px;
   height: 250px;
   opacity: 1;
 }

/* Group 2 Styles */
#group_2 {
   position: relative;
   top: 0;
   left: 970px;
   width: 970px;
}

.tile {
   position: relative;
   text-align: center;
   perspective: 800px;
 }

 .tile.clickable {
   cursor:pointer;
 }

 .tile:hover .tile_inner {
  /* transform: rotateY( 180deg ) ; */
  transition: transform 0.8s;
}

.tile_inner {
  position: absolute;
  width: 100%;
  height: 100%;
 /*box-shadow: 0 0 15px rgba(0,0,0,0.1); */
  transition: transform 1s;
  transform-style: preserve-3d;
}
.initial_image, .card {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
    height: 100%;
   display:block;
   -webkit-backface-visibility: hidden; /* Safari */
   backface-visibility: hidden;
}
.initial_image {

    opacity: 1;
}
.card {
    overflow: hidden;
    background-color: #FFFFFF;
    border: 1px solid #CCCCCC;
    box-sizing: border-box;
    opacity: 1;
    transform: rotateY(180deg);
}
.card:hover img {
   transform: scale(.95);
   opacity: .85;
   transform-origin:center center;
}
.card_image {
   position: absolute;
   top: 25px;
   left:0;
   transition: all 0.6s;
}

.card_header {
    font-size: 11.0px;
    line-height: 105%;
    color: #000000;
    font-weight:bold;
    text-align: left;
    position:absolute;
    bottom:50px;
    height:35px;
    left:6px;
    width:211px;
}
.card_content {
    font-size: 10.5px;
    line-height: 100%;
    color: #000000;
    text-align: left;
    position:absolute;
    bottom:25px;
    height:35px;
    left:6px;
    width:211px;
}
.card_footer {
    font-size: 10.0px;
    line-height: 100%;
    color: #000000;
    text-align: left;
    position:absolute;
    bottom:5px;
    left:6px;
    width:211px;
}


/* arrows */
#left_arrow {
    position: absolute;
    top: 85px;
    left: -62px;
    z-index: 99;
    display: block;
    cursor: pointer;
    opacity: 0.85;
    transition: all .5s;
}
#right_arrow {
    position: absolute;
    top: 85px;
    right: -62px;
    z-index: 99;
    display: block;
    cursor: pointer;
    opacity: 0.85;
    transition: all .5s;
}
#left_arrow.show{ left:0; }
#right_arrow.show{ right:0; }
#left_arrow:hover, #right_arrow:hover {
   opacity: 1;
}