v2.0.4-beta

assets/html/0021_sticky.html

@@ -0,0 +1,54 @@
+<div id="columna_sticky">
+  <div class="ui container">
+    <div class="ui grid">
+      <div class="left column" id="column"></div>
+      <div class="right column">
+        <div class="ui sticky">
+          <form class="ui form">
+            <div class="ui grid">
+              <div class="row">
+                <div class="ten wide column">
+                  <div class="titulo">
+                    STAND
+                  </div>
+                  <div class="precio">$ 5.990</div>
+                  <div class="colores">
+                    <input type="hidden" name="color" value="azul" />
+                    <span class="text">COLOR</span>
+                    <br />
+                    <div class="white circle"></div>
+                    <div class="black circle"></div>
+                    <div class="blue circle"></div>
+                    <div class="petrol circle"></div>
+                    <div class="cyan circle"></div>
+                    <div class="green circle"></div>
+                    <div class="yellow circle"></div>
+                    <div class="orange circle"></div>
+                    <div class="red circle"></div>
+                  </div>
+                  <div class="input cantidad">
+                    <button class="minus" type="button">
+                      <i class="minus icon"></i>
+                    </button><input type="text" name="cantidad" value="0" /><button class="plus" type="button">
+                      <i class="plus icon"></i>
+                    </button>
+                  </div>
+                </div>
+                <div class="six wide column">
+                  <div class="ui image">
+                    <img src="./assets/images/fotos/azul/left.jpg" />
+                  </div>
+                </div>
+              </div>
+              <div class="row">
+                <div class="sixteen wide column">
+                  <button class="ui button">AGREGAR AL CARRO</button>
+                </div>
+              </div>
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

assets/html/002_banner.html

@@ -1,29 +1,5 @@
 <header id="header">
   <div class="ui container">
-    <nav id="menu" class="ui borderless sticky menu" role="navigation" aria-label="navigation">
-      <div class="left menu item">
-        <div class="ui simple dropdown">
-          <div class="text">
-            <i class="bars icon"></i>
-          </div>
-          <div class="menu">
-            <a class="item" href="./">Inicio</a>
-            <a class="item" href="#ventajas">Ventajas</a>
-            <a class="item" href="#dimensiones">Dimensiones</a>
-            <a class="item" href="#corporativos">Corporativos</a>
-            <a class="item" href="#testimonios">Testimonios</a>
-            <a class="item" href="#contacto">Contacto</a>
-          </div>
-        </div>
-      </div>
-      <div class="right menu">
-        <a class="item" href="#contacto">
-          <i class="shopping cart icon">
-            <div class="cantidad">0</div>
-          </i>
-        </a>
-      </div>
-    </nav>
     <div class="ui center aligned basic segment">
       <div id="logo">
         <img src="./assets/images/logo.svg" />

assets/html/003_descripcion.html

@@ -1,4 +1,4 @@
-<section id="descripcion">
+<section id="descripcion" class="columna">
   <div class="ui container">
     <div class="left column">
       <div class="images">

assets/html/004_ventajas.html

@@ -1,4 +1,4 @@
-<section id="ventajas">
+<section id="ventajas" class="columna">
   <div class="diagonal"></div>
   <div class="ui container">
     <div class="left column">
@@ -8,7 +8,7 @@
       <div class="ui two columns stackable middle aligned grid">
         <div class="column">
           <div class="gallery">
-            <div class="ui large image">
+            <div class="ui large image agrandable">
               <img src="./assets/images/galeria/foto1.jpg" />
             </div>
             <div class="nav left">

assets/html/005_dimensiones.html

@@ -1,4 +1,4 @@
-<section id="dimensiones">
+<section id="dimensiones" class="columna">
   <div class="fondo-gris"></div>
   <div class="ui container">
     <div class="left column">
@@ -30,17 +30,17 @@
             </div>
             <div class="row fotos">
               <div class="five wide column">
-                <div class="ui image">
+                <div class="ui image agrandable">
-                  <img src="./assets/images/fotos/azul/left-small.jpg" class="left-small" />
-                </div>
-              </div>
-              <div class="five wide column">
-                <div class="ui image">
                   <img src="./assets/images/fotos/azul/left.jpg" class="left" />
                 </div>
               </div>
               <div class="five wide column">
-                <div class="ui image">
+                <div class="ui image agrandable">
+                  <img src="./assets/images/fotos/azul/center.jpg" class="center" />
+                </div>
+              </div>
+              <div class="five wide column">
+                <div class="ui image agrandable">
                   <img src="./assets/images/fotos/azul/right.jpg" class="right" />
                 </div>
               </div>

assets/html/006_construidos.html

@@ -1,4 +1,4 @@
-<section id="construidos">
+<section id="construidos" class="columna">
   <div class="ui container">
     <div class="left column">
       <div class="titulo">

assets/html/010_nav.html

@@ -0,0 +1,26 @@
+<nav id="menu" class="ui borderless top fixed menu" role="navigation" aria-label="navigation">
+  <div class="ui container">
+    <div class="left menu item">
+      <div class="ui simple dropdown">
+        <div class="text">
+          <i class="bars icon"></i>
+        </div>
+        <div class="menu">
+          <a class="item" href="./">Inicio</a>
+          <a class="item" href="#ventajas">Ventajas</a>
+          <a class="item" href="#dimensiones">Dimensiones</a>
+          <a class="item" href="#corporativos">Corporativos</a>
+          <a class="item" href="#testimonios">Testimonios</a>
+          <a class="item" href="#contacto">Contacto</a>
+        </div>
+      </div>
+    </div>
+    <div class="right menu">
+      <a class="item" href="#contacto">
+        <i class="shopping cart icon">
+          <div class="cantidad">0</div>
+        </i>
+      </a>
+    </div>
+  </div>
+</nav>

assets/html/011_modal_images.html

@@ -0,0 +1,7 @@
+<div class="ui modal" id="images">
+  <div class="header">
+    <i class="close icon"></i>
+  </div>
+  <div class="content image">
+  </div>
+</div>

assets/js/main.js

@@ -9,31 +9,31 @@ let available_colors = {
   },
   blue: {
     name: 'azul',
-    rgb: 'rgb(0, 0, 255)'
+    rgb: 'rgb(0, 110, 230)'
   },
   petrol: {
-    name: 'petroleo',
+    name: 'azul_petroleo',
-    rgb: 'rgb(0, 0, 150)'
+    rgb: 'rgb(0, 80, 120)'
   },
   cyan: {
     name: 'celeste',
-    rgb: 'rgb(150, 150, 255)'
+    rgb: 'rgb(80, 200, 255)'
   },
   green: {
     name: 'verde',
-    rgb: 'rgb(0, 255, 0)'
+    rgb: 'rgb(10, 200, 100)'
   },
   yellow: {
     name: 'amarillo',
-    rgb: 'rgb(255, 255, 0)'
+    rgb: 'rgb(255, 240, 70)'
   },
   orange: {
     name: 'naranjo',
-    rgb: 'rgb(255, 130, 0)'
+    rgb: 'rgb(255, 130, 70)'
   },
   red: {
     name: 'rojo',
-    rgb: 'rgb(255, 0, 0)'
+    rgb: 'rgb(255, 20, 50)'
   }
 }
 
@@ -115,7 +115,7 @@ class Colors {
     this.input = elem.find('input[name="color"]')
     this.changing = null
     if (changing) {
-      this.changing = elem.parent().parent().find('.column2 img')
+      this.changing = elem.parent().parent().find('.column img')
     }
     this.setup()
   }
@@ -143,7 +143,7 @@ class Colors {
     })
     this.elem.find('.' + color + '.circle').addClass('selected')
     if (this.changing != null) {
-      this.changing.attr('src', './assets/images/' + this.picked + '.png')
+      this.changing.attr('src', './assets/images/fotos/' + this.picked + '/left.jpg')
     }
   }
 }
@@ -198,7 +198,8 @@ let dimensiones = {
   setup: function() {
     this.elem.find('.colores .circle').each((i, el) => {
       let color = $(el).attr('class').split(' ')[0]
-      if (color == 'petrol' || color == 'cyan') {
+      let cssColor = $(el).css('background-color')
+      if (cssColor != this.colors[color]['rgb']) {
         $(el).css('background-color', this.colors[color]['rgb'])
       }
       $(el).click((e) => {
@@ -412,15 +413,49 @@ let testimonios = {
   }
 }
 
+let sticky = {
+  elem: $('#columna_sticky'),
+  setup: function() {
+    var h = 0
+    $('section.columna').each((i, el) => {
+      h += $(el).outerHeight(true)
+    })
+    this.elem.height(h)
+    this.elem.find('#column').height(h)
+
+    $('#columna_sticky .sticky').sticky({
+      context: '#column'
+    })
+  }
+}
+
+let image = {
+  elem: $('.agrandable'),
+  modal: $('#images.modal'),
+  setup: function() {
+    this.modal.modal()
+    this.modal.find('.close.icon').click((e) => {
+      this.modal.modal('hide')
+      this.modal.find('.image').html('')
+    })
+    let p = this
+    this.elem.click(function(e) {
+      let img = $(this).find('img').attr('src')
+      p.modal.find('.image').html('')
+      p.modal.find('.image').append(
+        $('<img />').attr('src', img)
+      )
+      p.modal.modal('show')
+    })
+  }
+}
+
 $(document).ready(function() {
-  $('#menu.sticky').sticky()
-  $('.column2 .sticky').sticky({
-    context: '#column'
-  })
   $('#subir').sticky()
 
   $('.shopping.cart').innerText = 0
 
+  sticky.setup()
   ventajas.setup()
   dimensiones.setup()
   let sticky_amount = new Amount($('.sticky .input input[name="cantidad"]'))
@@ -430,6 +465,7 @@ $(document).ready(function() {
   let cotiza_color = new Colors($('#corporativos .colores'))
   cotiza_form.setup()
   conversemos_form.setup()
+  image.setup()
 
   window.mobileCheck = function() {
     let check = false;

assets/sass/_common.scss

@@ -1,8 +1,43 @@
-@import 'header';
+@import 'common/header';
-@import 'descripcion';
+@import 'common/descripcion';
-@import 'ventajas';
+@import 'common/ventajas';
-@import 'dimensiones';
+@import 'common/dimensiones';
-@import 'construidos';
+@import 'common/construidos';
-@import 'corporativos';
+@import 'common/corporativos';
-@import 'testimonios';
+@import 'common/testimonios';
-@import 'contacto';
+@import 'common/contacto';
+@import 'common/nav';
+@import 'common/image_modal';
+
+.white.circle {
+  border: thin solid rgb(0, 0, 0);
+  background-color: rgb(255, 255, 255);
+}
+.black.circle {
+  background-color: rgb(0, 0, 0);
+}
+.blue.circle {
+  background-color: rgb(0, 110, 230);
+}
+.petrol.circle {
+  background-color: rgb(0, 80, 120);
+}
+.cyan.circle {
+  background-color: rgb(80, 200, 255);
+}
+.green.circle {
+  background-color: rgb(10, 200, 100);
+}
+.yellow.circle {
+  background-color: rgb(255, 240, 70);
+}
+.orange.circle {
+  background-color: rgb(255, 130, 70);
+}
+.red.circle {
+  background-color: rgb(255, 20, 50);
+}
+
+.column:not(.row) {
+  padding-top: 0 !important;
+}

assets/sass/_functions.scss

@@ -16,28 +16,6 @@
       margin-right: rem(3);
     }
 
-    .white {
-      border: thin solid rgb(0, 0, 0);
-      background-color: rgb(255, 255, 255);
-    }
-    .black {
-      background-color: rgb(0, 0, 0);
-    }
-    .blue {
-      background-color: rgb(0, 0, 255);
-    }
-    .green {
-      background-color: rgb(0, 255, 0);
-    }
-    .yellow {
-      background-color: rgb(255, 255, 0);
-    }
-    .orange {
-      background-color: rgb(255, 130, 0);
-    }
-    .red {
-      background-color: rgb(255, 0, 0);
-    }
     .circle {
       display: inline-block;
 

assets/sass/_header.scss

@@ -1,35 +0,0 @@
-#header {
-  background-image: $fondo_cabezal;
-  background-repeat: no-repeat;
-  background-color: rgba(0, 0, 0, .4);
-  background-blend-mode: multiply;
-
-  color: $blanco;
-
-  .container {
-    #menu {
-      background: none !important;
-      border: none !important;
-      box-shadow: none !important;
-
-      .right.menu {
-        .item {
-          .shopping.cart {
-            .cantidad {
-              position: relative;
-              color: $blanco;
-            }
-          }
-        }
-      }
-    }
-    .segment {
-      margin: 0 !important;
-      #logo {
-        img {
-          width: 50%;
-        }
-      }
-    }
-  }
-}

assets/sass/_wide.scss

@@ -7,6 +7,8 @@
 @import 'wide/corporativos';
 @import 'wide/testimonios';
 @import 'wide/contacto';
+@import 'wide/sticky';
+@import 'wide/nav';
 
 .left.column {
   width: 67% !important;
@@ -25,291 +27,3 @@ section .titulo {
 body {
   color: $gris_standard;
 }
-
-#content {
-  max-width: rem($full_width) !important;
-  height: ($content_height)+rem;
-
-  position: relative;
-  top: (-$content_height)+rem;
-
-  &>.column {
-    display: inline-block;
-    float: left;
-
-    padding-left: 1rem !important;
-    padding-right: 1rem !important;
-
-    &::after {
-      clear: both;
-    }
-  }
-  &>.column1 {
-    width: percentage($column1/100);
-  }
-  &>.column2 {
-    width: percentage($column2/100);
-    height: ($column_height1)+rem;
-
-    .sticky {
-      height: rem(265);
-      width: rem(310);
-      margin: auto;
-
-      .row:first-child {
-        height: rem(170);
-        margin-top: rem(80);
-
-        .column {
-          display: inline-block;
-          float: left;
-
-          &::after {
-            clear: both;
-          }
-        }
-        .column1 {
-          vertical-align: bottom;
-          padding-top: rem(20);
-          width: rem(310*2/3);
-
-          .linea {
-            margin-bottom: rem(10);
-          }
-
-          .titulo {
-            font-size: font_size(25);
-          }
-          .precio {
-            font-size: font_size(16);
-          }
-          font-size: font_size(14);
-
-          @include colors;
-          .input {
-            width: 4.5rem;
-            border: thin solid rgb(0, 0, 0);
-            text-align: center;
-            padding: .5rem 0.05rem;
-            font-size: font_size(10);
-
-            button {
-              background: none;
-              border: none;
-              width: 1rem;
-              margin: 0;
-              padding: 0;
-              cursor: pointer;
-              font-weight: bold;
-            }
-            input {
-              width: 2rem;
-              background: none;
-              margin: 0;
-              border: 0;
-              padding: 0;
-              text-align: center;
-            }
-          }
-        }
-        .column2 {
-          width: rem(310/3);
-
-          img {
-            width: rem(110);
-            height: rem(160);
-          }
-        }
-      }
-      .row:last-child {
-        .button {
-          border-radius: 0 !important;
-          width: 100%;
-        }
-      }
-    }
-  }
-
-  #felices {
-    height: (map.get($heights, "felices"))+rem;
-
-    padding: 0 1rem !important;
-    padding-top: rem(60) !important;
-
-    .header {
-      //margin-top: rem(60);
-      font-size: font_size(22);
-    }
-    .testimonios {
-      margin-top: rem(25);
-      display: flex;
-      justify-content: space-between;
-      text-align: center;
-
-      .testimonio {
-        height: rem(80);
-        color: #666667;
-        margin-top: rem(20);
-        width: percentage(30/100);
-        text-align: center;
-      }
-    }
-    .nav {
-      display: block;
-      text-align: center;
-      color: #666667;
-    }
-  }
-
-  #formulario {
-    height: (map.get($heights, "formulario"))+rem;
-
-    padding: 0 1rem !important;
-
-    .whatsapp-link {
-      color: inherit;
-    }
-    &>.column {
-      float: left;
-
-      padding-left: 1rem !important;
-      padding-right: 1rem !important;
-
-      &::after {
-        clear: both;
-      }
-    }
-    &>.flotante {
-      position: absolute;
-      top: rem(183);
-      margin: auto;
-      left: 40%;
-      width: rem($full_width/5);
-      text-align: center;
-
-      &>.content {
-        width: rem(130);
-        margin: auto;
-        left: -50%;
-
-        .item {
-          display: block;
-          padding: rem(5) 0;
-        }
-        div.whatsapp {
-          height: rem(30);
-          background-color: #1a9947;
-          color: #fff;
-          font-size: rem(10);
-
-          &>i {
-            position: relative;
-            font-size: font_size(16);
-            top: rem(3);
-          }
-        }
-        .rrss {
-          display: flex;
-          justify-content: space-around;
-          font-size: rem(20);
-
-          i.inverted.grey {
-            color: white !important;
-          }
-        }
-      }
-    }
-    &>.column1 {
-      width: percentage($column1/100);
-      margin-top: rem(27);
-
-      &>img {
-        width: rem(540);
-        height: rem(350);
-        float: left;
-      }
-    }
-    &>.column2 {
-      width: percentage($column2/100);
-
-      .header {
-        margin-top: rem(20);
-        text-align: center;
-        font-size: font_size(22);
-
-        .whatsapp-link {
-          display: inline-block;
-          width: rem(25);
-          height: rem(25);
-          font-size: font_size(25);
-        }
-      }
-
-      .paragraph {
-        padding-top: 1rem;
-        padding-bottom: rem(25);
-        justify-content: center;
-      }
-
-      form {
-        input {
-          border-radius: 0 !important;
-          height: rem(18);
-          margin-bottom: rem(9);
-          background-color: rgba(255, 255, 255, .5);
-          font-size: font_size(10);
-          &::placeholder {
-            color: $gris_standard;
-          }
-        }
-        textarea {
-          border-radius: 0 !important;
-          height: rem(72);
-          margin-bottom: rem(25);
-          background-color: rgba(255, 255, 255, .5);
-          font-size: font_size(10);
-          &::placeholder {
-            color: $gris_standard;
-          }
-        }
-        .button {
-          width: 100%;
-          border-radius: 0 !important;
-          background-color: white;
-          color: $gris_standard;
-        }
-      }
-    }
-  }
-
-  section {
-    background: none;
-
-    &.segment>.container {
-      height: 100%;
-
-      &>.column1 {
-        display: inline-block;
-        width: ($column1)+rem;
-      }
-      &>.column2 {
-        display: inline-block;
-        width: ($column2)+rem;
-      }
-    }
-  }
-  .simple.segment {
-    border: none !important;
-    border-radius: 0 !important;
-    box-shadow: none !important;
-    margin: 0 !important;
-    padding: 0 !important;
-
-    &>.ui.grid {
-      height: 100%;
-    }
-  }
-  .fondo-blanco {
-    background-color: rgba(255, 255, 255, .5);
-  }
-}

assets/sass/common/_header.scss

@@ -0,0 +1,19 @@
+#header {
+  background-image: $fondo_cabezal;
+  background-repeat: no-repeat;
+  background-color: rgba(0, 0, 0, .4);
+  background-blend-mode: multiply;
+
+  color: $blanco;
+
+  .container {
+    .segment {
+      margin: 0 !important;
+      #logo {
+        img {
+          width: 50%;
+        }
+      }
+    }
+  }
+}

assets/sass/common/_image_modal.scss

@@ -0,0 +1,14 @@
+#images.modal {
+  text-align: center;
+
+  .header {
+    text-align: right;
+  }
+  .content {
+    text-align: center;
+
+    img {
+      margin: auto;
+    }
+  }
+}

assets/sass/common/_nav.scss

@@ -0,0 +1,17 @@
+#menu {
+  z-index: 100;
+  background: none !important;
+  border: none !important;
+  box-shadow: none !important;
+
+  .right.menu {
+    .item {
+      .shopping.cart {
+        .cantidad {
+          position: relative;
+          color: $blanco;
+        }
+      }
+    }
+  }
+}

assets/sass/wide/_descripcion.scss

@@ -1,11 +1,10 @@
 #descripcion {
-  height: (map.get($heights, "descripcion"))+rem;
-
   background-position: left rem(112);
   background-size: 100% rem(110);
   background-repeat: no-repeat;
 
   padding-top: rem(100);
+  margin-bottom: rem(25);
 
   .images {
     .image {

assets/sass/wide/_header.scss

@@ -3,24 +3,4 @@
 
   background-size: 160%;
   background-position: bottom rem(-40) center;
-
-  .container {
-    #menu {
-      i {
-        font-size: font-size(24);
-      }
-      .right.menu {
-        .item {
-          .shopping.cart {
-            .cantidad {
-              font-size: font-size(12);
-              font-family: $font_family;
-              top: rem(-28);
-              left: rem(3.2);
-            }
-          }
-        }
-      }
-    }
-  }
 }

assets/sass/wide/_nav.scss

@@ -0,0 +1,17 @@
+#menu {
+  i {
+    font-size: font-size(24);
+  }
+  .right.menu {
+    .item {
+      .shopping.cart {
+        .cantidad {
+          font-size: font-size(12);
+          font-family: $font_family;
+          top: rem(-28);
+          left: rem(3.2);
+        }
+      }
+    }
+  }
+}

assets/sass/wide/_sticky.scss

@@ -0,0 +1,69 @@
+#columna_sticky {
+  position: absolute;
+  top: (map.get($heights, 'cabezal'))+rem;
+  height: 100%;
+  width: 100%;
+
+  .left.column {
+    pointer-events: none;
+  }
+  .sticky {
+    background-color: rgba(255, 255, 255, .5);
+
+    z-index: 10;
+
+    margin-top: rem(40);
+    padding-top: rem(54);
+
+    .row {
+      padding-top: 0 !important;
+    }
+
+    .column:first-child {
+      vertical-align: bottom;
+      padding-top: rem(20);
+
+      .titulo {
+        font-size: font_size(25);
+      }
+      .precio {
+        font-size: font_size(16);
+      }
+      font-size: font_size(14);
+
+      @include colors;
+      .input.cantidad {
+        width: 4.5rem;
+        border: thin solid rgb(0, 0, 0);
+        text-align: center;
+        padding: .5rem 0.05rem;
+        font-size: font_size(10);
+
+        button {
+          background: none;
+          border: none;
+          width: 1rem;
+          margin: 0;
+          padding: 0;
+          cursor: pointer;
+          font-weight: bold;
+        }
+        input {
+          width: 2rem;
+          background: none;
+          margin: 0;
+          border: 0;
+          padding: 0;
+          text-align: center;
+        }
+        .button {
+          border-radius: 0 !important;
+          width: 100%;
+        }
+      }
+      .button {
+        width: 100%;
+      }
+    }
+  }
+}

public/assets/scripts/main.js

@@ -9,31 +9,31 @@ let available_colors = {
   },
   blue: {
     name: 'azul',
-    rgb: 'rgb(0, 0, 255)'
+    rgb: 'rgb(0, 110, 230)'
   },
   petrol: {
-    name: 'petroleo',
+    name: 'azul_petroleo',
-    rgb: 'rgb(0, 0, 150)'
+    rgb: 'rgb(0, 80, 120)'
   },
   cyan: {
     name: 'celeste',
-    rgb: 'rgb(150, 150, 255)'
+    rgb: 'rgb(80, 200, 255)'
   },
   green: {
     name: 'verde',
-    rgb: 'rgb(0, 255, 0)'
+    rgb: 'rgb(10, 200, 100)'
   },
   yellow: {
     name: 'amarillo',
-    rgb: 'rgb(255, 255, 0)'
+    rgb: 'rgb(255, 240, 70)'
   },
   orange: {
     name: 'naranjo',
-    rgb: 'rgb(255, 130, 0)'
+    rgb: 'rgb(255, 130, 70)'
   },
   red: {
     name: 'rojo',
-    rgb: 'rgb(255, 0, 0)'
+    rgb: 'rgb(255, 20, 50)'
   }
 }
 
@@ -115,7 +115,7 @@ class Colors {
     this.input = elem.find('input[name="color"]')
     this.changing = null
     if (changing) {
-      this.changing = elem.parent().parent().find('.column2 img')
+      this.changing = elem.parent().parent().find('.column img')
     }
     this.setup()
   }
@@ -143,7 +143,7 @@ class Colors {
     })
     this.elem.find('.' + color + '.circle').addClass('selected')
     if (this.changing != null) {
-      this.changing.attr('src', './assets/images/' + this.picked + '.png')
+      this.changing.attr('src', './assets/images/fotos/' + this.picked + '/left.jpg')
     }
   }
 }
@@ -198,7 +198,8 @@ let dimensiones = {
   setup: function() {
     this.elem.find('.colores .circle').each((i, el) => {
       let color = $(el).attr('class').split(' ')[0]
-      if (color == 'petrol' || color == 'cyan') {
+      let cssColor = $(el).css('background-color')
+      if (cssColor != this.colors[color]['rgb']) {
         $(el).css('background-color', this.colors[color]['rgb'])
       }
       $(el).click((e) => {
@@ -412,15 +413,49 @@ let testimonios = {
   }
 }
 
+let sticky = {
+  elem: $('#columna_sticky'),
+  setup: function() {
+    var h = 0
+    $('section.columna').each((i, el) => {
+      h += $(el).outerHeight(true)
+    })
+    this.elem.height(h)
+    this.elem.find('#column').height(h)
+
+    $('#columna_sticky .sticky').sticky({
+      context: '#column'
+    })
+  }
+}
+
+let image = {
+  elem: $('.agrandable'),
+  modal: $('#images.modal'),
+  setup: function() {
+    this.modal.modal()
+    this.modal.find('.close.icon').click((e) => {
+      this.modal.modal('hide')
+      this.modal.find('.image').html('')
+    })
+    let p = this
+    this.elem.click(function(e) {
+      let img = $(this).find('img').attr('src')
+      p.modal.find('.image').html('')
+      p.modal.find('.image').append(
+        $('<img />').attr('src', img)
+      )
+      p.modal.modal('show')
+    })
+  }
+}
+
 $(document).ready(function() {
-  $('#menu.sticky').sticky()
-  $('.column2 .sticky').sticky({
-    context: '#column'
-  })
   $('#subir').sticky()
 
   $('.shopping.cart').innerText = 0
 
+  sticky.setup()
   ventajas.setup()
   dimensiones.setup()
   let sticky_amount = new Amount($('.sticky .input input[name="cantidad"]'))
@@ -430,6 +465,7 @@ $(document).ready(function() {
   let cotiza_color = new Colors($('#corporativos .colores'))
   cotiza_form.setup()
   conversemos_form.setup()
+  image.setup()
 
   window.mobileCheck = function() {
     let check = false;

public/assets/styles/main.css

@@ -57,15 +57,6 @@ html {
   background-blend-mode: multiply;
   color: white;
 }
-#header .container #menu {
-  background: none !important;
-  border: none !important;
-  box-shadow: none !important;
-}
-#header .container #menu .right.menu .item .shopping.cart .cantidad {
-  position: relative;
-  color: white;
-}
 #header .container .segment {
   margin: 0 !important;
 }
@@ -209,6 +200,71 @@ html {
   height: 5rem;
 }
 
+#menu {
+  z-index: 100;
+  background: none !important;
+  border: none !important;
+  box-shadow: none !important;
+}
+#menu .right.menu .item .shopping.cart .cantidad {
+  position: relative;
+  color: white;
+}
+
+#images.modal {
+  text-align: center;
+}
+#images.modal .header {
+  text-align: right;
+}
+#images.modal .content {
+  text-align: center;
+}
+#images.modal .content img {
+  margin: auto;
+}
+
+.white.circle {
+  border: thin solid black;
+  background-color: white;
+}
+
+.black.circle {
+  background-color: black;
+}
+
+.blue.circle {
+  background-color: #006ee6;
+}
+
+.petrol.circle {
+  background-color: #005078;
+}
+
+.cyan.circle {
+  background-color: #50c8ff;
+}
+
+.green.circle {
+  background-color: #0ac864;
+}
+
+.yellow.circle {
+  background-color: #fff046;
+}
+
+.orange.circle {
+  background-color: #ff8246;
+}
+
+.red.circle {
+  background-color: #ff1432;
+}
+
+.column:not(.row) {
+  padding-top: 0 !important;
+}
+
 @font-face {
   font-family: "icomoon";
   src: url("../fonts/icomoon.eotiedbpz");
@@ -287,28 +343,6 @@ i.font-icon.chile:before {
   #dimensiones .colores .text {
     margin-right: 0.28125rem;
   }
-  #dimensiones .colores .white {
-    border: thin solid black;
-    background-color: white;
-  }
-  #dimensiones .colores .black {
-    background-color: black;
-  }
-  #dimensiones .colores .blue {
-    background-color: blue;
-  }
-  #dimensiones .colores .green {
-    background-color: lime;
-  }
-  #dimensiones .colores .yellow {
-    background-color: yellow;
-  }
-  #dimensiones .colores .orange {
-    background-color: #ff8200;
-  }
-  #dimensiones .colores .red {
-    background-color: red;
-  }
   #dimensiones .colores .circle {
     display: inline-block;
     width: 1.40625rem;
@@ -615,28 +649,6 @@ i.font-icon.chile:before {
   #content > .column2 .sticky .row:first-child .column1 .colores .text {
     margin-right: 0.28125rem;
   }
-  #content > .column2 .sticky .row:first-child .column1 .colores .white {
-    border: thin solid black;
-    background-color: white;
-  }
-  #content > .column2 .sticky .row:first-child .column1 .colores .black {
-    background-color: black;
-  }
-  #content > .column2 .sticky .row:first-child .column1 .colores .blue {
-    background-color: blue;
-  }
-  #content > .column2 .sticky .row:first-child .column1 .colores .green {
-    background-color: lime;
-  }
-  #content > .column2 .sticky .row:first-child .column1 .colores .yellow {
-    background-color: yellow;
-  }
-  #content > .column2 .sticky .row:first-child .column1 .colores .orange {
-    background-color: #ff8200;
-  }
-  #content > .column2 .sticky .row:first-child .column1 .colores .red {
-    background-color: red;
-  }
   #content > .column2 .sticky .row:first-child .column1 .colores .circle {
     display: inline-block;
     width: 1.40625rem;
@@ -762,28 +774,6 @@ i.font-icon.chile:before {
   #content #corporativos .column2 form .colores .text {
     margin-right: 0.28125rem;
   }
-  #content #corporativos .column2 form .colores .white {
-    border: thin solid black;
-    background-color: white;
-  }
-  #content #corporativos .column2 form .colores .black {
-    background-color: black;
-  }
-  #content #corporativos .column2 form .colores .blue {
-    background-color: blue;
-  }
-  #content #corporativos .column2 form .colores .green {
-    background-color: lime;
-  }
-  #content #corporativos .column2 form .colores .yellow {
-    background-color: yellow;
-  }
-  #content #corporativos .column2 form .colores .orange {
-    background-color: #ff8200;
-  }
-  #content #corporativos .column2 form .colores .red {
-    background-color: red;
-  }
   #content #corporativos .column2 form .colores .circle {
     display: inline-block;
     width: 1.40625rem;
@@ -1025,22 +1015,13 @@ i.font-icon.chile:before {
     background-size: 160%;
     background-position: bottom -2.5rem center;
   }
-  #header .container #menu i {
-    font-size: 2rem;
-  }
-  #header .container #menu .right.menu .item .shopping.cart .cantidad {
-    font-size: 1rem;
-    font-family: Roboto, sans;
-    top: -1.75rem;
-    left: 0.2rem;
-  }
 
   #descripcion {
-    height: 25rem;
     background-position: left 7rem;
     background-size: 100% 6.875rem;
     background-repeat: no-repeat;
     padding-top: 6.25rem;
+    margin-bottom: 1.5625rem;
   }
   #descripcion .images .image {
     max-width: 33%;
@@ -1072,28 +1053,6 @@ i.font-icon.chile:before {
   #dimensiones .colores .text {
     margin-right: 0.1875rem;
   }
-  #dimensiones .colores .white {
-    border: thin solid black;
-    background-color: white;
-  }
-  #dimensiones .colores .black {
-    background-color: black;
-  }
-  #dimensiones .colores .blue {
-    background-color: blue;
-  }
-  #dimensiones .colores .green {
-    background-color: lime;
-  }
-  #dimensiones .colores .yellow {
-    background-color: yellow;
-  }
-  #dimensiones .colores .orange {
-    background-color: #ff8200;
-  }
-  #dimensiones .colores .red {
-    background-color: red;
-  }
   #dimensiones .colores .circle {
     display: inline-block;
     width: 1.25rem;
@@ -1121,28 +1080,6 @@ i.font-icon.chile:before {
   #corporativos form .colores .text {
     margin-right: 0.1875rem;
   }
-  #corporativos form .colores .white {
-    border: thin solid black;
-    background-color: white;
-  }
-  #corporativos form .colores .black {
-    background-color: black;
-  }
-  #corporativos form .colores .blue {
-    background-color: blue;
-  }
-  #corporativos form .colores .green {
-    background-color: lime;
-  }
-  #corporativos form .colores .yellow {
-    background-color: yellow;
-  }
-  #corporativos form .colores .orange {
-    background-color: #ff8200;
-  }
-  #corporativos form .colores .red {
-    background-color: red;
-  }
   #corporativos form .colores .circle {
     display: inline-block;
     width: 1.25rem;
@@ -1223,6 +1160,96 @@ i.font-icon.chile:before {
     color: white;
   }
 
+  #columna_sticky {
+    position: absolute;
+    top: 31.25rem;
+    height: 100%;
+    width: 100%;
+  }
+  #columna_sticky .left.column {
+    pointer-events: none;
+  }
+  #columna_sticky .sticky {
+    background-color: rgba(255, 255, 255, 0.5);
+    z-index: 10;
+    margin-top: 2.5rem;
+    padding-top: 3.375rem;
+  }
+  #columna_sticky .sticky .row {
+    padding-top: 0 !important;
+  }
+  #columna_sticky .sticky .column:first-child {
+    vertical-align: bottom;
+    padding-top: 1.25rem;
+    font-size: 1.1666666667rem;
+  }
+  #columna_sticky .sticky .column:first-child .titulo {
+    font-size: 2.0833333333rem;
+  }
+  #columna_sticky .sticky .column:first-child .precio {
+    font-size: 1.3333333333rem;
+  }
+  #columna_sticky .sticky .column:first-child .colores {
+    vertical-align: center;
+  }
+  #columna_sticky .sticky .column:first-child .colores .text {
+    margin-right: 0.1875rem;
+  }
+  #columna_sticky .sticky .column:first-child .colores .circle {
+    display: inline-block;
+    width: 1.25rem;
+    height: 1.25rem;
+    border-radius: 8000px;
+    margin: auto 0.0625rem;
+    cursor: pointer;
+  }
+  #columna_sticky .sticky .column:first-child .colores .circle.selected {
+    width: 1.375rem;
+    height: 1.375rem;
+    cursor: default;
+  }
+  #columna_sticky .sticky .column:first-child .input.cantidad {
+    width: 4.5rem;
+    border: thin solid black;
+    text-align: center;
+    padding: 0.5rem 0.05rem;
+    font-size: 0.8333333333rem;
+  }
+  #columna_sticky .sticky .column:first-child .input.cantidad button {
+    background: none;
+    border: none;
+    width: 1rem;
+    margin: 0;
+    padding: 0;
+    cursor: pointer;
+    font-weight: bold;
+  }
+  #columna_sticky .sticky .column:first-child .input.cantidad input {
+    width: 2rem;
+    background: none;
+    margin: 0;
+    border: 0;
+    padding: 0;
+    text-align: center;
+  }
+  #columna_sticky .sticky .column:first-child .input.cantidad .button {
+    border-radius: 0 !important;
+    width: 100%;
+  }
+  #columna_sticky .sticky .column:first-child .button {
+    width: 100%;
+  }
+
+  #menu i {
+    font-size: 2rem;
+  }
+  #menu .right.menu .item .shopping.cart .cantidad {
+    font-size: 1rem;
+    font-family: Roboto, sans;
+    top: -1.75rem;
+    left: 0.2rem;
+  }
+
   .left.column {
     width: 67% !important;
     padding-left: 0.3125rem !important;
@@ -1241,292 +1268,4 @@ i.font-icon.chile:before {
   body {
     color: #333333;
   }
-
-  #content {
-    max-width: 67.5rem !important;
-    height: 217.5rem;
-    position: relative;
-    top: -217.5rem;
-  }
-  #content > .column {
-    display: inline-block;
-    float: left;
-    padding-left: 1rem !important;
-    padding-right: 1rem !important;
-  }
-  #content > .column::after {
-    clear: both;
-  }
-  #content > .column1 {
-    width: 67%;
-  }
-  #content > .column2 {
-    width: 33%;
-    height: 101.875rem;
-  }
-  #content > .column2 .sticky {
-    height: 16.5625rem;
-    width: 19.375rem;
-    margin: auto;
-  }
-  #content > .column2 .sticky .row:first-child {
-    height: 10.625rem;
-    margin-top: 5rem;
-  }
-  #content > .column2 .sticky .row:first-child .column {
-    display: inline-block;
-    float: left;
-  }
-  #content > .column2 .sticky .row:first-child .column::after {
-    clear: both;
-  }
-  #content > .column2 .sticky .row:first-child .column1 {
-    vertical-align: bottom;
-    padding-top: 1.25rem;
-    width: 12.9166666667rem;
-    font-size: 1.1666666667rem;
-  }
-  #content > .column2 .sticky .row:first-child .column1 .linea {
-    margin-bottom: 0.625rem;
-  }
-  #content > .column2 .sticky .row:first-child .column1 .titulo {
-    font-size: 2.0833333333rem;
-  }
-  #content > .column2 .sticky .row:first-child .column1 .precio {
-    font-size: 1.3333333333rem;
-  }
-  #content > .column2 .sticky .row:first-child .column1 .colores {
-    vertical-align: center;
-  }
-  #content > .column2 .sticky .row:first-child .column1 .colores .text {
-    margin-right: 0.1875rem;
-  }
-  #content > .column2 .sticky .row:first-child .column1 .colores .white {
-    border: thin solid black;
-    background-color: white;
-  }
-  #content > .column2 .sticky .row:first-child .column1 .colores .black {
-    background-color: black;
-  }
-  #content > .column2 .sticky .row:first-child .column1 .colores .blue {
-    background-color: blue;
-  }
-  #content > .column2 .sticky .row:first-child .column1 .colores .green {
-    background-color: lime;
-  }
-  #content > .column2 .sticky .row:first-child .column1 .colores .yellow {
-    background-color: yellow;
-  }
-  #content > .column2 .sticky .row:first-child .column1 .colores .orange {
-    background-color: #ff8200;
-  }
-  #content > .column2 .sticky .row:first-child .column1 .colores .red {
-    background-color: red;
-  }
-  #content > .column2 .sticky .row:first-child .column1 .colores .circle {
-    display: inline-block;
-    width: 1.25rem;
-    height: 1.25rem;
-    border-radius: 8000px;
-    margin: auto 0.0625rem;
-    cursor: pointer;
-  }
-  #content > .column2 .sticky .row:first-child .column1 .colores .circle.selected {
-    width: 1.375rem;
-    height: 1.375rem;
-    cursor: default;
-  }
-  #content > .column2 .sticky .row:first-child .column1 .input {
-    width: 4.5rem;
-    border: thin solid black;
-    text-align: center;
-    padding: 0.5rem 0.05rem;
-    font-size: 0.8333333333rem;
-  }
-  #content > .column2 .sticky .row:first-child .column1 .input button {
-    background: none;
-    border: none;
-    width: 1rem;
-    margin: 0;
-    padding: 0;
-    cursor: pointer;
-    font-weight: bold;
-  }
-  #content > .column2 .sticky .row:first-child .column1 .input input {
-    width: 2rem;
-    background: none;
-    margin: 0;
-    border: 0;
-    padding: 0;
-    text-align: center;
-  }
-  #content > .column2 .sticky .row:first-child .column2 {
-    width: 6.4583333333rem;
-  }
-  #content > .column2 .sticky .row:first-child .column2 img {
-    width: 6.875rem;
-    height: 10rem;
-  }
-  #content > .column2 .sticky .row:last-child .button {
-    border-radius: 0 !important;
-    width: 100%;
-  }
-  #content #felices {
-    height: 21.875rem;
-    padding: 0 1rem !important;
-    padding-top: 3.75rem !important;
-  }
-  #content #felices .header {
-    font-size: 1.8333333333rem;
-  }
-  #content #felices .testimonios {
-    margin-top: 1.5625rem;
-    display: flex;
-    justify-content: space-between;
-    text-align: center;
-  }
-  #content #felices .testimonios .testimonio {
-    height: 5rem;
-    color: #666667;
-    margin-top: 1.25rem;
-    width: 30%;
-    text-align: center;
-  }
-  #content #felices .nav {
-    display: block;
-    text-align: center;
-    color: #666667;
-  }
-  #content #formulario {
-    height: 30rem;
-    padding: 0 1rem !important;
-  }
-  #content #formulario .whatsapp-link {
-    color: inherit;
-  }
-  #content #formulario > .column {
-    float: left;
-    padding-left: 1rem !important;
-    padding-right: 1rem !important;
-  }
-  #content #formulario > .column::after {
-    clear: both;
-  }
-  #content #formulario > .flotante {
-    position: absolute;
-    top: 11.4375rem;
-    margin: auto;
-    left: 40%;
-    width: 13.5rem;
-    text-align: center;
-  }
-  #content #formulario > .flotante > .content {
-    width: 8.125rem;
-    margin: auto;
-    left: -50%;
-  }
-  #content #formulario > .flotante > .content .item {
-    display: block;
-    padding: 0.3125rem 0;
-  }
-  #content #formulario > .flotante > .content div.whatsapp {
-    height: 1.875rem;
-    background-color: #1a9947;
-    color: #fff;
-    font-size: 0.625rem;
-  }
-  #content #formulario > .flotante > .content div.whatsapp > i {
-    position: relative;
-    font-size: 1.3333333333rem;
-    top: 0.1875rem;
-  }
-  #content #formulario > .flotante > .content .rrss {
-    display: flex;
-    justify-content: space-around;
-    font-size: 1.25rem;
-  }
-  #content #formulario > .flotante > .content .rrss i.inverted.grey {
-    color: white !important;
-  }
-  #content #formulario > .column1 {
-    width: 67%;
-    margin-top: 1.6875rem;
-  }
-  #content #formulario > .column1 > img {
-    width: 33.75rem;
-    height: 21.875rem;
-    float: left;
-  }
-  #content #formulario > .column2 {
-    width: 33%;
-  }
-  #content #formulario > .column2 .header {
-    margin-top: 1.25rem;
-    text-align: center;
-    font-size: 1.8333333333rem;
-  }
-  #content #formulario > .column2 .header .whatsapp-link {
-    display: inline-block;
-    width: 1.5625rem;
-    height: 1.5625rem;
-    font-size: 2.0833333333rem;
-  }
-  #content #formulario > .column2 .paragraph {
-    padding-top: 1rem;
-    padding-bottom: 1.5625rem;
-    justify-content: center;
-  }
-  #content #formulario > .column2 form input {
-    border-radius: 0 !important;
-    height: 1.125rem;
-    margin-bottom: 0.5625rem;
-    background-color: rgba(255, 255, 255, 0.5);
-    font-size: 0.8333333333rem;
-  }
-  #content #formulario > .column2 form input::placeholder {
-    color: #333333;
-  }
-  #content #formulario > .column2 form textarea {
-    border-radius: 0 !important;
-    height: 4.5rem;
-    margin-bottom: 1.5625rem;
-    background-color: rgba(255, 255, 255, 0.5);
-    font-size: 0.8333333333rem;
-  }
-  #content #formulario > .column2 form textarea::placeholder {
-    color: #333333;
-  }
-  #content #formulario > .column2 form .button {
-    width: 100%;
-    border-radius: 0 !important;
-    background-color: white;
-    color: #333333;
-  }
-  #content section {
-    background: none;
-  }
-  #content section.segment > .container {
-    height: 100%;
-  }
-  #content section.segment > .container > .column1 {
-    display: inline-block;
-    width: 67rem;
-  }
-  #content section.segment > .container > .column2 {
-    display: inline-block;
-    width: 33rem;
-  }
-  #content .simple.segment {
-    border: none !important;
-    border-radius: 0 !important;
-    box-shadow: none !important;
-    margin: 0 !important;
-    padding: 0 !important;
-  }
-  #content .simple.segment > .ui.grid {
-    height: 100%;
-  }
-  #content .fondo-blanco {
-    background-color: rgba(255, 255, 255, 0.5);
-  }
 }