@import url(http://fonts.googleapis.com/css?family=Coda);

.photo_container1.turn1{
  perspective: 800px;
  position: relative;
  background: #0c426f;
  border: 5px solid #1f6196;
  border-radius: 10px;
  height: 450px;
  width: 600px;
  margin: 0 auto;
  overflow: hidden;
}

.photo_container1.turn1 .label1 {
  color: #fff;
  font-family: 'Coda', cursive;
  font-size: 12px;
  left: 5px;
  letter-spacing: 2px;
  opacity: 1;
  position: absolute;
  text-shadow: 0 0 10px #000;
  top: 5px;
  z-index: 9999;
}

.photo_container1.turn1 img {
  height: 450px;
  width: 600px;
  margin: 0px 0 0 0px;
}

.photo_container1.turn1 .front1,
.photo_container1.turn1 .back1{
  left: 0;
  position: absolute;
  top: 0;
}

.photo_container1.turn1 .front1{
  backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -moz-transition: all 0.8s;
  -ms-transition: all 0.8s;
  -webkit-transition: all 0.8s;
  transition: all 0.8s;
  z-index: 999;
}

.photo_container1.turn1 .back1{
  opacity: 1;
  position: relative;
  -moz-transition: all 0.8s;
  -ms-transition: all 0.8s;
  -webkit-transition: all 0.8s;
  transition: all 0.8s;
}

.photo_container1.turn1 .description_container1 {
  -moz-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

.photo_container1.turn1.hover .front1,
.photo_container1.turn1:hover .front1{
  -moz-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

.photo_container1.turn1.hover .back1,
.photo_container1.turn1:hover .back1{
  -moz-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

.photo_container1.turn1 .description1 {
  color: #fff;
  text-align: left;
}

.photo_container1.turn1 .description1 .photo_title1{
  border-bottom: 4px solid #fff;
  font-family: 'Coda', cursive;
  font-size: 22px;
  margin: 15px 10px 0px 10px;
  padding-bottom: 0px;
}

.photo_container1.turn1 .description1 p{
  font-family: 'Coda', cursive;
  font-size: 14px;
  margin: 0;
  padding: 10px;
}

.altin-link1 {
  color: #8bb7da;
  text-decoration: none;
}

.altin-link1:hover {
  color: #fff;
  text-decoration: none;
}

/* Demo 2 */

.photo_container2.turn2{
  perspective: 800px;
  position: relative;
  background: #196140;
  border: 5px solid #d8ba6b;
  border-radius: 10px;
  height: 450px;
  width: 600px;
  margin: 0 auto;
  overflow: hidden;
}

.photo_container2.turn2 .label2 {
  color: #fff;
  font-family: 'Coda', cursive;
  font-size: 12px;
  left: 5px;
  letter-spacing: 2px;
  opacity: 1;
  position: absolute;
  text-shadow: 0 0 10px #000;
  top: 5px;
  z-index: 9999;
}

.photo_container2.turn2 img {
  height: 450px;
  width: 600px;
  margin: 0px 0 0 0px;
}

.photo_container2.turn2 .front2,
.photo_container2.turn2 .back2{
  left: 0;
  position: absolute;
  top: 0;
}

.photo_container2.turn2 .front2{
  backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -moz-transition: all 0.8s;
  -ms-transition: all 0.8s;
  -webkit-transition: all 0.8s;
  transition: all 0.8s;
  z-index: 999;
}

.photo_container2.turn2 .back2{
  opacity: 1;
  position: relative;
  -moz-transition: all 0.8s;
  -ms-transition: all 0.8s;
  -webkit-transition: all 0.8s;
  transition: all 0.8s;
}

.photo_container2.turn2 .description_container2 {
  -moz-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

.photo_container2.turn2.hover .front2,
.photo_container2.turn2:hover .front2{
  -moz-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

.photo_container2.turn2.hover .back2,
.photo_container2.turn2:hover .back2{
  -moz-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

.photo_container2.turn2 .description2 {
  color: #fff;
  text-align: left;
}

.photo_container2.turn2 .description2 .photo_title2{
  border-bottom: 4px solid #fff;
  font-family: 'Coda', cursive;
  font-size: 22px;
  margin: 15px 10px 0px 10px;
  padding-bottom: 0px;
}

.photo_container2.turn2 .description2 p{
  font-family: 'Coda', cursive;
  font-size: 14px;
  margin: 0;
  padding: 10px;
}

.altin-link2 {
  color: #ebcf99;
  text-decoration: none;
}

.altin-link2:hover {
  color: #fff;
  text-decoration: none;
}