/*!
 * 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

LICENSE
 MIT License

Copyright (c) 2017 José Luis Antúnez

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

 */
@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
----------------------------------------------------------------------------------- */
/*
=========================================
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 === */
/* article {
  max-width: 1440px;
} */
.wrap,
header nav,
footer nav {
  margin-left: auto;
  margin-right: auto;
  /* max-width: 100%; */
  max-width: 1440px;
  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: 30%; }
  .size-20 {
    width: 20%; } }

@media (min-width: 768px) {
  img[class*="align"].size-40,
  img[class*="align"].size-30,
  img[class*="align"].size-20 {
    width: 40%; } }


@media (max-width: 768px) {
  img[class*="align"].size-80,
  img[class*="align"].size-70,
  img[class*="align"].size-60,
  img[class*="align"].size-50,
  img[class*="align"].size-40,
  img[class*="align"].size-30,
  img[class*="align"].size-20 {
    max-width: 50%; } }

pre,
code {
  font-family: 'Cousine', monospace; }

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 {
  font-weight: 300;
  line-height: 1;
  text-rendering: optimizeLegibility; }

html,
body,
input,
select,
textarea {
  font-family: 'Barlow', '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; }
  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: 'Bitter', times, serif; }

/* -- h1,h2... Promo/Landings -- */
.text-landing {
  letter-spacing: .4rem;
  text-transform: uppercase; }
  @media (min-width: 768px) {
    .text-landing {
      letter-spacing: 1.6rem; } }

/* -- 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)
=========================================== */
.text-apple,
.bg-apple {
  font-family: 'San Francisco', helvetica, arial, sans-serif; }

/* Ultra Light */
@font-face {
  font-family: 'San Francisco';
  font-weight: 100;
  src: url("https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-ultralight-webfont.woff2"); }

/* Thin */
@font-face {
  font-family: 'San Francisco';
  font-weight: 200;
  src: url("https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-thin-webfont.woff2"); }

/* Regular */
@font-face {
  font-family: 'San Francisco';
  font-weight: 400;
  src: url("https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-regular-webfont.woff2"); }

/* Bold */
@font-face {
  font-family: 'San Francisco';
  font-weight: bold;
  src: url("https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-bold-webfont.woff2"); }

/*=========================================
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.png") 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; }
    
    section.no-padding,
    .slide.no-padding {
      padding-bottom: 0;
      padding-top: 0; } }

/*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 6s;
            animation: fadeIn 6s;
    background: url("../images/swipe.svg") no-repeat center top;
    background-size: 4.8rem;
  } */
  #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; }

.clients.team li {
  flex-grow: 0;
  justify-content: start;
}


.clients.team li,
[class*='bg-'] .clients.team li {
  background-color: inherit;
}

.clients.team li:hover,
[class*='bg-'] .clients.team li:hover {
  transform: none;
  box-shadow: none;
}

.clients.team li figure img {
  object-fit: cover;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
}

.clients.team figcaption h4 {
  font-size: 1.8rem;
  font-weight: 600;
  line-height: 2.2rem;
  margin-bottom: 0;
}

/* .flexblock.clients.team li figcaption {
  padding: 0 1.8rem 1.8rem;
} */
.flexblock.clients.team li figcaption,
.flexblock.clients.team li img {
  padding: 0;
  padding-bottom: 1.8rem;
  padding-right: 1rem;
}

.clients.team figcaption p {
  font-size: 1.4rem;
  line-height: 1.8rem;
}

@media (min-width: 1024px) {
  .clients.team li {
    width: calc(100% / 4);
  }
}

@media (min-width: 600px) {
  .clients.team li {
    width: calc(100% / 4);
  }
}

/*==================================================
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%; }

@media (max-width: 1440px) {
  .card-40 .metrics li {
    width: 50%;
    word-wrap: normal; } }

@media (min-width: 1440px) {
  .card-40 .metrics li span {
    font-size: 5.8rem;
    word-wrap: normal; }
  
  .card-40 .flexblock.metrics {
    margin: inherit;
  }}

/*=====================================================
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: arial, 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 */ }
@media ( max-width: 720px ) {
  .longform {
    width: 100%;
    max-width: 72rem;
  }
}
  .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 .big-letter p:first-child:first-letter {
    color:pink;
    float: left;
    font-size: 11rem;
    font-weight: 600;
    line-height: 1;
    margin: -.4rem 1.6rem 0 0;
    padding: 0;
    text-transform: uppercase; }
  .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: #f7f9fb;
  color: #333; }

: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: #0F760F; }

a,
.bg-white a,
.bg-light a,
.bg-gradient-white a {
  color: #236477; }

a:hover {
  color: #7CAD3E; }

.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(221, 238, 255, 0.8);
  color: inherit; }

::-moz-selection {
  background-color: rgba(221, 238, 255, 0.8); }

::-webkit-selection {
  background-color: rgba(221, 238, 255, 0.8); }

::selection {
  background-color: rgba(221, 238, 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: #236477; }

.bg-secondary {
  background-color: #0F760F; }

.bg-light {
  background-color: #f7f9fb; }

.bg-black {
  background-color: #111; }

.bg-black-blue {
  /* background-color: #123; } */
  background-color: #173042; }

.bg-blue {
  background-color: #346; }

.bg-brown {
  background-color: #f9f8f2; }

.bg-gray {
  background-color: #d5d9e2; }

.bg-green {
  background-color: #7CAD3E; }

.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: #555;
  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: #dd4b39; }

/*===================================================
.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 #44d; }

button[type='submit'],
input[type='submit'],
.button,
.button:hover,
button[type='submit']:hover,
input[type='submit']:hover {
  background-color: #44d;
  color: #fff;
  text-shadow: 0 1px 0 #123; }

.button:active,
button[type='submit']:active,
input[type='submit']:active {
  background-color: #17d; }

.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 #44d;
  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: #abc; }

#webslides:hover #navigation a:hover {
  background-color: rgba(0, 10, 40, 0.8);
  color: #fff; }

/*============================
Footer
============================== */
footer[role='contentinfo'] {
  background-color: #fff; }

/*============================
Slides Index
============================== */
#webslides-zoomed {
  background: rgba(0, 10, 40, 0.8); }

#webslides-zoomed .column > .wrap-zoom {
  background-color: #f7f9fb;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 4px 8px rgba(0, 0, 0, 0.04);
          box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 4px 8px rgba(0, 0, 0, 0.04);
  color: #333; }
  #webslides-zoomed .column > .wrap-zoom: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); }
  #webslides-zoomed .column > .wrap-zoom.current {
    border: 0.6rem solid rgba(0, 20, 255, 0.2); }

.text-slide-number {
  color: #abc; }


/*============================
CUSTOM
============================== */

.spacer-sm {
  padding: 1.6rem 0;
}
.spacer-md {
  padding: 2.4rem 0;
}
.spacer-lg {
  padding: 3.2rem 0;
}
.spacer-xl {
  padding: 4rem 0;
}


#navigation.custom-hover-nav {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#webslides:hover #navigation.custom-hover-nav a:hover {
  background-color: transparent;
  text-decoration: none;
  color: inherit; }

#webslides:hover #navigation.custom-hover-nav.hide-at-bottom {
  display: none;
}

footer #footer-nav {
  margin: 0;
  margin-bottom: 1rem;
  width: max-content;
}
footer#absolute-footer .grid {
  align-items: flex-end;
}
footer#absolute-footer > .grid > .column:last-child {
  align-items: flex-end;
}

footer #footer-nav li a {
  padding: 1rem;
}

#team h3 {
  margin-top: 2.4rem;
}

@media (min-width: 1024px) {
.fade-white {
  mask-image: linear-gradient(to left, rgba(0,0,0,1) 40%, rgba(0,0,0,0) 70%);
}
}

.toc ol {
  padding: 1rem;
}

.flexblock.sponsors {
  gap: 2rem;
  justify-content: center;
}

.flexblock.sponsors:before {
  content: '';
  display: none; }

.flexblock.sponsors li {
  background-color: white;
  align-items: center;
  flex-grow: 0;
}

.flexblock.sponsors.blink li > a {
  text-align: center;
  align-items: stretch;
  width: 100%;
  height: 100%;
  justify-content: center;
}

.flexblock.sponsors li:hover,
[class*='bg-'] .flexblock.sponsors li:hover {
  transform: none;
  box-shadow: none;
}

.flexblock.sponsors li figure img {
  object-fit: contain;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
}

.flexblock.sponsors figcaption h4 {
  font-size: 1.8rem;
  font-weight: 600;
  line-height: 2.2rem;
  margin-bottom: 0;
}

/* .flexblock.flexblock.sponsors li figcaption {
  padding: 0 1.8rem 1.8rem;
} */
/* .flexblock.flexblock.sponsors li figcaption,
.flexblock.flexblock.sponsors li img {
  padding: 0;
} */

.flexblock.sponsors figcaption p {
  font-size: 1.4rem;
  line-height: 1.8rem;
}

.flexblock.sponsors-narrow {
  margin-top: 2rem;
}

@media (min-width: 600px) {
  .flexblock.sponsors li {
    width: calc(100% / 2 - 2rem);
  }

  .flexblock.sponsors-narrow li {
    width: calc(100% / 2 - 2rem);
  }
}

@media (min-width: 768px) {
  .flexblock.sponsors li {
    width: calc(100% / 3 - 2rem);
  }

  .flexblock.sponsors-narrow li {
    width: calc(100% / 3 - 2rem);
  }
}

@media (min-width: 1024px) {
  .flexblock.sponsors-narrow li {
    width: calc(100% / 4 - 2rem);
  }
}

@media (min-width: 1440px) {
  .flexblock.sponsors li {
    width: calc(100% / 5 - 2rem);
  }

  .flexblock.sponsors-narrow li {
    width: calc(100% / 5 - 2rem);
  }
}