#gal {
  position:relative;
  width:200px;
  height:320px;
  margin:0 auto;
  left: -90px;
  -webkit-transform:translate3d(0, 0, 0);
  -moz-transform:   translate3d(0, 0, 0);
  -ms-transform:    translate3d(0, 0, 0);
  -o-transform:     translate3d(0, 0, 0);
  transform:        translate3d(0, 0, 0);
}
#gal ul {list-style-type:none;}
input[type="radio"] {
  position:absolute;
  display:block;
  width:20px;
  height:30px;
  right: 180px;
  border:0;
  outline:none;
  cursor:pointer;
  opacity:0;
  z-index:9;
}
input[value="one"] {top:0; }
input[value="two"] {top:30px; }
input[value="three"] {top:60px; }
input[value="four"] {top:90px;}
input[type="radio"] + label {
  position:absolute;
  left:0;
  width:20px;
  height:30px;
  background:#a8cdd9;
  z-index:7;
  -webkit-transition:left .1s, width .1s;
  -moz-transition:left .1s, width .1s;
  -ms-transition:left .1s, width .1s;
  -o-transition:left .1s, width .1s;
  transition:left .1s, width .1s;
}
input[value="one"] + label {top:0;}
input[value="two"] + label {top:30px; }
input[value="three"] + label {top:60px; }
input[value="four"] + label {top:90px;}
[class*="entypo-"]:before {
  position:absolute;
  font-family: 'entypo', sans-serif;
  font-size:10px;
}
label[class*="entypo-"]:before {
  top:10px;
  left:10px;
  font-size:10px;
  color:white;
}
a[class*="entypo-"]:before {
  top:10px;
  left:10px;
  font-size:10px!important;
  color:#333;
}
a:hover[class*="entypo-"]:before {
  color:tomato;
}
figure, figure img, figcaption {
  position:absolute;
  top:0;
}
figure {
  bottom:0;
  top: -10px;
  left:-50;
  width:220px;
  height:340px;
  display:block;
  overflow:hidden;
  
}
figure img {

  display:block;
  width:200px;
  height:320px;
  border: 10px solid #e4e4e4;
  border-radius: 10px;
  -webkit-transform:translateX(600px);
  -moz-transform:translateX(600px);
  -ms-transform:translateX(600px);
  -o-transform:translateX(600px);
  transform:translateX(600px);
  -webkit-transition:all .15s;
  -moz-transition:all .15s;
  -o-transition:all .15s;
  transition:all .15s;
}
figcaption {
  display:block;
  width:240px;
  height:320px;
  padding-top:180px;
  background:transparent;
  text-align:right;
  z-index:1;
  -webkit-transform:translateX(300px);
  -moz-transform:translateX(300px);
  -ms-transform:translateX(300px);
  -o-transform:translateX(300px);
  transform:translateX(300px);
  -webkit-transition:all .25s;
  -moz-transition:all .25s;
  -o-transition:all .25s;
  transition:all .25s;
}
h4 {
  display:inline-block;
  width:220px;
  background:#a8cdd9;
  color:#cb3a4f;
  font-family: 'Clicker Script', cursive;
  font-size:25px;
  padding-top: 2px;
  line-height: 23px;
  letter-spacing: -0px;
  opacity: 0.7;
  text-align: center;
  text-transform: lowercase;}
  
figcaption nav ul {display:inline-block;padding:3px 15px;background:white;}
figcaption nav ul li {display:inline-block;margin-left:5px;}
figcaption nav ul li a {position:relative;display:block;width:30px;height:30px;text-decoration:none;color:white; }
figcaption p {display:inline-block;padding:5px; margin-top: -30px; margin-right: 30px; background:white;font-family: 'Titillium Web', sans-serif;color:#333; position: relative; z-index: 1; font-size: 11px; line-height: 10px; max-height: 95px; max-width:190px; overflow: auto; text-align: justify; opacity: 0.8;}
input[type="radio"]:checked + label {width:20px;background:#1d8bb1;}
input[type="radio"]:checked + label:before {font-size:15px;top:15px;left:0px;}
input[type="radio"]:checked ~ figure img {
  -webkit-transform:translatex(0px);
  -moz-transform:translatex(0px);
  -ms-transform:translatex(0px);
  -o-transform:translatex(0px);
  transform:translatex(0px);
}
input[type="radio"]:checked ~ figure figcaption {
  -webkit-transform:translateX(0px);
  -moz-transform:translateX(0px);
  -ms-transform:translateX(0px);
  -o-transform:translateX(0px);
  transform:translateX(0px);
  z-index:8;
}
h2 {
  margin-top:150px;
  text-align:center;
  font-family: 'Titillium Web', sans-serif;
  font-weight:300;
  font-size:1.5rem;
}
h2 a {
  position:relative;
  color:tomato;
  text-decoration:none;
}
h2 a:after {
  content:'';
  position:absolute;
  bottom:-2px;
  left:0;
  width:0;
  height:1px;
  background:#a8cdd9;
  -webkit-transition:width .1s;
  -moz-transition:width .1s;
  -o-transition:width .1s;
  transition:width .1s;
}
h2 a:hover:after {
  width:100%;
}



  
  
  b { font-size: 11px; text-transform: uppercase; color:#cb3a4f;}