/*custom*/
#containers_holder{
  width: 950px;
  height: 600px;
  margin: 65px auto 0;
  position: relative;
}

#actual_holder {
  width: 900px;
  margin: 0 auto;
  overflow: hidden;
}

#containers{
  width: 950px;
  margin-left: 0;
}

#directorio{
  position: absolute;
  width:910px;
  z-index: 1005;
  padding: 20px;
  background-color: #FFF;
}
.directorio-item {
  float: left;
  width: 30%;
  margin-right: 5px;
  font-size: 12px;
  line-height:16px;
  height: 90px;
  border-top: solid 1px #E8E8E8;
  padding-top: 5px;
}
.directorio-item span{
  color:#8fb834;
  font-weight: bold;
  font-size: 14px;
}
/*custom*/

body {
  font: 13px/20px "Lucida Grande", Tahoma, Verdana, sans-serif;
  color: #404040;
  background: #d5d5d5 url('../img/mbg.jpg') top repeat-x;
}
a, a:visited {
  color: #0088cc;
  text-decoration: none;
}

a:hover {
  color: #005580;
  text-decoration: underline;
}

h2{
  margin: 12px auto;
}
.container {
  position: relative;
  /*margin: 40px auto 50px auto;*/
  width: 900px;
  padding: 0;
  text-align: center;
  display: inline-block;
}


.largeimage{
  position: relative;
  z-index: 1000;
}

img.info-icon{
  cursor: pointer;
  z-index: 1001;
  position: absolute;
}

#info-icon01-1 {left: 460px; top: 315px }
#pop01-1       {left: 490px; top: 290px }

#info-icon02-1 {left: 175px; top: 165px }
#info-icon02-2 {left: 275px; top: 210px }
#info-icon02-3 {left: 550px; top: 325px }
#info-icon02-4 {left: 720px; top: 280px }
#info-icon02-5 {left: 775px; top: 245px }
#pop02-1       {left: 205px; top: 120px }
#pop02-2       {left: 165px; top: 245px }
#pop02-3       {left: 300px; top: 280px }
#pop02-4       {left: 470px; top: 235px }
#pop02-5       {left: 525px; top: 200px }

#info-icon03-1 {left: 70px; top: 290px }
#info-icon03-2 {left: 290px; top: 435px }
#info-icon03-3 {left: 410px; top: 345px }
#info-icon03-4 {left: 405px; top: 80px }
#info-icon03-5 {left: 825px; top: 100px }
#pop03-1       {left: 100px; top: 245px }
#pop03-2       {left: 180px; top: 470px }
#pop03-3       {left: 440px; top: 300px }
#pop03-4       {left: 295px; top: 115px }
#pop03-5       {left: 575px; top: 55px }

#info-icon04-1 {left: 160px; top: 355px }
#info-icon04-2 {left: 235px; top: 325px }
#info-icon04-3 {left: 260px; top: 60px }
#info-icon04-4 {left: 480px; top: 310px }
#info-icon04-5 {left: 575px; top: 515px }
#info-icon04-6 {left: 590px; top: 335px }
#pop04-1       {left: 50px; top: 265px }
#pop04-2       {left: 125px; top: 205px }
#pop04-3       {left: 290px; top: 15px }
#pop04-4       {left: 370px; top: 180px }
#pop04-5       {left: 465px; top: 395px }
#pop04-6       {left: 480px; top: 215px }

#info-icon05-1 {left: 345px; top: 200px }
#info-icon05-2 {left: 400px; top: 120px }
#info-icon05-3 {left: 790px; top: 260px }
#info-icon05-4 {left: 785px; top: 400px }
#pop05-1       {left: 95px; top: 155px }
#pop05-2       {left: 150px; top: 75px }
#pop05-3       {left: 540px; top: 215px }
#pop05-4       {left: 535px; top: 355px }

#info-icon06-1 {left: 110px; top: 395px }
#info-icon06-2 {left: 625px; top: 270px }
#pop06-1       {left: 0px; top: 275px }
#pop06-2       {left: 515px; top: 150px }


#info-icon07-1 {left: 145px; top: 225px }
#info-icon07-2 {left: 770px; top: 190px }
#pop07-1       {left: 175px; top: 180px }
#pop07-2       {left: 520px; top: 145px }

#info-icon08-1 {left: 230px; top: 435px }
#info-icon08-2 {left: 220px; top: 120px }
#info-icon08-3 {left: 530px; top: 90px }
#info-icon08-4 {left: 525px; top: 210px }
#info-icon08-5 {left: 590px; top: 305px }
#info-icon08-6 {left: 765px; top: 280px }
#pop08-1       {left: 120px; top: 305px }
#pop08-2       {left: 250px; top: 75px }
#pop08-3       {left: 560px; top: 45px }
#pop08-4       {left: 275px; top: 165px }
#pop08-5       {left: 480px; top: 185px }
#pop08-6       {left: 655px; top: 160px }

#info-icon09-1 {left: 535px; top: 440px }
#pop09-1       {left: 425px; top: 320px }

#info-icon10-1 {left: 325px; top: 520px }
#info-icon10-2 {left: 350px; top: 420px }
#info-icon10-3 {left: 525px; top: 60px }
#info-icon10-4 {left: 600px; top: 255px }
#pop10-1       {left: 355px; top: 475px }
#pop10-2       {left: 380px; top: 385px }
#pop10-3       {left: 415px; top: 95px }
#pop10-4       {left: 350px; top: 210px }

#info-icon11-1 {left: 390px; top: 370px }
#info-icon11-2 {left: 600px; top: 350px }
#info-icon11-3 {left: 775px; top: 80px }
#pop11-1       {left: 280px; top: 250px }
#pop11-2       {left: 490px; top: 220px }
#pop11-3       {left: 525px; top: 30px }


#info-icon13-1 {left: 305px; top: 130px }
#info-icon13-2 {left: 280px; top: 185px }
#info-icon13-3 {left: 325px; top: 360px }
#info-icon13-4 {left: 440px; top: 350px }
#info-icon13-5 {left: 480px; top: 310px }
#info-icon13-6 {left: 520px; top: 230px }
#info-icon13-7 {left: 635px; top: 305px }
#pop13-1       {left: 60px; top: 85px }
#pop13-2       {left: 30px; top: 140px }
#pop13-3       {left: 75px; top: 315px }
#pop13-4       {left: 333px; top: 230px }
#pop13-5       {left: 373px; top: 190px }
#pop13-6       {left: 410px; top: 110px }
#pop13-7       {left: 665px; top: 260px }

#info-icon14-1 {left: 150px; top: 95px }
#info-icon14-2 {left: 250px; top: 170px }
#info-icon14-3 {left: 360px; top: 295px }
#info-icon14-4 {left: 435px; top: 120px }
#info-icon14-5 {left: 565px; top: 210px }
#info-icon14-6 {left: 145px; top: 400px }
#info-icon14-7 {left: 250px; top: 400px }
#info-icon14-8 {left: 520px; top: 410px }
#info-icon14-9 {left: 710px; top: 325px }
#info-icon14-10 {left: 710px; top: 450px }
#pop14-1       {left: 40px; top: 130px }
#pop14-2       {left: 143px; top: 50px }
#pop14-3       {left: 250px; top: 175px }
#pop14-4       {left: 325px; top: 155px }
#pop14-5       {left: 458px; top: 90px }
#pop14-6       {left: 38px; top: 280px }
#pop14-7       {left: 140px; top: 310px }
#pop14-8       {left: 410px; top: 290px }
#pop14-9       {left: 600px; top: 205px }
#pop14-10      {left: 600px; top: 330px }

#info-icon15-1  {left: 200px; top: 100px }
#info-icon15-2  {left: 320px; top: 160px }
#info-icon15-3  {left: 500px; top: 220px }
#info-icon15-4  {left: 675px; top: 190px }
#info-icon15-5  {left: 830px; top: 130px }
#info-icon15-6  {left: 275px; top: 490px }
#info-icon15-7  {left: 560px; top: 430px }
#info-icon15-8  {left: 615px; top: 360px }
#info-icon15-9  {left: 680px; top: 295px }
#info-icon15-10 {left: 760px; top: 460px }
#pop15-1        {left: 90px; top: 135px }
#pop15-2        {left: 210px; top: 195px }
#pop15-3        {left: 390px; top: 100px }
#pop15-4        {left: 565px; top: 70px }
#pop15-5        {left: 580px; top: 75px }
#pop15-6        {left: 165px; top: 360px }
#pop15-7        {left: 310px; top: 385px }
#pop15-8        {left: 365px; top: 315px }
#pop15-9        {left: 430px; top: 250px }
#pop15-10       {left: 510px; top: 415px }


#info-icon17-1 {left: 415px; top: 415px }
#info-icon17-2 {left: 285px; top: 475px }
#info-icon17-3 {left: 395px; top: 295px }
#info-icon17-4 {left: 336px; top: 20px }
#info-icon17-5 {left: 495px; top: 150px }
#info-icon17-6 {left: 670px; top: 155px }
#info-icon17-7 {left: 725px; top: 330px }
#info-icon17-8 {left: 790px; top: 280px }
#info-icon17-9 {left: 445px; top: 75px }
#pop17-1       {left: 305px; top: 295px }
#pop17-2       {left: 175px; top: 350px }
#pop17-3       {left: 285px; top: 175px }
#pop17-4       {left: 226px; top: 55px }
#pop17-5       {left: 385px; top: 60px }
#pop17-6       {left: 560px; top: 45px }
#pop17-7       {left: 475px; top: 285px }
#pop17-8       {left: 540px; top: 235px }
#pop17-9       {left: 195px; top: 25px }

#info-icon18-1  {left: 80px; top: 80px }
#info-icon18-2  {left: 230px; top: 430px }
#info-icon18-3  {left: 315px; top: 175px }
#info-icon18-4  {left: 360px; top: 275px }
#info-icon18-5  {left: 490px; top: 465px }
#info-icon18-6  {left: 480px; top: 185px }
#info-icon18-7  {left: 605px; top: 80px }
#info-icon18-8  {left: 700px; top: 490px }
#info-icon18-9  {left: 780px; top: 240px }
#info-icon18-10 {left: 800px; top: 140px }
#info-icon18-11 {left: 800px; top: 300px }
#pop18-1        {left: 110px; top: 35px }
#pop18-2        {left: 123px; top: 330px }
#pop18-3        {left: 65px; top: 150px }
#pop18-4        {left: 250px; top: 155px }
#pop18-5        {left: 380px; top: 345px }
#pop18-6        {left: 370px; top: 95px }
#pop18-7        {left: 495px; top: 115px }
#pop18-8        {left: 590px; top: 400px }
#pop18-9        {left: 530px; top: 205px }
#pop18-10       {left: 550px; top: 105px }
#pop18-11       {left: 550px; top: 255px }


#info-icon20-1  {left: 280px; top: 370px }
#info-icon20-2  {left: 480px; top: 480px }
#info-icon20-3  {left: 415px; top: 260px }
#info-icon20-4  {left: 495px; top: 175px }
#info-icon20-5  {left: 650px; top: 155px }
#info-icon20-6  {left: 770px; top: 380px }
#pop20-1        {left: 170px; top: 230px }
#pop20-2        {left: 370px; top: 360px }
#pop20-3        {left: 305px; top: 140px }
#pop20-4        {left: 385px; top: 55px }
#pop20-5        {left: 540px; top: 35px }
#pop20-6        {left: 660px; top: 260px }

.popover {
  position: absolute;
  z-index: 1010;
  opacity: 0;
  display: none;
  width: 236px;
  /*height: 200px;*/
  padding: 1px;
  text-align: left;
  white-space: normal;
  background-color: #ffffff;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.2);
  -webkit-border-radius: 6px;
     -moz-border-radius: 6px;
          border-radius: 6px;
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
     -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  -webkit-background-clip: padding-box;
     -moz-background-clip: padding;
          background-clip: padding-box;
}

.popover.top {
  margin-top: -10px;
}

.popover.right {
  margin-left: 10px;
}

.popover.bottom {
  margin-top: 10px;
}

.popover.left {
  margin-left: -10px;
}

.popover-title {
  padding: 8px 14px;
  margin: 0;
  font-size: 14px;
  font-weight: normal;
  line-height: 18px;
  background-color: #f7f7f7;
  border-bottom: 1px solid #ebebeb;
  -webkit-border-radius: 5px 5px 0 0;
     -moz-border-radius: 5px 5px 0 0;
          border-radius: 5px 5px 0 0;
}

.popover-content {
  padding: 9px 14px;
}

.popover .arrow,
.popover .arrow:after {
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
}

.popover .arrow {
  border-width: 11px;
}

.popover .arrow:after {
  border-width: 10px;
  content: "";
}

.popover.top .arrow {
  bottom: -11px;
  left: 50%;
  margin-left: -11px;
  border-top-color: #999;
  border-top-color: rgba(0, 0, 0, 0.25);
  border-bottom-width: 0;
}

.popover.top .arrow:after {
  bottom: 1px;
  margin-left: -10px;
  border-top-color: #ffffff;
  border-bottom-width: 0;
}

.popover.right .arrow {
  top: 50%;
  left: -11px;
  margin-top: -11px;
  border-right-color: #999;
  border-right-color: rgba(0, 0, 0, 0.25);
  border-left-width: 0;
}

.popover.right .arrow:after {
  bottom: -10px;
  left: 1px;
  border-right-color: #ffffff;
  border-left-width: 0;
}

.popover.bottom .arrow {
  top: -11px;
  left: 50%;
  margin-left: -11px;
  border-bottom-color: #999;
  border-bottom-color: rgba(0, 0, 0, 0.25);
  border-top-width: 0;
}

.popover.bottom .arrow:after {
  top: 1px;
  margin-left: -10px;
  border-bottom-color: #ffffff;
  border-top-width: 0;
}

.popover.left .arrow {
  top: 50%;
  right: -11px;
  margin-top: -11px;
  border-left-color: #999;
  border-left-color: rgba(0, 0, 0, 0.25);
  border-right-width: 0;
}

.popover.left .arrow:after {
  right: 1px;
  bottom: -10px;
  border-left-color: #ffffff;
  border-right-width: 0;
}

.animated {
  -webkit-animation-duration: 0.6s;
     -moz-animation-duration: 0.6s;
       -o-animation-duration: 0.6s;
          animation-duration: 0.6s;
  -webkit-animation-fill-mode: both;
     -moz-animation-fill-mode: both;
       -o-animation-fill-mode: both;
          animation-fill-mode: both;
}

@-webkit-keyframes cardInTop {
  0% {
    -webkit-transform-origin: 50% 100% 0px;
      -webkit-transform: perspective(500px) rotateX(-90deg) scale(0.5, 0.5);
  }
  100% {
    -webkit-transform-origin: 50% 100% 0px;
      -webkit-transform: perspective(500px) rotateX(0deg) scale(1, 1);
      opacity: 1;
  }
}

@-moz-keyframes cardInTop {
  0% {
    -moz-transform-origin: 50% 100% 0px;
      -moz-transform: perspective(500px) rotateX(-90deg) scale(0.5, 0.5);
  }
  100% {
    -moz-transform-origin: 50% 100% 0px;
      -moz-transform: perspective(500px) rotateX(0deg) scale(1, 1);
      opacity: 1;
  }
}

@-o-keyframes cardInTop {
  0% {
    -o-transform-origin: 50% 100% 0px;
      -o-transform: perspective(500px) rotateX(-90deg) scale(0.5, 0.5);
  }
  100% {
    -o-transform-origin: 50% 100% 0px;
      -o-transform: perspective(500px) rotateX(0deg) scale(1, 1);
      opacity: 1;
  }
}

@keyframes cardInTop {
  0% {
    transform-origin: 50% 100% 0px;
      transform: perspective(500px) rotateX(-90deg) scale(0.5, 0.5);
  }
  100%
  {
    transform-origin: 50% 100% 0px;
      transform: perspective(500px) rotateX(0deg) scale(1, 1);
      opacity: 1;
  }
}

.cardInTop {
  -webkit-animation-name: cardInTop;
  -moz-animation-name: cardInTop;
  -o-animation-name: cardInTop;
  animation-name: cardInTop;
}

@-webkit-keyframes cardInBottom {
  0% {
    -webkit-transform-origin: 50% 0% 0px;
      -webkit-transform: perspective(500px) rotateX(90deg) scale(0.5, 0.5);
  }
  100% {
    -webkit-transform-origin: 50% 0% 0px;
      -webkit-transform: perspective(500px) rotateX(0deg) scale(1, 1);
      opacity: 1;
  }
}

@-moz-keyframes cardInBottom {
  0% {
    -moz-transform-origin: 50% 0% 0px;
      -moz-transform: perspective(500px) rotateX(90deg) scale(0.5, 0.5);
  }
  100% {
    -moz-transform-origin: 50% 0% 0px;
      -moz-transform: perspective(500px) rotateX(0deg) scale(1, 1);
      opacity: 1;
  }
}

@-o-keyframes cardInBottom {
  0% {
    -o-transform-origin: 50% 0% 0px;
      -o-transform: perspective(500px) rotateX(90deg) scale(0.5, 0.5);
  }
  100% {
    -o-transform-origin: 50% 0% 0px;
      -o-transform: perspective(500px) rotateX(0deg) scale(1, 1);
      opacity: 1;
  }
}

@keyframes cardInBottom {
  0% {
    transform-origin: 50% 0% 0px;
      transform: perspective(500px) rotateX(90deg) scale(0.5, 0.5);
  }
  100%
  {
    transform-origin: 50% 0% 0px;
      transform: perspective(500px) rotateX(0deg) scale(1, 1);
      opacity: 1;
  }
}

.cardInBottom {
  -webkit-animation-name: cardInBottom;
  -moz-animation-name: cardInBottom;
  -o-animation-name: cardInBottom;
  animation-name: cardInBottom;
}


@-webkit-keyframes cardInLeft {
  0% {
    -webkit-transform-origin: 100% 50% 0px;
      -webkit-transform: perspective(500px) rotateY(-90deg) scale(0, 0);
  }
  100% {
    -webkit-transform-origin: 100% 50% 0px;
      -webkit-transform: perspective(500px) rotateY(0deg) scale(1, 1);
      opacity: 1;
  }
}

@-moz-keyframes cardInLeft {
  0% {
    -moz-transform-origin: 100% 50% 0px;
      -moz-transform: perspective(500px) rotateY(-90deg) scale(0, 0);
  }
  100% {
    -moz-transform-origin: 100% 50% 0px;
      -moz-transform: perspective(500px) rotateY(0deg) scale(1, 1);
      opacity: 1;
  }
}

@-o-keyframes cardInLeft {
  0% {
    -o-transform-origin: 100% 50% 0px;
      -o-transform: perspective(500px) rotateY(-90deg) scale(0, 0);
  }
  100% {
    -o-transform-origin: 100% 50% 0px;
      -o-transform: perspective(500px) rotateY(0deg) scale(1, 1);
      opacity: 1;
  }
}

@keyframes cardInLeft {
  0% {
    transform-origin: 100% 50% 0px;
      transform: perspective(500px) rotateX(-90deg) scale(0, 0);
  }
  100%
  {
    transform-origin: 100% 50% 0px;
      transform: perspective(500px) rotateX(0deg) scale(1, 1);
      opacity: 1;
  }
}

.cardInLeft {
  -webkit-animation-name: cardInLeft;
  -moz-animation-name: cardInLeft;
  -o-animation-name: cardInLeft;
  animation-name: cardInLeft;
}

@-webkit-keyframes cardInRight {
  0% {
    -webkit-transform-origin: 0% 50% 0px;
      -webkit-transform: perspective(500px) rotateY(90deg) scale(0, 0);
  }
  100% {
    -webkit-transform-origin: 0% 50% 0px;
      -webkit-transform: perspective(500px) rotateY(0deg) scale(1, 1);
      opacity: 1;
  }
}

@-moz-keyframes cardInRight {
  0% {
    -moz-transform-origin: 0% 50% 0px;
      -moz-transform: perspective(500px) rotateY(90deg) scale(0, 0);
  }
  100% {
    -moz-transform-origin: 0% 50% 0px;
      -moz-transform: perspective(500px) rotateY(0deg) scale(1, 1);
      opacity: 1;
  }
}

@-o-keyframes cardInRight {
  0% {
    -o-transform-origin: 0% 50% 0px;
      -o-transform: perspective(500px) rotateY(90deg) scale(0, 0);
  }
  100% {
    -o-transform-origin: 0% 50% 0px;
      -o-transform: perspective(500px) rotateY(0deg) scale(1, 1);
      opacity: 1;
  }
}

@keyframes cardInRight {
  0% {
    transform-origin: 0% 50% 0px;
      transform: perspective(500px) rotateX(90deg) scale(0, 0);
  }
  100%
  {
    transform-origin: 0% 50% 0px;
      transform: perspective(500px) rotateX(0deg) scale(1, 1);
      opacity: 1;
  }
}

.cardInRight {
  -webkit-animation-name: cardInRight;
  -moz-animation-name: cardInRight;
  -o-animation-name: cardInRight;
  animation-name: cardInRight;
}


@-webkit-keyframes cardOutTop {
  0% {
    -webkit-transform-origin: 50% 100% 0px;
      -webkit-transform: perspective(500px) rotateX(0deg) scale(1, 1);
      opacity: 1;
  }
  100% {
    -webkit-transform-origin: 50% 100% 0px;
      -webkit-transform: perspective(500px) rotateX(-90deg) scale(0.5, 0.5);
      opacity: 0;
  }
}

@-moz-keyframes cardOutTop {
  0% {
    -moz-transform-origin: 50% 100% 0px;
      -moz-transform: perspective(500px) rotateX(0deg) scale(1, 1);
      opacity: 1;
  }
  100% {
    -moz-transform-origin: 50% 100% 0px;
      -moz-transform: perspective(500px) rotateX(-90deg) scale(0.5, 0.5);
      opacity: 0;
  }
}

@-o-keyframes cardOutTop {
  0% {
    -o-transform-origin: 50% 100% 0px;
      -o-transform: perspective(500px) rotateX(0deg) scale(1, 1);
      opacity: 1;
  }
  100% {
    -o-transform-origin: 50% 100% 0px;
      -o-transform: perspective(500px) rotateX(-90deg) scale(0.5, 0.5);
      opacity: 0;
  }
}

@keyframes cardOutTop {
  0% {
    transform-origin: 50% 100% 0px;
      transform: perspective(500px) rotateX(0deg) scale(1, 1);
      opacity: 1;
  }
  100%
  {
    transform-origin: 50% 100% 0px;
      transform: perspective(500px) rotateX(-90deg) scale(0.5, 0.5);
      opacity: 0;
  }
}

.cardOutTop {
  -webkit-animation-name: cardOutTop;
  -moz-animation-name: cardOutTop;
  -o-animation-name: cardOutTop;
  animation-name: cardOutTop;
}

@-webkit-keyframes cardOutBottom {
  0% {
    -webkit-transform-origin: 50% 0% 0px;
      -webkit-transform: perspective(500px) rotateX(0deg) scale(1, 1);
      opacity: 1;
  }
  100% {
    -webkit-transform-origin: 50% 0% 0px;
      -webkit-transform: perspective(500px) rotateX(90deg) scale(0.5, 0.5);
      opacity: 0;
  }
}

@-moz-keyframes cardOutBottom {
  0% {
    -moz-transform-origin: 50% 0% 0px;
      -moz-transform: perspective(500px) rotateX(0deg) scale(1, 1);
      opacity: 1;
  }
  100% {
    -moz-transform-origin: 50% 0% 0px;
      -moz-transform: perspective(500px) rotateX(90deg) scale(0.5, 0.5);
      opacity: 0;
  }
}

@-o-keyframes cardOutBottom {
  0% {
    -o-transform-origin: 50% 0% 0px;
      -o-transform: perspective(500px) rotateX(0deg) scale(1, 1);
      opacity: 1;
  }
  100% {
    -o-transform-origin: 50% 0% 0px;
      -o-transform: perspective(500px) rotateX(90deg) scale(0.5, 0.5);
      opacity: 0;
  }
}

@keyframes cardOutBottom {
  0% {
    transform-origin: 50% 0% 0px;
      transform: perspective(500px) rotateX(0deg) scale(1, 1);
      opacity: 1;
  }
  100%
  {
    transform-origin: 50% 0% 0px;
      transform: perspective(500px) rotateX(90deg) scale(0.5, 0.5);
      opacity: 0;
  }
}

.cardOutBottom {
  -webkit-animation-name: cardOutBottom;
  -moz-animation-name: cardOutBottom;
  -o-animation-name: cardOutBottom;
  animation-name: cardOutBottom;
}

@-webkit-keyframes cardOutLeft {
  0% {
    -webkit-transform-origin: 100% 50% 0px;
      -webkit-transform: perspective(500px) rotateY(0deg) scale(1, 1);
      opacity: 1;
  }
  100% {
    -webkit-transform-origin: 100% 50% 0px;
      -webkit-transform: perspective(500px) rotateY(90deg) scale(0, 0);
      opacity: 0;
  }
}

@-moz-keyframes cardOutLeft {
  0% {
    -moz-transform-origin: 100% 50% 0px;
      -moz-transform: perspective(500px) rotateY(0deg) scale(1, 1);
      opacity: 1;
  }
  100% {
    -moz-transform-origin: 100% 50% 0px;
      -moz-transform: perspective(500px) rotateY(90deg) scale(0, 0);
      opacity: 0;
  }
}

@-o-keyframes cardOutLeft {
  0% {
    -o-transform-origin: 100% 50% 0px;
      -o-transform: perspective(500px) rotateY(0deg) scale(1, 1);
      opacity: 1;
  }
  100% {
    -o-transform-origin: 100% 50% 0px;
      -o-transform: perspective(500px) rotateY(90deg) scale(0, 0);
      opacity: 0;
  }
}

@keyframes cardOutLeft {
  0% {
    transform-origin: 100% 50% 0px;
      transform: perspective(500px) rotateX(0deg) scale(1, 1);
      opacity: 1;
  }
  100%
  {
    transform-origin: 100% 50% 0px;
      transform: perspective(500px) rotateX(90deg) scale(0, 0);
      opacity: 0;
  }
}

.cardOutLeft {
  -webkit-animation-name: cardOutLeft;
  -moz-animation-name: cardOutLeft;
  -o-animation-name: cardOutLeft;
  animation-name: cardOutLeft;
}


@-webkit-keyframes cardOutRight {
  0% {
    -webkit-transform-origin: 0% 50% 0px;
      -webkit-transform: perspective(500px) rotateY(0deg) scale(1, 1);
      opacity: 1;
  }
  100% {
    -webkit-transform-origin: 0% 50% 0px;
      -webkit-transform: perspective(500px) rotateY(-90deg) scale(0, 0);
      opacity: 0;
  }
}

@-moz-keyframes cardOutRight {
  0% {
    -moz-transform-origin: 0% 50% 0px;
      -moz-transform: perspective(500px) rotateY(0deg) scale(1, 1);
      opacity: 1;
  }
  100% {
    -moz-transform-origin: 0% 50% 0px;
      -moz-transform: perspective(500px) rotateY(-90deg) scale(0, 0);
      opacity: 0;
  }
}

@-o-keyframes cardOutRight {
  0% {
    -o-transform-origin: 0% 50% 0px;
      -o-transform: perspective(500px) rotateY(0deg) scale(1, 1);
      opacity: 1;
  }
  100% {
    -o-transform-origin: 0% 50% 0px;
      -o-transform: perspective(500px) rotateY(-90deg) scale(0, 0);
      opacity: 0;
  }
}

@keyframes cardOutRight {
  0% {
    transform-origin: 0% 50% 0px;
      transform: perspective(500px) rotateX(0deg) scale(1, 1);
      opacity: 1;
  }
  100%
  {
    transform-origin: 0% 50% 0px;
      transform: perspective(500px) rotateX(-90deg) scale(0, 0);
      opacity: 0;
  }
}

.cardOutRight {
  -webkit-animation-name: cardOutRight;
  -moz-animation-name: cardOutRight;
  -o-animation-name: cardOutRight;
  animation-name: cardOutRight;
}