From 41f93fba25c0cf4ba2a80a1ada0bd15952eda6ab Mon Sep 17 00:00:00 2001
From: Antonio Laguna <sombragriselros@gmail.com>
Date: Sun, 28 May 2017 23:34:46 +0200
Subject: [PATCH] Finishing

---
 src/scss/modules/_promos.scss |  93 +++++++++++++++++++++++++++
 src/scss/modules/_work.scss   | 114 ++++++++++++++++++++++++++++++++++
 2 files changed, 207 insertions(+)
 create mode 100644 src/scss/modules/_promos.scss
 create mode 100644 src/scss/modules/_work.scss

diff --git a/src/scss/modules/_promos.scss b/src/scss/modules/_promos.scss
new file mode 100644
index 0000000..7849e0b
--- /dev/null
+++ b/src/scss/modules/_promos.scss
@@ -0,0 +1,93 @@
+.cta {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+.number,
+.cta .benefit {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  max-width: 100%;
+  padding: .8rem;
+}
+
+.number {
+  text-align: center;
+}
+
+.cta .benefit {
+  max-width: 100%;
+  text-align: center;
+}
+
+.number span {
+  display: block;
+  font-size: 8rem;
+  line-height: 8rem;
+}
+
+.number span sup {
+  font-size: 4rem;
+}
+
+.cta p {
+  margin-bottom: 0;
+}
+
+@media (min-width: 768px) {
+  .number,
+  .cta .benefit {
+    max-width: 50%;
+    padding: 4.8rem;
+  }
+
+  .cta .benefit {
+    text-align: left;
+  }
+
+  .number span {
+    font-size: 16rem;
+    line-height: 16rem;
+
+    sup {
+      font-size: 6rem;
+      vertical-align: middle;
+    }
+  }
+}
+
+.cta-cover {
+  display: table;
+  width: 100%;
+
+  h1 strong {
+    font-weight: 400;
+  }
+
+  @media (min-width: 1024px) {
+    h1 {
+      float: left;
+      max-width: 80%;
+    }
+
+    h1 strong {
+      display: block;
+    }
+
+    .button {
+      margin-top: 1.2rem;
+    }
+
+    .try {
+      text-align: center;
+    }
+  }
+
+  @media (max-width: 1023px) {
+    .alignright {
+      float: none;
+    }
+  }
+}
diff --git a/src/scss/modules/_work.scss b/src/scss/modules/_work.scss
new file mode 100644
index 0000000..10e099a
--- /dev/null
+++ b/src/scss/modules/_work.scss
@@ -0,0 +1,114 @@
+.work {
+  clear: both;
+  display: flex;
+  flex-direction: column;
+  text-align: left;
+
+  h1 + &,
+  h2 + &,
+  h3 + &,
+  p + & {
+    margin-top: 4.8rem;
+  }
+
+  li {
+    flex: 1;
+    list-style: none;
+    margin: 0;
+    position: relative;
+  }
+
+  p {
+    margin-bottom: 0;
+  }
+
+  li a {
+    display: block;
+    float: left;
+    height: 100%;
+    padding: 2.4rem 0;
+    width: 100%;
+  }
+
+  li a p,
+  li:first-child a:hover p:first-child {
+    transition: .3s;
+  }
+
+  li p {
+    padding-left: 1.2rem;
+  }
+
+  li.work-label p {
+    padding-left: 0;
+  }
+
+  li a:hover p:first-child {
+    padding-left: 1.6rem;
+  }
+
+  li p:last-child {
+    position: absolute;
+    right: 1.2rem;
+    top: 2.4rem;
+  }
+
+  li.work-label p:last-child {
+    right: 0;
+    top: 0;
+  }
+
+  &-label {
+    float: left;
+    font-weight: 600;
+    padding: 0 0 2.4rem;
+    width: 100%;
+  }
+
+  &-title {
+    display: block;
+    padding-right: 1.2rem;
+    width: 75%;
+  }
+}
+
+@media (min-width: 768px) {
+  .work-label p,
+  .work li p {
+    float: left;
+    margin-right: 2%;
+    width: 25%;
+  }
+
+  .work li.work-label p:last-child,
+  .work li p:last-child {
+    float: right;
+    margin-right: 0;
+    padding-right: 1.2rem;
+    position: relative;
+    right: auto;
+    text-align: right;
+    top: auto;
+  }
+
+  .work li p.work-date {
+    width: 120px;
+  }
+}
+
+@media (max-width: 768px) {
+  .work-client,
+  .work-label .work-services {
+    clip: rect(1px, 1px, 1px, 1px);
+    height: 1px;
+    overflow: hidden;
+    position: absolute;
+    width: 1px;
+  }
+}
+
+.text-pull.embed {
+  margin-left: -2.4rem;
+  margin-right: -2.4rem;
+  padding-bottom: 60.6%;
+}