/*! normalize.css v3.0.2 | MIT License | git.io/normalize *//** * 1. Set default font family to sans-serif. * 2. Prevent iOS text size adjust after orientation change, without disabling *    user zoom. */html {  font-family: sans-serif; /* 1 */  -ms-text-size-adjust: 100%; /* 2 */  -webkit-text-size-adjust: 100%; /* 2 */}/** * Remove default margin. */body {  margin: 0;}/* HTML5 display definitions   ===== *//** * Correct `block` display not defined for any HTML5 element in IE 8/9. * Correct `block` display not defined for `details` or `summary` in IE 10/11 * and Firefox. * Correct `block` display not defined for `main` in IE 11. */article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary {  display: block;}/** * 1. Correct `inline-block` display not defined in IE 8/9. * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. */audio,canvas,progress,video {  display: inline-block; /* 1 */  vertical-align: baseline; /* 2 */}/** * Prevent modern browsers from displaying `audio` without controls. * Remove excess height in iOS 5 devices. */audio:not([controls]) {  display: none;  height: 0;}/** * Address `[hidden]` styling not present in IE 8/9/10. * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22. */[hidden],template {  display: none;}/* Links   ===== *//** * Remove the gray background color from active links in IE 10. */a {  background-color: transparent;}/** * Improve readability when focused and also mouse hovered in all browsers. */a:active,a:hover {  outline: 0;}/* Text-level semantics   ===== *//** * Address styling not present in IE 8/9/10/11, Safari, and Chrome. */abbr[title] {  border-bottom: 1px dotted;}/** * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. */b,strong {  font-weight: bold;}/** * Address styling not present in Safari and Chrome. */dfn {  font-style: italic;}/** * Address variable `h1` font-size and margin within `section` and `article` * contexts in Firefox 4+, Safari, and Chrome. */h1 {  font-size: 2em;  margin: 0.67em 0;}/** * Address styling not present in IE 8/9. */mark {  background: #ff0;  color: #000;}/** * Address inconsistent and variable font size in all browsers. */small {  font-size: 80%;}/** * Prevent `sub` and `sup` affecting `line-height` in all browsers. */sub,sup {  font-size: 75%;  line-height: 0;  position: relative;  vertical-align: baseline;}sup {  top: -0.5em;}sub {  bottom: -0.25em;}/* Embedded content   ===== *//** * Remove border when inside `a` element in IE 8/9/10. */img {  border: 0;}/** * Correct overflow not hidden in IE 9/10/11. */svg:not(:root) {  overflow: hidden;}/* Grouping content   ===== *//** * Address margin not present in IE 8/9 and Safari. */figure {  margin: 1em 40px;}/** * Address differences between Firefox and others browsers. */hr {  -moz-box-sizing: content-box;  box-sizing: content-box;  height: 0;}/** * Contain overflow in all browsers. */pre {  overflow: auto;}/** * Address odd `em`-unit font size rendering in all browsers. */code,kbd,pre,samp {  font-family: monospace, monospace;  font-size: 1em;}/* Forms   ===== *//** * Known limitation: by default, Chrome and Safari on OS X allow very limited * styling of `select`, unless a `border` property is set. *//** * 1. Correct color not being inherited. *    Known issue: affects color of disabled elements. * 2. Correct font properties not being inherited. * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. */button,input,optgroup,select,textarea {  color: inherit; /* 1 */  font: inherit; /* 2 */  margin: 0; /* 3 */}/** * Address `overflow` set to `hidden` in IE 8/9/10/11. */button {  overflow: visible;}/** * Address inconsistent `text-transform` inheritance for `button` and `select`. * All others form control elements do not inherit `text-transform` values. * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. * Correct `select` style inheritance in Firefox. */button,select {  text-transform: none;}/** * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` *    and `video` controls. * 2. Correct inability to style clickable `input` types in iOS. * 3. Improve usability and consistency of cursor style between image-type *    `input` and others. */button,html input[type="button"], /* 1 */input[type="reset"],input[type="submit"] {  -webkit-appearance: button; /* 2 */  cursor: pointer; /* 3 */}/** * Re-set default cursor for disabled elements. */button[disabled],html input[disabled] {  cursor: default;}/** * Remove inner padding and border in Firefox 4+. */button::-moz-focus-inner,input::-moz-focus-inner {  border: 0;  padding: 0;}/** * Address Firefox 4+ setting `line-height` on `input` using `!important` in * the UA stylesheet. */input {  line-height: normal;}/** * It's recommended that you don't attempt to style these elements. * Firefox's implementation doesn't respect box-sizing, padding, or width. * * 1. Address box sizing set to `content-box` in IE 8/9/10. * 2. Remove excess padding in IE 8/9/10. */input[type="checkbox"],input[type="radio"] {  box-sizing: border-box; /* 1 */  padding: 0; /* 2 */}/** * Fix the cursor style for Chrome's increment/decrement buttons. For certain * `font-size` values of the `input`, it causes the cursor style of the * decrement button to change from `default` to `text`. */input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button {  height: auto;}/** * 1. Address `appearance` set to `searchfield` in Safari and Chrome. * 2. Address `box-sizing` set to `border-box` in Safari and Chrome *    (include `-moz` to future-proof). */input[type="search"] {  -webkit-appearance: textfield; /* 1 */  -moz-box-sizing: content-box;  -webkit-box-sizing: content-box; /* 2 */  box-sizing: content-box;}/** * Remove inner padding and search cancel button in Safari and Chrome on OS X. * Safari (but not Chrome) clips the cancel button when the search input has * padding (and `textfield` appearance). */input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration {  -webkit-appearance: none;}/** * Define consistent border, margin, and padding. */fieldset {  border: 1px solid #c0c0c0;  margin: 0 2px;  padding: 0.35em 0.625em 0.75em;}/** * 1. Correct `color` not being inherited in IE 8/9/10/11. * 2. Remove padding so people aren't caught out if they zero out fieldsets. */legend {  border: 0; /* 1 */  padding: 0; /* 2 */}/** * Remove default vertical scrollbar in IE 8/9/10/11. */textarea {  overflow: auto;}/** * Don't inherit the `font-weight` (applied by a rule above). * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. */optgroup {  font-weight: bold;}/* Tables   ===== *//** * Remove most spacing between table cells. */table {  border-collapse: collapse;  border-spacing: 0;}td,th {  padding: 0;}
/* Adapted from Skeleton V2.0.4, Dave Gamache, www.getskeleton.com, under opensource.org/licenses/mit-license.php */
/* Base Styles
––––––––––––––––––– */
html{font-size:calc(100% / 1.4);overflow-x:hidden;scroll-behavior: smooth;} /* html is set to 62.5% so that all the REM measurements throughout are based on 10px sizing. So basically 1.5rem = 15px :) */
@media(max-width:600px){html{font-size:calc(92% / 1.4);}}
*{box-sizing:border-box;}
::selection{color:#fff;background-color:#3cf;}
body{font-size:1.6em;/* fix for Chrome rem body bug */}
body{background:#333 url("/pics/london-city-skyline.gif") repeat-y right; color:#bbb; width:100%;overflow-x:hidden; position:relative; margin:0; padding:0; font-family: source-sans-pro, Helvetica, Arial, sans-serif; font-weight: 300; font-style: normal; letter-spacing:0; font-size: 1.6rem; line-height:2.4rem;}
div.mask-logo{position:absolute; top: -20vw; left:-20vw; width:40vw; height:40vw; background-image: radial-gradient(ellipse, rgba(0,0,0,0.6) 10%, rgba(0,0,0,0) 70%);z-index:-1}
div.mask{position:absolute; top: 0; left:12.5vw; width:25vw; height:50vw; background-image: radial-gradient(ellipse, rgba(51,51,51,1) 0%, rgba(51,51,51,0) 70%);z-index:-1}
div.spots{position:absolute; top: -10vw; right:-10vw; width:60vw; height:60vw; background-image: radial-gradient(ellipse, rgba(77,77,77,1) 0%, rgba(77,77,77,0) 70%);z-index:-1}
div.tilt, div.tilt2{position:absolute; top: -30vw; right:-25vw; width:50vw; height:50vw; transform: rotate(7deg); background-image: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.10));z-index:-1}
div.tilt2{top: -39vw; right:-5vw; background-image: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.15))}
section.team-photo{position:absolute; top:10rem; left:0; width: 30vw; height: 50vw; margin:0; padding:0;z-index:-2}
section.team-photo img{height: 100%; width: auto;}
.proposal-head img, img.proposal-photo{height:auto; width:100%;}
.light.proposal-welcome h2{font-size:6rem; line-height:0.8; color:#3fc;}
@media (min-width: 1150px){.light.proposal-welcome h2{font-size:7rem;}}
section{padding: 9rem calc(100vw * 4 / 18) 10rem calc(100vw * 4 / 18); width: auto; position:relative;}
section#summary{padding-top:0;}
@media (max-width: 1150px){section#summary{padding-bottom:0;margin-bottom:0;padding-top:4rem;}}
div.gap-tv{margin-top: calc( (100vw / 16 * 9) - (100vw / 2.35) ); }
section#video-pitch{margin:8rem 0 0 0; padding:0; width:100vw; height:calc(100vw / 16 * 9); background:#000; z-index:1;}
section#video-pitch.wide{height:calc(100vw / 2.35);}
section#invitation-to-act{background: linear-gradient(to right, rgba(0, 0, 0, .7), rgba(0, 0, 0, .3)), url("/pics/humanize-video-marketing.jpg") no-repeat; background-size: cover; padding:6rem calc(100vw * 7.3 / 18) 6rem calc(100vw * 4 / 18);}
section#invitation-to-act.deep-dive{background: linear-gradient(to right, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.1)), url("/pics/video-marketing-model.jpg") no-repeat; background-size: cover;}
section#invitation-to-act h2 i{display:block; font-style: normal; font-size:75%; color:#3cf;}
@media (max-width: 1150px){section#invitation-to-act{padding:6rem calc(18vw - 4rem);}}
section#header{position:absolute; top:0; left:0; width:14rem;border:none; padding:0;}
section#header a{text-decoration: none; width:14rem;}
section#header a img{width:100%; height:auto;margin:2rem;}
section#header span{display:block; width:11rem; margin:-4.9rem 0 0 10.2rem; font-size:1rem;font-weight:700;line-height:1.02rem;text-align:right; text-transform: uppercase;color:#666; }
section#footer {display: flex; flex-flow: row wrap; background:#444; }
.clarity ul.flexible{display: inline-flex; flex-flow: row wrap; width:auto; list-style: none; padding:0; margin-bottom: 2rem;}
.clarity ul.flexible li a{text-decoration: none; font-style: normal; display:block; padding: 0.2rem 2rem; margin:0; border-right:1px solid #333; background-image: linear-gradient(to bottom right, rgba(0,0,0,0.2), rgba(0,0,0,0.7));}
.clarity ul.flexible li a:hover{background:#fc3; color:#000;}
section#end {background:#333;}
.phone{font-weight:700;margin:-1rem 2rem 0 0;}
@media(max-width:400px){.phone{display:none;}}
@media(max-width:600px){
    /*section#summary,section#mid{padding-top:10rem;}*/
    section#trusted-by + section#summary{padding-top:0;}
    p#proposition{font-family: source-sans-pro, Helvetica, Arial, sans-serif; font-weight: 700; font-size: 1.3rem; padding:4.5rem 0 0 0;}
    section#header span{display:none;}
}
section#summary div.itv{width:100%; height:0; padding: 0 0 56.25% 0;position: relative;}
section#summary div.itv iframe{width:100%; height:100%;position:absolute;top:0;left:0;}
section.advantage h3{margin:2.4rem 0 0 0; padding:0;}
section.light, section.dark{background-repeat: no-repeat; background-position: 80% 100%;padding-right: calc(100vw * 7.3 / 18);box-shadow: inset 0 0 0 2000px rgba(255,255,255,3%);}
section.dark{background-position: 22% 100%;padding-right: calc(100vw * 7.3 / 18); box-shadow: none;}
section.light ol ol, section.dark ol ol{margin:1rem 0;}
section.light ol ol li, section.dark ol ol li{line-height:1.2; margin-bottom:0rem; color:#fff;}
section.bump{padding: 12rem calc(100vw * 4 / 18) 16rem calc(100vw * 8 / 18);}
section.light.tight,section.dark.tight{padding-top:6rem; padding-bottom:6rem; }
/*left*/
section.feel{background-image: url('/pics/marketing-films-feel-video.jpg'); }
section.now{background-image: url('/pics/marketing-films-now-video.jpg'); }
section.services{background-image: url('/pics/marketing-films-services-video.jpg');}
section.timeline{background-image: url('/pics/marketing-films-timeline-video.jpg'); }
section.experience{background-image: url('/pics/marketing-films-experience-video.jpg'); }
section.onboarding{background-image: url('/pics/marketing-films-onboarding-video.jpg'); }
section.protection{background-image: url('/pics/marketing-films-protection-video.jpg'); }
section.result{background-image: url('/pics/marketing-films-result-video.jpg'); }
section.who{background-image: url('/pics/marketing-films-who.jpg'); }

/*right*/
section.exploit{background-image: url('/pics/marketing-films-exploit-video.jpg');}
section.safe{background-image: url('/pics/marketing-films-safe-video.jpg'); }
section.outcomes{background-image: url('/pics/marketing-films-outcomes-video.jpg'); }
section.signup{background-image: url('/pics/marketing-films-signup-video.jpg'); }
section.hello{background-image: url('/pics/marketing-films-hello-video.jpg'); }
section.hello-demand{background-image: url('/pics/marketing-films-hello-demand-video.jpg'); }
section.complexity{background-image: url('/pics/marketing-films-complexity-video.jpg');}
section.levels{background-image: url('/pics/marketing-films-levels.jpg'); }

@media(max-width:1150px){
    section.light, section.dark{background-position: 100% 100%;padding: 4rem calc(18vw - 4rem);box-shadow: inset 0 0 0 1000px rgba(44,44,44,66%);}
    section.dark{box-shadow: inset 0 0 0 1000px rgba(0,0,0,33%);}
}
/* === video === */
section#video-pitch div.interactive-video {position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;}
section#video-pitch div.interactive-video iframe {width: 100%; height: 100%; position: absolute; top: 0; left: 0;}
section#video-pitch div.vimeo-video{padding:calc(100% / 16 * 9) 0 0 0;position:relative;}
section#video-pitch.wide div.vimeo-video{padding:calc(100% / 2.35) 0 0 0;}
section#video-pitch div.vimeo-video iframe{position:absolute;top:0;left:0;width:100%;height:100%;}
/* === menu === */
ul.menu-desktop{display:block; position:absolute; top:2.5rem; right:4.5rem;}
ul.menu-desktop li {line-height: 1;font-weight:700; font-size: 1.3rem; text-transform:uppercase;text-align:right; list-style-type: none; margin:0;padding:0;}
ul.menu-desktop li a{text-decoration: none;margin:0;padding:0;}
div.so-far{display:flex; flex-wrap:wrap;}
div.so-far p{width:50%; padding: 2rem; border-right:1rem solid #123;}
div.so-far p em{font-size:300%;font-style: normal;color:#3fc;}
div.so-far p strong{display:block;color:#3fc;}
div.shortcuts {position:absolute; top:calc(100vw * 10 / 18 * 9 / 16 + 8rem);  right:calc(100vw * 4 /18 - 2.5rem); width: calc(100vw * 3.1 / 18); font-size:1.3rem; line-height: 1.25; z-index:999;}
div.shortcuts ul{margin:0;padding:0;}
div.shortcuts ul li{list-style:none;margin:0 0 3rem 0; padding:0;clear:both;}
div.shortcuts img{width:60px;height:auto;float:left; margin-top:-1rem;}
div.shortcuts a{text-decoration: none;}
div.shortcuts.high{top:calc(100vw / 16 * 9 * 7.5 / 18); width:100%; padding:0; right:calc(100vw * 4 /18 - 2.5rem);text-align: right;}
div.shortcuts.sider {top:11rem;}
div.shortcuts.sider.proposal {top:0; border-left:1px solid #000; padding: calc(100vw * 1.1/18) 0 0 1rem;}
div.shortcuts.sider.proposal ul li, .proposal-head ul li{margin:0 0 1rem 0;}
.boxed{background:#222; border: 1px solid #3fc; padding:2rem;}
.proposal-head ul{margin:0 0 5.6rem 0; padding:0;}
.proposal-head ul li{list-style: none; margin:0;}
.proposal-timeline{margin-bottom: 2rem;}
.proposal-timeline td{vertical-align: top; padding: 1rem; border:1px solid #000;}
.proposal-timeline td:first-of-type{background:#000; border-bottom: 1px solid #333;}
.proposal-timeline em{display:block; color:#3fc;}
.proposal-timeline tr.loopName td{background:#123; font-weight:100;text-transform: uppercase; color:#fff; font-size:4.2rem; padding: 1.4rem 0 1.1rem 1rem;}
.proposal-tight{line-height:1; margin:0;}
table.fees{border-top:1px solid #666; margin-bottom:2rem;}
table.fees th{font-weight:700; text-transform: uppercase; text-align: left; background:#222;}
table.fees tr{border-bottom:1px solid #666;}
table.fees tr:last-of-type{background:#222;}
table.fees tr td, table.fees tr th{padding:0.5rem}
table.fees tr td:last-of-type{padding-left:1rem;text-align: right;}
table.story-structure{width:100%; margin-bottom:1.6rem;}
table.story-structure td {border:1px solid #000; padding:1rem;color:#000;font-weight: 700;}
table.story-structure th{color: #3cf; text-align: left; font-weight:100;}
.star td:nth-child(1){width:20%;background:#09c;}
.star td:nth-child(2){width:10%;background:#3cf;}
.star td:nth-child(3){width:50%;background:#09c;}
.star td:nth-child(4){width:10%;background:#3cf;}
.promised td:nth-child(1){width:20%;background:#3cf;}
.promised td:nth-child(2){width:10%;background:#09c;}
.promised td:nth-child(3){width:40%;background:#3cf;}
.promised td:nth-child(4){width:20%;background:#09c;}
.promised td:nth-child(5){width:10%;background:#3cf;}
.protect{color:#3fc;}
.protect em{color:#fff;}
.dark p.big-idea{font-size: 3.6rem; line-height:1;color:#c3f; border-left: 2rem solid #c3f; padding-left: 1.6rem;}
h1.prices{margin-top:-1.6rem;}

/* === core, case schematic images === */
.schematic{width:90%;}
.schema{width:auto;}
@media (max-width: 1150px){.schema{width:100%;}}

p.big-graphic img{width:80%; margin-bottom:2rem;}
@media (max-width: 1150px){
    p.big-graphic img {width:100%;}
    div.mask{position:absolute; top:calc(100vw / 16 * 9); left:12.5vw; width:25vw; height:50vw; }
    div.spots{position:absolute; top:calc(100vw / 16 * 9); right:12.5vw; width:25vw; height:50vw; }
    section.team-photo{position:absolute; top:calc(100vw / 16 * 9); left:0; width: 60vw; height: 100vw; margin:0; padding:0;z-index:-2}
    section.team-photo img{height: 100%; width: auto;}
    section#header span{margin:-4.5rem 0 0 15rem}

    ul.menu-desktop{display:none;}
    div.shortcuts{display:none;}
    section{padding: 4rem calc(18vw - 4rem) 6rem calc(18vw - 4rem);}
}
img.case-logo{width:calc(16rem + 10%); margin-bottom:-8rem;}
img.whirlpool{width:320px;height:auto; margin:2rem 0 1rem 0}
img.buyer{width:100%;height:auto;margin:0 0 2.4rem 0;}
img.persuasive-video{width:100%;}
#testimonials img{width:80px; height:auto;display:block;}
#testimonials li{list-style: none; margin:2rem 0 0 0 ; padding: 0;}
#testimonials ul {margin:0;padding:0;}
#testimonials span{display:block;margin:0;padding:0;color:#fff;}
.testimonial-table img{margin-right:1rem;}
.team-table img{margin-right:1rem; width:160px; height:auto;}
@media (max-width: 600px){.team-table img{margin-right:0.5rem; width:80px; height:auto;}}
.testimonial-table td, .team-table td{vertical-align: top; padding-bottom: 1rem;}
.testimonial-table span, .team-table span{color:#fff; font-weight:700;}
section.case-list img + p{margin:0 0 4.8rem 0;}
span.calendar{display:inline-block; font-weight: 700; padding: 0; margin-right: 0.8rem;}
span.calendar img{width:6rem;height:auto;}
table.calendar {margin-bottom: 2rem;}
table.calendar tr td{padding:1rem 0 2rem 1rem; vertical-align:top;}
table.calendar tr td:first-child{border-right:1px solid #000; padding: 0 0 2rem 1rem;}
table.calendar tr td em{display:block; color:#3fc;}
/* === typography === */
h1{font-weight: 700; letter-spacing:-0.6rem; margin:0 0 3.6rem 0;color:#999; font-size:calc(6rem + 1.7vw); line-height:calc(4.6rem + 1.8vw);position : relative; margin-top:9rem;}
@media (max-width: 1150px){h1{margin: 2rem 0 6rem 0;}img.case-logo{margin-bottom:-2rem;}}
h1 em{color:#fff; font-style: normal;}
h1 i{font-size:calc(3.2rem + 1vw);text-transform: none; color:#ccc; font-style: normal; letter-spacing:-0.3rem; font-weight: 100; display:block; vertical-align: top;line-height:calc(3.2rem + 1vw); margin-top:0rem;}
h2, .loud, p#proposition{font-family: capitolium-2, serif; font-weight: 300; font-style: normal; font-size:calc(2.4rem + 1vw); letter-spacing:-0.04rem;line-height:1.125; margin:0 0 3.6rem 0;}
h1 strong, h2 strong{color:#fff; font-weight: normal; font-style: italic;}
h2 strong{font-style:normal; background:#494949;}
h2{font-size:calc(2.4rem + 0.8vw); margin-bottom:2.8rem; line-height:1; color:#eee; letter-spacing:-0.1rem;}
.dark h2, .light h2{font-size:calc(3.6rem + 0.8vw); margin-bottom:2.8rem; line-height:1; color:#ccc;}
.dark h2, .light h2{font-size:calc(3.6rem + 0.8vw); margin-bottom:2.8rem; line-height:1; color:#ccc;}
.dark h3, .light h3{color:#3fc;}
.dark h4, .light h4{color:#fff; font-size:1.6rem; text-transform: uppercase;}
.dark li, .light li{font-size:115%;margin-bottom:1rem;}
.dark p, .light p, .dark td, .light td{font-size:115%;}
.dark p.reading, .light p.reading{font-size:90%;}
h2 em, .light h2 em{font-style: normal; font-family: source-sans-pro, Helvetica, Arial, sans-serif; font-weight: 900; font-size: 2.5rem; background: #3fc; padding:0 1rem; position: relative; bottom: 0.5rem; color: #444; text-transform:uppercase;}

li em.stat{font-size:2rem; font-weight: 700; padding:0.2rem 1rem 0.2rem 0.8rem; background:#222; border-left: 1px solid #3fc;}
.no-bullet{padding-left:0;}
.no-bullet li{list-style: none; color:#fff;margin-bottom:1.4rem; clear:both;}
.no-bullet li li{list-style: unset;}
.no-bullet li img{width:80px; height:auto; margin-right: 1rem;}
.no-bullet li span{font-weight: 700;}
p{margin:0 0 2.4rem 0; color:#ddd;}
ul,ol{margin:0 0 2.4rem 0;padding-left:1.6rem;}
li{margin:0 0 0 0;}
strong{font-weight: 700;}
a{color:#fc3;}
a[href^="http"]:after{content:'';}
a:hover{color:#3cf;}
a:hover img{filter: brightness(1.2);}
section#header a:hover img{filter: brightness(6);}
a.button, input.button{display:inline-block;height:4.2rem;padding:0 2rem;color:#444;text-align:center;line-height:4.2rem;letter-spacing:-.1rem;font-weight:700;text-transform:uppercase;text-decoration:none;white-space:nowrap;background-color:#fc3;border:1px solid #222;cursor:pointer;overflow:hidden !important;}
a.button:hover, input.button:hover{background:#fd6;}
.dark a.button, .light a.button{white-space: unset;height:auto; line-height: 1.2;padding:1.1rem 2rem 1rem 2rem;}
div.tldr p{font-family: capitolium-2, serif;font-weight: 100; font-size: 2rem; line-height: 1.25;margin-bottom: 2.4rem;color:#3fc;}
div.tldr h3{font-size:175%; line-height: 1;}
p#proposition{font-size:1.6rem;color:#888;}
section#invitation-to-act h2 {color:#fff; margin-bottom:0.8rem;}
section#invitation-to-act p.ctv {display:inline-block; background: rgba(255,255,255,0.6); padding: 1rem 1.5rem; font-weight: 700; color:#000;}
section#end p{font-size:1.3rem; margin:0;}
.social-icons{line-height:1; padding:0;display:inline-block;}
.social-icons img{width:30px;height:30px; margin: 2.4rem 0.5rem 0 0; display:inline-block;}
.punch{padding:2rem 0 4rem 0; margin:0; position:relative;}
table.timetable {margin-bottom: 2.8rem;}
table.timetable tr th, table.timetable tr td{background:#222;border-right:2px solid #333; padding: 0.2rem 0.8rem; text-align:left;}
table.timetable tr td{background:#2c2c2c; border-bottom:2px solid #333;}
table.timetable tr td:first-of-type{text-align:center; color:#fff; font-weight:700; font-size:120%;}
.pain{color:#3fc; display:block;}
@media (max-width: 750px) {.punch{margin-bottom: 2.4rem;}  }
.shout{display:none; position:absolute; top:3rem; z-index:99; right: calc(-100vw * 2.7 / 18 - 2rem); width: calc(100vw * 2.7 / 18 + 5rem); height: calc((100vw * 2.7 / 18 + 5rem) / 2.35); padding:2rem 0 0 5rem; text-align:right; font-weight: 700; font-size:3.6rem; line-height: 0.8; color:rgba(255,255,255,0.7); letter-spacing: -0.1rem;}
.shout img{display:none; position:absolute; top:0;left:0; z-index:-1; width:100%;height:100%;}
@media (max-width: 1150px){
    .shout{right: 0; top:-3rem; width: calc(100vw * 3.7 / 18 + 5rem); height: calc((100vw * 3.7 / 18 + 5rem) / 2.35); font-size:1.6rem; padding:0; color:#fff;}
    .shout img{top:-5rem;}
}
.punch h3, .punch p, .punch ul li, .punch ol li{margin: 0; padding:0; line-height: 1.5;clear:both; }
.punch p{margin: 2.4rem 0 0 0;}
.punch h3{color:#3fc;}
.punch h3+p{margin-bottom:2.4rem;}
.punch ul, .punch ol{margin:0;}
.punch ul li img{width: 6rem; height:auto; float:left; margin-right:1rem; margin-bottom:1rem;}
.punch ul li span{color:#fff;display:block;}
.loud{font-size:3.2rem !important; color:#999;}

.clarity h3, .clarity p, .clarity ul li, .clarity ol li{margin: 0; padding:0; line-height: 1.5;clear:both; }
.clarity p{margin: 2.4rem 0 0 0;}
.clarity h3{color:#3fc;}
.clarity h3+p{margin-bottom:2.4rem;}
.clarity ul, .clarity ol{margin:0;}
.clarity ul li img{width: 6rem; height:auto; float:left; margin-right:1rem; margin-bottom:1rem;}
.clarity ul li span{color:#fff;display:block;}

div#whats-included.punch ul li img{margin-bottom:0; float:none;}
ul.action{margin:0; padding: 0;}
ul.action li{list-style: none; clear:both; margin:1.6rem 0 0 0; padding:4rem; border:1px solid #555;background:linear-gradient(135deg, #1f191f, #333);}
ul.action li a{text-decoration: none;}
.action img{width:60px; height:auto; float:left; margin:-1rem 0 2rem 0;}
img.icon{width:80px; height:auto;}
img.icon-float{clear:both; width:80px; height:auto; float:left;display:block;margin-bottom:0; }
ul.about li{font-size:112.5%; line-height:1.25; margin: 0 0 2.4rem 0; list-style-type: circle; color:#fff;}
.shortcuts .bigger{font-size: 2rem !important;}
.shortcuts.next{font-size: 103%; border:1px solid #000; background: #222; padding: 4rem;}
.terms{font-size:80%;}
.standout{color:#3fc; font-size:125%; line-height:1.25; font-weight:100;}
.balance-reach,.balance-demand,.balance-convert,.balance-upsell{margin-bottom: 1rem;color:#3cf; line-height: 1.1;}
.balance-demand{color:#f3c;}
.balance-convert{color:#3fc;}
.balance-upsell{color:#cf3;}
.balance-reach i,.balance-demand i,.balance-convert i,.balance-upsell i{padding-right:0.5rem;letter-spacing: -0.33rem; font-style:normal;}

strong.white{color:#fff !important;}

/*====distinguisher====*/
ol.distinguisher {list-style: none;counter-reset: item; margin-top:2rem; padding:0 0 0 4rem;}
ol.distinguisher li {counter-increment: item;margin-bottom: 5px;}
ol.distinguisher li:before {margin-right: 1rem; margin-left: -4rem; content: counter(item);border-radius: 50%; border: 2px solid #3fc; color: #3fc; font-weight:700; width: 2.4rem;text-align: center;display: inline-block; background-image: linear-gradient(135deg, rgba(128,0,128,0.9), rgba(0,0,0,0));}
span.distinction {margin-right: 1rem; border-radius: 50%; border: 2px solid #3fc; color: #3fc; font-weight:700; width: 2.6rem;text-align: center;display: inline-block; margin-bottom: 5px; background-image: linear-gradient(135deg, rgba(128,0,128,0.9), rgba(0,0,0,0));}
/*=== workshop ===*/
section.workshop{padding-bottom:0;}
section.workshop h2{color:#3cf; margin-bottom: 2rem;}
section.workshop div{background: #114354;}
section.workshop div p{padding-top:4rem;padding-right:3rem;}
section.workshop ol{padding:2rem 2rem 2rem 4rem;}
section.workshop img{float:left;margin-right:3rem;}
section.workshop li{color:#9df; margin-bottom:0.5rem;}
.clearfloat{content:""; display:block; clear:both;}
/*=== ul & ol ===*/
section#footer ul{margin:0 0 4.2rem 0; padding:0; width:22rem;}
section#footer ul li{list-style:none; margin:0;}
section#footer ul li a{text-decoration: none;}
ul.contacts li{margin:0;}
ol.model li i{font-size:250%;font-weight:300;font-style: normal; display:block; color:#3fc;}
ol.model li{list-style:none;padding:0;margin-left:-1.6rem;}
.punch em{color:#ddd;}
table.buyer-pain td{vertical-align:top;padding: 0 1rem 1rem 0; margin:0;line-height:1.25; }
table.buyer-pain td strong{color:#3cf;}
.buyer-pain img{width:80px;height:auto;}
@media (max-width:750px){.buyer-pain img{width:60px;}}

/* === trusted-by ===*/
section#trusted-by{display: flex; flex-flow: column; align-items:self-start; margin:0; padding:0; z-index:-1;}
@media (min-width: 1150px) {
    section#trusted-by{/*margin-top: calc(50vw * 9 / 16 + 2rem);*/}
    section#summary{margin-top: calc(100vw * 10 / 18 * 9 / 16 + 8rem); padding: 0 calc(100vw * 7.3 / 18) 0 calc(100vw * 4 / 18);}
    div.gap-tv{margin-top: calc( (50vw / 16 * 9) - 1.8rem);}
    section#video-pitch{position:absolute; top:0; left:0; right:0; padding: 0; width: calc(100vw * 10 / 18); height: calc(100vw * 10 / 18 * 9 / 16); margin:0 auto;}
    section#video-pitch.wide{height: calc(100vw * 10 / 18 / 2.35); margin:0 auto;}
    section#video-pitch.wide + section#summary{margin-top: calc(100vw * 10 / 18 / 2.35 + 8rem);}
}
section#trusted-by div.container {transition: all 0.3s ease;}
section#trusted-by h4{margin:2.5rem 0 -2rem 3rem;padding:0;line-height:1; color:#888; z-index:999;}
section.course p, section.course li{font-size:112.5%; clear:both;}
section.course p img{width:6rem;height:auto;margin: 2.5rem 1rem 0 0; float:left;}
.emphasis{color:#3fc;}
@media (max-width: 1150px) {section#trusted-by {padding: 0 20px 0 20px;}}
div.highway-slider {display: flex;justify-content: center;width: 100%;height: 150px;}
div.highway-slider div.highway-barrier {overflow: hidden;position: relative;}
div.highway-slider ul.highway-lane {display: flex;height: 100%;}
div.highway-slider ul.highway-lane li.highway-car {flex: 1;display: flex;justify-content: center;align-items: center;background: transparent;color: #343434;}
@keyframes translatestf { 0% {transform: translateX(100%);} 100% {transform: translateX(-500%);} }
#stffull div.highway-barrier ul.highway-lane {width: 500%;}
#stffull div.highway-barrier ul.highway-lane li.highway-car {animation: translatestf 30s linear infinite;}
#stffull div.highway-barrier ul.highway-lane li.highway-car h4 {font-size: 28px;}
@keyframes translateinfinite { 100% {transform: translateX(calc(-6480px));} }
#infinite div.highway-barrier {background:transparent;}
#infinite div.highway-barrier::before, #infinite div.highway-barrier::after {content: " ";position: absolute;z-index:9; width: 180px;height:100%;}
#infinite div.highway-barrier ul.highway-lane {width: calc(12960px);}
#infinite div.highway-barrier ul.highway-lane li.highway-car {width: 180px; margin:0;animation: translateinfinite 200s linear infinite;}
#infinite div.highway-barrier ul.highway-lane li.highway-car img{opacity:0.6; width: 140px; height: auto;}

/*=== menu ===*/
#top-nav {position:absolute; top:0; right:0; width:20rem; height: 50px; padding: 4rem; text-align:right; z-index:9999;}
.menu {display:block; list-style-type: none;margin:0; width:40rem;padding:0;}
.menu > li {margin: 0 1rem; overflow: hidden;}
.menu-button-container {display: flex;height: 100%;width: 30px; padding-left:11rem;cursor:pointer;}
#menu-toggle {display: none;}
.menu-button, .menu-button::before, .menu-button::after {display: block;background-color: #fc3;position: absolute;height: 4px;width: 30px;transition: transform 400ms cubic-bezier(0.23, 1, 0.32, 1);border-radius: 2px;}
.menu-button::before {content: '';margin-top: -8px;}
.menu-button::after {content: '';margin-top: -19px;}
.menu-button img{height:30px; width:30px; margin-top:-30px;} /*up to date*/
#menu-toggle:checked + .menu-button-container .menu-button::before {margin-top: 0;transform: rotate(405deg);}
#menu-toggle:checked + .menu-button-container .menu-button {background: rgba(255, 255, 255, 0);}
#menu-toggle:checked + .menu-button-container .menu-button::after {margin-top: -27px;transform: rotate(-405deg);}
.menu {position: absolute;top: 0;margin-top: 70px;left: 0;flex-direction: column;width: 100%;justify-content: center;align-items: center;}
#menu-toggle ~ .menu li{height: 0;margin: 0;padding: 0;;transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);}
#menu-toggle:checked ~ .menu li {height: 2.4rem;padding: 0.25rem 1rem;transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);}
.menu > li {display: flex;justify-content: left;margin: 0;padding: 0.5em 0;width: 100%;background-color: #222;}
#menu-toggle:checked  ~ .menu > li:last-of-type {padding-bottom: 2em;}
#menu-toggle:checked  ~ .menu > li:first-of-type {padding-bottom: 2em;}
.menu > li a{text-decoration: none; text-transform: uppercase; font-weight: 700; font-size:1.3rem; margin-left: 2rem;}
.menu > li:first-of-type a{margin-left:0;}
@media (min-width: 1150px){section#top-nav{display: none;}}
/*=== contacts ===*/
#contacts .contact-item{display: flex;flex-direction: column;}
#contacts input, textarea{ color: #111111;}
/*=== compare table ===*/
table.compare{margin:0 0 2.4rem 0; width: fit-content;}
table.compare tr:nth-of-type(2n){border-top:1px solid #444;}
table.compare tr:nth-of-type(2n) th{padding:1rem 1rem 0 1rem;}
table.compare tr{background: rgba(40,40,40,.7);}
table.compare tr:nth-of-type(4n),table.compare tr:nth-of-type(4n+1){background: rgba(46,46,46,.7);}
table.compare tr:nth-of-type(1){background: rgba(0,0,0,0.3);}
table.compare tr:nth-of-type(1) th{font-weight: 700;}
table.compare td{padding: 0 0.3rem 0.5rem 0; text-align:right; width: 25%; font-size:115%;}
table.compare td:nth-of-type(1),table.compare tr:nth-of-type(1) th:nth-of-type(1){color:#3fc;}
table.compare td:nth-of-type(2),table.compare tr:nth-of-type(1) th:nth-of-type(2){color:#f3c;}
table.compare td:nth-of-type(3),table.compare tr:nth-of-type(1) th:nth-of-type(3){color:#3cf;}
table.compare td:nth-of-type(4),table.compare tr:nth-of-type(1) th:nth-of-type(4){color:#ae0;}
table.compare th{text-align: left; font-weight: 100; font-size:96%;}
table.compare tr:first-of-type th{padding: 0.3rem; text-align:right;}
/* responsive */
table.compare.desk{display:none;}
@media (min-width: 600px){
    table.compare.mob{display:none;}
    table.compare.desk{display:block;}
    table.compare td:nth-of-type(1),table.compare tr:nth-of-type(1) th:nth-of-type(1){color:#ccc;}
    table.compare td:nth-of-type(2),table.compare tr:nth-of-type(1) th:nth-of-type(2){color:#3fc;}
    table.compare td:nth-of-type(3),table.compare tr:nth-of-type(1) th:nth-of-type(3){color:#f3c;}
    table.compare td:nth-of-type(4),table.compare tr:nth-of-type(1) th:nth-of-type(4){color:#3cf;}
    table.compare td:nth-of-type(5),table.compare tr:nth-of-type(1) th:nth-of-type(5){color:#ae0;}
    table.compare td, table.compare tr:first-of-type th{width:5rem; text-align:center; font-size:100%;}
    table.compare td:first-of-type, table.compare tr:first-of-type th:first-of-type{text-align:left; width: auto; padding:2rem;}
    table.compare tr{background:none !important;}
    table.compare tr{background: rgba(40,40,40,.7) !important; border-top:1px solid #444;}
    table.compare tr:nth-of-type(2n){background: rgba(46,46,46,.7) !important;}
    table.compare tr:nth-of-type(1){background: rgba(0,0,0,0.3) !important;}
}
/*=== panels ===*/
a.panel{display:block; margin:1.6rem  0 1.6rem 0; padding:2rem 0 2rem 11.5rem; background: linear-gradient(#fd6 0%, #fc3 30%, #972 100%); text-decoration: none; position: relative; overflow: hidden; width:67%;}
@media (max-width: 320px){a.panel{width:300px;}}
@media (max-width: 1024px){a.panel{width:100%; padding-right:1rem;}}
a.panel:hover{background: linear-gradient(#fe9 0%, #fd6 30%, #ca4 100%);}
a.panel:before{content:'';display:block; position:absolute; width:13rem; height:100%; top:0;left:-4.3rem; font-size: 16rem; font-weight: 800; text-align: center; box-sizing: border-box; letter-spacing: -0.8rem; padding:0.8rem 0 0 0; color:#fc3;}
a.panel:after{content:'';display:block; position:absolute; width:13rem; height:200%; top:-1rem;right:-4.3rem; box-sizing: border-box; transform: rotate(15deg); background: rgba(0,0,0,0.1);}
a.panel.services:before{content:'S'; background-color: #93f; background-image: radial-gradient(farthest-corner at 100% 100%, #93f, #36c);padding-left:0.8rem; color:#333;}
a.panel.buying:before{content:'C'; background-color: #f3c; background-image: radial-gradient(farthest-corner at 100% 100%, #f3c, #c33);padding-left:0.8rem; color:#333;}
a.panel.proof:before{content:'P'; background-color: #3cf; background-image: radial-gradient(farthest-corner at 100% 100%, #3cf, #3c3);padding-left:0.8rem; color:#333;}
a.panel.project:before{content:'P'; background-color: #93f; background-image: radial-gradient(farthest-corner at 100% 100%, #93f, #000);}
a.panel.reach:before{content:'R'; background-color: #93f; background-image: radial-gradient(farthest-corner at 100% 100%, #93f, #000);}
a.panel.demand:before{content:'D'; background-color: #72d; background-image: radial-gradient(farthest-corner at 100% 100%, #72d, #000); padding-left:1.9rem;}
a.panel.conversion:before{content:'C'; background-color: #62c; background-image: radial-gradient(farthest-corner at 100% 100%, #62c, #000);}
a.panel.upsell:before{content:'U'; background-color: #50c; background-image: radial-gradient(farthest-corner at 100% 100%, #50c, #000);padding-left:0.8rem;}
a.panel.model:before{content:'M'; background-color: #f3c; background-image: radial-gradient(farthest-corner at 100% 100%, #f3c, #000);padding-left:1.9rem;}
a.panel.needs:before{content:'N'; background-color: #d29; background-image: radial-gradient(farthest-corner at 100% 100%, #d29, #000);padding-left:1.2rem;}
a.panel.compare:before{content:'C'; background-color: #c37; background-image: radial-gradient(farthest-corner at 100% 100%, #c37, #000);padding-left:0.8rem;}
a.panel.prices:before{content:'R'; background-color: #d45; background-image: radial-gradient(farthest-corner at 100% 100%, #d45, #000);padding-left:0.8rem;}
a.panel.protections:before{content:'P'; background-color: #c12; background-image: radial-gradient(farthest-corner at 100% 100%, #c12, #000);padding-left:0.8rem;}
a.panel.proof-project:before{content:'R'; background-color: #3cf; background-image: radial-gradient(farthest-corner at 100% 100%, #3cf, #000);padding-left:0.8rem;}
a.panel.proof-reach:before, div.so-far p{content:'R'; background-color: #3cf; background-image: radial-gradient(farthest-corner at 100% 100%, #3cf, #000);padding-left:0.8rem;}
a.panel.proof-demand:before{content:'D'; background-color: #39d; background-image: radial-gradient(farthest-corner at 100% 100%, #39d, #000);padding-left:0.8rem;}
a.panel.proof-conversion:before{content:'C'; background-color: #17c; background-image: radial-gradient(farthest-corner at 100% 100%, #17c, #000);padding-left:0.8rem;}
a.panel.proof-upsell:before{content:'U'; background-color: #06c; background-image: radial-gradient(farthest-corner at 100% 100%, #06c, #000);padding-left:0.8rem;}
a.panel p, a.panel h3{margin:0; padding:0; color:#444; font-weight:700; letter-spacing: -0.05rem; line-height:1.15;}
a.panel h3{color:#666;text-transform: uppercase;}
a.panel:hover:before{color:#fff;}
/*=== pricing ===*/
form#prices, div.results{border:1px solid#555; padding:3rem 3rem 2rem 3rem; margin:-9rem 0 0 0; background:#444;}
.clarity.dark form#prices, .clarity div.results, .dark .results{margin-top:0;}
.dark form#prices, .dark .sidebar .results{margin-top:-9rem;}
form#prices label{font-size:2rem;}
form#prices label span{display: inline; font-weight:700; color:#fff;}
div.assumptions *, div.included{font-size:1.3rem;line-height:1.25;}
div.included ul{display:flex; flex-wrap:wrap; align-content:stretch; padding:0; margin: 0 0 1.6rem 0;}
div.included ul li{flex: 0 1 25%; gap:0; padding: 2rem; list-style-type: none; background-image: radial-gradient(farthest-corner at 100% 100%, #425, #000); border:1px solid #111;}
div.included ul li img{width:60px; height:auto;}
div.included{color:#3fc;}
div.results{background:#111; border-top:none; padding-top:1rem;}
div.results h3{font-weight:100;font-size:3rem;line-height: 1.125;}
div.results h3, div.results p{color:#3fc;}
div.results h3{margin-bottom: 0;}
div.results h3 span, div.results p span{color:#fff; font-size: 125%;}
.included span{color:#fff;}
a.button.alternative{background-color: transparent; color:#fc3; text-transform: none; border:1px solid #fc3;}
/*********** Baseline, reset styles ***********/
input[type="range"] {-webkit-appearance: none;appearance: none;background: transparent;cursor: ew-resize;width:100%; margin:0 0 3rem 0;}
/* Removes default focus */
input[type="range"]:focus {outline: none;}
/******** Chrome, Safari, Opera and Edge Chromium styles ********/
/* slider track */
input[type="range"]::-webkit-slider-runnable-track {background-color: #000;border-radius: 1rem;height: 0.5rem;}
/* slider thumb */
input[type="range"]::-webkit-slider-thumb {-webkit-appearance: none; /* Override default look */appearance: none;margin-top: -0.5rem; /* Centers thumb on the track */background-color: #ffcc33;border-radius: 2rem;height: 1.5rem;width: 1.5rem;}
input[type="range"]:focus::-webkit-slider-thumb {outline: 3px solid #fff;outline-offset: 0.125rem;}
/*********** Firefox styles ***********/
/* slider track */
input[type="range"]::-moz-range-track {background-color: #000;border-radius: 1rem;height: 0.5rem;}
/* slider thumb */
input[type="range"]::-moz-range-thumb {background-color: #ffcc33;border: none; /*Removes extra border that FF applies*/border-radius: 2rem;height: 1.5rem;width: 1.5rem;}
input[type="range"]:focus::-moz-range-thumb{outline: 3px solid #fff;outline-offset: 0.125rem;}
@media(max-width:1150px){
    form#prices label span{font-weight:700; color:#fff;}
}
/* === how it works === */
table.process{margin:2rem 0 0 0;}
table.process td{padding:0 1rem 0 0;}
table.process td img{width:7rem;height:auto;}
/* body video, no-video and sidebar */
div.body-video{padding:calc(100% * 9 / 16) 0 0 0; position:relative; margin-bottom: 4.8rem; background:#000;}
div.body-video iframe{position:absolute;top:0;left:0;width:100%;height:100%;}
section#summary.no-video div.body-video{margin-top:-1.6rem;}

div.testimonial-container{display: flex; background:#000; position: relative; width:100%; /*full*/}
div.testimonial-container.big{width:67%;}
div.testimonial-container.half{width:50%;}
@media(max-width:1400px) {div.testimonial-container.half{width:75%;}}
@media(max-width:750px) {div.testimonial-container.half{width:100%;}}
div.testimonial-container.small{width:33%;}
div.testimonial-container div{padding:calc(100% * 9 / 16) 0 0 0; position:relative; margin-bottom: 1px; flex:0 1 auto; width:100%;}
div.testimonial-container div.widescreen, .body-video.widescreen{padding:calc(100% / 2.35) 0 0 0;}
div.testimonial-container div iframe{position:absolute;top:0;left:0;width:100% !important;height:100%;}

div.sidebar {position:absolute; top:7rem; right:calc(100vw * 3 /18); width: calc(100vw * 4 / 18); font-size:1.3rem; line-height: 1.25; padding:0;}
section#summary.no-video{ margin-top:0; padding-top:1.6rem;}
@media(max-width:1150px) {
    div.sidebar{position:relative; top: unset; right: unset; width:100%; padding: 9rem 0 0 0 ;}
    .body-video{margin-top: 2.4rem;}
    section#summary.no-video{margin-top:0;padding-top:9.6rem;}
}
div.sidebar .results{padding:2rem;background: transparent  /*linear-gradient(90deg, rgba(0,0,0,0), #202)*/; border:none;}
div.sidebar .results h3{font-size:2.2rem;line-height:1; margin:0 0 2.4rem 0;}
div.arrow-holder{position:relative; padding-top:2rem;}
div.arrow-holder img{margin-bottom:-2rem;}
.arrow-curve, .arrow-bent, .arrow-loopy, .arrow-squiggle, .arrow-down, .arrow-double, .arrow-curve-low, .arrow-bent-low, .arrow-loopy-low, .arrow-squiggle-low, .arrow-down-low, .arrow-double-low{background-image: url("/pics/arrow-curve.svg"); width:60px; height: 120px;background-position: left; /* Center the image */background-repeat: no-repeat;z-index: 999; margin-left:-5.3rem; top:16rem; position:absolute; }
@media(max-width:400px) {.arrow-curve, .arrow-bent, .arrow-loopy, .arrow-squiggle, .arrow-down, .arrow-double, .arrow-curve-low, .arrow-bent-low, .arrow-loopy-low, .arrow-squiggle-low, .arrow-down-low, .arrow-double-low{margin-left:-4.3rem; }}

.arrow-curve-low, .arrow-bent-low, .arrow-loopy-low, .arrow-squiggle-low, .arrow-down-low, .arrow-double-low{}
.arrow-bent, .arrow-bent-low{background-image: url("/pics/arrow-bent.svg"); }
.arrow-loopy, .arrow-loopy-low{background-image: url("/pics/arrow-loopy.svg"); }
.arrow-squiggle, .arrow-squiggle-low{background-image: url("/pics/arrow-squiggle.svg"); }
.arrow-down, .arrow-down-low{background-image: url("/pics/arrow-down.svg"); }
.arrow-double, .arrow-double-low{background-image: url("/pics/arrow-double.svg"); }

/* === clover schematic === */
svg#clover{width:100%;}
@media(min-width:1400px) {svg#clover{max-width:50rem;}}
@media(max-width:1150px) {svg#clover{max-width:35rem;}}

/* === whirlpool === */
svg.whirlpool{width:100%;}
@media(min-width:1400px) {svg.whirlpool{max-width:50rem;}}
@media(max-width:1150px) {svg.whirlpool{max-width:35rem;}}
svg.whirlpool g.structure{animation: wobble 9s ease infinite;}
svg.whirlpool g.words{transform:translateX(-40px);}
svg.whirlpool g.words text{font-size:3rem; font-family: source-sans-pro, Helvetica, Arial, sans-serif; font-weight: 700; letter-spacing:-0.03em;}

svg.whirlpool g#attractA, svg.whirlpool g#attractB, svg.whirlpool g#attractC, svg.whirlpool g#assure, svg.whirlpool g#explain, svg.whirlpool g#persuade, svg.whirlpool g#nurture, svg.whirlpool g#convince, svg.whirlpool g#onboard, svg.whirlpool g#expand, svg.whirlpool g#prospect{
    animation: judder 8s ease infinite;}
svg.whirlpool g#attractA{animation-delay: -0s;}
svg.whirlpool g#attractB{animation-delay: -3s;}
svg.whirlpool g#attractC{animation-delay: -8s;}
svg.whirlpool g#assure{animation-delay: -6s;}
svg.whirlpool g#explain{animation-delay: -8s;}
svg.whirlpool g#persuade{animation-delay: -2s;}
svg.whirlpool g#nurture{animation-delay: -5s;}
svg.whirlpool g#convince{animation-delay: -7s;}
svg.whirlpool g#onboard{animation-delay: -4s;}
svg.whirlpool g#expand{animation-delay: -11s;}
svg.whirlpool g#prospect{animation-delay: -9s;}

svg.whirlpool .buyer {motion-path: path('M 450 50 A 400 400 0 0 1 850 450 A 400 400 0 0 1 450 850 A 400 400 0 0 1 50 450 A 400 400 0 0 1 450 50');offset-path: path('M 450 50 A 400 400 0 0 1 850 450 A 400 400 0 0 1 450 850 A 400 400 0 0 1 50 450 A 400 400 0 0 1 450 50');
    animation: whirl 3s linear infinite;offset-rotate: 0deg;transform: scale(0.5);}
svg.whirlpool .level1{transform: translateX(-6%) translateY(-30%) scale(0.5);}
svg.whirlpool .level2{transform: translateX(-7%) translateY(0%) scale(0.5);}
svg.whirlpool .level3{transform: translateX(-8%) translateY(20%) scale(0.5);}
svg.whirlpool .level4{transform: translateX(-8%) translateY(40%) scale(0.5);}
svg.whirlpool .level5{transform: translateX(-8%) translateY(60%) scale(0.5);}
svg.whirlpool .level6{transform: translateX(-8%) translateY(80%) scale(0.5);}
svg.whirlpool .level7{transform: translateX(-8%) translateY(100%) scale(0.5);}
svg.whirlpool .level8{transform: translateX(-8%) translateY(120%) scale(0.5);}
svg.whirlpool .level9{transform: translateX(-8%) translateY(150%) scale(0.5);}
svg.whirlpool .level10{transform: translateX(-8%) translateY(180%) scale(0.5);}
svg.whirlpool .level11{transform: translateX(-2%) translateY(250%) translateX(150px) scale(0.5);}
svg.whirlpool .level12{transform: translateX(-3%) translateY(280%) translateX(150px) scale(0.5);}
svg.whirlpool .buyer.level11, svg.whirlpool .buyer.level12 {motion-path: path('M 180 20 A 160 160 0 0 1 340 180 A 160 160 0 0 1 180 340 A 160 160 0 0 1 20 180 A 160 160 0 0 1 180 20');offset-path: path('M 180 20 A 160 160 0 0 1 340 180 A 160 160 0 0 1 180 340 A 160 160 0 0 1 20 180 A 160 160 0 0 1 180 20');}
svg.whirlpool .speed1{animation-duration:5.5s;}
svg.whirlpool .speed2{animation-duration:9.7s;}
svg.whirlpool .speed3{animation-duration:6.9s;}
svg.whirlpool .speed4{animation-duration:8.1s;}
svg.whirlpool .speed5{animation-duration:7.3s;}
svg.whirlpool .speed6{animation-duration:7.5s;}
svg.whirlpool .speed7{animation-duration:8.7s;}
svg.whirlpool .speed8{animation-duration:6.9s;}
svg.whirlpool .speed9{animation-duration:10.1s;}
svg.whirlpool .speed10{animation-duration:13.3s;}
svg.whirlpool .del1{animation-delay: -9200ms;}
svg.whirlpool .del2{animation-delay: -2400ms;}
svg.whirlpool .del4{animation-delay: -7600ms;}
svg.whirlpool .del5{animation-delay: -4800ms;}
svg.whirlpool .del6{animation-delay: -5000ms;}
svg.whirlpool .del7{animation-delay: -9200ms;}
svg.whirlpool .del8{animation-delay: -1400ms;}
svg.whirlpool .del9{animation-delay: -14600ms;}
svg.whirlpool .del10{animation-delay: -4800ms;}
svg.whirlpool .del11{animation-delay: -22000ms;}
svg.whirlpool .del12{animation-delay: -62200ms;}
svg.whirlpool .del13{animation-delay: -12400ms;}
svg.whirlpool .del14{animation-delay: -52600ms;}
svg.whirlpool .del15{animation-delay: -2800ms;}
svg.whirlpool .del16{animation-delay: -3000ms;}
svg.whirlpool .del17{animation-delay: -3200ms;}
svg.whirlpool .del18{animation-delay: -3400ms;}
svg.whirlpool .del19{animation-delay: -3600ms;}
svg.whirlpool g.tilt{transform: scaleY(0.25);}
svg.whirlpool g circle{filter:blur(1px);}
svg.whirlpool g#pop1 circle{animation: pop1 11s linear infinite;animation-delay: 0s;}
svg.whirlpool g#pop2 circle{animation: pop2 11s linear infinite;animation-delay: -1s;}
svg.whirlpool g#pop3 circle{animation: pop3 11s linear infinite;animation-delay: -2s;}
svg.whirlpool g#pop4 circle{animation: pop4 11s linear infinite;animation-delay: -3s;}
svg.whirlpool g#pop5 circle{animation: pop5 11s linear infinite;animation-delay: -4s;}
svg.whirlpool g#pop6 circle{animation: pop6 11s linear infinite;animation-delay: -5s;}
svg.whirlpool g#pop7 circle{animation: pop7 11s linear infinite;animation-delay: -6s;}
svg.whirlpool g#pop8 circle{animation: pop8 11s linear infinite;animation-delay: -7s;}
svg.whirlpool g#pop9 circle{animation: pop9 11s linear infinite;animation-delay: -8s;}
svg.whirlpool g#pop10 circle{animation: pop10 11s linear infinite;animation-delay: -9s;}
svg.whirlpool g#pop11 circle{animation: pop11 11s linear infinite;animation-delay: -10s;}
@keyframes whirl {
    25%,75% {opacity:0.5;}
    50% {opacity:1;}
    0%{opacity:0;}
    100% {opacity:0; motion-offset: 100%; offset-distance: 100%;}
}
@keyframes wobble{
    0% {transform-origin: 35% 60%; transform: translateX(40px) translateY(70px) rotate(-2deg);}
    50% {transform-origin: 35% 60%; transform: translateX(40px) translateY(70px) rotate(2deg);}
    100% {transform-origin: 35% 60%; transform: translateX(40px) translateY(70px) rotate(-2deg);}
}
@keyframes judder{
    0%,10%,90%,100% {transform: translateX(0);}
    50% {transform: translateX(11px);}
    2%,4%,6%,8% {transform: translateX(0);}
    1%,3%,5%,7%,9% {transform: translateX(-0.2%); filter:blur(2px);}
}
@keyframes pop1{ 0%{transform: translate(12%,10%) scale(.2, .2) ;opacity:0.3;} 5%{transform: translate(12%,10%) scale(2,2.5);opacity: 1;} 25%,100%{transform: translate(12%,10%) scale(3,3.5); opacity: 0;} }
@keyframes pop2{ 0%{transform: translate(57%,40%) scale(.2, .2) ;opacity:0.3;} 5%{transform: translate(57%,40%) scale(2,2.5);opacity: 1;} 25%,100%{transform: translate(57%,40%) scale(3,3.5); opacity: 0;} }
@keyframes pop3{ 0%{transform: translate(15%,70%) scale(.2, .2) ;opacity:0.3;} 5%{transform: translate(15%,70%) scale(2,2.5);opacity: 1;} 25%,100%{transform: translate(15%,70%) scale(3,3.5); opacity: 0;} }
@keyframes pop4{ 0%{transform: translate(62%,130%) scale(.2, .2) ;opacity:0.3;} 5%{transform: translate(62%,130%) scale(2,2.5);opacity: 1;} 25%,100%{transform: translate(62%,130%) scale(3,3.5); opacity: 0;} }
@keyframes pop5{ 0%{transform: translate(16%,140%) scale(.2, .2) ;opacity:0.3;} 5%{transform: translate(16%,140%) scale(2,2.5);opacity: 1;} 25%,100%{transform: translate(16%,140%) scale(3,3.5); opacity: 0;} }
@keyframes pop6{ 0%{transform: translate(58%,200%) scale(.2, .2) ;opacity:0.3;} 5%{transform: translate(58%,200%) scale(2,2.5);opacity: 1;} 25%,100%{transform: translate(58%,200%) scale(3,3.5); opacity: 0;} }
@keyframes pop7{ 0%{transform: translate(21%,210%) scale(.2, .2) ;opacity:0.3;} 5%{transform: translate(21%,210%) scale(2,2.5);opacity: 1;} 25%,100%{transform: translate(21%,210%) scale(3,3.5); opacity: 0;} }
@keyframes pop10{ 0%{transform: translate(43%,250%) scale(.2, .2) ;opacity:0.3;} 5%{transform: translate(43%,250%) scale(2,2.5);opacity: 1;} 25%,100%{transform: translate(43%,250%) scale(3,3.5); opacity: 0;} }
@keyframes pop9{ 0%{transform: translate(35%,85%) scale(.2, .2) ;opacity:0.3;} 5%{transform: translate(35%,85%) scale(2,2.5);opacity: 1;} 25%,100%{transform: translate(35%,85%) scale(3,3.5); opacity: 0;} } /*prospect*/
@keyframes pop8{ 0%{transform: translate(29%,280%) scale(.2, .2) ;opacity:0.3;} 5%{transform: translate(29%,280%) scale(2,2.5);opacity: 1;} 25%,100%{transform: translate(29%,280%) scale(3,3.5); opacity: 0;} }
@keyframes pop11{ 0%{transform: translate(25%,300%) scale(.2, .2) ;opacity:0.3;} 5%{transform: translate(25%,300%) scale(2,2.5);opacity: 1;} 25%,100%{transform: translate(25%,300%) scale(3,3.5); opacity: 0;} }

/*
* { background-color: rgba(255,0,0,.2); }
* * { background-color: rgba(0,255,0,.2); }
* * * { background-color: rgba(0,0,255,.2); }
* * * * { background-color: rgba(255,0,255,.2); }
* * * * * { background-color: rgba(0,255,255,.2); }
* * * * * * { background-color: rgba(255,255,0,.2); }
*/
@media(min-resolution:1.25dppx){html{font-size:60%;}}
@media(min-resolution:3dppx){html{font-size:60%;}}