add responsiveness css

client/css/responsiveness.css

@@ -0,0 +1,21 @@
+/* CELLPHONE */
+
+@media screen and (max-width: 47.2em) {
+    .mision h5 {
+        text-align: left;
+    }
+    ul.product-list li {
+        display: block;
+        width: 100%;
+    }
+}
+
+@media screen and (min-width: 756px) and (max-width: 1126px) {
+    ul.product-list li {
+        display: inline-block;
+        width: 45%;
+    }
+    .product-short-desc p {
+        padding: 0 10px;
+    }
+}

client/css/styles.css

@@ -1,4 +1,6 @@
 /*COLORS*/
+
+
 /*
     TURQUOISE: #1EAEDB
 */
@@ -23,19 +25,16 @@
     src: url('../fonts/Angelface.otf');
 }
 
-/* CELLPHONE */
-@media screen and (max-width: 47.2em) {
-    .mision h5 {
-        text-align: left;
-    }
-}
-
 body {
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     font-family: ralewayRegular;
 }
 
+section {
+    transition: ease 1s display;
+}
+
 .video {
     margin-top: 65px;
     background-image: url('../images/video-bg.jpg');
@@ -53,12 +52,12 @@ body {
     max-width: none;
 }
 
-.section > .container {
+.section>.container {
     padding: 30px 0px;
     text-align: justify;
 }
 
-.section > .container h4 {
+.section>.container h4 {
     text-transform: uppercase;
     font-size: 30px;
     font-family: ralewayMedium;
@@ -66,7 +65,7 @@ body {
     margin-bottom: 40px;
 }
 
-.section > .container h4:before {
+.section>.container h4:before {
     content: '';
     width: 50px;
     border-bottom: 2px solid black;
@@ -80,7 +79,7 @@ body {
     color: #FFF;
 }
 
-.section.inverted > .container h4:before {
+.section.inverted>.container h4:before {
     content: '';
     width: 50px;
     border-bottom: 2px solid white;
@@ -99,12 +98,14 @@ body {
     width: 100%;
     height: 400px;
 }
+
 .courses {
     background-image: url('../images/formacion-bg.jpg');
     background-repeat: no-repeat;
     background-size: 100%;
     color: white;
 }
+
 .courses-list {
     list-style: none;
 }
@@ -115,29 +116,33 @@ body {
     font-family: ralewayMedium;
     margin-bottom: 5px;
 }
+
 ::selection {
     color: white;
     background-color: #262626;
 }
+
 .main {
     margin-top: 80px;
 }
+
 .navbar {
-  position: fixed;
-  top: 0;
-  left: 0;
-  display: block;
-  width: 100%;
-  height: 6.5rem;
-  background: #fff;
-  z-index: 99;
-  border-bottom: 1px solid #000;
+    position: fixed;
+    top: 0;
+    left: 0;
+    display: block;
+    width: 100%;
+    height: 6.5rem;
+    background: #fff;
+    z-index: 99;
+    border-bottom: 1px solid #000;
 }
 
 .navbar-container {
     text-align: right;
 }
 
+
 /*.navbar-list{
   list-style: none;
   margin-bottom: 0;
@@ -180,14 +185,18 @@ ul.navbar-list > li > a.selected {
   font-family: ralewayBold;
 }*/
 
-.fade-enter-active, .fade-leave-active {
-  transition: opacity .5s
+.fade-enter-active,
+.fade-leave-active {
+    transition: opacity .5s
 }
-.fade-enter, .fade-leave-to {
-  opacity: 0
+
+.fade-enter,
+.fade-leave-to {
+    opacity: 0
 }
 
-.mision, .vision {
+.mision,
+.vision {
     text-align: justify
 }
 

client/index.html

@@ -26,6 +26,7 @@
     <link rel="stylesheet" href="css/timeline.css">
     <link rel="stylesheet" href="css/products.css">
     <link rel="stylesheet" href="css/navbar.css">
+    <link rel="stylesheet" href="css/responsiveness.css">
     <link href='https://api.mapbox.com/mapbox-gl-js/v0.31.0/mapbox-gl.css' rel='stylesheet' />
 
     <!-- Favicon
@@ -159,6 +160,13 @@
         </div>
     </section>
 
+    <section id="producto-descripcion" rv-show="selectedSection.productoDescripcion">
+        <div class="product-description section">
+            <div class="container">
+                {selectedProduct.name}
+            </div>
+        </div>
+    </section>
     <!--<section id="category">
         <div class="row">
             <div>

client/js/app.js

@@ -48,7 +48,8 @@ function getProducts(category) {
 
 var selectedSection_ = {
     empresa: true,
-    productos: false
+    productos: false,
+    productoDescripcion: false
 };
 
 var selectedCategory_ = 'proteccion intensiva';