@-webkit-keyframes helpthrob {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}
@-moz-keyframes helpthrob {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}
@-o-keyframes helpthrob {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}
@keyframes helpthrob {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}
body{
  margin:0;
  padding:0;
  width:100%;
  height:100%;
  overflow:hidden;
  background:#333;
  font-family:AppleSDGothicNeo-Light,GillSans-Light,Helvetica,Arial,sans-serif;
  font-size:12px;
}
.photocontainer{
  position:absolute;
  top:5vh;right:5vw;bottom:5vh;left:30vw;
  overflow:visible;
  visibility:hidden;
  opacity:0;
  -webkit-transform: translateZ(0px);
  -webkit-transition: opacity 0.5s;
  -moz-transition: opacity 0.5s;
  -o-transition: opacity 0.5s;
  transition: opacity 0.5s;
}
.photocontainer.visible{
  visibility:visible;
}
.photocontainer.opaque{
  opacity:1;
}
.oldphoto{
  /*background:rgba(0,0,0,.25);*/
  width:100%;
  height:100%;
  position:absolute;
  top:0px;
  left:0px;
  overflow:hidden;
}
.slider{
  /*background:rgba(0,0,0,.1);*/
  width:30%;
  height:100%;
  top:0px;
  left:0px;
  position:absolute;
  overflow:hidden;
}
#sliderInstructions{
  position:absolute;
  bottom:20px;
  left:0px;
  width:100%;
  font-size:120%;
  text-align:center;
  color:rgba(255,255,255,.75);
  -webkit-animation: helpthrob 2s infinite; /* Safari 4+ */
  -moz-animation:    helpthrob 2s infinite; /* Fx 5+ */
  -o-animation:      helpthrob 2s infinite; /* Opera 12+ */
  animation:         helpthrob 2s infinite; /* IE 10+ */
}
.oldphoto, .slider, .newphoto{
  -webkit-background-size:contain;
  background-size:contain;
  background-position:left center;
  background-repeat:no-repeat;
}
.newphoto{
  -webkit-transform: translateZ(0px);
  position:absolute;
  top:0px;
  left:0px;
  width:100%;
  height:100%;	    
}

/*thumbs*/
.thumbnails{
  position:absolute;
  top:0;
  left:0;
  height:100%;
  width:100%;
  min-width:280px;
  min-height:240px;
}
.thumbnails .box{
  width:50%;
  height:50%;
  float:left;
  text-align:center;
  min-width:140px;
  min-height:120px;
  position:relative;
}
.thumbnail{
  width:130px;
  height:99px;
  background:rgba(0,0,0,.8);
  position:relative;
  display:inline-block;
  position:absolute;
  top:50%;
  left:50%;
  margin-top:-50px;
  margin-left:-65px;
}	  
.thumbnail .oldthumb{
  position:absolute;
  top:0;right:0;
  width:100%;
  height:100%;
}
.thumbnail .newthumb{
  position:absolute;
  top:0;right:0;
  width:50%;
  height:100%;
  overflow:hidden;
}
.thumbnail .oldthumb img{
  height:100%;
  width:auto;
}
.thumbnail .newthumb img{
  height:100%;
  width:auto;
  position:absolute;
  right:0;top:0;
}
.thumbnail .title, .thumbnail .caption{
  display:none;
}
#instructionsHome{
  position:absolute;
  top:50%;
  left:0;
  height:30px;
  width:100%;
  margin-top:-15px;
  color:rgba(255,255,255,.75);
  pointer-events:none;
  text-transform:uppercase;
  text-align:center;
  letter-spacing:2px;
  -webkit-animation: helpthrob 2s infinite; /* Safari 4+ */
  -moz-animation:    helpthrob 2s infinite; /* Fx 5+ */
  -o-animation:      helpthrob 2s infinite; /* Opera 12+ */
  animation:         helpthrob 2s infinite; /* IE 10+ */
}
/*overlay*/
#overlay{
  position:absolute;
  width:100%;
  top:0;
  left:0;
  height:100%;
  background-color:rgba(0,0,0,.8);
  display:none;
  opacity:0;
  -webkit-transform: translateZ(0px);
  -webkit-transition: opacity 0.5s;
  -moz-transition: opacity 0.5s;
  -o-transition: opacity 0.5s;
  transition: opacity 0.5s;
}
#overlay.visible{
  display:block;
}
#overlay.opaque{
  opacity:1;
}

/*sidebar*/
#sidebar{
  display:block;
  position:absolute;
  top:0;
  left:-25vw;
  width:25vw;
  height:100%;
  background-color:rgba(255,255,255,.9);
  -webkit-transform: translateZ(0px);
  -webkit-transition: left 0.5s;
  -moz-transition: left 0.5s;
  -o-transition: left 0.5s;
  transition: left 0.5s;
}
#sidebar.visible{
  left:0;
}
#sidebar .closebutton{
  height:20px;
  line-height:20px;
  padding:10px;
  text-align:right;
  background-color:white;
  padding-right:40px;
  text-transform:uppercase;
  letter-spacing:2px;
  -webkit-animation: helpthrob 2s infinite; /* Safari 4+ */
  -moz-animation:    helpthrob 2s infinite; /* Fx 5+ */
  -o-animation:      helpthrob 2s infinite; /* Opera 12+ */
  animation:         helpthrob 2s infinite; /* IE 10+ */
}
.closeicon{
  font-size:24px;
  color:#999;
  position:absolute;
  top:10px;
  right:10px;

}
#phototitleOld, #PhototitleNew{
  font-size:120%;
  color:white;
  line-height:120%;
  position:absolute;
  bottom:0;left:0;
  box-sizing: border-box;
  padding:10px;
  background:rgba(0,0,0,.5);
  padding:10px;
}
#photoThumbOld, #photoThumbNew{
  height:165px;
  margin:10px 20px 0px 20px;
  background-repeat:no-repeat;
  background-position:center center;
  -webkit-background-size:contain;
  background-size:contain;
  position:relative;
  background-color:rgba(0,0,0,.5);
}
#photocaption{
  font-size:120%;
  line-height:130%;
  margin:10px 20px;
  color:#333;
}
/*cursors!!!*/
.closebutton, .thumbnail, .slider{
  cursor:pointer;
}

/* Each 140w, 120h = .5 zoom*/
@media only screen and (min-width : 280px) and (min-height : 240px) { .thumbnail{zoom:1;} }
@media only screen and (min-width : 420px) and (min-height : 360px) { .thumbnail{zoom:1.5;} }
@media only screen and (min-width : 560px) and (min-height : 480px) { .thumbnail{zoom:2;} }
@media only screen and (min-width : 700px) and (min-height : 600px) { .thumbnail{zoom:2.5;} }
@media only screen and (min-width : 840px) and (min-height : 720px) { .thumbnail{zoom:3;} }
@media only screen and (min-width : 980px) and (min-height : 840px) { .thumbnail{zoom:3.5;} }
@media only screen and (min-width : 1020px) and (min-height : 960px) { .thumbnail{zoom:4;} }
@media only screen and (min-width : 1160px) and (min-height : 1080px) { .thumbnail{zoom:4.5;} }
@media only screen and (min-width : 1300px) and (min-height : 1200px) { .thumbnail{zoom:5;} }
@media only screen and (min-width : 1440px) and (min-height : 1320px) { .thumbnail{zoom:5.5;} }