/*!
 * Name: WebSlides
 * Version: 1.5.0
 * Date: 2017-09-16
 * Description: Making HTML presentations easy
 * URL: https://github.com/webslides/webslides#readme
 * Credits: @jlantunez, @LuisSacristan, @Belelros
 */
 @charset "UTF-8";
 /*-----------------------------------------------------------------------------------
   0. CSS Reset & Normalize
   1. Base
     1.1 Wrap/Container
     1.2 Animations
     1.3 Responsive Media (videos, iframe, screenshots...)
     1.4 Basic Grid (2,3,4 columns)
   2. Typography & Lists
     2.1 Headings with background
     2.2 Classes: .text-
     2.3 San Francisco Font (Apple)
   3. Header & Footer
     3.1 Logo
   4. Navigation
     4.1 Navbars
   5. SLIDES (vertically and horizontally centered)
     5.1 Mini container & Alignment
     5.2 Counter / Navigation Slides
     5.3 Background Images/Video
   6. Magic blocks = .flexblock (Flexible blocks with auto-fill and equal height).
     6.1 .flexblock.features
     6.2 .flexblock.clients
     6.3 .flexblock.steps
     6.4 .flexblock.metrics
     6.5 .flexblock.specs
     6.6 .flexblock.reasons
     6.7 .flexblock.gallery
     6.8 .flexblock.plans
     6.9. flexblock.activity
   7. Promos/Offers (pricing, tagline, CTA...)
   8. Work / Resume / CV
   9. Table of contents
   10. Cards
   11. Quotes
   12. Avatars
   13. Tables
   14. Forms
   15. Longform Elements
   16. Safari Bug (flex-wrap)
   17. Slidex index (aka zoom)
   18. Print
   19. Colors
   20. Audio indicator level
 ----------------------------------------------------------------------------------- */
 /*
 =========================================
 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,
 menu,
 nav,
 output,
 ruby,
 section,
 summary,
 time,
 mark,
 audio,
 video {
   border: 0;
   font: inherit;
   font-size: 100%;
   margin: 0;
   padding: 0;
   vertical-align: baseline; }
 
 article,
 aside,
 details,
 figcaption,
 figure,
 footer,
 header,
 main,
 menu,
 nav,
 section,
 summary {
   display: block; }
 
 body {
   line-height: 1; }
 
 blockquote,
 q {
   quotes: '' ''; }
 
 blockquote:before,
 blockquote:after,
 q:before,
 q:after {
   content: ''; }
 
 table {
   border-collapse: collapse;
   border-spacing: 0;
   margin-bottom: 24px;
   width: 100%; }
 
 html {
   -ms-text-size-adjust: 100%;
   -webkit-text-size-adjust: 100%;
   -webkit-box-sizing: border-box;
           box-sizing: border-box; }
 
 *,
 *::before,
 *::after {
   -webkit-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: .75em;
   height: 0;
   line-height: 2.2em;
   position: relative;
   vertical-align: baseline; }
 
 sup {
   bottom: 1ex; }
 
 sub {
   top: .5ex; }
 
 small {
   font-size: .75em;
   line-height: 1.72; }
 
 big {
   font-size: 1.25em; }
 
 hr {
   border: 0;
   clear: both;
   display: block;
   height: 1px;
   margin: 3.2rem auto;
   text-align: center;
   width: 100%; }
 
 h2 + hr,
 h3 + hr {
   margin-bottom: 4.8rem; }
 
 p + hr {
   margin-bottom: 4rem; }
 
 dfn,
 cite,
 em,
 i {
   font-style: italic; }
 
 abbr,
 acronym {
   cursor: help; }
 
 mark,
 ins {
   padding: 0 4px;
   text-decoration: none;
   text-shadow: none; }
 
 ::-moz-selection {
   text-shadow: none; }
 
 ::selection {
   text-shadow: none; }
 
 img {
   border: 0;
   height: auto;
   max-width: 100%; }
 
 img:hover {
   opacity: .9; }
 
 svg:not(:root) {
   overflow: hidden; }
 
 figure {
   line-height: 0;
   margin: 0;
   position: relative; }
 
 optgroup {
   font-weight: bold; }
 
 td,
 th {
   padding: 0; }
 
 dt {
   font-weight: bold; }
 
 dd {
   margin: 0; }
 
 /*=== Clearing === */
 header:before, header:after,
 main:before,
 main:after,
 section:before,
 section:after,
 aside:before,
 aside:after,
 footer:before,
 footer:after,
 .clear:before,
 .clear:after,
 .wrap:before,
 .wrap:after {
   content: '';
   display: table; }
 
 header:after,
 main:after,
 section:after,
 aside:after,
 footer:after,
 .clear:after,
 .wrap:after {
   clear: both; }
 
 /*=========================================
 1. Base --> Baseline: 8px = .8rem
 =========================================== */
 /* -- Disable elastic scrolling/bounce:
 webslides.js will add .ws-ready automatically. Don't worry :) -- */
 .ws-ready,
 .ws-ready body {
   height: 100%;
   overflow: hidden;
   width: 100%; }
 
 .ws-ready.ws-ready-zoom {
   overflow: visible; }
   .ws-ready.ws-ready-zoom body {
     overflow: auto; }
 
 #webslides {
   -ms-overflow-style: none;
   -webkit-overflow-scrolling: touch;
   height: 100vh;
   overflow-x: hidden;
   overflow-y: scroll; }
   #webslides::-webkit-scrollbar {
     display: none; }
 
 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);
   height: 1px;
   overflow: hidden;
   position: absolute;
   width: 1px; }
 
 .shadow {
   position: relative; }
   .shadow:before, .shadow:after {
     bottom: 1.6rem;
     content: '';
     max-width: 300px;
     position: absolute;
     top: 80%;
     width: 50%;
     z-index: -1; }
   .shadow:after {
     right: 2.4rem;
     -webkit-transform: rotate(3deg);
             transform: rotate(3deg); }
   .shadow:before {
     left: 2.4rem;
     -webkit-transform: rotate(-3deg);
             transform: rotate(-3deg); }
 
 /*=== 1.1 WRAP/CONTAINER === */
 .wrap,
 header nav,
 footer nav {
   margin-left: auto;
   margin-right: auto;
   max-width: 100%;
   position: relative;
   width: 100%;
   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-left: auto;
   margin-right: auto;
   text-align: center; }
 
 img.aligncenter,
 figure.aligncenter {
   display: block;
   margin-bottom: .8rem;
   margin-top: .8rem; }
 
 img.alignleft,
 figure.alignleft,
 img.alignright,
 figure.alignright,
 img.aligncenter,
 figure.aligncenter {
   margin-bottom: 3.2rem;
   margin-top: 3.2rem; }
 
 img.alignright,
 svg.alignright,
 figure.alignright {
   margin: .8rem 0 .8rem 2.4rem; }
 
 img.alignleft,
 svg.alignleft,
 figure.alignleft {
   margin: .8rem 2.4rem .8rem 0; }
 
 /*=== div.size-60, img.size-50, h1.size-40, p.size-30... === */
 @media (min-width: 1024px) {
   .size-80 {
     width: 80%; }
   .size-70 {
     width: 70%; }
   .size-60 {
     width: 60%; }
   .size-50 {
     width: 50%; }
   .size-40 {
     width: 40%; }
   .size-30 {
     width: 25%; }
   .size-20 {
     width: 20%; } }
 
 pre,
 code {
   font-family: 'Tenor Sans', sans-serif; }
 
 pre {
   font-size: 1.6rem;
   line-height: 2.4rem;
   overflow: auto;
   padding: 2.4rem;
   text-align: left;
   white-space: pre-wrap;
   width: 100%;
   word-wrap: break-word; }
   pre + p {
     margin-top: 3.2rem; }
   pre code {
     padding: 0; }
 
 code {
   padding: .4rem; }
 
 /* === 1.2 Animations ================
 Just 5 basic animations:
 .fadeIn, .fadeInUp, .zoomIn, .slideInLeft, and .slideInRight
 https://github.com/daneden/animate.css */
 /*-- fadeIn -- */
 @-webkit-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 {
     -webkit-transform: scale3d(0.3, 0.3, 0.3);
             transform: scale3d(0.3, 0.3, 0.3); }
   50% {
     opacity: 1; } }
 @keyframes zoomIn {
   from {
     -webkit-transform: scale3d(0.3, 0.3, 0.3);
             transform: scale3d(0.3, 0.3, 0.3); }
   50% {
     opacity: 1; } }
 
 .zoomIn {
   -webkit-animation: zoomIn 1s;
           animation: zoomIn 1s; }
 
 /*-- slideInLeft -- */
 @-webkit-keyframes slideInLeft {
   from {
     -webkit-transform: translate3d(-100%, 0, 0);
             transform: translate3d(-100%, 0, 0);
     visibility: visible; }
   to {
     -webkit-transform: translate3d(0, 0, 0);
             transform: translate3d(0, 0, 0); } }
 @keyframes slideInLeft {
   from {
     -webkit-transform: translate3d(-100%, 0, 0);
             transform: translate3d(-100%, 0, 0);
     visibility: visible; }
   to {
     -webkit-transform: translate3d(0, 0, 0);
             transform: translate3d(0, 0, 0); } }
 
 .slideInLeft {
   -webkit-animation: slideInLeft 1s;
           animation: slideInLeft 1s;
   -webkit-animation-fill-mode: both;
           animation-fill-mode: both; }
 
 /*-- slideInRight -- */
 @-webkit-keyframes slideInRight {
   from {
     -webkit-transform: translate3d(100%, 0, 0);
             transform: translate3d(100%, 0, 0);
     visibility: visible; }
   to {
     -webkit-transform: translate3d(0, 0, 0);
             transform: translate3d(0, 0, 0); } }
 @keyframes slideInRight {
   from {
     -webkit-transform: translate3d(100%, 0, 0);
             transform: translate3d(100%, 0, 0);
     visibility: visible; }
   to {
     -webkit-transform: translate3d(0, 0, 0);
             transform: translate3d(0, 0, 0); } }
 
 .slideInRight {
   -webkit-animation: slideInRight 1s;
           animation: slideInRight 1s;
   -webkit-animation-fill-mode: both;
           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; }
 
 /*=== 1.3 Responsive Media (videos, iframe...) === */
 .embed {
   height: 0;
   overflow: hidden;
   /*aspect ratio:16:9*/
   padding-bottom: 56.6%;
   /*aspect ratio: 4:3*/
   /*padding-bottom: 75%;*/
   position: relative;
   /* -- Responsive background video
   https://fvsch.com/code/video-background/ -- */ }
   .embed iframe,
   .embed object,
   .embed embed,
   .embed video {
     height: 100%;
     left: 0;
     margin: 0;
     position: absolute;
     top: 0;
     width: 100%; }
   .fullscreen > .embed {
     bottom: 0;
     height: auto;
     left: 0;
     padding-bottom: 0;
     position: fixed;
     right: 0;
     top: 0;
     /* 1. No object-fit support: */ }
     .fullscreen > .embed > iframe,
     .fullscreen > .embed > object,
     .fullscreen > .embed > embed,
     .fullscreen > .embed > video {
       /* 2. If supporting object-fit, overriding (1): */ }
       @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 {
           left: -100%;
           width: 300%; } }
       @supports ((-o-object-fit: cover) or (object-fit: cover)) {
         .fullscreen > .embed > iframe,
         .fullscreen > .embed > object,
         .fullscreen > .embed > embed,
         .fullscreen > .embed > video {
           height: 100%;
           left: 0;
           -o-object-fit: cover;
              object-fit: cover;
           top: 0;
           width: 100%; } }
 
 /*=== HTML Browser (Screenshots) ================ */
 /* <figure class="browser"> img </figure> */
 .browser {
   border-radius: .3rem;
   margin: 0 auto 3.2rem;
   max-width: 1024px;
   overflow: hidden; }
   li .browser {
     margin-bottom: 0; }
   h1 + .browser,
   h2 + .browser,
   p + .browser {
     margin-top: 4.8rem; }
   .browser figcaption {
     padding: 2.4rem; }
   .browser:before {
     content: '\25CF   \25CF   \25CF';
     font-size: .8rem;
     left: 0;
     line-height: 0;
     padding: 1.6rem;
     position: absolute;
     text-align: left;
     top: 0;
     width: 100%; }
     @media (min-width: 768px) {
       .browser:before {
         font-size: 1.6rem; } }
 
 /*=== 1.4. Basic Grid (Flexible blocks)
 Auto-fill & Equal height === */
 .grid {
   clear: both;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -ms-flex-wrap: wrap;
       flex-wrap: wrap;
   margin-left: auto;
   margin-right: auto; }
   .grid:after {
     clear: both; }
   .grid:before {
     content: '';
     display: table; }
   .grid > .column {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-flex: 1;
         -ms-flex: auto;
             flex: auto;
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
         -ms-flex-direction: column;
             flex-direction: column;
     padding: 2.4rem;
     position: relative;
     -webkit-transition: .3s;
     transition: .3s;
     width: 100%; }
   .grid.vertical-align .column {
     -webkit-box-pack: center;
         -ms-flex-pack: center;
             justify-content: center; }
   @media (min-width: 768px) {
     .grid > .column {
       width: 25%; }
     .grid.sm .column:nth-child(1) {
       width: 30%; }
     .grid.sm .column:nth-child(2) {
       width: 70%; }
     .grid.ms .column:nth-child(1) {
       width: 70%; }
     .grid.ms .column:nth-child(2) {
       width: 30%; }
     .grid.sms .column:nth-child(2) {
       width: 50%; } }
 
 /*============================
 2. TYPOGRAPHY & LISTS
 ============================== */
 html,
 body {
  /*  background-color: white; */
   font-weight: 300;
   line-height: 1;
   text-rendering: optimizeLegibility; }
 
 html,
 body,
 input,
 select,
 textarea {
   font-family: 'Tenor Sans', 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; }
   ul.description + p {
     margin-top: 3.2rem; }
   ul.description li {
     padding-bottom: .8rem;
     padding-top: .8rem;
     position: relative;
     -webkit-transition: .3s;
     transition: .3s; }
   ul.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; }
 
 h1 {
   font-size: 4rem;
   line-height: 5.6rem; }
   @media (min-width: 768px) {
     h1 {
       font-size: 5.6rem;
       line-height: 7.2rem; } }
 
 h1 span {
   font-style: italic; }
 
 h2 {
   font-size: 3.2rem;
   line-height: 4.8rem; }
   @media (min-width: 768px) {
     h2 {
       font-size: 4.8rem;
       line-height: 6.4rem; } }
 
 h3 {
   font-size: 2.4rem;
   line-height: 4rem; }
   @media (min-width: 768px) {
     h3 {
       font-size: 4rem;
       line-height: 5.6rem; } }
 
 h4 {
   font-size: 2.2rem;
   line-height: 4rem; }
   @media (min-width: 768px) {
     h4 {
       font-size: 3.2rem;
       line-height: 4.8rem; } }
 
 h5 {
   font-size: 2rem;
   font-weight: 600;
   line-height: 3.2rem; }
 
 h6 {
   font-size: 1.8rem;
   font-weight: 600;
   line-height: 3.2rem; }
 
 h2.alignleft + p.alignright {
   margin-bottom: 0;
   margin-top: 1.2rem; }
 
 h3.alignleft + p.alignright {
   margin-bottom: 0;
   margin-top: .4rem; }
 
 h1 + h1 {
   margin-top: .8rem; }
 
 h1 + h2 {
   margin-top: .8rem; }
 
 h1 + h3 {
   margin-top: .8rem; }
 
 h1 + h4 {
   margin-top: .8rem; }
 
 h1 + h5 {
   margin-top: .8rem; }
 
 h1 + h6 {
   margin-top: .8rem; }
 
 h2 + h1 {
   margin-top: .8rem; }
 
 h2 + h2 {
   margin-top: .8rem; }
 
 h2 + h3 {
   margin-top: .8rem; }
 
 h2 + h4 {
   margin-top: .8rem; }
 
 h2 + h5 {
   margin-top: .8rem; }
 
 h2 + h6 {
   margin-top: .8rem; }
 
 h3 + h1 {
   margin-top: .8rem; }
 
 h3 + h2 {
   margin-top: .8rem; }
 
 h3 + h3 {
   margin-top: .8rem; }
 
 h3 + h4 {
   margin-top: .8rem; }
 
 h3 + h5 {
   margin-top: .8rem; }
 
 h3 + h6 {
   margin-top: .8rem; }
 
 h4 + h1 {
   margin-top: .8rem; }
 
 h4 + h2 {
   margin-top: .8rem; }
 
 h4 + h3 {
   margin-top: .8rem; }
 
 h4 + h4 {
   margin-top: .8rem; }
 
 h4 + h5 {
   margin-top: .8rem; }
 
 h4 + h6 {
   margin-top: .8rem; }
 
 h5 + h1 {
   margin-top: .8rem; }
 
 h5 + h2 {
   margin-top: .8rem; }
 
 h5 + h3 {
   margin-top: .8rem; }
 
 h5 + h4 {
   margin-top: .8rem; }
 
 h5 + h5 {
   margin-top: .8rem; }
 
 h5 + h6 {
   margin-top: .8rem; }
 
 h6 + h1 {
   margin-top: .8rem; }
 
 h6 + h2 {
   margin-top: .8rem; }
 
 h6 + h3 {
   margin-top: .8rem; }
 
 h6 + h4 {
   margin-top: .8rem; }
 
 h6 + h5 {
   margin-top: .8rem; }
 
 h6 + h6 {
   margin-top: .8rem; }
 
 h1 + img,
 h2 + img,
 h3 + img {
   margin-bottom: 4.8rem;
   margin-top: 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-'] {
   padding: 2.4rem; }
 
 h2[class*='bg-'] {
   padding: 2.4rem; }
 
 h3[class*='bg-'] {
   padding: 2.4rem; }
 
 h4[class*='bg-'] {
   padding: 2.4rem; }
 
 h5[class*='bg-'] {
   padding: 2.4rem; }
 
 h6[class*='bg-'] {
   padding: 2.4rem; }
 
 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: 'Tenor Sans', sans-serif; }
 
 /* -- h1,h2... Promo/Landings -- */
 .text-landing {
   letter-spacing: .2rem;
   text-transform: uppercase; }
   @media (min-width: 768px) {
     .text-landing {
       letter-spacing: 1.2rem; } }
 
 /* -- Subtitle (Before h1, h2) p.subtitle + h1/h2 */
 .text-subtitle {
   letter-spacing: .2rem;
   margin-bottom: 0;
   text-transform: uppercase; }
   .text-subtitle p.text-subtitle {
     font-size: 1.6rem; }
     .text-subtitle p.text-subtitle svg {
       vertical-align: text-top; }
   .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 {
   display: inline-block;
   font-weight: 600;
   text-transform: uppercase;
   width: 12.8rem; }
 
 /* -- Magazine Two Columns -- */
 @media (min-width: 768px) {
   .text-cols {
     -webkit-column-count: 2;
             column-count: 2;
     -webkit-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 {
   float: left;
   font-size: 11rem;
   font-weight: 600;
   line-height: 1;
   margin: -.4rem 1.6rem 0 0;
   padding: 0;
   text-transform: uppercase; }
 
 /* -- Heading with border -- */
 .text-context {
   position: relative; }
   .text-context:before {
     content: '';
     display: block;
     height: .2rem;
     margin-bottom: .6rem;
     width: 12rem; }
     .column .text-context:before {
       width: 100%; }
   .text-context.text-uppercase {
     letter-spacing: .1rem; }
 
 /* -- Separator/Symbols (stars ***...) -- */
 .text-symbols {
   font-weight: 600;
   letter-spacing: .8rem;
   text-align: center; }
 
 .text-separator {
   margin-top: 2.4rem; }
   .text-separator:before {
     content: '';
     height: .4rem;
     left: 0;
     margin-top: -1.6rem;
     position: absolute;
     width: 16%; }
   @media (min-width: 568px) {
     .text-separator {
       margin-left: 20%;
       margin-top: 0;
       width: 80%; }
       .text-separator:before {
         margin-top: 1.2rem; } }
 
 /* -- Pull Quote (Right/Left)  -- */
 [class*='text-pull'] {
   font-size: 2.4rem;
   font-weight: 400;
   line-height: 4rem;
   margin-bottom: 3.2rem;
   margin-left: 2.4rem;
   margin-right: 2.4rem;
   position: relative; }
 
 [class*='text-pull-'] {
   margin-top: .8rem;
   padding-top: 1.4rem; }
   @media (min-width: 1024px) {
     [class*='text-pull-'] {
       margin-left: -4.8rem;
       margin-right: -4.8rem; } }
 
 @media (min-width: 568px) {
   [class*='text-pull-'] {
     max-width: 40%; }
   .text-pull-right {
     float: right;
     margin-left: 2.4rem;
     margin-right: -2.4rem; }
   .text-pull-left {
     float: left;
     margin-left: -2.4rem;
     margin-right: 2.4rem; } }
 
 img[class*='text-pull-'],
 figure[class*='text-pull-'] {
   margin-top: .8rem;
   padding-top: 0; }
 
 /* -- Interviews (Questions & Answers)  --- */
 /* -- <dl class="text-interview">
 <dt>name</dt>
 <dd><p>question or answer</p>
 </dd>
 --- */
 .text-interview dt {
   font-weight: 600;
   margin-bottom: 0;
   text-transform: uppercase; }
 
 @media (min-width: 1024px) {
   .text-interview dt {
     margin-left: -34%;
     position: absolute;
     text-align: right;
     white-space: nowrap;
     width: 30%; } }
 
 /* -- Info Messages (error, warning, success... -- */
 .text-info {
   font-size: 1.6rem;
   line-height: 2.4rem; }
 
 /*=========================================
 2.1. San Francisco Font (Apple's new font)
 =========================================== */
 
 
 /*=========================================
 3. Header & Footer
 =========================================== */
 /* -- If you want an unique, global header/footer,read this:
 https://github.com/webslides/webslides/issues/57 -- */
 header,
 footer,
 #navigation {
   padding: 2.4rem;
   -webkit-transition: all .4s ease-in-out;
   transition: all .4s ease-in-out;
   width: 100%; }
 
 header p,
 footer p {
   line-height: 4.8rem;
   margin-bottom: 0; }
 
 header[role='banner'] img,
 footer img {
   height: 4rem;
   vertical-align: middle; }
 
 footer {
   position: relative; }
 
 header,
 footer {
   z-index: 3; }
 
 header,
 .ws-ready footer {
   left: 0;
   position: absolute;
   top: 0; }
 
 .ws-ready footer {
   bottom: 0;
   top: auto; }
 
 header[role='banner'] {
   opacity: 0; }
   header[role='banner']:hover {
     opacity: 1; }
 
 @media (max-width: 767px) {
   footer .alignleft,
   footer .alignright {
     display: block;
     float: none; } }
 
 /*=== 3.1. Logo === */
 .logo {
   text-transform: lowercase; }
   .logo a {
     background: url("../images/logos/logo.svg") no-repeat 0 0;
     background-size: 4.8rem;
     float: left;
     height: 4.8rem;
     text-indent: -4000px;
     /*If you remove text-indent and add: */
     /*padding-left: 6rem;*/
     vertical-align: middle;
     width: 4.8rem; }
 
 /*=========================================
 4. Navigation
 =========================================== */
 /*=== 4.1. Navbars === */
 nav ul {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -ms-flex-wrap: wrap;
       flex-wrap: wrap;
   /*====align left====*/
   -webkit-box-pack: start;
       -ms-flex-pack: start;
           justify-content: flex-start;
   /* ==== align center ====*/
   /*justify-content: center; */
   /*====align right====*/
   /* justify-content: flex-end; */
   /*====separated columns li a====*/
   /* justify-content: space-between; */
   /*====separated columns centered li a====*/
   /*justify-content: space-around;*/ }
   nav ul li {
     float: left;
     list-style: none;
     position: relative; }
 
 nav ul li:first-child,
 nav[role='navigation'] ul li {
   margin-left: 0; }
 
 nav[role='navigation'] li a {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-pack: center;
       -ms-flex-pack: center;
           justify-content: center;
   line-height: 4.8rem;
   max-width: 100%;
   padding: 0 1.6rem;
   position: relative;
   text-decoration: none; }
   nav[role='navigation'] li a svg {
     margin: 1.5rem .4rem 1.5rem 0; }
 
 header nav ul {
   -webkit-box-pack: end;
       -ms-flex-pack: end;
           justify-content: flex-end;
   margin: 0; }
 
 nav.aligncenter ul,
 .aligncenter nav ul {
   /* ==== align center ====*/
   -webkit-box-pack: center;
       -ms-flex-pack: center;
           justify-content: center; }
 
 nav.navbar ul li {
   /*====full float li a ====*/
   -webkit-box-flex: 1;
       -ms-flex: 1 1 auto;
           flex: 1 1 auto; }
 
 @media (max-width: 568px) {
   nav.navbar ul {
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
         -ms-flex-flow: column wrap;
             flex-flow: column wrap;
     padding: 0; }
   nav.navbar li a {
     -webkit-box-pack: start;
         -ms-flex-pack: start;
             justify-content: flex-start; } }
 
 /*============================================
 5. SLIDES (Full Screen)
 Vertically and horizontally centered
 ============================================== */
 /* Fade transition to all slides.
 * = All HTML elements will have those styles.*/
 section * {
   -webkit-animation: fadeIn .6s ease-in-out;
           animation: fadeIn .6s ease-in-out; }
 
 section .background,
 section .light,
 section .dark {
   -webkit-animation-duration: 0s;
           animation-duration: 0s; }
 
 /*=== Section = Slide === */
 section,
 .slide {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
       -ms-flex-direction: column;
           flex-direction: column;
   -webkit-box-pack: center;
       -ms-flex-pack: center;
           justify-content: center;
   min-height: 100vh;
   /*Fullscreen*/
   /* Prototyping? min-height: 720px (Baseline: 8px = .8rem)*/
   padding: 2.4rem;
   /*Fixed/Visible header? padding-top: 12rem; */
   page-break-after: always;
   position: relative;
   word-wrap: break-word; }
   @media (min-width: 1024px) {
     section,
     .slide {
       padding-bottom: 12rem;
       padding-top: 12rem; } }
 
 /*slide with no padding (full card, .embed youtube video...) */
 .fullscreen {
   padding: 0;
   /* Fixed/Visible header?
   padding:8.2rem 0 0 0;
   */ }
 
 /* slide alignment - top */
 .slide-top {
   -webkit-box-pack: start;
       -ms-flex-pack: start;
           justify-content: flex-start; }
 
 /* slide alignment - bottom */
 .slide-bottom {
   -webkit-box-pack: end;
       -ms-flex-pack: end;
           justify-content: flex-end; }
 
 /*== 5.1. Mini container width:50%
 Aligned items [class*="content-"]=== */
 [class*='content-'] {
   position: relative;
   text-align: left; }
 
 .wrap[class*='bg-'],
 .wrap.frame,
 [class*='content-'][class*='bg-'],
 [class*='content-'].frame,
 [class*='align'][class*='bg-'] {
   padding: 4.8rem; }
 
 form[class*='bg-'] {
   padding: 2.4rem; }
 
 [class*='content-'] > [class*='content-'] p {
   font-size: 1.8rem;
   line-height: 3.2rem; }
 
 .content-center {
   margin: 0 auto;
   text-align: center; }
 
 @media (min-width: 768px) {
   [class*='content-'] {
     width: 50%; }
     [class*='content-']:after, [class*='content-']:before {
       content: '';
       display: table; }
     [class*='content-']:after {
       clear: both; }
   .content-left {
     float: left; }
   .content-right {
     float: right; }
   [class*='content-'] + [class*='content-'] {
     margin-bottom: 4.8rem;
     padding-left: 2.4rem; }
   [class*='content-'] + [class*='size-'] {
     clear: both;
     margin-top: 6.4rem; } }
 
 /*=== 5.3 Slides - Background Images/Videos === */
 .background,
 [class*='background-'] {
   background-repeat: no-repeat;
   bottom: 0;
   left: 0;
   position: absolute;
   right: 0;
   top: 0; }
 
 /*=== BG Positions === */
 .background {
   background-position: center;
   background-size: cover;
   /*fullscreen video
     <video class="background-video">
   */ }
   .background-top {
     background-position: top;
     background-size: cover; }
   .background-bottom {
     background-position: bottom;
     background-size: cover; }
   .background-center {
     background-position: center; }
   .background-center-top {
     background-position: center top; }
   .background-right-top {
     background-position: right top; }
   .background-left-top {
     background-position: left top; }
   .background-center-bottom, .background-left-bottom, .background-right-bottom, .background-left, .background-right {
     background-position: center bottom; }
   @media (min-width: 1024px) {
     .background-left-bottom {
       background-position: left bottom; }
     .background-right-bottom {
       background-position: right bottom; }
     .background-right {
       background-position: right; }
     .background-left {
       background-position: left; } }
   .background-video {
     height: 100%;
     -o-object-fit: fill;
        object-fit: fill;
     width: 100%; }
 
 /*=== bg image/video overlay === */
 /*-- [class*="bg-"] .background.dark, [class*="bg-"] .embed.dark...  -- */
 [class*='bg-'] .light,
 [class*='bg-'] .light {
   opacity: .8; }
 
 [class*='bg-'] .dark,
 [class*='bg-'] .dark {
   opacity: .2; }
 
 [class*='bg-'] .background-video.dark {
   opacity: .5; }
 
 @media (max-width: 1023px) {
   [class*='background-'] {
     -webkit-animation: fadeIn ease-in .2;
             animation: fadeIn ease-in .2;
     opacity: .2; }
   .background-video {
     opacity: .8; } }
 
 /*=== Animated Background Image === */
 .background.anim {
   -webkit-animation: anim 80s linear infinite;
           animation: anim 80s linear infinite;
   background-position: center top;
   background-repeat: repeat;
   background-size: 100%;
   height: 200%; }
 
 /*=== Background with a frame === */
 /*<span class="background" style="background-image:url('image.jpg')"></span>
 <span class="background frame"></span>*/
 [class*='background'].frame {
   margin: 2.4rem; }
 
 /* === 5.2 Counter / Navigation Slides  === */
 #navigation {
   -webkit-animation: fadeIn 8s;
           animation: fadeIn 8s;
   bottom: 0;
   left: 0;
   margin-left: auto;
   margin-right: auto;
   opacity: 0;
   position: fixed;
   right: 0;
   width: 24.4rem;
   /* hover/visibility */
   z-index: 4; }
   #navigation:hover {
     opacity: 1; }
   #navigation p {
     margin-bottom: 0; }
 
 #counter {
   display: block;
   line-height: 4.8rem;
   margin-left: auto;
   margin-right: auto;
   position: relative;
   text-align: center;
   width: 10rem; }
   #counter a:hover {
     padding: .8rem; }
 
 a#next,
 a#previous {
   border-radius: .4rem;
   cursor: pointer;
   font-size: 2.4rem;
   height: 4rem;
   padding: .8rem;
   position: absolute;
   text-align: center;
   width: 4rem; }
 
 a#next {
   right: 3.2rem; }
 
 a#previous {
   left: 3.2rem; }
 
 @media (max-width: 1024px) {
   #navigation {
     -webkit-animation: fadeIn 4s;
             animation: fadeIn 4s;
     background: url("../images/swipe.svg") no-repeat center top;
     background-size: 7.5rem; }
   #navigation a,
   #counter {
     display: none; } }
 
 /*===============================================================
 6. Magic blocks with flexbox (Auto-fill & Equal Height)
 Blocks Links li>a = .flexblock.blink (.blink required)
 ================================================================= */
 .flexblock {
   clear: both;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -ms-flex-wrap: wrap;
       flex-wrap: wrap;
   margin-left: auto;
   margin-right: auto;
   padding: 0; }
   .flexblock:after {
     clear: both; }
   .flexblock:before {
     content: '';
     display: table; }
   .flexblock li,
   .flexblock.blink li > a {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
         -ms-flex-direction: column;
             flex-direction: column;
     margin: 0;
     padding: 2.4rem;
     position: relative; }
   .flexblock li {
     -webkit-box-flex: 1;
         -ms-flex: auto;
             flex: auto;
     text-align: left;
     -webkit-transition: .3s;
     transition: .3s;
     width: 100%; }
     .flexblock li:hover {
       -webkit-transform: translateY(-0.2rem);
               transform: translateY(-0.2rem); }
     @media (min-width: 600px) {
       .flexblock li {
         width: 50%; } }
     @media (min-width: 1024px) {
       .flexblock li {
         width: 25%; } }
   .flexblock.aligncenter li {
     text-align: center; }
   .flexblock.vertical-align li {
     -webkit-box-pack: center;
         -ms-flex-pack: center;
             justify-content: center; }
   .flexblock.blink li {
     padding: 0; }
   .flexblock li h2 svg,
   .flexblock li h3 svg {
     margin-top: 0; }
 
 h1 + .flexblock,
 h2 + .flexblock,
 h3 + .flexblock,
 div + ul,
 div + ol {
   margin-top: 3.2rem; }
 
 .flexblock li h2,
 .flexblock li h3,
 footer .column h2,
 footer .column h3 {
   font-size: 1.8rem;
   font-weight: 600;
   line-height: 3.2rem;
   margin-bottom: 0; }
 
 .flexblock li li,
 .flexblock.blink li li {
   padding: 0;
   width: 100%; }
 
 [class*='content-'] .flexblock li p {
   font-size: 1.8rem;
   line-height: 3.2rem; }
 
 .content-right .flexblock.features li,
 .content-left .flexblock.features li {
   width: 46%; }
 
 /*====================================================================
 6.1 Features <ul class="flexblock features">
 ====================================================================== */
 .flexblock.features > li {
   border-radius: .4rem;
   margin-bottom: 4.8rem;
   width: 100%; }
 
 .flexblock.features li h2 {
   text-transform: uppercase; }
 
 .flexblock.features li span {
   font-weight: 300; }
 
 .flexblock.features li p {
   margin: 0; }
 
 .flexblock.features li p em {
   display: block; }
 
 .flexblock.features li span,
 .flexblock.features li svg {
   display: block;
   font-size: 6.4rem;
   line-height: 1;
   margin: 0; }
 
 .flexblock.features li img {
   width: 6.4rem; }
 
 .flexblock.features li span sup {
   font-size: 3rem; }
 
 @media (min-width: 1200px) {
   .flexblock.features li span,
   .flexblock.features li svg,
   .flexblock.features li img {
     float: left;
     margin-right: .8rem; } }
 
 @media (min-width: 768px) {
   .flexblock.features {
     margin-left: -2%;
     margin-right: -2%; }
   .flexblock.features > li {
     margin-left: 2%;
     margin-right: 2%;
     width: 29%; }
   .size-50 .flexblock.features > li {
     width: 46%; }
   .column .flexblock.features > li {
     width: 100%; }
   footer .flexblock.features > li {
     margin-bottom: 0; } }
 
 /*=====================================================================
 6.2 Clients Logos <ul class="flexblock clients">
 ======================================================================= */
 .flexblock.clients.blink li > a,
 .flexblock.clients li {
   padding: 0; }
 
 .flexblock.clients li figcaption {
   padding: 0 2.4rem 2.4rem; }
 
 .flexblock.clients.border li figcaption {
   padding-top: 2.4rem; }
 
 .clients.blink li > a,
 .clients li {
   -webkit-box-pack: inherit;
       -ms-flex-pack: inherit;
           justify-content: inherit; }
 
 .clients li img,
 .clients li svg {
   display: block;
   padding: 2.4rem; }
 
 .clients.border li img,
 .clients.border li svg {
   display: block;
   margin-left: auto;
   margin-right: auto; }
 
 .clients li:hover {
   z-index: 1; }
 
 /*==================================================
 6.3 flexblock.steps <ul class="flexblock steps">
 About, Philosophy...
 =================================================== */
 .steps li {
   width: 100%; }
   .steps li img,
   .steps li span {
     display: block;
     margin: 0 auto .8rem; }
   .steps li span {
     font-size: 6.4rem; }
   @media (min-width: 768px) {
     .steps li {
       width: 50%; } }
 
 @media (min-width: 1024px) {
   .steps li {
     width: 25%; }
   .process {
     border-left-style: solid;
     border-left-width: 15px;
     height: 0;
     left: 0;
     position: absolute;
     top: 60px;
     width: 0; } }
 
 /*=================================================
 6.4 Block Numbers - <ul class="flexblock metrics">
 =================================================== */
 .metrics li {
   text-align: center;
   width: 100%; }
   @media (min-width: 568px) {
     .metrics li {
       width: 50%; } }
   @media (min-width: 1024px) {
     .metrics li {
       width: 25%; } }
 
 .metrics li strong {
   display: block; }
 
 .metrics li span,
 .metrics li svg {
   display: block;
   font-size: 6.4rem;
   line-height: 7.2rem;
   margin: 0 auto; }
 
 .card-50 .metrics li {
   width: 50%; }
 
 /*=====================================================
 6.5 Specs/Items: <ul class="flexblock specs">
 ======================================================= */
 .specs li {
   text-align: left;
   width: 100%; }
   .specs li:after {
     bottom: -2.4rem;
     content: '';
     display: block;
     height: 1px;
     position: relative; }
   .specs li:hover {
     -webkit-transform: translateX(0.2rem);
             transform: translateX(0.2rem); }
   .specs li span,
   .specs li svg {
     display: block;
     font-size: 6.4rem;
     line-height: 1;
     margin: 0; }
   .specs li img {
     width: 6.4rem; }
   .specs li span {
     font-weight: 300; }
     .specs li span sup {
       font-size: 3rem; }
   @media (min-width: 1024px) {
     .specs li span,
     .specs li svg,
     .specs li img {
       float: left;
       margin-right: 2.4rem; } }
 
 /*=================================================
 6.6 Reasons/Why/Numbers (counter-increment)
 <ul class="flexblock reasons">
 =================================================== */
 .flexblock.reasons li {
   counter-increment: list;
   text-align: left;
   width: 100%; }
   .flexblock.reasons li:hover {
     -webkit-transform: translateY(-0.2rem);
             transform: translateY(-0.2rem); }
   .flexblock.reasons li:after {
     bottom: -2.4rem;
     content: '';
     display: block;
     height: 1px;
     position: relative; }
   .flexblock.reasons li:before {
     content: counter(list) ".";
     font-size: 6.4rem;
     line-height: 1; }
   @media (min-width: 768px) {
     .flexblock.reasons li {
       padding-left: 8.8rem;
       /* You need two digits? (1-10)*/
       /*padding-left: 12rem; */ }
       .flexblock.reasons li:before {
         left: 2.4rem;
         position: absolute; } }
 
 /*=================================================
 6.7 Gallery - <ul class="flexblock gallery">
 Block Thumbnails li+.overlay+image
 img size recommended:800x600px
 =================================================== */
 .flexblock.gallery li {
   margin-bottom: 4.8rem; }
   .flexblock.gallery li:nth-child(n+4) {
     -webkit-box-flex: inherit;
         -ms-flex: inherit;
             flex: inherit; }
   .flexblock.gallery li figcaption {
     padding: 1.6rem;
     position: relative; }
     .flexblock.gallery li figcaption:before {
       content: '';
       height: 0;
       left: 20%;
       margin-left: -.5em;
       position: absolute;
       top: .4rem;
       -webkit-transform: rotate(135deg);
               transform: rotate(135deg);
       -webkit-transform-origin: 0 0;
               transform-origin: 0 0;
       -webkit-transition: .1s;
       transition: .1s;
       width: 0; }
   .flexblock.gallery li:hover figcaption:before {
     top: .3rem; }
 
 .aligncenter .flexblock.gallery li figcaption:before {
   left: 55%;
   margin-left: 0; }
 
 .flexblock.gallery li,
 .flexblock.gallery.blink li > a {
   padding: 0; }
 
 .flexblock.gallery h2 {
   text-transform: uppercase; }
 
 .flexblock.gallery h2 + p,
 .flexblock.gallery h3 + p {
   margin-top: .8rem; }
 
 .flexblock.gallery p {
   font-size: 1.6rem;
   line-height: 2.4rem;
   margin-bottom: 0; }
 
 .flexblock.gallery li footer {
   margin-top: .8rem;
   padding: 1.2rem 0 0;
   position: relative; }
 
 .flexblock.gallery li img {
   display: block;
   margin-left: auto;
   margin-right: auto; }
 
 @media (min-width: 600px) {
   .flexblock.gallery {
     margin-left: -2%;
     margin-right: -2%; }
     .flexblock.gallery li {
       margin-left: 2%;
       margin-right: 2%;
       width: 46%; } }
 
 @media (min-width: 1024px) {
   .flexblock.gallery li {
     width: 21%; }
   .grid.sm .flexblock.gallery li,
   .grid.ms .flexblock.gallery li {
     width: 29%; }
   .grid.sms .flexblock.gallery li {
     width: 46%; } }
 
 .overlay {
   bottom: 0;
   cursor: pointer;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
       -ms-flex-direction: column;
           flex-direction: column;
   height: 100%;
   -webkit-box-pack: center;
       -ms-flex-pack: center;
           justify-content: center;
   left: 0;
   opacity: 1;
   position: absolute;
   right: 0;
   top: 0;
   -webkit-transition: all .3s linear;
   transition: all .3s linear;
   width: 100%;
   z-index: 2; }
 
 li .overlay {
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center; }
 
 li .overlay h2 {
   letter-spacing: .2rem;
   margin: 0;
   padding: 0 2.4rem;
   text-align: center;
   text-transform: uppercase;
   width: 100%; }
 
 .overlay p,
 .overlay time {
   margin-bottom: 0; }
 
 li:hover .overlay {
   cursor: pointer; }
 
 /*===============================================
 6.8 Plans / Pricing <ul class="flexblock plans">
 ================================================= */
 .flexblock.plans > li {
   border-radius: 3px;
   margin-bottom: 4.8rem;
   text-align: center;
   z-index: 1; }
 
 .flexblock.plans li,
 .flexblock.plans.blink li > a {
   padding: 0; }
 
 .flexblock.plans.blink li > a div,
 .flexblock.plans li div {
   padding-bottom: 3.2rem; }
 
 .flexblock.plans li p,
 .flexblock.plans li h2 {
   padding: .8rem 3.2rem; }
 
 .flexblock.plans li h2 {
   float: left;
   font-weight: 400;
   letter-spacing: .1rem;
   text-transform: uppercase;
   width: 100%; }
 
 .flexblock.plans .price {
   clear: both;
   display: block;
   font-size: 4.8rem;
   font-weight: 400;
   line-height: 6.2rem;
   padding: 2.4rem; }
   .flexblock.plans .price sup {
     font-size: 1.8rem;
     margin-right: .4rem; }
   .flexblock.plans .price li ul {
     margin-bottom: 2.4rem; }
 
 .flexblock.plans li ul li {
   display: block;
   padding: .8rem 3.2rem;
   text-align: left;
   width: 100%; }
 
 @media (min-width: 1024px) {
   .flexblock.plans {
     margin-left: -2%;
     margin-right: -2%; }
     .flexblock.plans > li {
       margin-left: 2%;
       margin-right: 2%;
       width: 29%; }
     .flexblock.plans > li:hover,
     .flexblock.plans > li:nth-child(2) {
       position: relative;
       -webkit-transform: scale(1.08);
               transform: scale(1.08);
       z-index: 2; }
     .flexblock.plans:hover li:nth-child(2):not(:hover) {
       position: relative;
       -webkit-transform: scale(1);
               transform: scale(1);
       z-index: 1; } }
 
 /*===========================================
 6.9 Block Activity <ul class="activity">
 CV / News
 ============================================= */
 .flexblock.activity {
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
       -ms-flex-direction: column;
           flex-direction: column; }
   .flexblock.activity li {
     -webkit-box-flex: 1;
         -ms-flex: 1;
             flex: 1;
     position: relative;
     width: auto; }
   .flexblock.activity p {
     margin-bottom: 0;
     vertical-align: top; }
   .flexblock.activity img {
     display: block; }
   .flexblock.activity .year,
   .flexblock.activity .title {
     display: inline;
     font-weight: 600; }
   .flexblock.activity .summary {
     width: 100%; }
   .flexblock.activity .title {
     margin-left: 1rem; }
   @media (min-width: 768px) {
     .flexblock.activity p {
       float: left; }
     .flexblock.activity .year {
       width: 15%; }
     .flexblock.activity .title {
       margin-left: 4%;
       margin-right: 4%;
       width: 27%; }
     .flexblock.activity .summary {
       width: 50%; } }
 
 /*=============================================
 7. Promos/Offers (pricing, tagline, CTA...)
 =============================================== */
 .cta {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -ms-flex-wrap: wrap;
       flex-wrap: wrap;
   -webkit-box-pack: center;
       -ms-flex-pack: center;
           justify-content: center; }
 
 .number,
 .cta .benefit {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
       -ms-flex-direction: column;
           flex-direction: column;
   -webkit-box-pack: center;
       -ms-flex-pack: center;
           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; }
     .number span sup {
       font-size: 6rem;
       vertical-align: middle; } }
 
 /* --- Header CTA --- */
 .cta-cover {
   display: table;
   width: 100%; }
   .cta-cover h1 strong {
     font-weight: 400; }
   @media (min-width: 1024px) {
     .cta-cover h1 {
       float: left;
       max-width: 80%; }
     .cta-cover h1 strong {
       display: block; }
     .cta-cover .button {
       margin-top: 1.2rem; }
     .cta-cover .try {
       text-align: center; } }
   @media (max-width: 1023px) {
     .cta-cover .alignright {
       float: none; } }
 
 /*=========================================
 8. Work/Resumé/CV <ul class="work">
 =========================================== */
 .work {
   clear: both;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
       -ms-flex-direction: column;
           flex-direction: column;
   text-align: left; }
   h1 + .work,
   h2 + .work,
   h3 + .work,
   p + .work {
     margin-top: 4.8rem; }
   .work li {
     -webkit-box-flex: 1;
         -ms-flex: 1;
             flex: 1;
     list-style: none;
     margin: 0;
     position: relative; }
   .work p {
     margin-bottom: 0;
     -webkit-transition: .3s;
     transition: .3s; }
   .work li a {
     display: block;
     float: left;
     height: 100%;
     padding: 2.4rem 0;
     width: 100%; }
   .work li p {
     padding-left: 1.2rem; }
   .work li.work-label p {
     padding-left: 0; }
   .work li a:hover p:first-child {
     padding-left: 1.6rem; }
   .work li p:last-child {
     position: absolute;
     right: 1.2rem;
     top: 2.4rem; }
   .work li.work-label p:last-child {
     right: 0;
     top: 0; }
   .work-label {
     float: left;
     font-weight: 600;
     padding: 0 0 2.4rem;
     width: 100%; }
   .work-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; } }
 
 /*===========================================
 9. Table of contents
 ============================================= */
 .toc,
 .toc ol > li:before,
 .chapter {
   position: relative;
   z-index: 2; }
 
 .toc ol {
   counter-reset: item;
   position: relative; }
   .toc ol > li:before {
     content: counters(item, ".") ". ";
     display: table-cell;
     padding-right: .8rem;
     width: 2.4rem; }
   .toc ol li li:before {
     content: counters(item, ".") " "; }
 
 .toc li {
   counter-increment: item;
   display: table;
   font-weight: 400;
   margin-bottom: .8rem;
   margin-left: 0;
   -webkit-transition: .3s;
   transition: .3s;
   width: 100%; }
   .toc li li {
     font-weight: 300;
     margin-bottom: 0;
     margin-left: 0; }
   .toc li .toc-page:before {
     content: '';
     display: block;
     left: 0;
     margin-top: 1.8rem;
     position: absolute;
     right: 4rem; }
   .toc li > a {
     display: inline-block;
     width: 100%; }
   .toc li a:hover span {
     font-weight: 600; }
   .toc li a:hover .toc-page:before {
     border-bottom-width: 2px; }
 
 .chapter {
   display: inline-block;
   font-size: 1.8rem;
   line-height: 3.2rem;
   padding-right: .8rem; }
 
 .toc-page {
   float: right; }
 
 /*===========================================
 10. Cards
 ============================================= */
 [class*='card-'],
 [class*='card-'] > a {
   clear: both;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-orient: horizontal;
   -webkit-box-direction: normal;
       -ms-flex-direction: row;
           flex-direction: row;
   position: relative; }
 
 .fullscreen [class*='card-'],
 .fullscreen [class*='card-'] > a {
   min-height: 100vh; }
 
 [class*='card-'] figure img,
 [class*='card-'] figure iframe {
   display: block;
   margin: 0 auto; }
 
 [class*='card-'] figure figcaption {
   bottom: 0;
   font-size: 1.4rem;
   left: 0;
   line-height: 2.4rem;
   padding: .8rem 2.4rem;
   position: absolute;
   z-index: 2; }
   [class*='card-'] figure figcaption svg {
     font-size: 1rem; }
 
 @media (min-width: 768px) {
   [class*='card'][class*='bg-'] figure,
   .fullscreen [class*='card'] figure {
     max-height: 100%;
     min-width: 380px;
     text-align: center;
     vertical-align: middle; }
   [class*='card-'][class*='bg-'] figure img,
   [class*='card-'][class*='bg-'] figure iframe,
   .fullscreen [class*='card-'] figure img,
   .fullscreen [class*='card-'] figure iframe {
     height: 100%;
     left: 0;
     -o-object-fit: cover;
        object-fit: cover;
     position: absolute;
     top: 0;
     width: 100%;
     z-index: 1; } }
 
 .flex-content,
 [class*='card'] blockquote {
   padding: 2.4rem;
   position: relative; }
 
 [class*='card-'] .flex-content,
 [class*='card-'] blockquote {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
       -ms-flex-direction: column;
           flex-direction: column;
   -webkit-box-pack: center;
       -ms-flex-pack: center;
           justify-content: center; }
 
 .flex-content p {
   position: relative; }
 
 @media (min-width: 768px) {
   .card-50 figure,
   .card-50 blockquote,
   .card-50 .flex-content {
     width: 50%; }
   .card-30 figure,
   .card-70 .flex-content,
   .card-70 blockquote {
     width: 30%; }
   .card-40 figure,
   .card-60 .flex-content,
   .card-60 blockquote {
     width: 40%; }
   .card-60 figure,
   .card-40 .flex-content,
   .card-40 blockquote {
     width: 60%; }
   .card-70 figure,
   .card-30 .flex-content,
   .card-30 blockquote {
     width: 70%; }
   [class*='card']:nth-child(odd) figure {
     -webkit-box-ordinal-group: 1;
         -ms-flex-order: 0;
             order: 0; }
   [class*='card']:nth-child(even) figure {
     -webkit-box-ordinal-group: 2;
         -ms-flex-order: 1;
             order: 1; }
   .flex-content,
   [class*='card'] blockquote {
     padding: 4.8rem; }
   .fullscreen [class*='card'] .flex-content,
   .fullscreen [class*='card'] blockquote {
     padding: 6.4rem; } }
 
 @media (max-width: 767px) {
   [class*='card-'],
   [class*='card-'] > a {
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
         -ms-flex-flow: column;
             flex-flow: column; }
   .card figure,
   .card header {
     width: 100%; } }
 
 /*=========================================
 11. Quotes
 =========================================== */
 blockquote {
   display: inline-block;
   position: relative; }
   blockquote p {
     font-size: 2.4rem;
     line-height: 4rem; }
     blockquote p:last-child {
       margin-bottom: 3.2rem; }
 
 /* -- Interviews dl.text-interview -- */
 dd blockquote p:last-child {
   margin-bottom: 0; }
 
 cite {
   display: block;
   text-align: center; }
   cite:before {
     content: '\2014   \2009';
     margin-right: 6px; }
 
 cite span {
   display: block; }
 
 /* -- A big Blockquote -- */
 /* .wall will be deprecated soon. Use .text-quote ;) */
 .text-quote,
 .wall {
   /* Versatility: blockquote, p, h2... */
   position: relative; }
   .text-quote:before,
   .wall:before {
     content: '\201C';
     font-family: 'Tenor Sans', sans-serif;
     font-size: 12rem;
     height: 5.6rem;
     left: -.8rem;
     line-height: 1;
     position: absolute;
     text-align: center;
     top: -4rem;
     width: 5.6rem; }
   @media (min-width: 768px) {
     .text-quote,
     .wall {
       padding-left: 6.4rem; }
       .text-quote p,
       .wall p {
         font-size: 3.2rem;
         line-height: 4.8rem; }
       .text-quote:before,
       .wall:before {
         left: .8rem;
         top: -1.6rem; } }
 
 /*=========================================
 12. Avatars - uifaces.com
 =========================================== */
 cite img,
 img[class*='avatar-'] {
   display: inline-block;
   margin-right: 6px;
   vertical-align: middle; }
 
 img[class*='avatar-'] {
   border-radius: 50%; }
 
 img.avatar-40 {
   height: 40px;
   width: 40px; }
 
 img.avatar-48 {
   height: 48px;
   width: 48px; }
 
 img.avatar-56 {
   height: 56px;
   width: 56px; }
 
 img.avatar-64 {
   height: 64px;
   width: 64px; }
 
 img.avatar-72 {
   height: 72px;
   width: 72px; }
 
 img.avatar-80 {
   height: 80px;
   width: 80px; }
 
 /*=========================================
 13. Tables
 =========================================== */
 table {
   margin-bottom: 3.2rem;
   margin-top: 3.2rem; }
 
 td,
 th,
 thead {
   border-spacing: 0;
   padding: .7rem 2.4rem; }
 
 thead th,
 th {
   cursor: default;
   font-weight: 600;
   text-align: left;
   text-transform: uppercase;
   white-space: nowrap; }
 
 thead,
 td.goals {
   font-weight: 600;
   text-shadow: none; }
 
 tr > td {
   font-weight: 400; }
 
 /*=========================================
 14. Forms
 =========================================== */
 form {
   text-align: left; }
   form + p,
   form input + p,
   form textarea + p {
     margin-top: .8rem; }
 
 input[type='text'],
 input[type='email'],
 input[type='tel'],
 input[type='url'],
 input[type='search'],
 input[type='password'] {
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
   border-radius: 0; }
 
 input,
 button,
 select {
   display: inline-block;
   font-size: 1.6rem;
   font-weight: 400;
   height: 4.8rem;
   margin: 0;
   padding: .7rem;
   position: relative;
   width: 100%; }
 
 input[type='radio'],
 input[type='checkbox'] {
   height: auto;
   padding: 4px;
   width: auto; }
 
 button[type='submit'],
 textarea {
   width: 100%; }
 
 textarea {
   padding: .7rem; }
 
 button {
   cursor: pointer;
   text-align: center;
   width: auto; }
 
 .button {
   cursor: pointer;
   display: inline-block;
   font-size: 1.8rem;
   font-weight: 400;
   line-height: 4.8rem;
   min-width: 16rem;
   padding: 0 1.6rem;
   text-align: center; }
   .button svg {
     font-size: 2.4rem; }
 
 .button.radius,
 input.radius {
   border-radius: 2.4rem; }
 
 button,
 input[type='submit'] {
   font-weight: 400;
   letter-spacing: .1rem;
   text-transform: uppercase; }
 
 .plans .button {
   margin-left: auto;
   margin-right: auto;
   width: 50%; }
 
 .try {
   display: block;
   font-size: 1.6rem;
   margin-top: 1.6rem; }
 
 fieldset {
   padding: 2.4rem; }
 
 legend {
   border: 0;
   font-weight: 400;
   letter-spacing: .1rem;
   padding: 1.6rem 2.4rem;
   text-align: center;
   text-transform: uppercase;
   width: 100%; }
 
 input:focus,
 textarea:focus,
 select:focus {
   border-width: 1px; }
 
 a.button:hover,
 button[type='submit']:hover,
 input[type='submit']:hover {
   -webkit-transform: scale(1.01);
           transform: scale(1.01); }
 
 :disabled,
 button:disabled:hover {
   cursor: not-allowed; }
 
 .user input {
   margin-bottom: 0; }
   .user input[type='email'], .user input[type='search'], .user input[type='text'] {
     width: 100%; }
     @media (min-width: 500px) {
       .user input[type='email'], .user input[type='search'], .user input[type='text'] {
         float: left;
         width: 70%; } }
 
 .user button,
 .user input[type='submit'] {
   left: 0;
   width: 100%; }
   @media (min-width: 500px) {
     .user button,
     .user input[type='submit'] {
       cursor: pointer;
       width: 30%; } }
 
 /* Buttons/Badges */
 @media (min-width: 500px) {
   [class*='button'] + [class*='button'] {
     margin-left: 1.8rem; } }
 
 @media (max-width: 499px) {
   [class*='button'] + [class*='button'] {
     margin-top: .8rem; } }
 
 /*=== App Store Badges === */
 /* Change width and height: 216x64px, 162x48px, 135x40... */
 [class*='badge-'] {
   background-repeat: no-repeat;
   background-size: cover;
   border-radius: .6rem;
   display: inline-block;
   height: 40px;
   line-height: 4rem;
   text-indent: -4000px;
   width: 135px; }
   [class*='badge-']:hover {
     opacity: .7; }
   @media (min-width: 1024px) {
     [class*='badge-'] {
       height: 48px;
       line-height: 4.8rem;
       width: 162px; } }
   @media (min-width: 500px) {
     [class*='badge-'] + [class*='badge-'] {
       margin-left: 1.8rem; } }
   @media (max-width: 499px) {
     [class*='badge-'] + [class*='badge-'] {
       margin-top: .8rem; } }
 
 .badge-ios {
   background-image: url("../images/bt-appstore.png"); }
 
 .badge-android {
   background-image: url("../images/bt-playstore.png"); }
 
 /*=========================================
 15. Longform
 =========================================== */
 /* -- Posts = .wrap.longform -- */
 .longform {
   width: 72rem;
   /* Why 72rem=720px?
   90-95 characters per line = better reading speed */
   /* Mobile: video full width */ }
   .longform .alignleft,
   .longform .alignright {
     max-width: 40%; }
   .longform img.aligncenter,
   .longform figure.aligncenter {
     margin-bottom: 3.2rem;
     margin-top: 3.2rem; }
   .longform ul,
   .longform ol {
     margin-bottom: 3.2rem; }
   .longform ul ol,
   .longform ol ul,
   .longform ul ul,
   .longform ol ol {
     margin-bottom: 0; }
   .longform figcaption p,
   .longform [class*='text-pull-'] p {
     font-size: 1.6rem;
     line-height: 2.4rem; }
   .longform .text-pull.embed {
     margin-left: -2.4rem;
     margin-right: -2.4rem;
     padding-bottom: 60.6%; }
   @media (min-width: 1280px) {
     .longform [class*='text-pull-'] {
       max-width: 32%; }
     .longform .text-pull-right {
       margin-right: -256px; }
     .longform .text-pull-left {
       margin-left: -256px; } }
   @media (min-width: 1024px) {
     .longform .text-quote {
       margin-left: -4.8rem;
       margin-right: -4.8rem; } }
 
 /*=========================================
 16. SAFARI BUGS (flex-wrap)
 Solution: stackoverflow.com/questions/34250282/flexbox-safari-bug-flex-wrap
 =========================================== */
 .flexblock:before,
 .flexblock:after,
 .grid:before,
 .grid:after,
 .cta:before,
 .cta:after {
   width: 0; }
 
 /*==============================================
 18. Slides Index: Thumbnails navigation gallery
 ================================================ */
 #webslides-zoomed {
   -ms-flex-line-pack: start;
       align-content: flex-start;
   -webkit-box-align: start;
       -ms-flex-align: start;
           align-items: flex-start;
   -webkit-box-orient: horizontal;
   -webkit-box-direction: normal;
       -ms-flex-direction: row;
           flex-direction: row;
   -webkit-box-pack: start;
       -ms-flex-pack: start;
           justify-content: flex-start;
   min-height: 100vh;
   position: relative;
   z-index: 2; }
   #webslides-zoomed.disabled {
     left: -100000px;
     position: absolute; }
   #webslides-zoomed .slide {
     height: 400%;
     width: 400%; }
     @media screen and (orientation: portrait), screen and (max-width: 768px) and (orientation: landscape) {
       #webslides-zoomed .slide {
         height: 200%;
         width: 200%; } }
     @media (max-aspect-ratio: 2 / 3) {
       #webslides-zoomed .slide {
         height: 200%;
         width: 200%; } }
   @media (min-width: 1024px) {
     #webslides-zoomed > .wrap {
       padding-bottom: 12rem;
       padding-top: 12rem; } }
   #webslides-zoomed > .wrap > .grid > .column {
     -ms-flex-item-align: auto;
         align-self: auto;
     -webkit-box-flex: 0;
         -ms-flex: 0 1 auto;
             flex: 0 1 auto;
     -webkit-box-ordinal-group: 1;
         -ms-flex-order: 0;
             order: 0;
     position: relative;
     width: 25%; }
     @media screen and (max-width: 567px) {
       #webslides-zoomed > .wrap > .grid > .column {
         width: 100%; } }
     @media screen and (min-width: 568px) and (max-width: 1024px) {
       #webslides-zoomed > .wrap > .grid > .column {
         width: 50%; } }
     @media screen and (max-width: 567px) and (orientation: portrait) {
       #webslides-zoomed > .wrap > .grid > .column {
         width: 100%; } }
     #webslides-zoomed > .wrap > .grid > .column > .wrap-zoom {
       border-radius: .3rem;
       display: inline-block;
       height: 25vh;
       overflow: hidden;
       position: relative;
       -webkit-transition: .3s;
       transition: .3s; }
       @media screen and (max-width: 567px) {
         #webslides-zoomed > .wrap > .grid > .column > .wrap-zoom {
           height: 50vh; } }
       @media screen and (min-width: 568px) and (max-width: 1023px) {
         #webslides-zoomed > .wrap > .grid > .column > .wrap-zoom {
           height: 33vh; } }
       @media screen and (orientation: portrait) {
         #webslides-zoomed > .wrap > .grid > .column > .wrap-zoom {
           height: 50vw; } }
       #webslides-zoomed > .wrap > .grid > .column > .wrap-zoom:hover {
         -webkit-transform: scale(1.02);
                 transform: scale(1.02);
         z-index: 2; }
       #webslides-zoomed > .wrap > .grid > .column > .wrap-zoom.current {
         -webkit-transform: scale(1.08);
                 transform: scale(1.08); }
     #webslides-zoomed > .wrap > .grid > .column > .wrap-zoom > .zoom-layer {
       background: transparent;
       cursor: pointer;
       height: 100%;
       position: absolute;
       width: 100%; }
   #webslides-zoomed .column > .wrap-zoom > .slide {
     clip: rect(0 auto auto 0);
     display: -webkit-box !important;
     display: -ms-flexbox !important;
     display: flex !important;
     left: 0;
     position: absolute;
     top: 0;
     -webkit-transform: scale(0.25) translate(-150%, -150vh);
             transform: scale(0.25) translate(-150%, -150vh); }
     @media screen and (orientation: portrait), screen and (max-width: 768px) and (orientation: landscape) {
       #webslides-zoomed .column > .wrap-zoom > .slide {
         -webkit-transform: scale(0.5) translate(-50%, -50%);
                 transform: scale(0.5) translate(-50%, -50%); } }
     @media (max-aspect-ratio: 2 / 3) {
       #webslides-zoomed .column > .wrap-zoom > .slide {
         -webkit-transform: scale(0.5) translate(-50%, -50%);
                 transform: scale(0.5) translate(-50%, -50%); } }
   #webslides-zoomed .column {
     opacity: 0;
     -webkit-transform: scale(1.2);
             transform: scale(1.2);
     -webkit-transition: opacity .4s, -webkit-transform .4s;
     transition: opacity .4s, -webkit-transform .4s;
     transition: opacity .4s, transform .4s;
     transition: opacity .4s, transform .4s, -webkit-transform .4s;
     -webkit-transition-delay: .2s;
             transition-delay: .2s; }
   #webslides-zoomed.in .column {
     opacity: 1;
     -webkit-transform: scale(1);
             transform: scale(1); }
 
 .text-slide-number {
   display: inline-block;
   margin: .8rem auto;
   text-align: center; }
 
 #webslides {
   -webkit-transition: -webkit-filter .3s;
   transition: -webkit-filter .3s;
   transition: filter .3s;
   transition: filter .3s, -webkit-filter .3s; }
   #webslides.disabled, #webslides.zooming {
     position: fixed;
     width: 100%;
     z-index: 0; }
   #webslides.disabled {
     /*
     filter: blur(10px);
     transform: scale(1.1);
     */
     /* Blur makes scroll no accesible */
     width: calc(100% - 10px); }
 
 /*=========================================
 17. PRINT
 =========================================== */
 @media print {
   @page {
     margin: .5cm;
     size: A4 landscape; }
   * {
     background: transparent !important;
     color: #000 !important;
     -webkit-filter: none !important;
             filter: none !important;
     text-shadow: none !important; }
   html,
   body,
   #webslides {
     height: auto !important;
     overflow: auto !important;
     width: auto !important; }
   #webslides {
     overflow-x: auto !important;
     overflow-y: auto !important; }
   section,
   .slide {
     display: -webkit-box !important;
     display: -ms-flexbox !important;
     display: flex !important;
     height: auto !important; }
   section * {
     -webkit-animation: none;
             animation: none; }
   table,
   figure {
     page-break-inside: avoid; }
   #counter,
   #navigation {
     display: none; } }
 
 /*=========================================
 19. Colors
 =========================================== */
 /* -- Disable elastic scrolling/bounce:
 webslides.js will add .ws-ready automatically. Don't worry :) -- */
 body {
   background-color: #ffffff;
   color: rgb(0, 0, 0); }
 
 :focus {
   -webkit-box-shadow: 0 0 2px #96bbee;
           box-shadow: 0 0 2px #96bbee; }
 
 svg {
   fill: currentColor; }
 
 [class*='bg-'] a,
 [class*='bg-gradient-'] a {
   color: #bce; }
 
 .bg-brown a {
   color: #c23; }
 
 a,
 .bg-white a,
 .bg-light a,
 .bg-gradient-white a {
   color: #44d; }
 
 a:hover {
   color: #3af; }
 
 .flexblock li > a,
 [class*='bg-'] li > a,
 [class*='bg-gradient-'] li > a,
 article header a {
   color: inherit; }
 
 hr {
   background: radial-gradient(ellipse at center, rgba(0, 20, 80, 0.2) 0, rgba(255, 255, 255, 0) 75%); }
 
 hr:after {
   background-color: rgba(255, 255, 255, 0.8);
   color: #333; }
 
 abbr,
 acronym {
   border-bottom: 1px dotted #f7f9fb; }
 
 mark,
 ins {
   background-color: rgba(255, 255, 255, 0.8);
   color: inherit; }
 
 ::-moz-selection {
   background-color: rgba(255, 255, 255, 0.8); }
 
 ::-webkit-selection {
   background-color: rgba(255, 255, 255, 0.8); }
 
 ::selection {
   background-color: rgba(255, 255, 255, 0.8); }
 
 pre {
   background: #fff;
   border: 1px solid rgba(0, 20, 80, 0.1);
   -webkit-box-shadow: 0 8px 16px rgba(0, 20, 80, 0.04), 0 4px 16px rgba(0, 0, 0, 0.08);
           box-shadow: 0 8px 16px rgba(0, 20, 80, 0.04), 0 4px 16px rgba(0, 0, 0, 0.08); }
 
 pre:hover {
   -webkit-box-shadow: 0 8px 16px rgba(0, 40, 160, 0.08), 0 8px 24px rgba(0, 0, 0, 0.08);
           box-shadow: 0 8px 16px rgba(0, 40, 160, 0.08), 0 8px 24px rgba(0, 0, 0, 0.08); }
 
 code,
 [class*='bg-'] pre {
   background-color: rgba(255, 255, 255, 0.09); }
 
 .bg-white code {
   background: rgba(0, 20, 80, 0.03); }
 
 /*================================================
 Slides - Backgrounds <section class="bg-primary">
 ================================================== */
 /*3 Corp Colors*/
 .bg-primary {
   background-color: #44d; }
 
 .bg-secondary {
   background-color: #67d; }
 
 .bg-light {
   background-color: #f7f9fb; }
 
 .bg-black {
   background-color: #111; }
 
 .bg-black-blue {
   background-color: #123; }
 
 .bg-blue {
   background-color: #346; }
 
 .bg-brown {
   background-color: #f9f8f2; }
 
 .bg-gray {
   background-color: #d5d9e2; }
 
 .bg-green {
   background-color: #077; }
 
 .bg-purple {
   background-color: #62b; }
 
 .bg-red {
   background-color: #c23; }
 
 .bg-white {
   background-color: #fff; }
 
 .bg-facebook {
   background-color: #3b5998; }
 
 [class*='bg-'] .bg-white {
   color: #333;
   text-shadow: none; }
 
 /* BG Apple Keynote*/
 .bg-apple {
   background: -webkit-gradient(linear, left top, left bottom, from(#000), color-stop(50%, #1a2028), to(#293845));
   background: linear-gradient(to bottom, #000 0%, #1a2028 50%, #293845 100%); }
 
 /*Font Color*/
 .bg-trans-dark,
 .bg-trans-gradient,
 .bg-primary,
 .bg-secondary,
 .bg-blue,
 .bg-green,
 .bg-purple,
 .bg-red,
 .bg-facebook,
 .bg-apple,
 [class*='bg-black'],
 [class*='bg-gradient-'] {
   color: #fff;
   text-shadow: 0 1px 0 #013; }
 
 .bg-light p {
   color: #456; }
 
 .bg-brown p {
   color: #666; }
 
 /*Transparent/Opacity*/
 .bg-trans-dark {
   background: rgba(0, 0, 0, 0.8); }
 
 .bg-trans-light {
   background: rgba(0, 0, 0, 0.2); }
 
 /*Covers/Longforms...*/
 .bg-trans-gradient {
   background: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.8)), to(transparent));
   background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, transparent 100%); }
 
 /*Horizontal Gradient*/
 .bg-gradient-h {
   background: linear-gradient(134deg, #32b 0, #62b 100%); }
 
 /*Vertical Gradient*/
 .bg-gradient-v {
   background: -webkit-gradient(linear, left bottom, left top, from(#62b), to(#32b));
   background: linear-gradient(to top, #62b 0%, #32b 100%); }
 
 /*Radial Gradient*/
 .bg-gradient-r {
   background: radial-gradient(ellipse at center, #62b 0%, #32b 100%); }
 
 /*White Gradient (vertical)*/
 .bg-gradient-white {
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f2f4f6), to(#fff));
   background: linear-gradient(180deg, #f2f4f6 0, #fff 100%);
   color: #333;
   text-shadow: none; }
 
 /*Gray Gradient (horizontal)*/
 .bg-gradient-gray {
   background: -webkit-gradient(linear, left top, right top, color-stop(0, #f7f9fb), to(#dee2e6));
   background: linear-gradient(90deg, #f7f9fb 0, #dee2e6 100%);
   color: #333;
   text-shadow: none; }
 
 /*Border/Frame*/
 .frame {
   border: 0.8rem solid #fff; }
 
 [class*='background'].frame {
   border-width: .2rem; }
 
 /*Layer/Box Shadow*/
 .shadow,
 .pre {
   position: relative; }
 
 .shadow:before,
 .shadow:after {
   -webkit-box-shadow: 0 16px 24px rgba(0, 20, 80, 0.3);
           box-shadow: 0 16px 24px rgba(0, 20, 80, 0.3); }
 
 /*============================
 TYPOGRAPHY
 ============================== */
 /* -- Horizontal separator  -- */
 .text-separator:before {
   background-color: rgba(170, 0, 0, 0.8); }
 
 /* -- Pull Quote (Right/Left)  -- */
 [class*='text-pull-'] {
   border-top: 4px solid rgba(0, 0, 0, 0.5); }
 
 img[class*='text-pull-'],
 figure[class*='text-pull-'] {
   border-top: 0; }
 
 /* -- Context  -- */
 [class*='bg-'] .text-context:before {
   background-color: #fff; }
 
 .text-context:before,
 .bg-white .text-context:before {
   background-color: rgba(0, 20, 80, 0.2); }
 
 /* -- Text shadow  -- */
 .text-shadow {
   text-shadow: 0 0 40px rgba(0, 0, 0, 0.5); }
 
 /* -- time, ampersands, prepositions (for, of...), symbols...
 [class*='card-'] time,
 h1 span {
   color: #abd;
 }
 
 /* -- <pre> comment  -- */
 .code-comment {
   color: rgba(70, 170, 130, 0.9);
   text-shadow: none; }
 
 /*=========================================
 Header/Nav
 =========================================== */
 header[role='banner'] {
   background-color: #fff; }
 
 .logo a {
   color: inherit; }
 
 nav[role='navigation'] li.active a {
   background-color: rgb(0, 0, 0);
   color: #fff; }
 
 nav[role='navigation'] li a {
   background-color: rgba(50, 50, 50, 0.9);
   color: #fff; }
   nav[role='navigation'] li a:hover {
     background-color: rgba(50, 50, 50, 0.7); }
 
 nav li.twitter a:hover {
   background-color: #1da1f3; }
 
 nav li.facebook a:hover {
   background-color: #3b5998; }
 
 nav li.linkedin a:hover {
   background-color: #1683bb; }
 
 nav li.dribbble a:hover {
   background-color: #ea4c89; }
 
 nav li.github a:hover {
   background-color: #60b044; }
 
 nav li.email a:hover {
   background-color: #000000; }
 
 /*===================================================
 .flexblock li hover/active
 ===================================================== */
 .flexblock li.active a,
 .metrics li:hover,
 .specs li:hover,
 .reasons li:hover {
   background-color: rgba(0, 20, 80, 0.03); }
 
 /*=========================================
 Features & Clients List
 =========================================== */
 .features li,
 .clients li {
   background-color: rgba(255, 255, 255, 0.9); }
 
 [class*='bg-'] .features li,
 [class*='bg-'] .clients li {
   background-color: rgba(255, 255, 255, 0.1); }
 
 .features li:hover,
 .clients li:hover {
   -webkit-box-shadow: 0 8px 16px rgba(0, 20, 80, 0.02), 0 4px 16px rgba(0, 0, 0, 0.08);
           box-shadow: 0 8px 16px rgba(0, 20, 80, 0.02), 0 4px 16px rgba(0, 0, 0, 0.08); }
 
 /*============================
 .flexblock with border
 ============================== */
 .border {
   border-bottom: 1px solid rgba(0, 20, 80, 0.1);
   border-right: 1px solid rgba(0, 20, 80, 0.1); }
 
 .border li {
   border-left: 1px solid rgba(0, 20, 80, 0.1);
   border-top: 1px solid rgba(0, 20, 80, 0.1); }
 
 .flexblock.border li li {
   border: 0; }
 
 /*===========================================
 flexblock.steps
 ============================================= */
 .steps li:nth-child(1) {
   background-color: #e8eef7; }
 
 .steps li:nth-child(2) {
   background-color: #dde5f3; }
 
 .steps li:nth-child(3) {
   background-color: #cdd8ec; }
 
 .steps li:nth-child(4) {
   background-color: #bbcdec; }
 
 .process {
   border-bottom: 15px solid transparent;
   border-top: 15px solid transparent; }
 
 .steps li:hover,
 .steps.blink li:hover > a {
   background-color: #b8cef7; }
 
 @media (min-width: 1024px) {
   .process.step-2 {
     border-left-color: #e8eef7; }
   .process.step-3 {
     border-left-color: #dde5f3; }
   .process.step-4 {
     border-left-color: #cdd8ec; }
   .steps li:hover + li [class*='step-'] {
     border-left-color: #b8cef7; } }
 
 /*=========================================================
 Items: You can use for settings, drag&drop, close/delete...
 =========================================================== */
 .specs li:after {
   background: -webkit-gradient(linear, left top, right top, from(rgba(0, 20, 80, 0)), color-stop(50%, rgba(0, 20, 80, 0.2)), to(rgba(0, 20, 80, 0)));
   background: linear-gradient(to right, rgba(0, 20, 80, 0) 0%, rgba(0, 20, 80, 0.2) 50%, rgba(0, 20, 80, 0) 100%); }
 
 .specs li:last-child:after {
   background: none; }
 
 /*=========================================================
 Why/Steps/Motivation/Reasons -  Decimal/Numbers
 =========================================================== */
 .reasons li:after {
   background: -webkit-gradient(linear, left top, right top, from(rgba(0, 20, 80, 0)), color-stop(50%, rgba(0, 20, 80, 0.2)), to(rgba(0, 20, 80, 0)));
   background: linear-gradient(to right, rgba(0, 20, 80, 0) 0%, rgba(0, 20, 80, 0.2) 50%, rgba(0, 20, 80, 0) 100%); }
 
 .reasons li:last-child:after {
   background: none; }
 
 /*=========================================
 Overlays
 =========================================== */
 .overlay {
   background-color: rgba(0, 0, 0, 0.2); }
 
 li:hover .overlay {
   background-color: rgba(0, 0, 0, 0.1); }
 
 .overlay,
 .overlay a {
   color: #fff;
   text-shadow: 0 1px 0 #111; }
 
 /*=========================================
 Gallery li+.overlay+image
 =========================================== */
 .gallery li {
   background-color: rgba(0, 20, 80, 0.06);
   -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 4px 8px rgba(0, 0, 0, 0.03);
           box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 4px 8px rgba(0, 0, 0, 0.03); }
 
 .gallery li figcaption {
   background-color: #fff; }
 
 .flexblock.gallery li:hover {
   -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 4px 8px rgba(0, 0, 0, 0.08);
           box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 4px 8px rgba(0, 0, 0, 0.08); }
 
 .gallery li footer {
   border-top: 1px solid rgba(0, 20, 80, 0.1); }
 
 .gallery li a {
   color: #333;
   text-shadow: none; }
 
 .flesblock.gallery li a footer {
   color: #aaa; }
 
 /*Arrow */
 .gallery li figcaption:before {
   border: 0.8rem solid #000;
   border-color: transparent transparent #fff #fff; }
 
 /*=========================================
 Plans / Pricing
 =========================================== */
 .plans > li div,
 .flexblock.plans li:hover div {
   background-color: #fff; }
 
 .plans > li:hover,
 .plans > li:nth-child(2) {
   -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 8px 16px rgba(0, 0, 0, 0.1);
           box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 8px 16px rgba(0, 0, 0, 0.1); }
 
 .plans:hover li:nth-child(2):not(:hover) {
   -webkit-box-shadow: none;
           box-shadow: none; }
 
 .plans li h2 {
   background-color: rgba(0, 20, 80, 0.5);
   color: #fff; }
 
 .plans ul li {
   border-bottom: 1px solid rgba(0, 20, 80, 0.1); }
   .plans ul li:last-child {
     border-bottom: 0; }
 
 .plans > li > a {
   color: #333;
   text-shadow: none; }
 
 /*============================
 Activity/CV/Timeline/News
 ============================== */
 .activity li {
   border-top: 0.1rem solid rgba(0, 20, 80, 0.1); }
 
 .activity li:hover {
   background-color: rgba(0, 20, 80, 0.02); }
 
 /*=========================================
 Resume/Work/CV/Portfolio
 =========================================== */
 .work-label,
 .work li a {
   border-bottom: 1px solid rgba(0, 20, 80, 0.1); }
 
 .work li:nth-child(odd) > a {
   background-color: rgba(0, 20, 80, 0.03); }
 
 .work li a:hover {
   background-color: rgba(0, 20, 80, 0.04); }
 
 /*===========================================
 Clients / Services / Logos...
 ============================================= */
 .clients.border figcaption {
   border-top: 1px solid rgba(0, 20, 80, 0.1); }
 
 /*====================
 LOGOS
 ====================== */
 /* --- Images (black logo/image) --- */
 img.blacklogo {
   background: none;
   -webkit-filter: grayscale(100%) brightness(10%) contrast(100%);
           filter: grayscale(100%) brightness(10%) contrast(100%); }
 
 /* --- Images (gray logo/image) --- */
 img.graylogo {
   -webkit-filter: grayscale(100%) brightness(10%) contrast(10%);
           filter: grayscale(100%) brightness(10%) contrast(10%); }
 
 /* --- Images (white Logo/Image) --- */
 img.whitelogo {
   -webkit-filter: brightness(0) invert(1);
           filter: brightness(0) invert(1); }
 
 /* --- Logo/Images Hover --- */
 li:hover img.blacklogo,
 li:hover img.graylogo,
 img.blacklogo:hover,
 img.graylogo:hover {
   background: none;
   -webkit-filter: grayscale(0%);
           filter: grayscale(0%);
   -webkit-transition: all .6s ease;
   transition: all .6s ease; }
 
 /*=========================================================
 Cards
 =========================================================== */
 [class*='card-'] > a {
   color: inherit; }
 
 /* ---  card ul specs --- */
 .description > li {
   border-bottom: 1px solid rgba(0, 20, 80, 0.1); }
 
 .description > li:last-child {
   border-bottom: 0; }
 
 /*== Figure Background === */
 [class*='card-'][class*='bg-'] figure {
   background-color: rgba(0, 20, 80, 0.06); }
 
 /*== Ficaption Cards === */
 [class*='card'] figcaption,
 [class*='card'] figcaption a {
   background: -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(0, 0, 0, 0.2)));
   background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.2) 100%);
   color: #fff; }
 
 /*===CTA (Call to Action - Numbers, Price, Promo...)  ===== */
 @media (min-width: 768px) {
   .cta .benefit {
     -o-border-image: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.4) 50%, transparent) 1 100%;
        border-image: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(50%, rgba(0, 0, 0, 0.4)), to(transparent)) 1 100%;
        border-image: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.4) 50%, transparent) 1 100%;
     border-left-width: 1px;
     border-style: solid; } }
 
 /*=========================================
 Tables
 =========================================== */
 table td,
 th,
 thead {
   border: 1px solid rgba(0, 0, 0, 0.5); }
 
 thead {
   background-color: rgba(0, 0, 0, 0.3); }
 
 tr:nth-child(even) > td {
   background: rgba(0, 0, 0, 0.1); }
 
 tr > td {
   border-top: 1px solid rgba(0, 0, 0, 0.5); }
 
 td:hover,
 tr:nth-child(even) > td:hover {
   background-color: rgba(255, 255, 255, 0.5); }
 
 /*============================
 Browser (Screenshots)
 ============================== */
 .browser {
   border: 1px solid rgba(0, 20, 80, 0.1); }
 
 .browser:hover {
   -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 8px 16px rgba(0, 0, 0, 0.1);
           box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 8px 16px rgba(0, 0, 0, 0.1); }
 
 /*=== Topbar === */
 .browser:before {
   background-color: rgba(0, 20, 80, 0.1);
   border-bottom: 1px solid rgba(0, 20, 80, 0.2);
   color: rgba(255, 255, 255, 0.9); }
 
 .browser:hover:before {
   background-color: rgba(0, 20, 80, 0.12);
   color: #fff; }
 
 /*=========================================
 Forms
 =========================================== */
 input,
 textarea {
   background-color: #fafbfc; }
 
 input:focus,
 textarea:focus {
   background-color: #fff;
   -webkit-box-shadow: 0 0 5px #51cbee;
           box-shadow: 0 0 5px #51cbee; }
 
 input:focus::-moz-placeholder {
   color: #ddd; }
 
 input:focus::-webkit-input-placeholder {
   color: #ddd; }
 
 a.button,
 [class*='badge-'],
 button[type='submit'],
 input {
   -webkit-box-shadow: 0 10px 16px -8px rgba(0, 20, 80, 0.3);
           box-shadow: 0 10px 16px -8px rgba(0, 20, 80, 0.3); }
 
 button,
 input,
 select,
 textarea,
 button[type='submit'],
 input[type='submit'],
 .button,
 .button:hover,
 button[type='submit']:hover,
 input[type='submit']:hover {
   border: 1px solid rgb(0, 0, 0); }
 
 button[type='submit'],
 input[type='submit'],
 .button,
 .button:hover,
 button[type='submit']:hover,
 input[type='submit']:hover {
   background-color: rgb(0, 0, 0);
   color: #fff;
   text-shadow: 0 1px 0 #123; }
 
 .button:active,
 button[type='submit']:active,
 input[type='submit']:active {
   background-color: rgb(0, 0, 0); }
 
 .ghost,
 .ghost:hover {
   background: none;
   color: inherit;
   text-shadow: none; }
 
 .bg-primary select,
 .bg-primary textarea,
 .bg-primary .button,
 .bg-primary button,
 .bg-primary button:hover,
 .bg-primary input,
 [class*='bg-gradient-'] .button,
 [class*='bg-'] a.button.ghost {
   border-color: #fff; }
 
 [class*='bg-'] a.button {
   color: #fff; }
 
 .bg-white a.button.ghost,
 .bg-gradient-white a.button.ghost {
   border: 1px solid rgb(0, 0, 255);
   color: #333; }
 
 :disabled,
 button:disabled:hover {
   background-color: #eee;
   border-color: #eee;
   color: #ccc; }
 
 fieldset {
   background-color: rgba(0, 20, 80, 0.2);
   border: 1px solid #44d; }
 
 legend {
   background-color: rgba(0, 0, 0, 0.6);
   color: #fff; }
 
 /* Inputs/Buttons - hover */
 input:hover,
 select:hover {
   -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
           box-shadow: 0 0 8px rgba(0, 0, 0, 0.3); }
 
 /* App Store Badges */
 [class*='badge-'] {
   background-color: #000;
   border: 1px solid #345; }
 
 form .flexblock li:hover {
   background-color: rgba(0, 0, 0, 0.05); }
 
 /*============================
 Table of Contents
 ============================== */
 .toc,
 .toc ol > li:before,
 .chapter {
   background-color: #f7f9fb; }
 
 .toc li .toc-page:before {
   border-bottom: 1px dotted rgba(0, 0, 0, 0.9); }
 
 /*============================
 Slides (Counter/Arrows)
 ============================== */
 #counter,
 #navigation a {
   color: rgb(0, 0, 0); }
 
 #webslides:hover #navigation a:hover {
   background-color: rgb(0, 0, 0);
   color: #fff; }
 
 /*============================
 Footer
 ============================== */
 footer[role='contentinfo'] {
   background-color: #fff; }
 
 /*============================
 Slides Index
 ============================== */
 #webslides-zoomed {
   background: rgba(0, 0, 0, 0.8); }
 
 #webslides-zoomed .column > .wrap-zoom {
   background-color: #f7f9fb;
   -webkit-box-shadow: 0 1px 1px rgb(0, 0, 0), 0 4px 8px rgb(0, 0, 0);
           box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 4px 8px rgba(0, 0, 0, 0.04);
   color: rgb(0, 0, 0); }
   #webslides-zoomed .column > .wrap-zoom:hover {
     -webkit-box-shadow: 0 1px 1px rgb(0, 0, 0), 0 4px 8px rgb(0, 0, 0);
             box-shadow: 0 1px 1px rgb(0, 0, 0), 0 4px 8px rgb(0, 0, 0); }
   #webslides-zoomed .column > .wrap-zoom.current {
     border: 0.6rem solid rgba(0, 0, 0, 0.2); }
 
 .text-slide-number {
   color: rgb(255, 255, 255); }
 
 
 
   #background {
    /*  background-color: #077; */
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(1200px, 1fr));
     grid-gap: 0%;
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: 0; /* Set z-index to a value lower than that of .transparent-text elements */
   }
   
 
   .transparent-text {
     font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
     position: static;
     color: transparent;
     -webkit-text-stroke-width: 0.5vw;
     -webkit-text-stroke-color: #ffffff;
     z-index: 1;
     
   }