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; }