diff --git a/static/css/legacy/base.css b/static/css/legacy/base.css
index da261a7..6c01816 100644
--- a/static/css/legacy/base.css
+++ b/static/css/legacy/base.css
@@ -53,9 +53,1418 @@
----------------------------------------------------------------------------------- */
+/*=========================================
+0. CSS Reset & Normalize
+=========================================== */
+
+html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { border: 0; font-size: 100%; font: inherit; vertical-align: baseline; margin: 0; padding: 0 }
+
+article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary {
+ display: block;
+}
+body {
+ line-height: 1;
+}
+
+blockquote,
+q {
+ quotes: none
+}
+
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+ content: none
+}
+
+table {
+ border-collapse: collapse;
+ border-spacing: 0;
+}
+
+html {
+ -webkit-text-size-adjust: 100%;
+ -ms-text-size-adjust: 100%;
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+}
+
+*,
+*::before,
+*::after {
+ -webkit-box-sizing: inherit;
+ -moz-box-sizing: inherit;
+ box-sizing: inherit;
+}
+
+audio,
+canvas,
+progress,
+video {
+ display: inline-block;
+ vertical-align: baseline;
+}
+
+embed,
+iframe,
+object {
+ max-width: 100%;
+}
+
+audio:not([controls]) {
+ display: none;
+ height: 0;
+}
+
+[hidden],
+template {
+ display: none;
+}
+
+ul {
+ list-style: square;
+ text-indent: inherit;
+}
+
+ol {
+ list-style: decimal;
+}
+
+b,
+strong {
+ font-weight: 600;
+}
+
+a {
+ background-color: transparent;
+}
+
+a:active,
+a:hover {
+ outline: 0;
+}
+
+sup,
+sub {
+ font-size: 0.75em;
+ line-height: 2.2em;
+ height: 0;
+ line-height: 0;
+ position: relative;
+ vertical-align: baseline;
+}
+
+sup {
+ bottom: 1ex;
+}
+
+sub {
+ top: 0.5ex;
+}
+
+small {
+ font-size: 0.75em;
+ line-height: 1.72;
+}
+
+big {
+ font-size: 1.25em;
+}
+
+hr {
+ border: none;
+ clear: both;
+ display: block;
+ height: 1px;
+ width: 100%;
+ text-align: center;
+ margin: 3.2rem auto;
+}
+
+h2 + hr,
+h3 + hr {
+ margin-bottom: 4.8rem;
+}
+
+p + hr {
+ margin-bottom: 4rem;
+}
+
+/*
+hr::after {
+ position: relative;
+ top: -2.4rem;
+ font-size: 2.4rem;
+ content: "\00A7";
+ display: inline-block;
+ border-radius: 50%;
+ width: 4.8rem;
+ height: 4.8rem;
+ line-height: 4.8rem;
+}*/
+dfn,
+cite,
+em,
+i {
+ font-style: italic;
+}
+
+abbr,
+acronym {
+ cursor: help;
+}
+
+mark,
+ins {
+ text-decoration: none;
+ padding: 0 4px;
+ text-shadow: none;
+
+}
+
+::-moz-selection {
+ text-shadow: none;
+}
+
+::-webkit-selection {
+ text-shadow: none;
+}
+
+::selection {
+ text-shadow: none;
+}
+
+img {
+ /* Make sure images are scaled correctly. */
+ border: 0;
+ height: auto;
+ max-width: 100%;
+}
+
+img:hover {
+ opacity: 0.90;
+ filter: alpha(opacity=90);
+}
+
+svg:not(:root) {
+ overflow: hidden;
+}
+
+figure {
+ position: relative;
+ margin: 0;
+ line-height: 0;
+}
+
+optgroup {
+ font-weight: bold;
+}
+
+table {
+ width: 100%;
+ border-collapse: collapse;
+ border-spacing: 0;
+ margin-bottom: 24px;
+}
+
+td,
+th {
+ padding: 0;
+}
+
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+ content: "";
+}
+
+blockquote,
+q {
+ quotes: "" "";
+}
+
+dt {
+ font-weight: bold;
+}
+
+dd {
+ margin: 0;
+}
+
+
+/*=== Clearing === */
+.clear:before, .clear:after, header:before, header:after, main:before, main:after, .wrap:before, .wrap:after, group:before, group:after, section:before, section:after, aside:before, aside:after,footer:before, footer:after{ content: ""; display: table; }
+.clear:after, header:after, main:after, .wrap:after, group:after, section:after, aside:after, footer:after { clear: both; }
+
+/*=========================================
+1. Base --> Baseline: 8px = .8rem
+=========================================== */
+
+/* -- Disable elastic scrolling/bounce:
+webslides.js will add .ws-ready automatically. Don't worry :) -- */
+
+html.ws-ready,
+html.ws-ready body {
+ width: 100%;
+ height: 100%;
+ overflow: hidden;
+}
+
+#webslides {
+ height: 100vh;
+ overflow-x: hidden;
+ overflow-y: scroll;
+ -webkit-overflow-scrolling: touch;
+}
+/* -- Hide scrollbar, but still being able to scroll -- */
+
+#webslides {
+ -ms-overflow-style: none; /* IE 10+ */
+}
+#webslides::-webkit-scrollbar {
+ display: none; /* Safari and Chrome */
+}
+
+/* -- Prototype faster - Vertical rhythm -- */
+
+body.baseline {
+ background: url(../images/baseline.png) left top .8rem/.8rem;
+}
+/*
+#webslides.vertical {cursor: s-resize; }
+*/
+
+li li {
+ margin-left: 1.6rem;
+}
+
+a,
+a:active,
+a:focus,
+a:visited,
+input:focus,
+textarea:focus,
+button{
+ text-decoration: none;
+ -webkit-transition: all .3s ease-out;
+ transition: all .3s ease-out;
+}
+
+p a:active {
+ position: relative;
+ top: 2px;
+}
+
+nav a[rel="external"] em,
+.hidden {
+ clip: rect(1px, 1px, 1px, 1px);
+ position: absolute !important;
+ height: 1px;
+ width: 1px;
+ overflow: hidden;
+}
+
+/*Layer/Box Shadow*/
+.shadow {
+ position: relative;
+}
+.shadow:before,.shadow:after {
+ z-index: -1;
+ position: absolute;
+ content: "";
+ bottom: 1.6rem;
+ left: 2.4rem;
+ width: 50%;
+ top: 80%;
+ max-width:300px;
+ transform: rotate(-3deg);
+}
+.shadow:after
+{
+ -webkit-transform: rotate(3deg);
+ -moz-transform: rotate(3deg);
+ transform: rotate(3deg);
+ right: 2.4rem;
+ left: auto;
+}
+
+/*=== 1.1 WRAP/CONTAINER === */
+
+.wrap,header nav, footer nav {
+ position: relative;
+ width: 100%;
+ max-width: 100%;
+ margin-right:auto;
+ margin-left: auto;
+ z-index: 2;
+}
+@media (min-width: 1024px) {
+ .wrap,header nav, footer nav {
+ width: 90%;
+ }
+}
+
+.frame,.shadow {
+ padding: 2.4rem;
+}
+
+.radius {border-radius: .4rem;}
+
+.alignright {
+ float: right;
+}
+
+.alignleft {
+ float: left;
+}
+
+.aligncenter {
+ margin-right: auto;
+ margin-left: auto;
+ text-align: center;
+}
+
+img.aligncenter,figure.aligncenter {
+ display: block;
+}
+
+img.alignleft,figure.alignleft,
+img.alignright,figure.alignright,
+img.aligncenter,figure.aligncenter {
+ margin-top: 3.2rem;
+ margin-bottom: 3.2rem;
+}
+
+img.aligncenter,figure.aligncenter {
+ margin-top: .8rem;
+ margin-bottom: .8rem;
+}
+img.alignright,svg.alignright,figure.alignright {
+ margin: .8rem 0 .8rem 2.4rem
+}
+img.alignleft,svg.alignleft,figure.alignleft {
+ margin: .8rem 2.4rem .8rem 0;
+}
+
+@media (min-width: 1024px) {
+
+ /*=== div.size-60, img.size-50, h1.size-40, p.size-30... === */
+ .size-80 {
+ width: 80%;
+ }
+ .size-70 {
+ width: 70%;
+ }
+ .size-60 {
+ width: 60%;
+ }
+ .size-50 {
+ width: 50%;
+ }
+ .size-40 {
+ width: 40%;
+ }
+ .size-30 {
+ width: 30%;
+ }
+ .size-20 {
+ width: 20%;
+ }
+}
+
+pre,
+code {
+ font-family: 'Cousine', monospace;
+}
+
+pre {
+ font-size: 1.6rem;
+ line-height: 2.4rem;
+ white-space: pre-wrap;
+ word-wrap: break-word;
+ text-align: left;
+ padding: 2.4rem;
+ overflow: auto;
+ width: 100%;
+}
+
+pre + p {
+ margin-top: 3.2rem;
+}
+
+code {
+ padding: .4rem;
+}
+
+pre code {
+ padding: 0;
+}
+
+
+/*=== 1.2 Animations ================
+Just 5 basic animations:
+.fadeIn, .fadeInUp, .zoomIn, .slideInLeft, slideInRight
+https://github.com/daneden/animate.css*/
+
+/*-- fadeIn -- */
+@-webkit-keyframes fadeIn {
+ from {
+ opacity: 0;
+ }
+ to {
+ opacity: 1;
+ }
+}
+
+@-moz-keyframes fadeIn {
+ from {
+ opacity: 0;
+ }
+ to {
+ opacity: 1;
+ }
+}
+
+@keyframes fadeIn {
+ from {
+ opacity: 0;
+ }
+ to {
+ opacity: 1;
+ }
+}
+.fadeIn {
+ -webkit-animation: fadeIn 1s;
+ animation: fadeIn 1s;
+}
+
+/*-- fadeInUp -- */
+@-webkit-keyframes fadeInUp {
+ from {
+ opacity: 0;
+ -webkit-transform: translate3d(0, 100%, 0);
+ transform: translate3d(0, 100%, 0);
+ }
+
+ to {
+ opacity: 1;
+ -webkit-transform: none;
+ transform: none;
+ }
+}
+
+@keyframes fadeInUp {
+ from {
+ opacity: 0;
+ -webkit-transform: translate3d(0, 100%, 0);
+ transform: translate3d(0, 100%, 0);
+ }
+
+ to {
+ opacity: 1;
+ -webkit-transform: none;
+ transform: none;
+ }
+}
+
+.fadeInUp {
+ -webkit-animation: fadeInUp 1s;
+ animation: fadeInUp 1s;
+}
+
+/*-- zoomIn -- */
+@-webkit-keyframes zoomIn {
+ from {
+ opacity: 0;
+ -webkit-transform: scale3d(.3, .3, .3);
+ transform: scale3d(.3, .3, .3);
+ }
+
+ 50% {
+ opacity: 1;
+ }
+}
+
+@keyframes zoomIn {
+ from {
+ opacity: 0;
+ -webkit-transform: scale3d(.3, .3, .3);
+ transform: scale3d(.3, .3, .3);
+ }
+
+ 50% {
+ opacity: 1;
+ }
+}
+
+.zoomIn {
+ -webkit-animation: zoomIn 1s;
+ animation: zoomIn 1s;
+}
+
+/*-- slideInLeft -- */
+
+@keyframes slideInLeft {
+ from {
+ transform: translate3d(-100%, 0, 0);
+ visibility: visible;
+ }
+
+ to {
+ transform: translate3d(0, 0, 0);
+ }
+}
+
+.slideInLeft {
+ -webkit-animation: slideInLeft 1s;
+ animation: slideInLeft 1s;
+ animation-fill-mode: both;
+}
+
+/*-- slideInRight -- */
+
+@keyframes slideInRight {
+ from {
+ transform: translate3d(100%, 0, 0);
+ visibility: visible;
+ }
+
+ to {
+ transform: translate3d(0, 0, 0);
+ }
+}
+
+.slideInRight {
+ -webkit-animation: slideInRight 1s;
+ animation: slideInRight 1s;
+ animation-fill-mode: both;
+}
+
+/* Animated Background (Matrix) */
+@-webkit-keyframes anim {
+ 0% {
+ -webkit-transform: translateY(0);
+ transform: translateY(0);
+ }
+ 100% {
+ -webkit-transform: translateY(-1200px);
+ transform: translateY(-1200px);
+ }
+}
+
+@keyframes anim {
+ 0% {
+ -webkit-transform: translateY(0);
+ transform: translateY(0);
+ }
+ 100% {
+ -webkit-transform: translateY(-1200px);
+ transform: translateY(-1200px);
+ }
+}
+/* Duration */
+.slow {
+ -webkit-animation-duration: 4s;
+ animation-duration: 4s;
+}
+.slow + .slow {
+ -webkit-animation-duration: 5s;
+ animation-duration: 5s;
+}
+
+/* Transitions */
+
+header,
+footer,
+#navigation {
+ -webkit-transition: all 0.4s ease-in-out;
+ transition: all 0.4s ease-in-out;
+}
+
+/*=== 1.3 Responsive Media (videos, iframe...) === */
+
+.embed {
+ position: relative;
+ height: 0;
+ overflow: hidden;
+ /*aspect ratio:16:9*/
+ padding-bottom: 56.6%;
+ /*aspect ratio: 4:3*/
+ /*padding-bottom: 75%;*/
+}
+
+.embed iframe,
+.embed object,
+.embed embed,.embed video {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ margin: 0;
+}
+/* -- Responsive background video
+https://fvsch.com/code/video-background/ -- */
+
+.fullscreen > .embed {
+ position: fixed;
+ height: auto;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ padding-bottom: 0;
+}
+
+/* 1. No object-fit support: */
+@media (min-aspect-ratio: 16/9) {
+ .fullscreen > .embed > iframe,
+ .fullscreen > .embed > object,
+ .fullscreen > .embed > embed,
+ .fullscreen > .embed > video {
+ height: 300%;
+ top: -100%;
+ }
+}
+@media (max-aspect-ratio: 16/9) {
+ .fullscreen > .embed > iframe,
+ .fullscreen > .embed > object,
+ .fullscreen > .embed > embed,
+ .fullscreen > .embed > video {
+ width: 300%;
+ left: -100%;
+ }
+}
+/* 2. If supporting object-fit, overriding (1): */
+@supports (object-fit: cover) {
+ .fullscreen > .embed > iframe,
+ .fullscreen > .embed > object,
+ .fullscreen > .embed > embed,
+ .fullscreen > .embed > video {
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ }
+}
+
+/*=== Browser (Screenshots) ================ */
+
+h1 + .browser,
+h2 + .browser,
+p + .browser {
+ margin-top: 4.8rem;
+}
+
+
+/* img */
+
+.browser {
+ overflow: hidden;
+ border-radius: .3rem;
+ max-width: 1024px;
+ margin: 0 auto 3.2rem;
+}
+.browser figcaption {padding: 2.4rem;
+}
+li .browser {margin-bottom: 0;
+}
+
+/*=== Topbar === */
+
+.browser:before {
+ position: absolute;
+ top: 0;
+ left: 0;
+ text-align: left;
+ font-size: .8rem;
+ padding: 1.6rem;
+ width: 100%;
+ line-height: 0;
+ /*copypastecharacter.com/graphic-shapes */
+ content: "● ● ●";
+}
+@media (min-width:768px) {
+ .browser:before {
+ font-size: 1.6rem;
+ }
+}
+.browser img {
+ width: 100%;
+ margin-top: 3.2rem;
+}
+
+/*=== 1.4. Basic Grid (Flexible blocks)
+Auto-fill & Equal height === */
+
+.grid {
+ margin-right: auto;
+ margin-left: auto;
+ display: -webkit-flex;
+ display: flex;
+ -webkit-flex-wrap: wrap;
+ flex-wrap: wrap;
+ clear: both;
+}
+
+.grid:before {
+ content: "";
+ display: table;
+}
+
+.grid:after {
+ clear: both;
+}
+
+.grid > .column {
+ position: relative;
+ width: 100%;
+ display: -webkit-flex;
+ display: flex;
+ flex: auto;
+ -webkit-flex-direction: column;
+ flex-direction: column;
+ -webkit-transition: .3s;
+ transition: .3s;
+ padding: 2.4rem;
+}
+
+.grid.vertical-align .column {
+ justify-content: center;
+}
+
+@media (min-width:768px) {
+ .grid > .column {
+ width: 25%;
+ }
+ /* Grid (Sidebar + Main) .grid.sm */
+ .grid.sm .column:nth-child(1) {
+ width: 30%
+ }
+ .grid.sm .column:nth-child(2) {
+ width: 70%;
+ }
+ /* Grid (Main + Sidebar) .grid.ms */
+ .grid.ms .column:nth-child(1) {
+ width: 70%
+ }
+ .grid.ms .column:nth-child(2) {
+ width: 30%;
+ }
+ /* Grid (Sidebar + Main + Sidebar) .grid.sms */
+ .grid.sms .column:nth-child(2) {
+ width: 50%;
+ }
+}
+
+
+/*============================
+2. TYPOGRAPHY & LISTS
+============================== */
+
+html,
+body {
+ line-height: 1;
+ /*Sometimes fonts don't display optimally on all devices*/
+ /*-moz-osx-font-smoothing: grayscale;*/
+ /*-webkit-font-smoothing: antialiased;*/
+ text-rendering: optimizeLegibility;
+ font-weight: 300;
+}
+
+html,
+body,
+input,
+select,
+textarea {
+ font-family: "Roboto", "San Francisco", helvetica, arial, sans-serif;
+ font-size: 62.5%;
+}
+
+body,
+textarea {
+ font-size: 1.8rem;
+}
+
+p,
+li,
+dt,
+dd,
+time,
+table,
+big,
+textarea,
+label {
+ line-height: 3.2rem;
+ margin-bottom: 3.2rem;
+}
+
+li,p:last-child {
+ margin-bottom: 0;
+}
+
+
+ul>li,ol>li {margin-left: 3.2rem;}
+li li {
+ font-size: 100%;
+}
+
+/*== List .description (Product/Specs) === */
+
+ul.description {
+ padding: 0;
+}
+
+.description + p{
+ margin-top: 3.2rem;
+}
+
+.description li {
+ position: relative;
+ padding-top:.8rem;
+ padding-bottom: .8rem;
+ -webkit-transition: .3s;
+ transition: .3s;
+}
+.description li:hover{
+ padding-left: .4rem;
+}
+ul.description li,.column ul li {list-style: none;margin-left: 0;}
+
+.column ol>li {margin-left: 1.6rem;
+}
+
+h1 svg,
+h2 svg, h3 svg, h4 svg {
+ margin-top: -.8rem;
+}
+.text-intro svg,.text-quote p svg,.wall p svg,.try svg {
+ margin-top: -.4rem;
+}
+.flexblock li h2 svg,.flexblock li h3 svg {margin-top: 0;
+}
+
+h1 {
+ font-size: 4rem;
+ line-height: 5.6rem;
+}
+
+h1 span {
+ font-style: italic;
+}
+
+h2 {
+ font-size: 3.2rem;
+ line-height: 4.8rem;
+}
+
+h3 {
+ font-size: 2.4rem;
+ line-height: 4rem;
+}
+
+h4 {
+ font-size: 2.2rem;
+ line-height: 4rem;
+}
+
+h5 {
+ font-size: 2rem;
+ font-weight: 600;
+ line-height: 3.2rem;
+}
+
+h6 {
+ font-size: 1.8rem;
+ line-height: 3.2rem;
+ font-weight: 600;
+}
+h2.alignleft + p.alignright {margin-top: 1.2rem;margin-bottom: 0;}
+h3.alignleft + p.alignright {margin-top: .4rem;margin-bottom: 0;}
+
+@media (min-width: 768px) {
+ h1 {
+ font-size: 5.6rem;
+ line-height: 7.2rem;
+ }
+ h2 {
+ font-size: 4.8rem;
+ line-height: 6.4rem;
+ }
+ h3 {
+ font-size: 4rem;
+ line-height: 5.6rem;
+ }
+ h4 {
+ font-size: 3.2rem;
+ line-height: 4.8rem;
+ }
+}
+
+h1+h1,h1+h2,h1+h3,h1+h4,h1+h5,h1+h6,
+h2+h1,h2+h2,h2+h3,h2+h4,h2+h5,h2+h6,
+h3+h1,h3+h2,h3+h3,h3+h4,h3+h5,h3+h6,
+h4+h1,h4+h2,h4+h3,h4+h4,h4+h5,h4+h6,
+h5+h1,h5+h2,h5+h3,h5+h4,h5+h5,h5+h6,
+h6+h1,h6+h2,h6+h3,h6+h4,h6+h5,h6+h6 {
+ margin-top: .8rem;
+}
+
+h1+img,h2+img,h3+img {
+ margin-top: 4.8rem;
+ margin-bottom: 4.8rem;
+}
+[class*="content-"] > [class*="content-"] h2,
+[class*="content-"] > [class*="content-"] h3,
+[class*="content-"] > [class*="content-"] h4 {
+ font-size: 2.4rem;
+ line-height: 4rem;
+}
+/*=========================================
+2.1. Headings with background
+=========================================== */
+
+h1[class*="bg-"],h2[class*="bg-"],h3[class*="bg-"],h4[class*="bg-"],
+h5[class*="bg-"],h6[class*="bg-"],ul[class*="bg-"],ol[class*="bg-"],
+li[class*="bg-"],p[class*="bg-"] {
+ padding: 2.4rem;
+}
+
+h1 [class*="bg-"],h2 [class*="bg-"],h3 [class*="bg-"] {
+ padding: .4rem .8rem;
+}
+
+/*=========================================
+2.2. Typography Classes = .text-
+=========================================== */
+
+.text-intro,[class*="content-"] p {
+ font-size: 2.4rem;
+ line-height: 4rem;
+}
+/* -- Serif -- */
+.text-serif, h1 span {
+ font-family: "Maitree", times, serif;
+
+}
+
+/* -- h1,h2... Promo/Landings -- */
+.text-landing {
+ /*font-weight: 600;*/
+ letter-spacing: .4rem;
+ text-transform: uppercase;
+}
+@media (min-width: 768px) {
+ .text-landing {
+ letter-spacing: 1.6rem;
+ }
+}
+/* -- Subtitle (Before h1, h2) --
+p.subtitle + h1/h2 */
+
+p.text-subtitle {
+ font-size: 1.6rem;
+}
+p.text-subtitle svg {vertical-align: text-top;}
+
+.text-subtitle {
+ text-transform: uppercase;
+ letter-spacing: .2rem;
+ margin-bottom: 0;
+}
+.text-subtitle + p {
+ margin-top: 3.2rem;
+}
+
+.text-uppercase {text-transform: uppercase;}
+.text-lowercase {text-transform: lowercase;}
+
+/* -- Emoji (you'll love this) -- */
+
+.text-emoji {
+ font-size: 6.8rem;
+ line-height: 8.8rem;
+}
+
+@media (min-width: 768px) {
+ .text-emoji {
+ font-size: 12.8rem;
+ line-height: 16rem;
+ }
+}
+
+/* -- Numbers (results, sales... 23,478,289 iphones) -- */
+
+.text-data {
+ font-size: 6.4rem;
+ line-height: 8rem;
+ margin-bottom: .8rem;
+}
+
+@media (min-width: 768px) {
+ .text-data {
+ font-size: 15.2rem;
+ line-height: 16.8rem;
+ }
+}
+
+.text-label {
+ font-weight: 600;
+ display: inline-block;
+ width: 12.8rem;
+ text-transform: uppercase;
+}
+
+/* -- Magazine Two Columns -- */
+
+@media (min-width: 768px) {
+ .text-cols {
+ -webkit-column-count: 2;
+ -moz-column-count: 2;
+ column-count: 2;
+ -webkit-column-gap: 4.8rem;
+ -moz-column-gap: 4.8rem;
+ column-gap: 4.8rem;
+ text-align: left;
+ }
+ .text-landing + .text-cols{
+ margin-top: 3.2rem;
+ }
+}
+.text-cols p:first-child:first-letter {
+ font-size: 11rem;
+ font-weight: 600;
+ text-transform: uppercase;
+ float: left;
+ padding: 0;
+ margin: -.4rem 1.6rem 0 0;
+ line-height: 1;
+}
+
+/* -- Heading with border -- */
+
+.text-context {
+ position: relative;
+ /*letter-spacing: .1rem;*/
+}
+.text-context.text-uppercase {
+ letter-spacing: .1rem
+}
+
+.text-context:before {
+ content: "";
+ display: block;
+ width: 12rem;
+ height: .2rem;
+ margin-bottom: .6rem;
+}
+.column .text-context:before {
+ width:100%;
+}
+
+/* -- Separator/Symbols (stars ***...) -- */
+
+.text-symbols {font-weight: 600; letter-spacing: .8rem;text-align: center;
+}
+
+/* -- Separator -- */
+.text-separator {
+ margin-top:2.4rem;
+}
+.text-separator:before {
+ position: absolute;
+ width: 16%;
+ height: .4rem;
+ content: "";
+ margin-top:-1.6rem;
+ left: 0;
+}
+@media (min-width: 568px) {
+ .text-separator {
+ width: 80%;
+ margin-top: 0;
+ margin-left: 20%;
+ }
+ .text-separator:before {
+ margin-top: 1.2rem;
+ }
+}
+
+/* -- Pull Quote (Right/Left) -- */
+
+[class*="text-pull"] {
+ position: relative;
+ font-size: 2.4rem;
+ line-height: 4rem;
+ font-weight: 400;
+ margin-right: 2.4rem;
+ margin-bottom: 3.2rem;
+ margin-left: 2.4rem;
+}
+
+[class*="text-pull-"] {
+ padding-top: 1.4rem;
+ margin-top: .8rem;
+}
+
+@media (min-width: 1024px) {
+ [class*="text-pull"] {
+ margin-right: -4.8rem;
+ margin-left: -4.8rem;
+ }
+}
+@media (min-width: 568px) {
+ [class*="text-pull-"] {
+ max-width: 40%;
+ }
+ .text-pull-right {
+ float: right;
+ margin-right: -2.4rem;
+ margin-left: 2.4rem;
+ }
+ .text-pull-left {
+ float: left;
+ margin-left: -2.4rem;
+ margin-right: 2.4rem;
+ }
+}
+img[class*="text-pull-"],figure[class*="text-pull-"] {
+ padding-top:0;
+ margin-top: .8rem;
+}
+
+/* -- Interviews (Questions & Answers) --- */
+/* --
+- name
+question or answer
+