sliders

2024-12-26 20:41:23 +01:00 · 2017-06-13 00:44:19 +02:00 · 2017-06-13 00:44:19 +02:00 · 9208bd921a
commit 9208bd921a
parent 1cffc33eed
62 changed files with 6895 additions and 0 deletions
--- a/docs/graficos/data/baleares.png
+++ b/docs/graficos/data/baleares.png
--- a/docs/graficos/data/capa-0.png
+++ b/docs/graficos/data/capa-0.png
--- a/docs/graficos/data/capa-1.png
+++ b/docs/graficos/data/capa-1.png
--- a/docs/graficos/data/capa-10.png
+++ b/docs/graficos/data/capa-10.png
--- a/docs/graficos/data/capa-2.png
+++ b/docs/graficos/data/capa-2.png
--- a/docs/graficos/data/capa-3.png
+++ b/docs/graficos/data/capa-3.png
--- a/docs/graficos/data/capa-4.png
+++ b/docs/graficos/data/capa-4.png
--- a/docs/graficos/data/capa-5.png
+++ b/docs/graficos/data/capa-5.png
--- a/docs/graficos/data/capa-6.png
+++ b/docs/graficos/data/capa-6.png
--- a/docs/graficos/data/capa-7.png
+++ b/docs/graficos/data/capa-7.png
--- a/docs/graficos/data/capa-8.png
+++ b/docs/graficos/data/capa-8.png
--- a/docs/graficos/data/capa-9.png
+++ b/docs/graficos/data/capa-9.png
--- a/docs/graficos/data/capa-PGC-0.png
+++ b/docs/graficos/data/capa-PGC-0.png
--- a/docs/graficos/data/capa-PGC-1.png
+++ b/docs/graficos/data/capa-PGC-1.png
--- a/docs/graficos/data/capa-PGC-10.png
+++ b/docs/graficos/data/capa-PGC-10.png
--- a/docs/graficos/data/capa-PGC-2.png
+++ b/docs/graficos/data/capa-PGC-2.png
--- a/docs/graficos/data/capa-PGC-3.png
+++ b/docs/graficos/data/capa-PGC-3.png
--- a/docs/graficos/data/capa-PGC-4.png
+++ b/docs/graficos/data/capa-PGC-4.png
--- a/docs/graficos/data/capa-PGC-5.png
+++ b/docs/graficos/data/capa-PGC-5.png
--- a/docs/graficos/data/capa-PGC-6.png
+++ b/docs/graficos/data/capa-PGC-6.png
--- a/docs/graficos/data/capa-PGC-7.png
+++ b/docs/graficos/data/capa-PGC-7.png
--- a/docs/graficos/data/capa-PGC-8.png
+++ b/docs/graficos/data/capa-PGC-8.png
--- a/docs/graficos/data/capa-PGC-9.png
+++ b/docs/graficos/data/capa-PGC-9.png
--- a/docs/graficos/data/cmap-cuencas.png
+++ b/docs/graficos/data/cmap-cuencas.png
--- a/docs/graficos/data/cuencas.png
+++ b/docs/graficos/data/cuencas.png
--- a/docs/graficos/data/duero.png
+++ b/docs/graficos/data/duero.png
--- a/docs/graficos/data/ebro.png
+++ b/docs/graficos/data/ebro.png
--- a/docs/graficos/data/guadalquivir.png
+++ b/docs/graficos/data/guadalquivir.png
--- a/docs/graficos/data/guadiana.png
+++ b/docs/graficos/data/guadiana.png
--- a/docs/graficos/data/harvester_1046427_cc.png
+++ b/docs/graficos/data/harvester_1046427_cc.png
--- a/docs/graficos/data/harvester_1046427_cc_p.png
+++ b/docs/graficos/data/harvester_1046427_cc_p.png
--- a/docs/graficos/data/jucar.png
+++ b/docs/graficos/data/jucar.png
--- a/docs/graficos/data/norte.png
+++ b/docs/graficos/data/norte.png
--- a/docs/graficos/data/pirineo.png
+++ b/docs/graficos/data/pirineo.png
--- a/docs/graficos/data/segura.png
+++ b/docs/graficos/data/segura.png
--- a/docs/graficos/data/sur.png
+++ b/docs/graficos/data/sur.png
--- a/docs/graficos/data/tajo.png
+++ b/docs/graficos/data/tajo.png
--- a/docs/graficos/data/tractor_792349_cc.png
+++ b/docs/graficos/data/tractor_792349_cc.png
--- a/docs/graficos/data/tractor_792349_cc_p.png
+++ b/docs/graficos/data/tractor_792349_cc_p.png
--- a/docs/graficos/expropiacion.html
+++ b/docs/graficos/expropiacion.html
@ -0,0 +1,13 @@
 <!DOCTYPE html>
 <html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/p5.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/addons/p5.dom.min.js"></script>
    <script src="grafica-0.1.0-mod.js"></script>
    <script src="expropiacion.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
  <style> body {padding: 0; margin: 0;} </style>
  </head>
  <body>
  </body>
 </html>
--- a/docs/graficos/expropiacion.js
+++ b/docs/graficos/expropiacion.js
@ -0,0 +1,64 @@
 var exceso, reserva, exceptuadas;
 var nombres;
 var plot;
 function setup() {
  createCanvas(800,519);
  nombres = new Array("Norte","Duero","Ebro","Pirineo","Jucar","Tajo","Guadiana","Guadalquivir","Sur", "Segura", "Islas");
  exceso = new Array(15267,35628,136465,3466,19615,64179,81809,148193,13326,35075,3235);
  reserva = new Array(12251,62730,131128,24433,54545,68854,82052,140453,20980,131042,5985);
  exceptuadas = new Array(7094,31194,128457,3289,15734,39460,21419,68830,23782,68386,15675);
  var pointSizes = [];
  var points = [];
  for (var n = 0; n < nombres.length; n++) {
    points[n] = new GPoint(exceso[n], exceptuadas[n], nombres[n]);
    pointSizes[n] = map(reserva[n],5000,141000,5,100);
  }
  // Creamos el plot
  plot = new GPlot(this);
  plot.setDim(width-230, height-100);
  plot.setTitleText("Tierras en exceso, reserva y exceptuadas por cuenca hidrografica segun PGC");
  plot.getXAxis().setAxisLabelText("Tierras en exceso (Has)");
  plot.getYAxis().setAxisLabelText("Tierras exceptuadas (Has)");
  plot.setPoints(points);
  plot.setPointSizes(pointSizes);
  plot.setPointColor(color(255,0,0,50));
  plot.setLineColor(color(0));
  plot.setLabelBgColor(color(255,0));
 }
 function draw() {
  background(255);
  // Draw the plot
  plot.beginDraw();
  plot.drawBox();
  plot.drawXAxis();
  plot.drawYAxis();
  plot.drawTitle();
  plot.drawGridLines(GPlot.BOTH);
  plot.drawPoints();
  plot.drawLabels();
  plot.drawAllLabels();
  plot.endDraw();
    textFont("Helvetica");
    textSize(11);
    fill(0);
    textAlign(LEFT);
    text("Tierras en reserva (Has)", 660, 330);
    textAlign(CENTER);
    stroke(100);
    noFill();
    ellipse(720, 390, 100, 100);
    fill(0);
    text("140000", 720, 390);
    noFill();
    ellipse(720, 455, 10, 10);
    fill(0);
    text("14000", 720, 475);
 }
--- a/docs/graficos/grafica-0.1.0-mod.js
+++ b/docs/graficos/grafica-0.1.0-mod.js
--- a/docs/graficos/grafica-0.1.0-mod.min.js
+++ b/docs/graficos/grafica-0.1.0-mod.min.js
--- a/docs/graficos/grafica-0.1.0.min.js
+++ b/docs/graficos/grafica-0.1.0.min.js
--- a/docs/graficos/hidraulicas.html
+++ b/docs/graficos/hidraulicas.html
@ -0,0 +1,12 @@
 <!DOCTYPE html>
 <html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/p5.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/addons/p5.dom.min.js"></script>
    <script src="hidraulicas.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
  <style> body {padding: 0; margin: 0;} </style>
  </head>
  <body>
  </body>
 </html>
--- a/docs/graficos/hidraulicas.js
+++ b/docs/graficos/hidraulicas.js
@ -0,0 +1,112 @@
 var cuencas, cmap;
 var nombres,colores,x,y;
 var canales, acequias;
 var totCanales = 0,totAcequias = 0;
 var cuenta = 0, last;
 function setup() {
  createCanvas(800,519);
  cuencas = loadImage("data/cuencas.png");
  cmap = loadImage("data/cmap-cuencas.png");
  nombres = new Array("Norte","Duero","Ebro","Pirineo","Jucar","Tajo","Guadiana","Guadalquivir","Sur", "Segura", "Baleares y Canarias");
  colores = new Array("#f00","#0f0","#00f","#ff0","#0ff","#a00","#0a0","#00a","#aa0","#0aa", "#aaa");
  canales = new Array(157.3,1422.1,810, 132.5,525.7,764.9,360.5,1111.7,266.7,85.7,-1);
  acequias= new Array(448.1,2215.3,1872.7,258.7,2378,1356.7,1210.5,1215.7,191.7,2004.1,-1);
  x = new Array(158,243, 449, 597, 432, 308, 236, 263, 362,412, 601);
  y = new Array(77,158,140, 139,278, 253, 327, 393, 441,368, 322);
  for (var n = 0; n < nombres.length; n++) {
    if (canales[n] != -1) totCanales = totCanales + canales[n];
    if (acequias[n] != -1) totAcequias = totAcequias + acequias[n];
  }
 }
 function draw() {
  background(200,225,225);
  image(cuencas,0,0);
  var mc = cmap.get(mouseX,mouseY);
  var over = [];
  for (var n = 0; n < colores.length; n++) {
    over[n] = compara(mc,color(colores[n]));
  }
  for (var n = 0; n < colores.length; n++) {
    if (over[n]) {
      fill(0);
      textStyle(NORMAL);
      if (canales[n] != -1) {
        text("Canales: " + canales[n] + " Km", x[n], y[n]+5);
        text("Acequias: " + acequias[n] + " Km", x[n], y[n]+20);
      }
      else {
        textSize(10);
        text("(Sin datos)", x[n], y[n]+5);
      }
    }
  }
  // nombres
  textStyle(BOLD);
  textSize(14);
  for (var n = 0; n < nombres.length; n++) {
    var nbr = String.toUpperCase(nombres[n]);
    fill(255);
    noStroke();
    fill(0);
    text(nbr, x[n], y[n]-10);
  }
  cuenta = cuenta + 0.5;
  // Canales
  for (var n = 0; n < nombres.length; n++) {
    if (!over[n]) {
      if (canales[n] == -1) {
        textSize(10);
        fill(0);
        text("(Sin datos)", x[n], y[n]+5);
      }
      var pct = map(canales[n]/totCanales,0,1,0,50);
      for (var i = 0; i < min(cuenta,pct); i++) {
        var xi = x[n] + 10*i;
        stroke(0);
        line(xi+3, y[n]-4,xi+10+3,y[n]-4);
        noStroke();
        fill(0);
        quad(xi+10+4,y[n]-4,xi+10+4,y[n]-4+7, xi+10,y[n]+7, xi+10,y[n]);
        fill(0,255,255);
        quad(xi+3, y[n]-3,xi+10+3,y[n]-3,xi+10,y[n],xi, y[n]);
        noStroke();
        fill(0);
        rect(xi, y[n],10,7)
        fill(255);
        arc(xi+5,y[n]+7,7,8,PI,TWO_PI);
      }
    }
  }
  // Acequias
  for (var n = 0; n < nombres.length; n++) {
    if (!over[n]) {
      pct = map(acequias[n]/totAcequias,0,1,0,50);
      for (var i = 0; i < min(cuenta,pct); i++) {
        var xi = x[n] + 10*i;
        stroke(0);
        line(xi, y[n]+15,xi+10,y[n]+15);
        line(xi+3, y[n]+15-3,xi+10+3,y[n]+15-3);
        noStroke();
        fill(0);
        quad(xi+10+4,y[n]+15-3, xi+10+4,y[n]+15+4-3-1,  xi+10, y[n]+15+4, xi+10, y[n]+15);
        fill(0,255,255);
        quad(xi+3, y[n]+15-2,xi+10+3,y[n]+15-2, xi+10,y[n]+15,xi, y[n]+15);
        fill(0);
        rect(xi, y[n]+15, 10, 4);
      }
    }
  }
 }
 function compara(c1, c2) {
  return red(c1) == red(c2) && green(c1) == green(c2) && blue(c1) == blue(c2);
 }
--- a/docs/graficos/mecanizacion.html
+++ b/docs/graficos/mecanizacion.html
@ -0,0 +1,12 @@
 <!DOCTYPE html>
 <html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/p5.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/addons/p5.dom.min.js"></script>
    <script src="mecanizacion.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
  <style> body {padding: 0; margin: 0;} </style>
  </head>
  <body>
  </body>
 </html>
--- a/docs/graficos/mecanizacion.js
+++ b/docs/graficos/mecanizacion.js
@ -0,0 +1,101 @@
 var cuencas, cmap;
 var nombres,colores,x,y;
 var tractores, cosechadoras;
 var totTractores = 0,totCosechadoras = 0;
 var cuenta = 0, last;
 var imgTractor,imgCosechadora;
 function setup() {
  createCanvas(800,519);
  cuencas = loadImage("data/cuencas.png");
  cmap = loadImage("data/cmap-cuencas.png");
  imgTractor = loadImage("data/tractor_792349_cc_p.png");
  imgCosechadora = loadImage("data/harvester_1046427_cc_p.png");
  nombres = new Array("Norte","Duero","Ebro","Pirineo","Jucar","Tajo","Guadiana","Guadalquivir","Sur", "Segura", "Baleares y Canarias");
  colores = new Array("#f00","#0f0","#00f","#ff0","#0ff","#a00","#0a0","#00a","#aa0","#0aa", "#aaa");
  tractores = new Array(31.5,32.8,81.4,-1,128.5,37.6,59.1,30.6,11.2,34.6,-1);
  cosechadoras= new Array(0,1.2,2.8,-1,5,0.6,0.9,2.6,0.2,0.5,-1);
  x = new Array(128,233, 409, 597, 392, 248, 206, 217, 362,402, 651);
  y = new Array(77,128,110, 139,248, 243, 307, 390, 431,368, 322);
  for (var n = 0; n < nombres.length; n++) {
    if (tractores[n] != -1) totTractores = totTractores + tractores[n];
    if (cosechadoras[n] != -1) totCosechadoras = totCosechadoras + cosechadoras[n];
  }
 }
 function draw() {
  background(200,225,225);
  image(cuencas,0,0);
  var mc = cmap.get(mouseX,mouseY);
  var over = [];
  for (var n = 0; n < colores.length; n++) {
    over[n] = compara(mc,color(colores[n]));
  }
  for (var n = 0; n < colores.length; n++) {
    if (over[n]) {
      fill(0);
      textStyle(NORMAL);
      if (tractores[n] != -1) {
        text("Tractores: " + tractores[n], x[n], y[n]+10);
        text("Cosechadoras: " + cosechadoras[n], x[n], y[n]+25);
      }
      else {
        textSize(10);
        text("(Sin datos)", x[n], y[n]+5);
      }
    }
  }
  cuenta = cuenta + 0.5;
  // Cosechadoras
  var mpct = [];
  for (var n = 0; n < nombres.length; n++) {
    if (!over[n]) {
      pct = map(cosechadoras[n]/totCosechadoras,0,1,0,40);
      mpct[n] = floor(pct)+1;
      for (var i = 0; i < min(cuenta,pct); i++) {
        var xi = x[n] + 20*(i%4);
        var yi = y[n] + floor(i/4)*20;
        image(imgCosechadora,xi,yi,20,20);
      }
    }
  }
  // Tractores
  for (var n = 0; n < nombres.length; n++) {
    if (!over[n]) {
      if (tractores[n] == -1) {
        textSize(10);
        textStyle(NORMAL);
        fill(0);
        text("(Sin datos)", x[n], y[n]+5);
      }
      var pct = map(tractores[n]/totTractores,0,1,0,40);
      for (var i = 0; i < min(cuenta,pct); i++) {
        var xi = x[n] + 20*(i%4) + min(4,mpct[n])*20;
        var yi = y[n] + floor(i/4)*20;
        image(imgTractor,xi,yi,18,18);
      }
    }
  }
  // nombres
  textStyle(BOLD);
  textSize(14);
  for (var n = 0; n < nombres.length; n++) {
    var nbr = nombres[n];
    fill(0);
    text(nbr, x[n], y[n]-7);
  }
 }
 function compara(c1, c2) {
  return red(c1) == red(c2) && green(c1) == green(c2) && blue(c1) == blue(c2);
 }
--- a/docs/graficos/parcelas-old.js
+++ b/docs/graficos/parcelas-old.js
@ -0,0 +1,94 @@
 var cuencas, cmap;
 var ids,nombres,colores,x,y;
 var capas,imgs;
 var dim;
 function preload() {
  ids = new Array("norte","duero","ebro","pirineo","jucar","tajo","guadiana","guadalquivir","sur","segura","baleares");
  imgs = new Array();
  for (var n = 0; n < ids.length; n++) {
    imgs[n] = loadImage("data/"+ids[n]+".png");
  }
  cuencas = loadImage("data/cuencas.png");
  cmap = loadImage("data/cmap-cuencas.png");
 }
 function setup() {
  createCanvas(800,519);
  nombres = new Array("Norte","Duero","Ebro","Pirineo","Jucar","Tajo","Guadiana","Guadalquivir","Sur", "Segura", "Baleares y Canarias");
  colores = new Array("#f00","#0f0","#00f","#ff0","#0ff","#a00","#0a0","#00a","#aa0","#0aa", "#aaa");
  x = new Array(158,243, 449, 597, 432, 308, 236, 263, 362,432, 651);
  y = new Array(77,158,140, 139,278, 253, 327, 393, 441,368, 322);
  dim = new Array(11,8.4,11,-1,6,7.5,8.6,5.3,5.9,6.6,-1);
  capas = new Array();
  for (var n = 0; n < ids.length; n++) {
    capas[n] = createImage(width,height);
    capas[n].loadPixels();
    if (dim[n] != -1) {
      var paso = map(dim[n],0, 15, 2, 20);
      colorMode(HSB,360,255,255);
      var h = random(70,130);
      var numi = floor(width/paso)+1;
      var numj = floor(height/paso)+1;
      var c = [];
      for (var i = 0; i < numi; i++) {
        c[i] = [];
        for (var j = 0; j < numj; j++) {
          var s = random(100,200);
          c[i][j] = color(h, s, random(150,200) );
        }
      }
      colorMode(RGB,255,255,255);
      for (var i = 0; i < width; i++) {
        var pasoi = floor(i/paso);
        for (var j = 0; j < height; j++) {
          var pasoj = floor(j/paso);
          capas[n].set(i,j,c[pasoi][pasoj]);
        }
      }
      capas[n].updatePixels();
      capas[n].mask(imgs[n]);
    }
  }
 }
 function draw() {
  background(200,225,225);
  // capas
  for (var n = 0; n < ids.length; n++) {
    tint(200,180,130);
    image(imgs[n],0,0);
    tint(255,min(frameCount*40,255));
    if (dim[n] != -1) image(capas[n],0,0);
    else text("(Sin datos)", x[n], y[n]+5);
  }
  // Mas datos
  var mc = cmap.get(mouseX,mouseY);
  for (var n = 0; n < colores.length; n++) {
    if (compara(mc,color(colores[n]))) {
      noTint();
      image(imgs[n],0,0);
    }
  }
  // nombres
  textSize(14);
  for (var n = 0; n < nombres.length; n++) {
    var nbr = nombres[n];
    fill(255);
    noStroke();
    fill(0);
    text(nbr, x[n], y[n]-10);
  }
 }
 function compara(c1, c2) {
  return red(c1) == red(c2) && green(c1) == green(c2) && blue(c1) == blue(c2);
 }
--- a/docs/graficos/parcelas.html
+++ b/docs/graficos/parcelas.html
@ -0,0 +1,12 @@
 <!DOCTYPE html>
 <html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/p5.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/addons/p5.dom.min.js"></script>
    <script src="parcelas.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
  <style> body {padding: 0; margin: 0;} </style>
  </head>
  <body>
  </body>
 </html>
--- a/docs/graficos/parcelas.js
+++ b/docs/graficos/parcelas.js
@ -0,0 +1,78 @@
 var cuencas, cmap;
 var ids,nombres,colores,x,y;
 var capas,capaspg,imgs;
 var dim, dimr;
 function preload() {
  ids = new Array("norte","duero","ebro","pirineo","jucar","tajo","guadiana","guadalquivir","sur","segura","baleares");
  dimr = new Array(11,8.4,11,-1,6,7.5,8.6,5.3,5.9,6.6,-1);
  dim = new Array(12,10,14.2,8,7.6,8,7.6,10,4.7,10,11);
  imgs = new Array();
  capas = new Array();
  capaspg = new Array();
  for (var n = 0; n < ids.length; n++) {
    imgs[n] = loadImage("data/"+ids[n]+".png");
    capaspg[n] = loadImage("data/capa-PGC-"+n+".png");
    if (dim[n] != -1) {
      capas[n] = loadImage("data/capa-"+n+".png");
    }
  }
  cuencas = loadImage("data/cuencas.png");
  cmap = loadImage("data/cmap-cuencas.png");
 }
 function setup() {
  createCanvas(800,519);
  nombres = new Array("Norte","Duero","Ebro","Pirineo","Jucar","Tajo","Guadiana","Guadalquivir","Sur", "Segura", "Baleares y Canarias");
  colores = new Array("#f00","#0f0","#00f","#ff0","#0ff","#a00","#0a0","#00a","#aa0","#0aa", "#aaa");
  x = new Array(158,243, 429, 597, 432, 268, 226, 253, 362,432, 611);
  y = new Array(77,158,140, 139,278, 263, 327, 393, 441, 368, 322);
 }
 function draw() {
  background(200,225,225);
  // capas
  for (var n = 0; n < ids.length; n++) {
    if (dimr[n] != -1) image(capas[n],0,0);
    else {
      image(imgs[n],0,0);
    }
  }
  // Parcelas segun PGC
  var mc = cmap.get(mouseX,mouseY);
  for (var n = 0; n < colores.length; n++) {
    if (compara(mc,color(colores[n]))) {
      tint(255,100);
      image(capaspg[n],0,0);
      noTint();
    }
  }
  // nombres
  textSize(14);
  for (var n = 0; n < nombres.length; n++) {
    var nbr = String.toUpperCase(nombres[n]);
    if (dimr[n] != -1 || !compara(mc,color(colores[n]))) fill(0);
    else fill(0);
    textStyle(BOLD);
    text(nbr, x[n], y[n]-10);
    textStyle(NORMAL);
    if (compara(mc,color(colores[n]))) {
        text("Plan inicial: " + dim[n]+"  Has", x[n], y[n]+5);
    }
    else {
      if (dimr[n] != -1) text("Parcela media: " + dimr[n]+" Has", x[n], y[n]+5);
      else text("(Sin datos)", x[n], y[n]+5);
    }
  }
 }
 function compara(c1, c2) {
  return red(c1) == red(c2) && green(c1) == green(c2) && blue(c1) == blue(c2);
 }
--- a/docs/modelos.md
+++ b/docs/modelos.md
@ -2,3 +2,6 @@
 layout: page
 title: Los tres principales modelos de colonización
 ---
 {% include sliders/bardenas.html %}
 {% include sliders/sotogordo.html %}
--- a/docs/sliders/bardenas-caudillo-1956.jpeg
+++ b/docs/sliders/bardenas-caudillo-1956.jpeg
--- a/docs/sliders/bardenas-caudillo-2014.jpeg
+++ b/docs/sliders/bardenas-caudillo-2014.jpeg
--- a/docs/sliders/bardenas.html
+++ b/docs/sliders/bardenas.html
@ -0,0 +1,19 @@
 <html>
 <head>
 <script src="jquery-3.2.1.min.js"></script>
 <script src="jquery.event.move.js"></script>
 <script src="jquery.twentytwenty.js"></script>
 <link rel="stylesheet" href="twentytwenty.css" type="text/css" media="screen" />
 </head>
 <body>
 <div id="container1" class="twentytwenty-container">
  <img src="bardenas-caudillo-1956.jpeg">
  <img src="bardenas-caudillo-2014.jpeg">
 </div>
 <script>
 $(function(){
  $("#container1").twentytwenty();
 });
 </script>
 </body>
 </html>
--- a/docs/sliders/jquery-3.2.1.min.js
+++ b/docs/sliders/jquery-3.2.1.min.js
--- a/docs/sliders/jquery.event.move.js
+++ b/docs/sliders/jquery.event.move.js
@ -0,0 +1,584 @@
 // DOM.event.move
 //
 // 2.0.0
 //
 // Stephen Band
 //
 // Triggers 'movestart', 'move' and 'moveend' events after
 // mousemoves following a mousedown cross a distance threshold,
 // similar to the native 'dragstart', 'drag' and 'dragend' events.
 // Move events are throttled to animation frames. Move event objects
 // have the properties:
 //
 // pageX:
 // pageY:     Page coordinates of pointer.
 // startX:
 // startY:    Page coordinates of pointer at movestart.
 // distX:
 // distY:     Distance the pointer has moved since movestart.
 // deltaX:
 // deltaY:    Distance the finger has moved since last event.
 // velocityX:
 // velocityY: Average velocity over last few events.
 (function(fn) {
 	if (typeof define === 'function' && define.amd) {
        define([], fn);
    } else if ((typeof module !== "undefined" && module !== null) && module.exports) {
        module.exports = fn;
 	} else {
 		fn();
 	}
 })(function(){
 	var assign = Object.assign || window.jQuery && jQuery.extend;
 	// Number of pixels a pressed pointer travels before movestart
 	// event is fired.
 	var threshold = 8;
 	// Shim for requestAnimationFrame, falling back to timer. See:
 	// see http://paulirish.com/2011/requestanimationframe-for-smart-animating/
 	var requestFrame = (function(){
 		return (
 			window.requestAnimationFrame ||
 			window.webkitRequestAnimationFrame ||
 			window.mozRequestAnimationFrame ||
 			window.oRequestAnimationFrame ||
 			window.msRequestAnimationFrame ||
 			function(fn, element){
 				return window.setTimeout(function(){
 					fn();
 				}, 25);
 			}
 		);
 	})();
 	var ignoreTags = {
 			textarea: true,
 			input: true,
 			select: true,
 			button: true
 		};
 	var mouseevents = {
 		move:   'mousemove',
 		cancel: 'mouseup dragstart',
 		end:    'mouseup'
 	};
 	var touchevents = {
 		move:   'touchmove',
 		cancel: 'touchend',
 		end:    'touchend'
 	};
 	var rspaces = /\s+/;
 	// DOM Events
 	var eventOptions = { bubbles: true, cancelable: true };
 	var eventsSymbol = Symbol('events');
 	function createEvent(type) {
 		return new CustomEvent(type, eventOptions);
 	}
 	function getEvents(node) {
 		return node[eventsSymbol] || (node[eventsSymbol] = {});
 	}
 	function on(node, types, fn, data, selector) {
 		types = types.split(rspaces);
 		var events = getEvents(node);
 		var i = types.length;
 		var handlers, type;
 		function handler(e) { fn(e, data); }
 		while (i--) {
 			type = types[i];
 			handlers = events[type] || (events[type] = []);
 			handlers.push([fn, handler]);
 			node.addEventListener(type, handler);
 		}
 	}
 	function off(node, types, fn, selector) {
 		types = types.split(rspaces);
 		var events = getEvents(node);
 		var i = types.length;
 		var type, handlers, k;
 		if (!events) { return; }
 		while (i--) {
 			type = types[i];
 			handlers = events[type];
 			if (!handlers) { continue; }
 			k = handlers.length;
 			while (k--) {
 				if (handlers[k][0] === fn) {
 					node.removeEventListener(type, handlers[k][1]);
 					handlers.splice(k, 1);
 				}
 			}
 		}
 	}
 	function trigger(node, type, properties) {
 		// Don't cache events. It prevents you from triggering an event of a
 		// given type from inside the handler of another event of that type.
 		var event = createEvent(type);
 		if (properties) { assign(event, properties); }
 		node.dispatchEvent(event);
 	}
 	// Constructors
 	function Timer(fn){
 		var callback = fn,
 		    active = false,
 		    running = false;
 		function trigger(time) {
 			if (active){
 				callback();
 				requestFrame(trigger);
 				running = true;
 				active = false;
 			}
 			else {
 				running = false;
 			}
 		}
 		this.kick = function(fn) {
 			active = true;
 			if (!running) { trigger(); }
 		};
 		this.end = function(fn) {
 			var cb = callback;
 			if (!fn) { return; }
 			// If the timer is not running, simply call the end callback.
 			if (!running) {
 				fn();
 			}
 			// If the timer is running, and has been kicked lately, then
 			// queue up the current callback and the end callback, otherwise
 			// just the end callback.
 			else {
 				callback = active ?
 					function(){ cb(); fn(); } : 
 					fn ;
 				active = true;
 			}
 		};
 	}
 	// Functions
 	function noop() {}
 	function preventDefault(e) {
 		e.preventDefault();
 	}
 	function isIgnoreTag(e) {
 		return !!ignoreTags[e.target.tagName.toLowerCase()];
 	}
 	function isPrimaryButton(e) {
 		// Ignore mousedowns on any button other than the left (or primary)
 		// mouse button, or when a modifier key is pressed.
 		return (e.which === 1 && !e.ctrlKey && !e.altKey);
 	}
 	function identifiedTouch(touchList, id) {
 		var i, l;
 		if (touchList.identifiedTouch) {
 			return touchList.identifiedTouch(id);
 		}
 		// touchList.identifiedTouch() does not exist in
 		// webkit yet… we must do the search ourselves...
 		i = -1;
 		l = touchList.length;
 		while (++i < l) {
 			if (touchList[i].identifier === id) {
 				return touchList[i];
 			}
 		}
 	}
 	function changedTouch(e, data) {
 		var touch = identifiedTouch(e.changedTouches, data.identifier);
 		// This isn't the touch you're looking for.
 		if (!touch) { return; }
 		// Chrome Android (at least) includes touches that have not
 		// changed in e.changedTouches. That's a bit annoying. Check
 		// that this touch has changed.
 		if (touch.pageX === data.pageX && touch.pageY === data.pageY) { return; }
 		return touch;
 	}
 	// Handlers that decide when the first movestart is triggered
 	function mousedown(e){
 		// Ignore non-primary buttons
 		if (!isPrimaryButton(e)) { return; }
 		// Ignore form and interactive elements
 		if (isIgnoreTag(e)) { return; }
 		on(document, mouseevents.move, mousemove, e);
 		on(document, mouseevents.cancel, mouseend, e);
 	}
 	function mousemove(e, data){
 		checkThreshold(e, data, e, removeMouse);
 	}
 	function mouseend(e, data) {
 		removeMouse();
 	}
 	function removeMouse() {
 		off(document, mouseevents.move, mousemove);
 		off(document, mouseevents.cancel, mouseend);
 	}
 	function touchstart(e) {
 		// Don't get in the way of interaction with form elements
 		if (ignoreTags[e.target.tagName.toLowerCase()]) { return; }
 		var touch = e.changedTouches[0];
 		// iOS live updates the touch objects whereas Android gives us copies.
 		// That means we can't trust the touchstart object to stay the same,
 		// so we must copy the data. This object acts as a template for
 		// movestart, move and moveend event objects.
 		var data = {
 			target:     touch.target,
 			pageX:      touch.pageX,
 			pageY:      touch.pageY,
 			identifier: touch.identifier,
 			// The only way to make handlers individually unbindable is by
 			// making them unique.
 			touchmove:  function(e, data) { touchmove(e, data); },
 			touchend:   function(e, data) { touchend(e, data); }
 		};
 		on(document, touchevents.move, data.touchmove, data);
 		on(document, touchevents.cancel, data.touchend, data);
 	}
 	function touchmove(e, data) {
 		var touch = changedTouch(e, data);
 		if (!touch) { return; }
 		checkThreshold(e, data, touch, removeTouch);
 	}
 	function touchend(e, data) {
 		var touch = identifiedTouch(e.changedTouches, data.identifier);
 		if (!touch) { return; }
 		removeTouch(data);
 	}
 	function removeTouch(data) {
 		off(document, touchevents.move, data.touchmove);
 		off(document, touchevents.cancel, data.touchend);
 	}
 	function checkThreshold(e, data, touch, fn) {
 		var distX = touch.pageX - data.pageX;
 		var distY = touch.pageY - data.pageY;
 		// Do nothing if the threshold has not been crossed.
 		if ((distX * distX) + (distY * distY) < (threshold * threshold)) { return; }
 		triggerStart(e, data, touch, distX, distY, fn);
 	}
 	function triggerStart(e, data, touch, distX, distY, fn) {
 		var touches = e.targetTouches;
 		var time = e.timeStamp - data.timeStamp;
 		// Create a movestart object with some special properties that
 		// are passed only to the movestart handlers.
 		var template = {
 			altKey:     e.altKey,
 			ctrlKey:    e.ctrlKey,
 			shiftKey:   e.shiftKey,
 			startX:     data.pageX,
 			startY:     data.pageY,
 			distX:      distX,
 			distY:      distY,
 			deltaX:     distX,
 			deltaY:     distY,
 			pageX:      touch.pageX,
 			pageY:      touch.pageY,
 			velocityX:  distX / time,
 			velocityY:  distY / time,
 			identifier: data.identifier,
 			targetTouches: touches,
 			finger: touches ? touches.length : 1,
 			enableMove: function() {
 				this.moveEnabled = true;
 				this.enableMove = noop;
 				e.preventDefault();
 			}
 		};
 		// Trigger the movestart event.
 		trigger(data.target, 'movestart', template);
 		// Unbind handlers that tracked the touch or mouse up till now.
 		fn(data);
 	}
 	// Handlers that control what happens following a movestart
 	function activeMousemove(e, data) {
 		var timer  = data.timer;
 		data.touch = e;
 		data.timeStamp = e.timeStamp;
 		timer.kick();
 	}
 	function activeMouseend(e, data) {
 		var target = data.target;
 		var event  = data.event;
 		var timer  = data.timer;
 		removeActiveMouse();
 		endEvent(target, event, timer, function() {
 			// Unbind the click suppressor, waiting until after mouseup
 			// has been handled.
 			setTimeout(function(){
 				off(target, 'click', preventDefault);
 			}, 0);
 		});
 	}
 	function removeActiveMouse() {
 		off(document, mouseevents.move, activeMousemove);
 		off(document, mouseevents.end, activeMouseend);
 	}
 	function activeTouchmove(e, data) {
 		var event = data.event;
 		var timer = data.timer;
 		var touch = changedTouch(e, event);
 		if (!touch) { return; }
 		// Stop the interface from gesturing
 		e.preventDefault();
 		event.targetTouches = e.targetTouches;
 		data.touch = touch;
 		data.timeStamp = e.timeStamp;
 		timer.kick();
 	}
 	function activeTouchend(e, data) {
 		var target = data.target;
 		var event  = data.event;
 		var timer  = data.timer;
 		var touch  = identifiedTouch(e.changedTouches, event.identifier);
 		// This isn't the touch you're looking for.
 		if (!touch) { return; }
 		removeActiveTouch(data);
 		endEvent(target, event, timer);
 	}
 	function removeActiveTouch(data) {
 		off(document, touchevents.move, data.activeTouchmove);
 		off(document, touchevents.end, data.activeTouchend);
 	}
 	// Logic for triggering move and moveend events
 	function updateEvent(event, touch, timeStamp) {
 		var time = timeStamp - event.timeStamp;
 		event.distX =  touch.pageX - event.startX;
 		event.distY =  touch.pageY - event.startY;
 		event.deltaX = touch.pageX - event.pageX;
 		event.deltaY = touch.pageY - event.pageY;
 		// Average the velocity of the last few events using a decay
 		// curve to even out spurious jumps in values.
 		event.velocityX = 0.3 * event.velocityX + 0.7 * event.deltaX / time;
 		event.velocityY = 0.3 * event.velocityY + 0.7 * event.deltaY / time;
 		event.pageX =  touch.pageX;
 		event.pageY =  touch.pageY;
 	}
 	function endEvent(target, event, timer, fn) {
 		timer.end(function(){
 			trigger(target, 'moveend', event);
 			return fn && fn();
 		});
 	}
 	// Set up the DOM
 	function movestart(e) {
 		if (e.defaultPrevented) { return; }
 		if (!e.moveEnabled) { return; }
 		var event = {
 			startX:        e.startX,
 			startY:        e.startY,
 			pageX:         e.pageX,
 			pageY:         e.pageY,
 			distX:         e.distX,
 			distY:         e.distY,
 			deltaX:        e.deltaX,
 			deltaY:        e.deltaY,
 			velocityX:     e.velocityX,
 			velocityY:     e.velocityY,
 			identifier:    e.identifier,
 			targetTouches: e.targetTouches,
 			finger:        e.finger
 		};
 		var data = {
 			target:    e.target,
 			event:     event,
 			timer:     new Timer(update),
 			touch:     undefined,
 			timeStamp: e.timeStamp
 		};
 		function update(time) {
 			updateEvent(event, data.touch, data.timeStamp);
 			trigger(data.target, 'move', event);
 		}
 		if (e.identifier === undefined) {
 			// We're dealing with a mouse event.
 			// Stop clicks from propagating during a move
 			on(e.target, 'click', preventDefault);
 			on(document, mouseevents.move, activeMousemove, data);
 			on(document, mouseevents.end, activeMouseend, data);
 		}
 		else {
 			// In order to unbind correct handlers they have to be unique
 			data.activeTouchmove = function(e, data) { activeTouchmove(e, data); };
 			data.activeTouchend = function(e, data) { activeTouchend(e, data); };
 			// We're dealing with a touch.
 			on(document, touchevents.move, data.activeTouchmove, data);
 			on(document, touchevents.end, data.activeTouchend, data);
 		}
 	}
 	on(document, 'mousedown', mousedown);
 	on(document, 'touchstart', touchstart);
 	on(document, 'movestart', movestart);
 	// jQuery special events
 	//
 	// jQuery event objects are copies of DOM event objects. They need
 	// a little help copying the move properties across.
 	if (!window.jQuery) { return; }
 	var properties = ("startX startY pageX pageY distX distY deltaX deltaY velocityX velocityY").split(' ');
 	function enableMove1(e) { e.enableMove(); }
 	function enableMove2(e) { e.enableMove(); }
 	function enableMove3(e) { e.enableMove(); }
 	function add(handleObj) {
 		var handler = handleObj.handler;
 		handleObj.handler = function(e) {
 			// Copy move properties across from originalEvent
 			var i = properties.length;
 			var property;
 			while(i--) {
 				property = properties[i];
 				e[property] = e.originalEvent[property];
 			}
 			handler.apply(this, arguments);
 		};
 	}
 	jQuery.event.special.movestart = {
 		setup: function() {
 			// Movestart must be enabled to allow other move events
 			on(this, 'movestart', enableMove1);
 			// Do listen to DOM events
 			return false;
 		},
 		teardown: function() {
 			off(this, 'movestart', enableMove1);
 			return false;
 		},
 		add: add
 	};
 	jQuery.event.special.move = {
 		setup: function() {
 			on(this, 'movestart', enableMove2);
 			return false;
 		},
 		teardown: function() {
 			off(this, 'movestart', enableMove2);
 			return false;
 		},
 		add: add
 	};
 	jQuery.event.special.moveend = {
 		setup: function() {
 			on(this, 'movestart', enableMove3);
 			return false;
 		},
 		teardown: function() {
 			off(this, 'movestart', enableMove3);
 			return false;
 		},
 		add: add
 	};
 });
--- a/docs/sliders/jquery.twentytwenty.js
+++ b/docs/sliders/jquery.twentytwenty.js
@ -0,0 +1,109 @@
 (function($){
  $.fn.twentytwenty = function(options) {
    var options = $.extend({default_offset_pct: 0.5, orientation: 'horizontal', before_label: 'Before', after_label: 'After', no_overlay: false}, options);
    return this.each(function() {
      var sliderPct = options.default_offset_pct;
      var container = $(this);
      var sliderOrientation = options.orientation;
      var beforeDirection = (sliderOrientation === 'vertical') ? 'down' : 'left';
      var afterDirection = (sliderOrientation === 'vertical') ? 'up' : 'right';
      container.wrap("<div class='twentytwenty-wrapper twentytwenty-" + sliderOrientation + "'></div>");
      if(!options.no_overlay) {
        container.append("<div class='twentytwenty-overlay'></div>");
      }
      var beforeImg = container.find("img:first");
      var afterImg = container.find("img:last");
      container.append("<div class='twentytwenty-handle'></div>");
      var slider = container.find(".twentytwenty-handle");
      slider.append("<span class='twentytwenty-" + beforeDirection + "-arrow'></span>");
      slider.append("<span class='twentytwenty-" + afterDirection + "-arrow'></span>");
      container.addClass("twentytwenty-container");
      beforeImg.addClass("twentytwenty-before");
      afterImg.addClass("twentytwenty-after");
      var overlay = container.find(".twentytwenty-overlay");
      overlay.append("<div class='twentytwenty-before-label' data-content='"+options.before_label+"'></div>");
      overlay.append("<div class='twentytwenty-after-label' data-content='"+options.after_label+"'></div>");
      var calcOffset = function(dimensionPct) {
        var w = beforeImg.width();
        var h = beforeImg.height();
        return {
          w: w+"px",
          h: h+"px",
          cw: (dimensionPct*w)+"px",
          ch: (dimensionPct*h)+"px"
        };
      };
      var adjustContainer = function(offset) {
      	if (sliderOrientation === 'vertical') {
          beforeImg.css("clip", "rect(0,"+offset.w+","+offset.ch+",0)");
          afterImg.css("clip", "rect("+offset.ch+","+offset.w+","+offset.h+",0)");
      	}
      	else {
          beforeImg.css("clip", "rect(0,"+offset.cw+","+offset.h+",0)");
          afterImg.css("clip", "rect(0,"+offset.w+","+offset.h+","+offset.cw+")");
    	}
        container.css("height", offset.h);
      };
      var adjustSlider = function(pct) {
        var offset = calcOffset(pct);
        slider.css((sliderOrientation==="vertical") ? "top" : "left", (sliderOrientation==="vertical") ? offset.ch : offset.cw);
        adjustContainer(offset);
      };
      $(window).on("resize.twentytwenty", function(e) {
        adjustSlider(sliderPct);
      });
      var offsetX = 0;
      var offsetY = 0;
      var imgWidth = 0;
      var imgHeight = 0;
      slider.on("movestart", function(e) {
        if (((e.distX > e.distY && e.distX < -e.distY) || (e.distX < e.distY && e.distX > -e.distY)) && sliderOrientation !== 'vertical') {
          e.preventDefault();
        }
        else if (((e.distX < e.distY && e.distX < -e.distY) || (e.distX > e.distY && e.distX > -e.distY)) && sliderOrientation === 'vertical') {
          e.preventDefault();
        }
        container.addClass("active");
        offsetX = container.offset().left;
        offsetY = container.offset().top;
        imgWidth = beforeImg.width(); 
        imgHeight = beforeImg.height();          
      });
      slider.on("moveend", function(e) {
        container.removeClass("active");
      });
      slider.on("move", function(e) {
        if (container.hasClass("active")) {
          sliderPct = (sliderOrientation === 'vertical') ? (e.pageY-offsetY)/imgHeight : (e.pageX-offsetX)/imgWidth;
          if (sliderPct < 0) {
            sliderPct = 0;
          }
          if (sliderPct > 1) {
            sliderPct = 1;
          }
          adjustSlider(sliderPct);
        }
      });
      container.find("img").on("mousedown", function(event) {
        event.preventDefault();
      });
      $(window).trigger("resize.twentytwenty");
    });
  };
 })(jQuery);
--- a/docs/sliders/sotogordo-1945-recorte.jpeg
+++ b/docs/sliders/sotogordo-1945-recorte.jpeg
--- a/docs/sliders/sotogordo-2016-recorte.jpeg
+++ b/docs/sliders/sotogordo-2016-recorte.jpeg
--- a/docs/sliders/sotogordo.html
+++ b/docs/sliders/sotogordo.html
@ -0,0 +1,19 @@
 <html>
 <head>
 <script src="jquery-3.2.1.min.js"></script>
 <script src="jquery.event.move.js"></script>
 <script src="jquery.twentytwenty.js"></script>
 <link rel="stylesheet" href="twentytwenty.css" type="text/css" media="screen" />
 </head>
 <body>
 <div id="container1" class="twentytwenty-container">
  <img src="sotogordo-1945-recorte.jpeg">
  <img src="sotogordo-2016-recorte.jpeg">
 </div>
 <script>
 $(function(){
  $("#container1").twentytwenty();
 });
 </script>
 </body>
 </html>
--- a/docs/sliders/twentytwenty.css
+++ b/docs/sliders/twentytwenty.css
@ -0,0 +1,205 @@
 .twentytwenty-horizontal .twentytwenty-handle:before, .twentytwenty-horizontal .twentytwenty-handle:after, .twentytwenty-vertical .twentytwenty-handle:before, .twentytwenty-vertical .twentytwenty-handle:after {
  content: " ";
  display: block;
  background: white;
  position: absolute;
  z-index: 30;
  -webkit-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);
  -moz-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);
  box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5); }
 .twentytwenty-horizontal .twentytwenty-handle:before, .twentytwenty-horizontal .twentytwenty-handle:after {
  width: 3px;
  height: 9999px;
  left: 50%;
  margin-left: -1.5px; }
 .twentytwenty-vertical .twentytwenty-handle:before, .twentytwenty-vertical .twentytwenty-handle:after {
  width: 9999px;
  height: 3px;
  top: 50%;
  margin-top: -1.5px; }
 .twentytwenty-before-label, .twentytwenty-after-label, .twentytwenty-overlay {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%; }
 .twentytwenty-before-label, .twentytwenty-after-label, .twentytwenty-overlay {
  -webkit-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
  transition-duration: 0.5s; }
 .twentytwenty-before-label, .twentytwenty-after-label {
  -webkit-transition-property: opacity;
  -moz-transition-property: opacity;
  transition-property: opacity; }
 .twentytwenty-before-label:before, .twentytwenty-after-label:before {
  color: white;
  font-size: 13px;
  letter-spacing: 0.1em; }
 .twentytwenty-before-label:before, .twentytwenty-after-label:before {
  position: absolute;
  background: rgba(255, 255, 255, 0.2);
  line-height: 38px;
  padding: 0 20px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px; }
 .twentytwenty-horizontal .twentytwenty-before-label:before, .twentytwenty-horizontal .twentytwenty-after-label:before {
  top: 50%;
  margin-top: -19px; }
 .twentytwenty-vertical .twentytwenty-before-label:before, .twentytwenty-vertical .twentytwenty-after-label:before {
  left: 50%;
  margin-left: -45px;
  text-align: center;
  width: 90px; }
 .twentytwenty-left-arrow, .twentytwenty-right-arrow, .twentytwenty-up-arrow, .twentytwenty-down-arrow {
  width: 0;
  height: 0;
  border: 6px inset transparent;
  position: absolute; }
 .twentytwenty-left-arrow, .twentytwenty-right-arrow {
  top: 50%;
  margin-top: -6px; }
 .twentytwenty-up-arrow, .twentytwenty-down-arrow {
  left: 50%;
  margin-left: -6px; }
 .twentytwenty-container {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  z-index: 0;
  overflow: hidden;
  position: relative;
  -webkit-user-select: none;
  -moz-user-select: none; }
  .twentytwenty-container img {
    max-width: 100%;
    position: absolute;
    top: 0;
    display: block; }
  .twentytwenty-container.active .twentytwenty-overlay, .twentytwenty-container.active :hover.twentytwenty-overlay {
    background: rgba(0, 0, 0, 0); }
    .twentytwenty-container.active .twentytwenty-overlay .twentytwenty-before-label,
    .twentytwenty-container.active .twentytwenty-overlay .twentytwenty-after-label, .twentytwenty-container.active :hover.twentytwenty-overlay .twentytwenty-before-label,
    .twentytwenty-container.active :hover.twentytwenty-overlay .twentytwenty-after-label {
      opacity: 0; }
  .twentytwenty-container * {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box; }
 .twentytwenty-before-label {
  opacity: 0; }
  .twentytwenty-before-label:before {
    content: attr(data-content); }
 .twentytwenty-after-label {
  opacity: 0; }
  .twentytwenty-after-label:before {
    content: attr(data-content); }
 .twentytwenty-horizontal .twentytwenty-before-label:before {
  left: 10px; }
 .twentytwenty-horizontal .twentytwenty-after-label:before {
  right: 10px; }
 .twentytwenty-vertical .twentytwenty-before-label:before {
  top: 10px; }
 .twentytwenty-vertical .twentytwenty-after-label:before {
  bottom: 10px; }
 .twentytwenty-overlay {
  -webkit-transition-property: background;
  -moz-transition-property: background;
  transition-property: background;
  background: rgba(0, 0, 0, 0);
  z-index: 25; }
  .twentytwenty-overlay:hover {
    background: rgba(0, 0, 0, 0.5); }
    .twentytwenty-overlay:hover .twentytwenty-after-label {
      opacity: 1; }
    .twentytwenty-overlay:hover .twentytwenty-before-label {
      opacity: 1; }
 .twentytwenty-before {
  z-index: 20; }
 .twentytwenty-after {
  z-index: 10; }
 .twentytwenty-handle {
  height: 38px;
  width: 38px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -22px;
  margin-top: -22px;
  border: 3px solid white;
  -webkit-border-radius: 1000px;
  -moz-border-radius: 1000px;
  border-radius: 1000px;
  -webkit-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);
  -moz-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);
  box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);
  z-index: 40;
  cursor: pointer; }
 .twentytwenty-horizontal .twentytwenty-handle:before {
  bottom: 50%;
  margin-bottom: 22px;
  -webkit-box-shadow: 0 3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
  -moz-box-shadow: 0 3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
  box-shadow: 0 3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); }
 .twentytwenty-horizontal .twentytwenty-handle:after {
  top: 50%;
  margin-top: 22px;
  -webkit-box-shadow: 0 -3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
  -moz-box-shadow: 0 -3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
  box-shadow: 0 -3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); }
 .twentytwenty-vertical .twentytwenty-handle:before {
  left: 50%;
  margin-left: 22px;
  -webkit-box-shadow: 3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
  -moz-box-shadow: 3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
  box-shadow: 3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); }
 .twentytwenty-vertical .twentytwenty-handle:after {
  right: 50%;
  margin-right: 22px;
  -webkit-box-shadow: -3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
  -moz-box-shadow: -3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
  box-shadow: -3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); }
 .twentytwenty-left-arrow {
  border-right: 6px solid white;
  left: 50%;
  margin-left: -17px; }
 .twentytwenty-right-arrow {
  border-left: 6px solid white;
  right: 50%;
  margin-right: -17px; }
 .twentytwenty-up-arrow {
  border-bottom: 6px solid white;
  top: 50%;
  margin-top: -17px; }
 .twentytwenty-down-arrow {
  border-top: 6px solid white;
  bottom: 50%;
  margin-bottom: -17px; }