.modalDialog {
  position: fixed;
  font-family: Arial, Helvetica, sans-serif;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0,0,0,0);
  z-index: 99999;
  opacity:0;
  -webkit-transition: opacity 400ms ease-in;
  -moz-transition: opacity 400ms ease-in;
  transition: opacity 400ms ease-in;
  pointer-events: none;
}
.modalDialog:target {
  opacity:1;
  pointer-events: auto;
}
.modalDialog > div {
  width: 90%;
  height: 503px;
  position: relative;
  margin: 1% auto;
  padding: 1px 1px 1px 1px;
  border-radius: 5px;
  background: white;
  background: -moz-linear-gradient(#fff, #999);
  background: -webkit-linear-gradient(#fff, #999);
  background: -o-linear-gradient(#fff, #999);
  -webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
}
.close {
  background: #606061;
  color: #FFFFFF;
  line-height: 25px;
  position: absolute;
  right: -12px;
  text-align: center;
  top: -10px;
  width: 24px;
  text-decoration: none;
  font-weight: bold;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
  -moz-box-shadow: 1px 1px 3px #000;
  -webkit-box-shadow: 1px 1px 3px #000;
  box-shadow: 1px 1px 3px #000;
}
.close:hover { background: red; }
 
@import url(https://fonts.googleapis.com/css?family=Lato:400,300,700|Great+Vibes);
@import url(http://weloveiconfonts.com/api/?family=entypo);

*, *:after, *:before {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}
/** {margin:0;padding:0;border: 0 none;position: relative;}
[class*="entypo-"]:before {font-family: 'entypo', sans-serif; display: inline-block; margin-right: .5rem;}*/

body > div {
  margin: auto;
}
h1, h1 a {
  font-size: 6vw;
  font-weight: 300;
  color: #00262F;
  text-align: center;
  text-decoration: none;
}
h1 a:hover {color: #0D757D;}
body > p {
  color: #00262F;
  font-size: 3vw;
  text-align: center;
  
}

.galeria {
  margin:0;padding:0;border: 0 none;position: relative;}
[class*="entypo-"]:before {font-family: 'entypo', sans-serif; display: inline-block; margin-right: .5rem;
  margin: 2vh auto 0;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}
.galeria:before {
  content: '';
  padding-top: 56.25%;
  display: inline-block;
  width: 0;
}
.card {
  background-size: 2px 2px, cover;
  background-repeat: repeat, none;
  background-position: 0 0;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  box-shadow: 0 0 2rem rgba(0,0,0,.5);
  border-radius: 3px;
  font-family: 'Great Vibes';
}
/*.una {
  background-image: url(data:fotos/nuevas/foto4.jpg), url(fotos/nuevas/foto4.jpg);
}
.dos {
  background-image: url(data:fotos/nuevas/foto6.jpg), url(fotos/nuevas/foto6.jpg);
}
.tres {
  background-image: url(data:fotos/nuevas/foto7.jpg), url(fotos/nuevas/foto7.jpg);
}*/

.card p{
  text-align: center;
  color: #fff;
  font-size: 5vw;
  line-height: 1.3;
  text-shadow: -1px -1px 0 #0D757D, 1px 1px 0 #000;
  margin-top: 3vh;
}

.footer {
  background: #15BFCC;
  color: #0D757D;
  position: absolute;
  bottom: 0;
  width: 100%;
  list-style-type: none;
  border-top: 3px solid rgba(255,255,255,.3);
}

#uno:checked ~ .una .footer,
#dole:checked ~ .dos .footer,
#tele:checked ~ .tres .footer{
  background: #0D757D;
  color: #15BFCC;
}

input {visibility: hidden;}
label {
  background: #15BFCC;
  position: absolute;
  top: 0; bottom: 0;
  margin: auto 0;
  color: #fff;
  font-size: 4vw;
  line-height: 15vh; 
  text-align: right;
  height: 15vh;
  width: 4vw;
  padding: 0 .5vw;
  cursor: pointer;
  opacity: .2;
  transition: .5s linear;

}
.otra + .otra,
#uno:checked ~ .tres .afin,
#dole:checked ~ .una .afin,
#tele:checked ~ .dos .afin {
  right: 0;
  text-align: left;

}
#uno:checked ~ .una .otra,
#dole:checked ~ .dos .otra,
#tele:checked ~ .tres .otra {
  background:  #0D757D;
  display: block;

}
#uno:checked ~ .una .afin,
#dole:checked ~ .dos .afin,
#tele:checked ~ .tres .afin,
:not(:checked) ~ .otra
{display: none;}

.card:hover label {
  animation: pulso 1s infinite alternate;
}
.card:hover label + label {
  animation-delay: .5s;
}
.card:hover label:hover {
  animation: none;
  opacity: .8;
  width: 10vw;
  font-size: 10vw;
}

#uno:checked ~ .dos,
#dole:checked ~ .tres,
#tele:checked ~ .una {
  animation: 1s fuera-izq;
  animation-fill-mode: forwards;
  transform-origin: center left;
  z-index: 2;
}
#uno:checked ~ .tres,
#dole:checked ~ .una,
#tele:checked ~ .dos {
  animation: 1.5s fuera-dch;
  animation-fill-mode: forwards;
  transform-origin: center right;
  z-index: 2;
}
#uno:checked ~ .una,
#dole:checked ~ .dos,
#tele:checked ~ .tres {
  animation: 2s central;
  animation-fill-mode: forwards;
  transform-origin: center center;
  z-index:3;
}

@keyframes fuera-izq {
  0% {transform: scale(1) translatex(0%);} 
  70% {transform: scale(.9) translatex(-100%);}
  100% {transform: scale(.9) translatex(-7%);}
}
@keyframes fuera-dch {
  0% {transform: scale(1) translatex(0%);}
  70% {transform: scale(.9) translatex(100%);}
  100% {transform: scale(.9) translatex(7%);}
}
@keyframes central {
  0% {transform: scale(.8);z-index: 1;}
  80% {transform: scale(.5);z-index: 3;}
  100% {transform: scale(1);z-index: 3;}
}
@keyframes pulso {
  50% {opacity: .7;}
}