/*! tailwindcss v2.2.19 | MIT License | https://tailwindcss.com */
/*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */
html {
    -webkit-text-size-adjust: 100%;
    line-height: 1.15;
    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4
}

body {
    font-family: system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji
}

hr {
    color: inherit;
    height: 0
}

abbr[title] {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted
}

b,strong {
    font-weight: bolder
}

code,kbd,pre,samp {
    font-family: ui-monospace,SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;
    font-size: 1em
}

small {
    font-size: 80%
}

sub,sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

sub {
    bottom: -.25em
}

sup {
    top: -.5em
}

table {
    border-color: inherit;
    text-indent: 0
}

button,input,optgroup,select,textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    margin: 0
}

button,select {
    text-transform: none
}

[type=button],[type=reset],[type=submit],button {
    -webkit-appearance: button
}

::-moz-focus-inner {
    border-style: none;
    padding: 0
}

:-moz-focusring {
    outline: 1px dotted ButtonText
}

:-moz-ui-invalid {
    box-shadow: none
}

legend {
    padding: 0
}

progress {
    vertical-align: baseline
}

::-webkit-inner-spin-button,::-webkit-outer-spin-button {
    height: auto
}

[type=search] {
    -webkit-appearance: textfield;
    outline-offset: -2px
}

::-webkit-search-decoration {
    -webkit-appearance: none
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit
}

summary {
    display: list-item
}

blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre {
    margin: 0
}

button {
    background-color: transparent;
    background-image: none
}

fieldset,ol,ul {
    margin: 0;
    padding: 0
}

ol,ul {
    list-style: none
}

html {
    font-family: ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
    line-height: 1.5
}

body {
    font-family: inherit;
    line-height: inherit
}

*,:after,:before {
    border: 0 solid;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

hr {
    border-top-width: 1px
}

img {
    border-style: solid
}

textarea {
    resize: vertical
}

input::-webkit-input-placeholder,textarea::-webkit-input-placeholder {
    color: #9ca3af
}

input::-moz-placeholder,textarea::-moz-placeholder {
    color: #9ca3af
}

input:-ms-input-placeholder,textarea:-ms-input-placeholder {
    color: #9ca3af
}

input::-ms-input-placeholder,textarea::-ms-input-placeholder {
    color: #9ca3af
}

input::placeholder,textarea::placeholder {
    color: #9ca3af
}

[role=button],button {
    cursor: pointer
}

:-moz-focusring {
    outline: auto
}

table {
    border-collapse: collapse
}

h1,h2,h3,h4,h5,h6 {
    font-size: inherit;
    font-weight: inherit
}

a {
    color: inherit;
    text-decoration: inherit
}

button,input,optgroup,select,textarea {
    color: inherit;
    line-height: inherit;
    padding: 0
}

code,kbd,pre,samp {
    font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace
}

audio,canvas,embed,iframe,img,object,svg,video {
    display: block;
    vertical-align: middle
}

img,video {
    height: auto;
    max-width: 100%
}

[hidden] {
    display: none
}

*,:after,:before {
    --tw-blur: var(--tw-empty,/*!*/ /*!*/);
    --tw-brightness: var(--tw-empty,/*!*/ /*!*/);
    --tw-contrast: var(--tw-empty,/*!*/ /*!*/);
    --tw-grayscale: var(--tw-empty,/*!*/ /*!*/);
    --tw-hue-rotate: var(--tw-empty,/*!*/ /*!*/);
    --tw-invert: var(--tw-empty,/*!*/ /*!*/);
    --tw-saturate: var(--tw-empty,/*!*/ /*!*/);
    --tw-sepia: var(--tw-empty,/*!*/ /*!*/);
    --tw-drop-shadow: var(--tw-empty,/*!*/ /*!*/);
    --tw-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}

[multiple],[type=date],[type=datetime-local],[type=email],[type=month],[type=number],[type=password],[type=search],[type=tel],[type=text],[type=time],[type=url],[type=week],select,textarea {
    --tw-shadow: 0 0 #0000;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: #fff;
    border-color: #6b7280;
    border-radius: 0;
    border-width: 1px;
    font-size: 1rem;
    line-height: 1.5rem;
    padding: .5rem .75rem
}

[multiple]:focus,[type=date]:focus,[type=datetime-local]:focus,[type=email]:focus,[type=month]:focus,[type=number]:focus,[type=password]:focus,[type=search]:focus,[type=tel]:focus,[type=text]:focus,[type=time]:focus,[type=url]:focus,[type=week]:focus,select:focus,textarea:focus {
    --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: #2563eb;
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    border-color: #2563eb;
    -webkit-box-shadow: var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);
    box-shadow: var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);
    outline: 2px solid transparent;
    outline-offset: 2px
}

input::-webkit-input-placeholder,textarea::-webkit-input-placeholder {
    color: #6b7280;
    opacity: 1
}

input::-moz-placeholder,textarea::-moz-placeholder {
    color: #6b7280;
    opacity: 1
}

input:-ms-input-placeholder,textarea:-ms-input-placeholder {
    color: #6b7280;
    opacity: 1
}

input::-ms-input-placeholder,textarea::-ms-input-placeholder {
    color: #6b7280;
    opacity: 1
}

input::placeholder,textarea::placeholder {
    color: #6b7280;
    opacity: 1
}

::-webkit-datetime-edit-fields-wrapper {
    padding: 0
}

::-webkit-date-and-time-value {
    min-height: 1.5em
}

select {
    color-adjust: exact;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");
    background-position: right .5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    padding-right: 2.5rem;
    -webkit-print-color-adjust: exact
}

[multiple] {
    color-adjust: unset;
    background-image: none;
    background-position: 0 0;
    background-repeat: unset;
    background-size: initial;
    padding-right: .75rem;
    -webkit-print-color-adjust: unset
}

[type=checkbox],[type=radio] {
    color-adjust: exact;
    -ms-flex-negative: 0;
    --tw-shadow: 0 0 #0000;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: #fff;
    background-origin: border-box;
    border-color: #6b7280;
    border-width: 1px;
    color: #2563eb;
    display: inline-block;
    flex-shrink: 0;
    height: 1rem;
    padding: 0;
    -webkit-print-color-adjust: exact;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    vertical-align: middle;
    width: 1rem
}

[type=checkbox] {
    border-radius: 0
}

[type=radio] {
    border-radius: 100%
}

[type=checkbox]:focus,[type=radio]:focus {
    --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
    --tw-ring-offset-width: 2px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: #2563eb;
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    -webkit-box-shadow: var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);
    box-shadow: var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);
    outline: 2px solid transparent;
    outline-offset: 2px
}

[type=checkbox]:checked,[type=radio]:checked {
    background-color: currentColor;
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    border-color: transparent
}

[type=checkbox]:checked {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 16 16' fill='%23fff' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.207 4.793a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L6.5 9.086l4.293-4.293a1 1 0 0 1 1.414 0z'/%3E%3C/svg%3E")
}

[type=radio]:checked {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 16 16' fill='%23fff' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='3'/%3E%3C/svg%3E")
}

[type=checkbox]:checked:focus,[type=checkbox]:checked:hover,[type=radio]:checked:focus,[type=radio]:checked:hover {
    background-color: currentColor;
    border-color: transparent
}

[type=checkbox]:indeterminate {
    background-color: currentColor;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3E%3C/svg%3E");
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    border-color: transparent
}

[type=checkbox]:indeterminate:focus,[type=checkbox]:indeterminate:hover {
    background-color: currentColor;
    border-color: transparent
}

[type=file] {
    background: unset;
    border-color: inherit;
    border-radius: 0;
    border-width: 0;
    font-size: unset;
    line-height: inherit;
    padding: 0
}

[type=file]:focus {
    outline: 1px auto -webkit-focus-ring-color
}

.contents {
    display: contents
}

.hidden {
    display: none
}

.filter {
    -webkit-filter: var(--tw-filter);
    filter: var(--tw-filter)
}

:root {
    --blue-10: #041e3c;
    --blue-9: #042b59;
    --blue-8: #043875;
    --blue-7: #0553b1;
    --blue-6: #f2b762;
    --primary: #f2b762;
    --blue-5: #027dfd;
    --blue-4: #13b9fd;
    --blue-3: #81ddf9;
    --blue-2: #b8eafe;
    --blue-1: #e7f8ff;
    --pink: #f8bbd0;
    --red: #d43324;
    --coral: #f25d50;
    --violet-4: #833ef2;
    --violet-3: #796ceb;
    --violet-2: #6200ee;
    --violet-1: #c6bafa;
    --green-3: #14c2ad;
    --green-2: #a7ffeb;
    --green-1: #1cdac5;
    --grey-6: #4a4a4a;
    --grey-5: #a4a4a4;
    --grey-4: #dadce0;
    --grey-3: #e8eaed;
    --grey-2: #f1f3f4;
    --grey-1: #f8f9fa;
    --ui-anim-func: cubic-bezier(.27,.89,.39,.95);
    --ui-border-radius: 24px;
    --ui-border-radius-sm: 8px;
    --ui-border-color: var(--grey-3);
    --ui-btn-height: 40px;
    --ui-card-width: 484px;
    --ui-drop-shadow: 0px 8px 24px rgba(0,0,0,.25);
    --ui-drop-shadow-sm: 0px 0px 16px rgba(0,0,0,.1);
    --ui-header-height: 86px;
    --ui-logo-width: 186px;
    --font-size-heading-1: 46px;
    --font-size-heading-11: 43px;
    --font-size-heading-2: 34px;
    --font-size-heading-3: 24px;
    --font-size-heading-4: 18px;
    --font-size-heading-5: 16px;
    --font-size-default: 14px;
    --font-size-scaling-2: 6.11111vw;
    --font-size-scaling-3: 5vw;
    --font-weight-default: 400;
    --font-weight-bold: 700;
    --font-gsans: "Google Sans",sans-serif;
    --font-roboto: "Roboto",sans-serif;
    --font-roboto-mono: "Roboto Mono",monospace;
    --screen-xs-min: 480px;
    --screen-sm-min: 640px;
    --screen-md-min: 768px;
    --screen-lg-min: 1024px;
    --screen-xl-min: 1280px;
    --screen-2xl-min: 1536px;
    --screen-13-min: 1440px;
    --screen-desktop-min: 992px;
    --spacer-sm: 8px;
    --spacer-md: 32px;
    --spacer: 40px;
    --gutter-sm: 24px;
    --gutter-ssm: 12px;
    --gutter: 50px;
    --gutter-md: 70px;
    --gutter-lg: 112px;
    --gutter-xl: 140px;
    --max-width: calc(var(--screen-xl-min) - var(--gutter)*2);
    --gutter-auto: calc((100vw - var(--max-width))/2);
    --grad-blue-green-145: linear-gradient(145deg,#f3fcff 40%,#d3fff5 90%);
    --grad-yellow-blue-145: linear-gradient(145deg,#faf9c5 40%,#e8f9ff 90%);
    --grad-blue-yellow-35: linear-gradient(35deg,#e8f9ff 40%,#faf9c5 90%);
    --grad-yellow-blue-35: linear-gradient(35deg,#faf9c5 40%,#e8f9ff 90%);
    --grad-liteyellow-blue: linear-gradient(35deg,#fcfce2 40%,#f5fbfe 90%);
    --grad-red-blue-35: linear-gradient(35deg,#fcdde8,#f3fcff 60%);
    --grad-violet-blue-35: linear-gradient(35deg,#e3ddfd 30%,#f3fcff 90%);
    --grad-blue-light-35: linear-gradient(35deg,#dcf5ff 50%,#f3fcff 90%);
    --grad-yellow-blue-75: linear-gradient(75deg,hsla(59,82%,87%,.5),rgba(231,248,255,.5))
}

@media (min-width: 1024px) {
    :root {
        --font-size-heading-1:60px;
        --font-size-heading-2: 36px;
        --font-size-heading-3: 28px;
        --font-size-heading-4: 20px;
        --font-size-heading-5: 16px;
        --font-size-default: 14px
    }
}

.text-coral {
    color: var(--coral)!important
}

.text-green {
    color: var(--green-3)!important
}

.text-blue {
    color: var(--blue-4)!important
}

.text-violet {
    color: var(--violet-4)!important
}

@define-mixin anim $name {
    -webkit-animation-delay: 0ms;
    animation-delay: 0ms;
    -webkit-animation-duration: .3s;
    animation-duration: .3s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-name: $(name);
    animation-name: $(name);
    -webkit-animation-timing-function: var(--ui-anim-func);
    animation-timing-function: var(--ui-anim-func)
}

html {
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

body,html {
    height: 100%
}

body,html {
    margin: 0;
    padding: 0
}

body {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: #fff;
    color: var(--grey-6);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    font-family: var(--font-roboto);
    font-size: var(--font-size-default);
    font-weight: var(--font-weight-default)
}

*,:after,:before {
    -webkit-box-sizing: inherit;
    box-sizing: inherit
}

*,:after,:before,h1,h2,h3,h4,h5,h6 {
    -webkit-margin-before: 0;
    -webkit-margin-after: 0;
    margin-block-end:0;margin-block-start:0}

h1,h2,h3,h4,h5,h6 {
    -webkit-margin-start: 0;
    -webkit-margin-end: 0;
    color: #000;
    font-family: var(--font-gsans);
    font-weight: var(--font-weight-bold);
    letter-spacing: -.005em;
    line-height: 1.2;
    margin-inline-end:0;margin-inline-start:0}

h1,h2.subheader {
    font-size: var(--font-size-heading-1)
}

h2.subheader {
    line-height: 1;
    margin-bottom: var(--gutter-md)
}

h2.centered {
    line-height: 1;
    margin: 0 auto;
    max-width: 885px;
    text-align: center
}

h4.eyebrow {
    font-size: var(--font-size-heading-4);
    margin-bottom: 0px
}

h4.eyebrow2 {
    font-size: var(--font-size-heading-4);
    margin-bottom: 200px
}
h4.eyebrow2,p {
    color: var(--grey-6)
}

h4.eyebrow,p {
    color: var(--grey-6)
}

p {
    line-height: 1.4
}

p a {
    color: var(--blue-6)
}

body.interior {
    padding-top: var(--ui-header-height)
}

main {
    -webkit-box-flex: 1;
    background-color: #fff;
    -ms-flex: 1 0 auto;
    flex: 1 0 auto;
    overflow: hidden
}

.module {
    padding: var(--gutter-md) 0
}

.container {
    margin: 0 auto;
    max-width: var(--max-width);
    width: calc(100% - var(--gutter-sm)*2)
}

.grid {
    gap: 2.19%;
    grid-template-columns: repeat(12,minmax(0,1fr));
    margin: 0 auto;
    max-width: var(--screen-xl-min)
}

.centered {
    text-align: center
}

.push-left {
    margin-left: 0
}

@media (min-width: 768px) {
    .container {
        width:calc(100% - var(--gutter)*2)
    }
}

@media (min-width: 1024px) {
    .push-left {
        margin-left:var(--gutter-lg)
    }
}

.stacked-centered {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-line-pack: justify;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-content: space-between;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    justify-content: center;
    min-width: 100%
}

.stacked-centered>* {
    margin-bottom: 1rem
}

.btn,button {
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    align-items: center;
    background-color: transparent;
    border-radius: var(--ui-border-radius);
    color: var(--blue-6);
    cursor: pointer;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    font-family: var(--font-gsans);
    font-size: var(--font-size-default);
    font-weight: var(--font-weight-bold);
    height: var(--ui-btn-height);
    justify-content: center;
    padding: 0 var(--spacer-md);
    text-align: center;
    -webkit-transition: background-color .3s ease,color .3s ease;
    transition: background-color .3s ease,color .3s ease
}

.btn.large,button.large {
    font-size: var(--font-size-heading-5);
    padding-bottom: var(--gutter-sm);
    padding-top: var(--gutter-sm)
}

.btn.solid,button.solid {
    background-color: var(--blue-6);
    color: #fff
}

.btn.white,button.white {
    background-color: #fff;
    border: 1px solid transparent
}

.btn.white:hover,button.white:hover {
    background-color: #fff;
    color: var(--blue-6)
}

.btn.primary,button.primary {
    background-color: var(--blue-6);
    color: #fff
}

.btn.quiet,button.quiet {
    background-color: transparent!important;
    border: none!important;
    color: #000;
    padding: 0 var(--gutter-sm)
}

.btn.quiet:hover,button.quiet:hover {
    background-color: transparent!important;
    color: #000!important
}

.btn.collapsed,button.collapsed {
    padding: 0!important
}

.btn .fa-arrow-right,button .fa-arrow-right {
    left: 0;
    position: relative
}

.btn:hover .fa-arrow-right,button:hover .fa-arrow-right {
    left: 3px;
    -webkit-transition: left .4s var(--ui-anim-func);
    transition: left .4s var(--ui-anim-func)
}

.icon-btn {
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    align-items: center;
    border-radius: var(--ui-border-radius);
    color: #fff;
    cursor: pointer;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    height: var(--ui-btn-height);
    justify-content: center;
    width: var(--ui-btn-height)
}

.icon-btn.active,.icon-btn:hover {
    background-color: hsla(0,0%,98%,.15);
    -webkit-transition: background-color .3s ease;
    transition: background-color .3s ease
}

main .btn,main button {
    border: 1px solid var(--blue-6);
    font-size: var(--font-size-default)
}

main .btn:hover,main button:hover {
    background-color: var(--blue-6);
    color: #fff
}

.carousel-section {
    background-color: var(--grey-1)
}

.carousel-section h2 {
    font-size: var(--font-size-heading-1);
    margin-bottom: var(--spacer)
}

.carousel .carousel-slider {
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: none;
    align-items: stretch;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-left: calc(var(--gutter)*-1);
    overflow-x: auto;
    overflow-y: hidden;
    padding: 20px 0 30px;
    padding-left: var(--gutter);
    position: relative;
    scroll-behavior: smooth;
    -ms-scroll-snap-type: x mandatory;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-transform: translate(0);
    transform: translate(0);
    z-index: 5
}

.carousel .carousel-slider::-webkit-scrollbar {
    display: none
}

.carousel .carousel-slider:before {
    -webkit-box-flex: 0;
    content: "";
    display: block;
    -ms-flex: 0 0 var(--gutter-sm);
    flex: 0 0 var(--gutter-sm);
    height: 100px
}

.carousel .story-item {
    margin-right: var(--gutter-sm);
    max-width: var(--ui-card-width);
    min-width: var(--ui-card-width)
}

.carousel .story-item:last-child {
    margin-right: var(--gutter)
}

.carousel {
    --featured-card-width: 600px;
    --featured-card-height: 600px
}

.carousel .carousel-featured-card {
    border-radius: var(--ui-border-radius);
    display: grid;
    grid-template-columns: 1fr;
    margin-right: var(--gutter-sm);
    min-width: 90vw
}

.carousel .carousel-featured-card:last-child {
    margin-right: var(--gutter)
}

.carousel .carousel-featured-card .media {
    background-color: var(--grey-2);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-top-left-radius: var(--ui-border-radius-sm);
    border-top-right-radius: var(--ui-border-radius-sm);
    height: 250px
}

.carousel .carousel-featured-card .text {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    align-items: center;
    background-color: var(--primary);
    border-bottom-left-radius: var(--ui-border-radius-sm);
    border-bottom-right-radius: var(--ui-border-radius-sm);
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    height: 500px;
    justify-content: center;
    padding: var(--spacer);
    text-align: center
}

.carousel .carousel-featured-card .text h4 {
    font-size: var(--font-size-heading-4);
    margin-bottom: var(--gutter-sm)
}

.carousel .carousel-featured-card .text h3 {
    font-size: var(--font-size-heading-1);
    line-height: 1.1;
    margin-bottom: var(--gutter-sm)
}

.carousel .carousel-featured-card .text p {
    font-size: var(--font-size-heading-4);
    margin-bottom: var(--gutter-sm)
}

.carousel .carousel-featured-card .text.dark h4,.carousel .carousel-featured-card .text.dark p,.carousel .carousel-featured-card .text.lite a.btn,.carousel .carousel-featured-card .text.lite a.btn:hover,.carousel .carousel-featured-card .text.lite h3,.carousel .carousel-featured-card .text.lite h4,.carousel .carousel-featured-card .text.lite p {
    color: var(--grey-3)
}

.carousel .carousel-featured-card .text.dark a.btn,.carousel .carousel-featured-card .text.dark a.btn:hover,.carousel .carousel-featured-card .text.dark h3 {
    color: #fff!important
}

@media (min-width: 1024px) {
    .carousel .carousel-featured-card {
        -ms-flex-flow:wrap;
        flex-flow: wrap;
        grid-template-columns: var(--ui-card-width) var(--featured-card-width);
        min-width: auto
    }

    .carousel .carousel-featured-card .media {
        border-bottom-left-radius: var(--ui-border-radius-sm);
        border-bottom-right-radius: 0;
        border-top-left-radius: var(--ui-border-radius-sm);
        border-top-right-radius: 0;
        width: var(--ui-card-width)
    }

    .carousel .carousel-featured-card .text {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: var(--ui-border-radius-sm);
        border-top-left-radius: 0;
        border-top-right-radius: var(--ui-border-radius-sm);
        padding: var(--gutter-md)
    }

    .carousel .carousel-featured-card .text h3 {
        font-size: 54px
    }

    .carousel .carousel-featured-card .media,.carousel .carousel-featured-card .text {
        height: var(--featured-card-height)
    }
}

.carousel .carousel-card {
    -ms-flex-line-pack: justify;
    align-content: space-between;
    background-color: #fff;
    border-radius: var(--ui-border-radius);
    -webkit-box-shadow: var(--ui-drop-shadow);
    box-shadow: var(--ui-drop-shadow);
    cursor: pointer;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: wrap;
    flex-flow: wrap;
    height: 435px;
    margin-right: var(--gutter-sm);
    max-width: var(--ui-card-width);
    min-width: 96vw;
    overflow: hidden;
    padding: var(--gutter);
    padding-bottom: 60px;
    position: relative
}

.carousel .carousel-card>a {
    display: block
}

.carousel .carousel-card:last-child {
    margin-right: var(--gutter)
}

.carousel .carousel-card .placeholder,.carousel .carousel-card img {
    border-radius: 6px;
    margin-bottom: var(--gutter-sm);
    max-height: 202px;
    opacity: 1;
    position: relative
}

.carousel .carousel-card .placeholder {
    background-image: -webkit-gradient(linear,left top,right top,from(#9cc4f5),to(#b8f0f7));
    background-image: linear-gradient(90deg,#9cc4f5,#b8f0f7);
    min-height: 147px;
    width: 85%
}

.carousel .carousel-card .placeholder,.carousel .carousel-card a,.carousel .carousel-card h4,.carousel .carousel-card img {
    z-index: 2
}

.carousel .carousel-card h4 {
    font-size: var(--font-size-heading-3);
    margin-bottom: var(--gutter-sm)
}

.carousel .carousel-card a {
    color: #000;
    display: inline-block;
    font-weight: var(--font-weight-bold)
}

.carousel .carousel-card .carousel-card-bg {
    background-color: var(--primary);
    border-radius: var(--ui-border-radius);
    bottom: 0;
    height: 10rem;
    left: -50%;
    position: absolute;
    top: 50%;
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transform-origin: left center;
    transform-origin: left center;
    -webkit-transition: -webkit-transform .25s ease-in;
    transition: -webkit-transform .25s ease-in;
    transition: transform .25s ease-in;
    transition: transform .25s ease-in,-webkit-transform .25s ease-in;
    width: 10rem
}

.carousel .carousel-card:hover {
    --delay: 300ms
}

.carousel .carousel-card:hover .carousel-card-bg {
    -webkit-transform: scale(10);
    transform: scale(10);
    -webkit-transition: -webkit-transform .6s var(--ui-anim-func) var(--delay);
    transition: -webkit-transform .6s var(--ui-anim-func) var(--delay);
    transition: transform .6s var(--ui-anim-func) var(--delay);
    transition: transform .6s var(--ui-anim-func) var(--delay),-webkit-transform .6s var(--ui-anim-func) var(--delay)
}

.carousel .carousel-card:hover h4 {
    color: #fff;
    -webkit-transition: color .4s var(--ui-anim-func) var(--delay);
    transition: color .4s var(--ui-anim-func) var(--delay)
}

.carousel .carousel-card:hover a {
    color: #fff;
    -webkit-transition: color .3s var(--ui-anim-func) var(--delay);
    transition: color .3s var(--ui-anim-func) var(--delay)
}

.carousel .carousel-card:hover a i {
    left: 5px;
    position: relative;
    -webkit-transition: left .3s var(--ui-anim-func) var(--delay);
    transition: left .3s var(--ui-anim-func) var(--delay)
}

.carousel .carousel-progress {
    margin-top: 35px
}

.carousel .carousel-progress .carousel-track {
    background-color: var(--grey-3);
    height: 4px
}

.carousel .carousel-progress .carousel-completed {
    background-color: var(--green-1);
    height: 100%;
    position: relative;
    width: 0
}

.carousel .carousel-progress .carousel-nav {
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: flex-end;
    min-width: 100%;
    padding: var(--gutter-sm) 0
}

.carousel .carousel-progress .carousel-nav a {
    display: inline-block;
    margin-left: var(--spacer-sm);
    -webkit-transition: opacity .2s ease;
    transition: opacity .2s ease
}

.carousel .carousel-progress .carousel-nav a.disabled {
    opacity: .5
}

@media (min-width: 768px) {
    .carousel .carousel-slider:before {
        -webkit-box-flex:0;
        -ms-flex: 0 0 var(--gutter);
        flex: 0 0 var(--gutter)
    }

    .carousel .carousel-card {
        height: 500px;
        margin-right: var(--spacer);
        min-width: var(--ui-card-width)
    }

    .carousel .carousel-card h4 {
        max-width: 90%;
        min-width: 90%
    }
}

@media (min-width: 1440px) {
    .carousel .carousel-slider {
        padding-left:var(--gutter-auto)
    }
}

.cookie-snack {
    background-color: #fff;
    bottom: 0;
    -webkit-box-shadow: var(--ui-drop-shadow);
    box-shadow: var(--ui-drop-shadow);
    display: none;
    left: 0;
    opacity: 0;
    padding: var(--spacer) 0;
    position: fixed;
    width: 100%;
    z-index: 11
}

@-webkit-keyframes fadein {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes fadein {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.cookie-snack.show {
    -webkit-animation-delay: .2s;
    animation-delay: .2s;
    -webkit-animation-duration: .5s;
    animation-duration: .5s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-name: fadein;
    animation-name: fadein;
    -webkit-animation-timing-function: var(--ui-anim-func);
    animation-timing-function: var(--ui-anim-func);
    display: block
}

.cookie-snack .container {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: space-between;
    position: relative;
    top: 1px
}

.cookie-snack .container p {
    font-size: var(--font-size-heading-5);
    line-height: 1.5;
    margin-right: var(--gutter);
    max-width: 1200px
}

.embed-container {
    height: 0;
    max-width: 100%;
    overflow: hidden;
    padding-bottom: 56.25%;
    position: relative
}

.embed-container embed,.embed-container iframe,.embed-container object {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}

.feature-header,.stacked-feature,.stacked-header {
    position: relative
}

.feature-header>hgroup,.stacked-feature>hgroup,.stacked-header>hgroup {
    max-width: 90%;
    padding-left: 0;
    width: 90%
}

.feature-header>hgroup h2,.stacked-feature>hgroup h2,.stacked-header>hgroup h2 {
    font-size: var(--font-size-heading-1);
    line-height: 1
}

.feature-header>hgroup h4.eyebrow.faqs,.stacked-feature>hgroup h4.eyebrow.faqs,.stacked-header>hgroup h4.eyebrow.faqs {
    color: var(--violet-4)
}

.feature-header>hgroup p,.stacked-feature>hgroup p,.stacked-header>hgroup p {
    font-size: var(--font-size-heading-4)
}

.feature-header.full>hgroup,.stacked-feature.full>hgroup,.stacked-header.full>hgroup {
    max-width: 100%!important;
    padding-left: var(--spacer)!important
}

.feature-header.centered>hgroup,.stacked-feature.centered>hgroup,.stacked-header.centered>hgroup {
    margin: 0 auto;
    padding-left: 0;
    text-align: center
}

.feature-header.centered>hgroup h2,.stacked-feature.centered>hgroup h2,.stacked-header.centered>hgroup h2 {
    max-width: auto;
    width: auto
}

@media (min-width: 1024px) {
    .feature-header>hgroup,.stacked-feature>hgroup,.stacked-header>hgroup {
        max-width:885px;
        padding-left: calc(var(--gutter-lg))
    }

    .feature-header a.btn.fixed,.feature-header>div,.stacked-feature a.btn.fixed,.stacked-feature>div,.stacked-header a.btn.fixed,.stacked-header>div {
        bottom: 7px;
        position: absolute;
        right: 0
    }
}

.features {
    --anim-offset: 200px;
    margin-bottom: var(--gutter-sm)
}

@-webkit-keyframes slideup {
    0% {
        opacity: 0
    }

    to {
        opacity: 1;
        top: 0
    }
}

.features .stacked-feature .feature {
    display: grid;
    opacity: 1;
    top: 0
}

.features .stacked-feature .feature.full {
    grid-template-columns: 1fr!important;
    padding-bottom: 0
}

.features .stacked-feature .feature.full .text {
    padding-left: 0;
    padding-right: 0
}

.features .stacked-feature .feature {
    --logo-size: 126px
}

.features .stacked-feature .feature.icons .text {
    -webkit-column-gap: var(--spacer-md);
    -moz-column-gap: var(--spacer-md);
    column-gap: var(--spacer-md);
    display: grid;
    grid-template-columns: var(--logo-size) 1fr!important
}

.features .stacked-feature .feature .icon {
    background-color: #fff;
    border-radius: var(--ui-border-radius-sm);
    -webkit-box-shadow: var(--ui-drop-shadow);
    box-shadow: var(--ui-drop-shadow);
    height: var(--logo-size);
    place-items: center;
    width: var(--logo-size)
}

.features .stacked-feature .feature .text>div {
    border-bottom: 1px solid var(--grey-3);
    margin-bottom: var(--gutter);
    padding-bottom: var(--spacer)
}

.features .stacked-feature .feature .text>div:last-child {
    border-bottom: none;
    padding-bottom: 0
}

.features .stacked-feature .feature .text>div h3 {
    font-size: var(--font-size-heading-3);
    margin-bottom: var(--gutter-sm)
}

.features .stacked-feature .feature .text>div p {
    margin-bottom: var(--gutter-sm)
}

.features .stacked-feature .feature .text>div a.btn {
    margin-right: var(--gutter-sm)
}

@media (min-width: 1024px) {
    .features .stacked-feature .feature.full {
        padding-left:var(--gutter-lg);
        padding-right: var(--gutter-lg)
    }
}

.features .feature {
    display: none;
    grid-template-columns: 1fr;
    opacity: 0;
    padding: var(--gutter) 0;
    position: relative;
    top: var(--anim-offset)
}

.features .feature.collapse {
    padding: 0
}

.features .feature.nospy {
    display: grid;
    opacity: 1;
    top: 0
}

.features .feature.active {
    -webkit-animation-delay: 0ms;
    animation-delay: 0ms;
    -webkit-animation-duration: .6s;
    animation-duration: .6s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-name: slideup;
    animation-name: slideup;
    -webkit-animation-timing-function: var(--ui-anim-func);
    animation-timing-function: var(--ui-anim-func);
    display: grid
}

.features .feature .text {
    -webkit-box-ordinal-group: 3;
    -ms-flex-order: 2;
    order: 2
}

.features .feature .text h3 {
    font-size: var(--font-size-heading-1);
    line-height: 1;
    margin-bottom: var(--spacer-md)
}

.features .feature .text.subtle h3 {
    font-size: var(--font-size-heading-3)
}

.features .feature .text p {
    font-size: var(--font-size-heading-4);
    margin-bottom: var(--gutter-sm);
    max-width: 90%
}

.features .feature .text a.btn {
    margin-bottom: 14px
}

.features .feature .media {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    margin-bottom: var(--gutter);
    order: 1;
    overflow: hidden;
    width: var(--feature-img-width)
}

.features .feature .media img {
    max-width: 600px;
    width: 100%
}

@media (min-width: 1024px) {
    .features .feature {
        -webkit-box-align:center;
        -ms-flex-align: center;
        align-items: center;
        grid-template-columns: 1fr 40%
    }

    .features .feature .text {
        -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
        order: 1;
        padding: 0 var(--gutter-xl) 0 var(--gutter)
    }

    .features .feature .text p {
        margin-bottom: var(--spacer-md)
    }

    .features .feature .media {
        -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
        margin-bottom: 0;
        order: 2
    }

    .features .feature.reverse {
        grid-template-columns: 40% 1fr
    }

    .features .feature.reverse .text {
        -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
        order: 2;
        padding: 0 var(--gutter) 0 var(--gutter-xl)
    }

    .features .feature.reverse .media {
        -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
        order: 1
    }
}

.feature-columns {
    display: grid;
    gap: var(--gutter);
    grid-template-columns: 1fr
}

.feature-columns h3 {
    font-size: var(--font-size-heading-3);
    margin-bottom: var(--gutter-sm)
}

.feature-columns p {
    font-size: var(--font-size-heading-4);
    margin-bottom: var(--gutter-md)
}

.feature-columns img {
    max-width: 600px;
    width: 100%
}

.feature-columns>div {
    border-top: 4px solid var(--grey-3);
    padding: var(--gutter-sm) var(--gutter) 0 0
}

@media (min-width: 1024px) {
    .feature-columns {
        -webkit-column-gap:var(--gutter-sm);
        -moz-column-gap: var(--gutter-sm);
        column-gap: var(--gutter-sm);
        grid-template-columns: 1fr 1fr 1fr
    }

    .feature-columns img {
        max-width: 100%
    }
}

.feature-grid {
    padding: var(--spacer) 0
}

.feature-grid .feature-header {
    margin-bottom: var(--gutter-md)
}

.feature-grid .feature-header h4.eyebrow {
    color: #fff
}

.feature-grid .feature-header h2 {
    color: #fff;
    margin-bottom: var(--spacer);
    max-width: 1022px
}

.feature-grid .feature-header hgroup {
    padding-left: var(--spacer)
}

.feature-grid .feature-grid-features {
    display: grid;
    row-gap: var(--gutter-sm)!important
}

.feature-grid .feature-grid-features.col-2 {
    -webkit-column-gap: 90px;
    -moz-column-gap: 90px;
    column-gap: 90px;
    grid-template-columns: 1fr
}

.feature-grid .feature-grid-features.col-3 {
    -webkit-column-gap: var(--gutter-sm);
    -moz-column-gap: var(--gutter-sm);
    column-gap: var(--gutter-sm);
    grid-template-columns: 1fr
}

.feature-grid .feature-grid-features>div {
    border-radius: 16px;
    padding: var(--spacer)
}

.feature-grid .feature-grid-features>div:hover {
    background-color: hsla(0,0%,100%,.15);
    -webkit-box-shadow: var(--ui-drop-shadow);
    box-shadow: var(--ui-drop-shadow);
    -webkit-transition: background-color .3s,-webkit-box-shadow .2s var(--ui-anim-func);
    transition: background-color .3s,-webkit-box-shadow .2s var(--ui-anim-func);
    transition: background-color .3s,box-shadow .2s var(--ui-anim-func);
    transition: background-color .3s,box-shadow .2s var(--ui-anim-func),-webkit-box-shadow .2s var(--ui-anim-func)
}

.feature-grid .feature-grid-features>div:hover h3 i {
    left: 3px;
    position: relative;
    -webkit-transition: left .4s var(--ui-anim-func);
    transition: left .4s var(--ui-anim-func)
}

.feature-grid .feature-grid-features>div img {
    margin-bottom: var(--spacer-md);
    max-height: 74px;
    max-width: 74px
}

.feature-grid .feature-grid-features>div h3,.feature-grid .feature-grid-features>div p {
    color: #fff
}

.feature-grid .feature-grid-features>div h3 {
    font-size: var(--font-size-heading-3);
    margin-bottom: var(--gutter-sm);
    padding-right: 20px
}

.feature-grid .feature-grid-features>div h3 i {
    font-size: 50%;
    position: relative;
    top: -3px
}

.feature-grid .feature-grid-features>div p {
    font-size: var(--font-size-heading-4)
}

.feature-grid .feature-grid-features>div .btn {
    color: #fff;
    margin-top: var(--gutter-sm)
}

.feature-grid .feature-grid-features>div .btn:hover {
    color: #fff!important
}

@media (min-width: 768px) {
    .feature-grid .feature-grid-features.col-2 {
        -webkit-column-gap:var(--gutter);
        -moz-column-gap: var(--gutter);
        column-gap: var(--gutter);
        grid-template-columns: minmax(0,400px) minmax(0,400px)
    }

    .feature-grid .feature-grid-features.col-3 {
        -webkit-column-gap: var(--gutter-sm);
        -moz-column-gap: var(--gutter-sm);
        column-gap: var(--gutter-sm);
        grid-template-columns: minmax(0,400px) minmax(0,400px)
    }
}

@media (min-width: 1024px) {
    .feature-grid .feature-grid-features {
        row-gap:var(--gutter)
    }

    .feature-grid .feature-grid-features.col-2 {
        -webkit-column-gap: 90px;
        -moz-column-gap: 90px;
        column-gap: 90px;
        grid-template-columns: minmax(0,500px) minmax(0,500px)
    }

    .feature-grid .feature-grid-features.col-3 {
        -webkit-column-gap: var(--gutter-sm);
        -moz-column-gap: var(--gutter-sm);
        column-gap: var(--gutter-sm);
        grid-template-columns: minmax(0,400px) minmax(0,400px) minmax(0,400px)
    }
}

.feature-compare {
    display: grid;
    gap: var(--gutter-md);
    grid-template-columns: 1fr
}

.feature-compare>div .media {
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    align-items: center;
    border-radius: 16px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: center;
    margin-bottom: var(--spacer-md);
    min-height: 240px
}

.feature-compare>div .text h3 {
    font-size: var(--font-size-heading-2);
    line-height: 1;
    margin-bottom: var(--gutter-sm)
}

.feature-compare>div .text p {
    font-size: var(--font-size-heading-4);
    margin-bottom: var(--gutter-sm)
}

@media (min-width: 768px) {
    .feature-compare {
        grid-template-columns:1fr 1fr
    }
}

footer {
    background-color: var(--grey-1);
    padding: 70px var(--gutter)
}

footer ul a {
    color: var(--grey-6)
}

footer ul a:hover {
    text-decoration: underline
}

footer .content {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    justify-content: space-between;
    width: 100%
}

footer .content.footer-main {
    padding-bottom: 65px
}

footer .content.footer-social {
    border-bottom: 1px solid var(--grey-4);
    padding-bottom: 34px
}

footer .content.footer-social,footer .content.footer-social>div {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

footer .content.footer-social>div {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

footer .content.footer-social>div a {
    margin-right: 1.25rem
}

footer .content.footer-social>div span {
    color: var(--grey-6);
    font-family: var(--font-gsans);
    font-size: var(--font-size-heading-5)
}

footer .content.footer-social .lang span {
    display: inline-block;
    margin-right: 1rem
}

footer .content.footer-tray {
    padding-top: 34px
}

footer .content.footer-tray div {
    text-align: center;
    width: 100%
}

footer .content.footer-tray div:first-child {
    margin-bottom: 14px
}

footer .content.footer-tray ul li {
    display: inline;
    margin-left: 1rem
}

footer .logo {
    margin-bottom: var(--gutter);
    position: relative;
    top: -5px;
    width: var(--ui-logo-width)
}

footer .footer-links {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%
}

footer .footer-links ul {
    display: inline-block;
    font-family: var(--font-gsans);
    font-size: var(--font-size-heading-5);
    margin-bottom: var(--gutter);
    margin-left: 1rem
}

footer .footer-links ul li:first-child {
    color: #000;
    display: block;
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--spacer-sm)
}

footer .footer-links ul li {
    margin-bottom: var(--spacer-sm)
}

@media (min-width: 768px) {
    footer .content {
        -webkit-box-orient:horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row
    }

    footer .content.footer-tray {
        -webkit-column-gap: var(--gutter);
        -moz-column-gap: var(--gutter);
        column-gap: var(--gutter)
    }

    footer .content.footer-tray div {
        text-align: left;
        width: auto
    }

    footer .content.footer-tray div:first-child {
        width: 70%
    }

    footer .footer-links {
        grid-template-columns: repeat(3,1fr);
        width: 55%
    }
}

form label.hidden {
    visibility: hidden;
    width: 0
}

form span.error {
    color: var(--red);
    display: block;
    font-size: var(--font-size-heading-5);
    margin-top: 8px;
    padding-left: 32px
}

form a {
    color: var(--primary)
}

form .disclaimer {
    color: var(--grey-6);
    font-size: 14px;
    margin-bottom: var(--spacer-md);
    width: 100%
}

form .field-grid {
    -webkit-column-gap: var(--gutter-sm);
    -moz-column-gap: var(--gutter-sm);
    column-gap: var(--gutter-sm);
    display: grid;
    grid-template-columns: 1fr
}

form .field-wrapper {
    margin-bottom: var(--spacer-md)
}

form .field {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background-color: var(--grey-2);
    border: 1px solid transparent;
    border-radius: 63px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 70px;
    padding: 0 var(--spacer-md)
}

form .field.error {
    border-color: var(--red)
}

form .field i {
    color: var(--grey-5);
    margin-right: var(--spacer-sm)
}

form .field input {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    position: relative;
    top: -1px
}

form .checkbox {
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

form .checkbox .field {
    border-radius: 4px;
    height: auto;
    margin-bottom: 0;
    margin-right: 16px;
    padding: var(--spacer-sm)
}

form .checkbox input[type=checkbox] {
    background-color: transparent;
    border: none;
    cursor: pointer
}

form .checkbox input[type=checkbox]:checked {
    background-color: var(--primary)
}

form .checkbox label {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    color: var(--grey-6);
    flex-grow: 1;
    font-size: 18px
}

form input,form label,form select {
    color: #000;
    font-size: var(--font-size-heading-5)
}

form input[type=email],form input[type=search],form input[type=text],form select {
    background-color: transparent;
    border: none
}

form select {
    width: 100%
}

form ::-webkit-input-placeholder {
    color: var(--grey-6)
}

form ::-moz-placeholder {
    color: var(--grey-6)
}

form :-ms-input-placeholder {
    color: var(--grey-6)
}

form ::-ms-input-placeholder {
    color: var(--grey-6)
}

form ::placeholder,form select:disabled {
    color: var(--grey-6)
}

@media (min-width: 1024px) {
    form .disclaimer {
        width:75%
    }

    form .field-grid {
        grid-template-columns: 1fr 1fr
    }
}

header {
    background-color: transparent;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: var(--ui-header-height);
    left: 0;
    position: fixed;
    top: 0;
    -webkit-transition: top .4s ease;
    transition: top .4s ease;
    width: 100%;
    z-index: 10
}

header.hide {
    top: calc(var(--ui-header-height)*-1)
}

header .content {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 0 var(--gutter-sm);
    width: 100%
}

header .content,header .content>div {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

header .content>div {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

header .logo {
    position: relative;
    top: -2px;
    width: var(--ui-logo-width);
    z-index: 15
}

header .logo img {
    width: 100%
}

header .logo.logo-white {
    display: block
}

header .logo.logo-normal {
    display: none
}

header {
    --anim-offset: 30px;
    --dd-offset-top: 54px
}

@-webkit-keyframes dd-slidedown {
    0% {
        opacity: 0
    }

    to {
        opacity: 1;
        top: var(--dd-offset-top)
    }
}

@keyframes dd-slidedown {
    0% {
        opacity: 0
    }

    to {
        opacity: 1;
        top: var(--dd-offset-top)
    }
}

@-webkit-keyframes nav-slideover {
    0% {
        opacity: 0
    }

    to {
        left: 0;
        opacity: 1
    }
}

@keyframes nav-slideover {
    0% {
        opacity: 0
    }

    to {
        left: 0;
        opacity: 1
    }
}

header nav {
    display: none
}

header nav ul {
    margin: 0;
    padding: 0
}

header nav>ul {
    display: inline-block;
    font-family: var(--font-gsans);
    font-size: var(--font-size-heading-4);
    font-weight: var(--font-weight-bold);
    list-style: none
}

header nav>ul>li {
    display: block;
    position: relative;
    z-index: 2
}

header nav>ul>li a.btn {
    color: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 13px 16px;
    text-align: left;
    -webkit-transition: background-color .3s ease;
    transition: background-color .3s ease
}

header nav>ul>li a.btn:active,header nav>ul>li a.btn:hover {
    background-color: hsla(0,0%,98%,.15)
}

header a.btn#get-started__header {
    background-color: #fff;
    color: var(--blue-6);
    display: none
}

header a.btn#event-cta__header {
    background-color: var(--violet-4);
    color: #fff;
    display: none
}

header .hamburger i {
    position: relative;
    top: 1px
}

header .search {
    display: none;
    overflow: hidden
}

header .search,header .search i {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

header .search i {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    height: 100%;
    left: 1px;
    padding: 0 var(--gutter-sm);
    position: relative;
    top: 1px
}

header .search.active {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    height: 50px;
    justify-content: space-between;
    -webkit-transition: width .3s var(--ui-anim-func);
    transition: width .3s var(--ui-anim-func);
    width: 50vw
}

header .search.active form {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

header .search form {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    display: none;
    flex-grow: 1;
    height: 100%;
    margin: 0 -10px
}

header .search form input {
    background-color: transparent;
    border: none;
    color: #fff;
    font-family: var(--font-gsans);
    font-size: var(--font-size-default);
    font-weight: var(--font-weight-bold);
    padding: 0 8px;
    width: 100%
}

header .search form input::-webkit-input-placeholder {
    color: var(--grey-4)
}

header .search form input::-moz-placeholder {
    color: var(--grey-4)
}

header .search form input:-ms-input-placeholder {
    color: var(--grey-4)
}

header .search form input::-ms-input-placeholder {
    color: var(--grey-4)
}

header .search form input::placeholder {
    color: var(--grey-4)
}

header.mobile-nav-open .content {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    padding-top: var(--gutter-sm);
    row-gap: var(--spacer-md)
}

header.mobile-nav-open .logo {
    top: -1px
}

header.mobile-nav-open .logo.logo-normal {
    display: none
}

header.mobile-nav-open .logo.logo-white {
    display: block
}

header.mobile-nav-open a.btn#get-started__header {
    background-color: #fff!important;
    bottom: 88px;
    color: var(--blue-6)!important
}

header.mobile-nav-open a.btn#event-cta__header,header.mobile-nav-open a.btn#get-started__header {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: center;
    left: var(--gutter-sm);
    position: fixed;
    width: calc(100% - var(--gutter-sm)*2);
    z-index: 15
}

header.mobile-nav-open a.btn#event-cta__header {
    background-color: var(--violet-4)!important;
    bottom: var(--spacer-md);
    color: #fff!important
}

header.mobile-nav-open .close {
    position: absolute;
    right: 24px;
    top: 22px;
    z-index: 15
}

header.mobile-nav-open .close i {
    position: relative;
    top: 1px
}

header.mobile-nav-open nav {
    -webkit-animation-delay: 0ms;
    animation-delay: 0ms;
    -webkit-animation-duration: .3s;
    animation-duration: .3s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-name: nav-slideover;
    animation-name: nav-slideover;
    -webkit-animation-timing-function: var(--ui-anim-func);
    animation-timing-function: var(--ui-anim-func);
    background-color: var(--blue-6);
    -webkit-box-shadow: var(--ui-box-shadow);
    box-shadow: var(--ui-box-shadow);
    display: block;
    height: 100%;
    left: -100%;
    opacity: 0;
    overflow: hidden;
    padding: var(--gutter-lg) var(--gutter-sm);
    position: fixed;
    top: 0;
    width: 100%
}

header.mobile-nav-open nav>ul {
    height: 100%;
    overflow-y: auto;
    position: relative;
    top: 70px;
    width: 100%
}

header.mobile-nav-open nav>ul>li {
    margin-bottom: 5px
}

header.mobile-nav-open nav>ul>li.selected>a i {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg)
}

header.mobile-nav-open nav>ul>li.selected .dd {
    -webkit-animation-delay: 0ms;
    animation-delay: 0ms;
    -webkit-animation-duration: .3s;
    animation-duration: .3s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-name: dd-slidedown;
    animation-name: dd-slidedown;
    -webkit-animation-timing-function: var(--ui-anim-func);
    animation-timing-function: var(--ui-anim-func);
    display: block
}

header.mobile-nav-open nav>ul>li>a {
    -webkit-box-pack: left;
    -ms-flex-pack: left;
    justify-content: left;
    margin-bottom: 3px;
    padding-left: var(--gutter-sm)
}

header.mobile-nav-open nav>ul>li>a i {
    margin-left: 8px;
    position: relative;
    top: 1px;
    -webkit-transition: -webkit-transform .2s var(--ui-anim-func);
    transition: -webkit-transform .2s var(--ui-anim-func);
    transition: transform .2s var(--ui-anim-func);
    transition: transform .2s var(--ui-anim-func),-webkit-transform .2s var(--ui-anim-func)
}

header.mobile-nav-open nav .dd-connector {
    display: none
}

header.mobile-nav-open nav .dd {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    display: none;
    -ms-flex-direction: column;
    flex-direction: column;
    margin-left: var(--gutter-sm);
    top: 200px
}

header.mobile-nav-open nav .dd ul {
    display: block
}

header.mobile-nav-open nav .dd ul li {
    display: block;
    margin-bottom: 4px
}

header.mobile-nav-open nav .dd ul li a.btn {
    color: var(--grey-2);
    display: inline-block;
    font-weight: var(--font-weight-default);
    height: auto;
    padding: 9px 16px var(--spacer-sm)
}

header.mobile-nav-open nav .dd ul li a.btn.active,header.mobile-nav-open nav .dd ul li a.btn:active,header.mobile-nav-open nav .dd ul li a.btn:hover {
    font-weight: var(--font-weight-bold)
}

header.mobile-nav-open nav .dd ul li a.btn:active,header.mobile-nav-open nav .dd ul li a.btn:hover {
    background-color: hsla(0,0%,98%,.15);
    -webkit-transition: background-color .3s,color .3s ease;
    transition: background-color .3s,color .3s ease
}

header.mobile-nav-open .search {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    z-index: 5
}

header.mobile-nav-open .search form {
    margin-left: -20px;
    margin-right: 0
}

@media (min-width: 1024px) and (any-hover:hover) {
    header .content {
        padding:0 var(--gutter)
    }

    header nav {
        background-color: transparent;
        -webkit-box-shadow: none;
        box-shadow: none;
        display: inline-block;
        font-size: var(--font-size-default);
        margin-right: 5px
    }

    header nav>ul>li {
        display: inline-block;
        margin-left: var(--spacer-sm)
    }

    header nav>ul>li .dd li.mobile-only,header nav>ul>li a i {
        display: none
    }

    header nav>ul>li:hover a.btn {
        background-color: hsla(0,0%,98%,.15)
    }

    header nav>ul>li:hover .dd-connector {
        display: block
    }

    header nav>ul>li:hover .dd {
        -webkit-animation-delay: 0ms;
        animation-delay: 0ms;
        -webkit-animation-duration: .3s;
        animation-duration: .3s;
        -webkit-animation-fill-mode: forwards;
        animation-fill-mode: forwards;
        -webkit-animation-iteration-count: 1;
        animation-iteration-count: 1;
        -webkit-animation-name: dd-slidedown;
        animation-name: dd-slidedown;
        -webkit-animation-timing-function: var(--ui-anim-func);
        animation-timing-function: var(--ui-anim-func);
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex
    }

    header nav>ul>li:nth-child(2) .dd {
        width: 245px
    }

    header nav>ul>li:nth-child(5) .dd.dd-double {
        width: 338px
    }

    header nav .dd,header nav .dd-connector {
        display: none;
        position: absolute
    }

    header nav .dd-connector {
        height: var(--dd-offset-top);
        left: 0;
        top: 0;
        width: 100%;
        z-index: -1
    }

    header nav .dd {
        background-color: #fff;
        border-radius: 6px;
        -webkit-box-shadow: var(--ui-drop-shadow);
        box-shadow: var(--ui-drop-shadow);
        left: 50%;
        min-width: 190px;
        padding: var(--gutter-sm);
        padding-bottom: 18px;
        top: var(--anim-offset);
        -webkit-transform: translate(-50%);
        transform: translate(-50%);
        z-index: 11
    }

    header nav .dd ul {
        display: block;
        min-width: 100%
    }

    header nav .dd ul li {
        display: block;
        margin-bottom: 6px
    }

    header nav .dd ul li:last-child {
        padding-bottom: 0
    }

    header nav .dd ul li a.btn {
        color: var(--grey-6);
        display: block;
        font-weight: var(--font-weight-default);
        height: auto;
        margin-left: -8px;
        padding: 9px 16px var(--spacer-sm)
    }

    header nav .dd ul li a.btn.active,header nav .dd ul li a.btn:active,header nav .dd ul li a.btn:hover {
        font-weight: var(--font-weight-bold)
    }

    header nav .dd ul li a.btn:active,header nav .dd ul li a.btn:hover {
        background-color: var(--grey-2);
        color: #000;
        -webkit-transition: background-color .3s,color .3s ease;
        transition: background-color .3s,color .3s ease
    }

    header nav .dd ul li a.subMenu {
        padding-left: 24px
    }

    header nav .dd.dd-double ul {
        min-width: 49%
    }

    header nav .dd.dd-double ul:first-child {
        margin-right: 2%
    }

    header a.btn#event-cta__header,header a.btn#get-started__header {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex
    }

    header a.btn#event-cta__header {
        margin-left: var(--gutter-sm)
    }

    header .search {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        margin-right: var(--gutter-sm)
    }

    header .hamburger,header.searching nav {
        display: none
    }
}

body.interior header:not(.mobile-nav-open) {
    -webkit-box-shadow: none!important;
    box-shadow: none!important
}

body.interior.in-content header:not(.mobile-nav-open) {
    -webkit-box-shadow: 0 1px 6px rgba(0,0,0,.2)!important;
    box-shadow: 0 1px 6px rgba(0,0,0,.2)!important
}

body.in-content header:not(.mobile-nav-open),body.interior header:not(.mobile-nav-open) {
    background-color: #fff;
    -webkit-box-shadow: 0 1px 6px rgba(0,0,0,.2);
    box-shadow: 0 1px 6px rgba(0,0,0,.2);
    top: 0!important;
    -webkit-transition: background-color .3s,top 300px ease,-webkit-box-shadow .2s;
    transition: background-color .3s,top 300px ease,-webkit-box-shadow .2s;
    transition: background-color .3s,box-shadow .2s,top 300px ease;
    transition: background-color .3s,box-shadow .2s,top 300px ease,-webkit-box-shadow .2s
}

body.in-content header:not(.mobile-nav-open) .logo.logo-white,body.interior header:not(.mobile-nav-open) .logo.logo-white {
    display: none
}

body.in-content header:not(.mobile-nav-open) .logo.logo-normal,body.interior header:not(.mobile-nav-open) .logo.logo-normal {
    display: block
}

body.in-content header:not(.mobile-nav-open) nav,body.interior header:not(.mobile-nav-open) nav {
    color: #000;
    -webkit-transition: color .3s;
    transition: color .3s
}

body.in-content header:not(.mobile-nav-open) nav>ul>li:hover>a.btn,body.interior header:not(.mobile-nav-open) nav>ul>li:hover>a.btn {
    background-color: var(--grey-1)
}

body.in-content header:not(.mobile-nav-open) nav>ul>li a.btn,body.interior header:not(.mobile-nav-open) nav>ul>li a.btn {
    color: var(--grey-6)
}

body.in-content header:not(.mobile-nav-open) nav>ul>li a.btn:hover,body.interior header:not(.mobile-nav-open) nav>ul>li a.btn:hover {
    background-color: var(--grey-1);
    color: var(--blue-6)
}

body.in-content header:not(.mobile-nav-open) nav>ul>li a.btn.active,body.interior header:not(.mobile-nav-open) nav>ul>li a.btn.active {
    color: var(--blue-6)
}

body.in-content header:not(.mobile-nav-open) .icon-btn,body.interior header:not(.mobile-nav-open) .icon-btn {
    color: var(--grey-6)
}

body.in-content header:not(.mobile-nav-open) .icon-btn.active,body.in-content header:not(.mobile-nav-open) .icon-btn:hover,body.interior header:not(.mobile-nav-open) .icon-btn.active,body.interior header:not(.mobile-nav-open) .icon-btn:hover {
    background-color: var(--grey-1)
}

body.in-content header:not(.mobile-nav-open) .search form input,body.interior header:not(.mobile-nav-open) .search form input {
    color: #000
}

body.in-content header:not(.mobile-nav-open) .search form input::-webkit-input-placeholder,body.interior header:not(.mobile-nav-open) .search form input::-webkit-input-placeholder {
    color: var(--grey-5)
}

body.in-content header:not(.mobile-nav-open) .search form input::-moz-placeholder,body.interior header:not(.mobile-nav-open) .search form input::-moz-placeholder {
    color: var(--grey-5)
}

body.in-content header:not(.mobile-nav-open) .search form input:-ms-input-placeholder,body.interior header:not(.mobile-nav-open) .search form input:-ms-input-placeholder {
    color: var(--grey-5)
}

body.in-content header:not(.mobile-nav-open) .search form input::-ms-input-placeholder,body.interior header:not(.mobile-nav-open) .search form input::-ms-input-placeholder {
    color: var(--grey-5)
}

body.in-content header:not(.mobile-nav-open) .search form input::placeholder,body.interior header:not(.mobile-nav-open) .search form input::placeholder {
    color: var(--grey-5)
}

body.in-content header:not(.mobile-nav-open) .search.active,body.interior header:not(.mobile-nav-open) .search.active {
    background-color: var(--grey-2)
}

body.in-content header:not(.mobile-nav-open) a.btn#get-started__header,body.interior header:not(.mobile-nav-open) a.btn#get-started__header {
    background-color: var(--blue-6);
    color: #fff
}

body.in-content header:not(.mobile-nav-open) a.btn#event-cta__header,body.interior header:not(.mobile-nav-open) a.btn#event-cta__header {
    background-color: var(--violet-4);
    color: #fff
}

body.interior section.hero {
    background-color: transparent;
    overflow: hidden;
    padding: var(--gutter-md) 0
}

body.interior section.hero .container {
    text-align: center
}

body.interior section.hero {
    --img-width: 600px
}

body.interior section.hero .mantle {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: grid;
    gap: var(--gutter-md);
    grid-template-columns: 1fr
}

body.interior section.hero .mantle.full {
    grid-template-columns: 1fr!important
}

body.interior section.hero .mantle.full .text {
    text-align: center!important;
    width: 100%
}

body.interior section.hero .mantle.full .text h1 {
    margin: 0 auto;
    max-width: 100%
}

body.interior section.hero .mantle .text {
    -webkit-box-ordinal-group: 3;
    -ms-flex-order: 2;
    order: 2;
    text-align: center
}

body.interior section.hero .mantle .text h1 {
    font-size: var(--font-size-heading-1);
    line-height: 1;
    margin: 0 auto;
    max-width: 485px
}

body.interior section.hero .mantle .text h2 {
    font-size: var(--font-size-heading-3);
    margin-top: var(--spacer-md);
    max-width: auto
}

body.interior section.hero .mantle .media {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1
}

body.interior section.hero .mantle .media img {
    margin: 0 auto;
    max-width: var(--img-width);
    width: 100%
}

body.interior section.hero h2 {
    font-size: var(--font-size-heading-2);
    font-weight: 400;
    margin: var(--gutter-lg) auto var(--spacer);
    max-width: 925px
}

@media (min-width: 1024px) {
    body.interior section.hero .mantle {
        gap:var(--gutter-md);
        grid-template-columns: 1fr minmax(0,var(--img-width))
    }

    body.interior section.hero .mantle .text {
        -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
        order: 1;
        padding-left: var(--gutter);
        text-align: left
    }

    body.interior section.hero .mantle .text h1 {
        font-size: 70px;
        margin: 0
    }

    body.interior section.hero .mantle .media {
        -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
        order: 2
    }

    body.interior section.hero .mantle .media img {
        max-width: 100%
    }
}

.insert {
    background-color: transparent;
    border-radius: 40px;
    display: grid;
    grid-template-columns: 1fr;
    position: relative
}

.insert .eyebrow {
    color: #000
}

.insert .text {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    justify-content: space-between;
    padding: var(--gutter);
    z-index: 2
}

.insert .text h4.eyebrow {
    margin-bottom: var(--spacer-sm)
}

.insert .text h3 {
    font-size: var(--font-size-heading-2);
    font-weight: var(--font-weight-default);
    margin-bottom: var(--gutter-sm);
    max-width: 820px
}

.insert .text a,.insert .text a.btn {
    border-color: #000;
    color: #000;
    font-weight: var(--font-weight-bold)
}

.insert .text a.btn:hover,.insert .text a:hover {
    background-color: transparent;
    color: #000
}

.insert .text a.btn {
    margin-bottom: var(--spacer-sm)
}

.insert .media {
    position: relative;
    z-index: 1
}

.insert .media img {
    bottom: 0;
    position: absolute;
    right: 0
}

.insert.dart-insert {
    background-image: -webkit-gradient(linear,left top,right top,from(#9cc4f5),to(#b8f0f7));
    background-image: linear-gradient(90deg,#9cc4f5,#b8f0f7)
}

.insert.dart-insert .text h3 {
    margin-bottom: var(--spacer)
}

.insert.dart-insert .media {
    min-height: 325px
}

.insert.dart-insert .media img {
    right: 0
}

.insert.dart-insert.dev .media {
    height: 325px
}

.insert.dart-insert.dev .media img {
    height: 100%;
    left: 50px;
    position: relative
}

.insert.culture-insert {
    background-color: #74c7f7;
    overflow: hidden
}

.insert.culture-insert img {
    bottom: 0;
    height: 100%;
    min-width: 1024px;
    position: absolute;
    right: 0
}

.insert.developer-story-insert {
    background-image: -webkit-gradient(linear,left top,right top,from(#ff8485),to(#f9eac6));
    background-image: linear-gradient(90deg,#ff8485,#f9eac6)
}

.insert.developer-story-insert .media img {
    height: 385px;
    position: static
}

.insert.cta-insert {
    background-color: #042449;
    overflow: hidden
}

.insert.cta-insert .text {
    padding-bottom: 96px;
    padding-top: 96px
}

.insert.cta-insert .media {
    position: static
}

.insert.cta-insert .media img {
    bottom: auto;
    height: 100%;
    top: 0
}

.insert.cta-insert a,.insert.cta-insert h3,.insert.cta-insert p {
    color: #fff
}

.insert.cta-insert h3 {
    font-size: var(--font-size-heading-1);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--gutter-sm)
}

.insert.cta-insert p {
    font-size: var(--font-size-heading-4);
    margin-bottom: 2rem
}

.insert.cta-insert a.btn:not(.quiet) {
    background-color: #fff!important;
    color: var(--blue-6)!important
}

.insert.cta-insert a.btn.quiet,.insert.cta-insert a.btn.quiet:hover {
    color: #fff!important
}

@media (min-width: 1024px) {
    .insert {
        grid-template-columns:1fr minmax(0,441px);
        min-height: 315px
    }

    .insert .text {
        padding: 64px 0 64px 64px
    }

    .insert.developer-story-insert .media {
        position: static
    }

    .insert.developer-story-insert .media img {
        position: absolute
    }

    .insert.dart-insert {
        -webkit-column-gap: var(--gutter-sm);
        -moz-column-gap: var(--gutter-sm);
        column-gap: var(--gutter-sm);
        grid-template-columns: 1fr minmax(0,390px)
    }

    .insert.dart-insert .media {
        min-height: 315px
    }

    .insert.dart-insert.dev .media {
        height: auto;
        min-height: auto
    }

    .insert.dart-insert.dev .media img {
        height: auto;
        left: auto;
        position: absolute
    }

    .insert.cta-insert .text {
        padding: var(--gutter-md)
    }

    .insert.cta-insert .text h3 {
        margin-bottom: var(--spacer-sm)
    }
}

.logos {
    display: grid;
    gap: var(--gutter-sm);
    grid-template-columns: repeat(auto-fill,minmax(100px,1fr))
}

.logos .logos-col.centerpiece>div {
    height: 356px;
    width: 356px
}

.logos .logos-col>div {
    background-color: var(--grey-1);
    border-radius: var(--ui-border-radius-sm);
    -webkit-box-shadow: var(--ui-drop-shadow-sm);
    box-shadow: var(--ui-drop-shadow-sm);
    display: grid;
    height: 163px;
    padding: 37px;
    place-items: center;
    width: 163px
}

.logos .logos-col>div:before {
    content: "";
    display: block;
    grid-area: 1/1/2/2;
    padding-bottom: 100%
}

.logos .logos-col>div img {
    grid-area: 1/1/2/2;
    width: 100%
}

.map button.gm-ui-hover-effect {
    right: 0!important;
    top: 1px!important
}

.map .map-info-window {
    padding: 20px
}

.map .map-info-window h4 {
    color: var(--primary);
    font-size: 14px;
    font-weight: var(--font-weight-default);
    margin-bottom: var(--spacer-sm)
}

.map .map-info-window h3 {
    font-size: var(--font-size-heading-3);
    margin-bottom: var(--spacer-sm)
}

.map .map-info-window p {
    font-size: var(--font-size-heading-5);
    margin-bottom: var(--gutter-sm)
}

.newsletter {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: var(--gutter)
}

.newsletter .text h2 {
    font-size: var(--font-size-heading-1);
    line-height: 1
}

@-webkit-keyframes slidedown {
    0% {
        opacity: 0
    }

    to {
        opacity: 1;
        top: 0
    }
}

@keyframes slidedown {
    0% {
        opacity: 0
    }

    to {
        opacity: 1;
        top: 0
    }
}

.newsletter .form {
    overflow: hidden
}

.newsletter .form h3 {
    color: var(--grey-6);
    font-size: var(--font-size-heading-3);
    margin-bottom: var(--spacer-md)
}

.newsletter .form p {
    font-size: var(--font-size-heading-4);
    margin-bottom: var(--spacer)
}

.newsletter .form .hidden-fields {
    opacity: 0;
    position: relative;
    top: -150px
}

.newsletter .form .hidden-fields.active {
    -webkit-animation-delay: 0ms;
    animation-delay: 0ms;
    -webkit-animation-duration: .4s;
    animation-duration: .4s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-name: slidedown;
    animation-name: slidedown;
    -webkit-animation-timing-function: var(--ui-anim-func);
    animation-timing-function: var(--ui-anim-func)
}

.newsletter .form .optin {
    font-size: var(--font-size-default)
}

.newsletter .form .success h3 {
    margin-bottom: var(--spacer-sm)
}

.newsletter .form .global-error {
    margin-bottom: var(--spacer-md)
}

.newsletter .form .global-error span {
    padding-left: 0
}

.newsletter .form .captcha-container {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column
}

.newsletter .form .captcha-container .error,.newsletter .form .captcha-container .g-recaptcha {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content
}

.newsletter .form .captcha-container .error {
    padding: 0
}

@media (min-width: 1024px) {
    .newsletter {
        grid-template-columns:40% 1fr
    }
}

.notification .notification-message {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background-color: var(--blue-6);
    border-radius: 6px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-family: var(--font-gsans);
    font-size: var(--font-size-heading-4);
    margin-bottom: 1rem;
    padding: var(--gutter-ssm);
    padding-top: 28px;
}

.notification .notification-message img {
    margin-right: var(--gutter-sm);
    width: 50px
}

.notification .notification-message a {
    color: #fff
}

.notification .notification-message a:hover {
    text-decoration: none
}

.notification .notification-message i svg {
    font-size: .7em
}

.notification .notification-nav {
    display: none;
    padding-left: 2rem
}

.notification .notification-nav span {
    display: inline-block;
    height: 16px;
    margin-right: var(--spacer-sm);
    width: 16px
}

.notification .notification-nav span a {
    background-color: #fff;
    border: 3px solid #dadcdf;
    border-radius: 100%;
    display: block;
    height: 100%;
    -webkit-transition: border-color .2s ease;
    transition: border-color .2s ease;
    width: 100%
}

.notification .notification-nav span.active a,.notification .notification-nav span:hover a {
    border: 3px solid var(--green-1)
}

@media (min-width: 1024px) {
    .notification {
        padding:var(--gutter-sm) 32px
    }

    .notification img {
        width: 60px
    }
}

section#stories {
    background-color: var(--grey-1);
    padding-bottom: var(--gutter-lg)
}

.story-grid .story-grid-header h3 {
    font-size: var(--font-size-heading-2);
    margin-bottom: var(--gutter-md);
    text-align: center
}

.story-grid .story-grid-items {
    -webkit-column-gap: var(--gutter-sm);
    -moz-column-gap: var(--gutter-sm);
    column-gap: var(--gutter-sm);
    display: grid;
    grid-template-columns: 1fr;
    row-gap: var(--gutter)
}

@media (min-width: 768px) {
    .story-grid .story-grid-items {
        grid-template-columns:repeat(2,1fr)
    }
}

@media (min-width: 1024px) {
    .story-grid .story-grid-items {
        grid-template-columns:repeat(3,1fr)
    }
}

.story-detail {
    padding: var(--gutter-md) 0 var(--gutter-lg) 0;
    text-align: center
}

.story-detail .story-logo {
    background-color: var(--grey-1);
    border-radius: var(--ui-border-radius-sm);
    -webkit-box-shadow: var(--ui-drop-shadow-sm);
    box-shadow: var(--ui-drop-shadow-sm);
    display: grid;
    height: 128px;
    margin: 0 auto;
    margin-bottom: var(--gutter-md);
    padding: 19px;
    place-items: center;
    width: 128px
}

.story-detail>h1 {
    line-height: 1.2;
    margin: 0 auto var(--gutter-lg);
    max-width: 850px
}

.story-detail>h2 {
    font-size: var(--font-size-heading-2);
    font-weight: 400;
    margin: 0 auto var(--gutter-md);
    max-width: 950px
}

.story-detail h3 {
    font-size: var(--font-size-heading-3);
    margin: 0 auto var(--gutter-sm);
    max-width: 925px
}

.story-detail .btn-row {
    margin-bottom: var(--gutter-sm);
    margin-top: var(--gutter)
}

.story-detail p {
    line-height: 1.5
}

.story-detail p br {
    display: none
}

.story-detail ol,.story-detail ul {
    list-style-type: decimal;
    margin: 0 0 0 var(--gutter);
    padding: 0
}

.story-detail ol li,.story-detail ul li {
    line-height: 1.3;
    margin-bottom: var(--spacer-sm)
}

.story-detail ul {
    list-style-type: disc
}

.story-detail ol,.story-detail p,.story-detail ul {
    font-size: var(--font-size-heading-4);
    margin-bottom: var(--spacer);
    text-align: left
}

.story-detail .embed-container,.story-detail img.full-width,.story-detail img.poster {
    margin-bottom: var(--gutter-md);
    width: 100%
}

.story-detail .story-body img.full-width {
    margin-top: var(--gutter-md)
}

.story-detail .success-metrics {
    background-color: transparent;
    background-image: var(--grad-violet-blue-35);
    border-radius: var(--ui-border-radius);
    margin-bottom: var(--gutter-md);
    min-height: 340px;
    padding: var(--gutter-md)
}

.story-detail .success-metrics>h2 {
    font-size: var(--font-size-heading-3);
    margin-bottom: var(--gutter)
}

.story-detail .success-metrics .success-metrics-wrapper {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-column-gap: var(--gutter);
    -moz-column-gap: var(--gutter);
    column-gap: var(--gutter);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: wrap;
    flex-flow: wrap;
    justify-content: center
}

.story-detail .success-metrics .success-metrics-wrapper>div {
    max-width: 195px
}

.story-detail .success-metrics .success-metrics-wrapper>div h4 {
    font-size: 54px;
    margin-bottom: var(--spacer-sm)
}

.story-detail .success-metrics .success-metrics-wrapper>div h3 {
    font-family: var(--font-roboto);
    font-size: var(--font-size-heading-4);
    font-weight: var(--font-weight-default)
}

@media (min-width: 1024px) {
    .story-detail ol,.story-detail p,.story-detail ul {
        padding:0 var(--gutter-lg)
    }
}

.story-item a:hover h3,.story-item a:hover h4,.story-item a:hover p {
    color: var(--primary)
}

.story-item img {
    margin-bottom: var(--gutter-sm);
    width: 100%
}

.story-item.video-item {
    min-width: 544px;
    width: 544px
}

.story-item.video-item .media {
    height: 306px;
    margin-bottom: var(--gutter-sm);
    overflow: hidden;
    padding-top: 56.25%;
    position: relative;
    width: 544px
}

.story-item.video-item .media img {
    left: 0;
    margin-bottom: 0;
    position: absolute;
    top: -51px;
    width: 100%
}

.story-item.video-item .media:hover .play-btn {
    opacity: 1;
    -webkit-transition: opacity .3s;
    transition: opacity .3s
}

.story-item .media {
    position: relative
}

.story-item .play-btn {
    height: 74px;
    left: calc(50% - 37px);
    opacity: .85;
    place-items: center;
    position: absolute;
    top: calc(50% - 37px);
    width: 74px;
    z-index: 1
}

.story-item .text {
    padding-right: var(--gutter-sm)
}

.story-item h4 {
    font-size: 14px;
    font-weight: var(--font-weight-default);
    margin-bottom: 14px
}

.story-item h3 {
    font-size: var(--font-size-heading-3)
}

.story-item h3,.story-item p {
    margin-bottom: var(--gutter-sm)
}

.story-item p {
    font-size: var(--font-size-heading-4)
}

.tabs {
    --text-width: 394px;
    --anim-offset: 200px
}

.tabs .tabs-footer,.tabs .tabs-header {
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    margin-bottom: 60px;
    min-width: 100%;
    text-align: center
}

.tabs .tabs-footer h2,.tabs .tabs-header h2 {
    font-size: 32px;
    font-weight: 400;
    margin-bottom: 45px;
    max-width: 800px
}

.tabs .tabs-footer {
    margin-top: 40px
}

.tabs .tabs-menu ul {
    background-color: var(--grey-1);
    border-radius: var(--ui-border-radius);
    display: inline-block;
    overflow: hidden
}

.tabs .tabs-menu ul li {
    border: none;
    max-width: 33.33333%
}

.tabs .tabs-menu ul li:hover {
    background-color: var(--grey-3);
    color: var(--grey-6)
}

.tabs .tabs-menu ul li.active {
    background-color: var(--blue-6);
    color: #fff
}

@media (min-width: 1024px) {
    .tabs .tabs-menu ul li {
        max-width:165px
    }
}

.tabs .tab-content {
    display: none;
    grid-template-columns: 1fr;
    opacity: 0;
    position: relative;
    top: var(--anim-offset)
}

.tabs .tab-content.no-spy {
    top: 0
}

.tabs .tab-content.active {
    -webkit-animation-delay: 0ms;
    animation-delay: 0ms;
    -webkit-animation-duration: .6s;
    animation-duration: .6s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-name: slideup;
    animation-name: slideup;
    -webkit-animation-timing-function: var(--ui-anim-func);
    animation-timing-function: var(--ui-anim-func);
    display: grid
}

.tabs .tab-content .media img,.tabs .tab-content .media video {
    margin: 0 auto;
    max-width: 600px;
    width: 100%
}

.tabs .tab-content .text {
    padding: var(--gutter-sm)
}

.tabs .tab-content .text h3 {
    color: #000;
    font-size: var(--font-size-heading-2);
    margin-bottom: var(--gutter-sm)
}

.tabs .tab-content .text p {
    font-size: var(--font-size-heading-4);
    margin-bottom: var(--spacer)
}

.tabs .extra-content {
    display: none;
    opacity: 0
}

.tabs .extra-content.active {
    -webkit-animation-delay: 0ms;
    animation-delay: 0ms;
    -webkit-animation-duration: .6s;
    animation-duration: .6s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-name: slideup;
    animation-name: slideup;
    -webkit-animation-timing-function: var(--ui-anim-func);
    animation-timing-function: var(--ui-anim-func);
    display: block
}

@media (min-width: 1024px) {
    .tabs .tabs-menu ul li {
        width:165px
    }

    .tabs .tab-content {
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        grid-template-columns: 1fr var(--text-width)
    }

    .tabs .tab-content .media img,.tabs .tab-content .media video {
        max-width: 100%
    }
}

.testimonial {
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    --logo-size: 111px;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 520px;
    justify-content: flex-end;
    position: relative
}

.testimonial>img {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: var(--ui-card-width)
}

.testimonial .testimonial-wrapper {
    background-color: #fff;
    border-radius: var(--ui-border-radius);
    -webkit-box-shadow: var(--ui-drop-shadow);
    box-shadow: var(--ui-drop-shadow);
    -webkit-column-gap: var(--gutter);
    -moz-column-gap: var(--gutter);
    column-gap: var(--gutter);
    display: grid;
    grid-template-columns: 1fr;
    max-width: calc(var(--logo-size)*10);
    padding: var(--gutter);
    position: relative;
    z-index: 2
}

.testimonial .testimonial-logo {
    background-color: #fff;
    border-radius: var(--ui-border-radius-sm);
    -webkit-box-shadow: var(--ui-drop-shadow-sm);
    box-shadow: var(--ui-drop-shadow-sm);
    display: grid;
    height: var(--logo-size);
    margin-bottom: var(--spacer);
    padding: var(--gutter-sm);
    place-items: center;
    width: var(--logo-size)
}

.testimonial .testimonial-quote {
    font-family: var(--font-gsans)
}

.testimonial .testimonial-quote blockquote p {
    color: #000;
    font-size: var(--font-size-heading-3);
    margin-bottom: var(--gutter-sm)
}

.testimonial .testimonial-quote div.sep {
    border-bottom: 4px solid var(--grey-6);
    margin-bottom: var(--spacer-md);
    margin-top: var(--spacer-md);
    opacity: .5;
    width: 45px
}

.testimonial .testimonial-quote span {
    color: var(--grey-6);
    font-size: var(--font-size-heading-4);
    font-weight: var(--font-weight-bold);
    opacity: .5
}

@media (min-width: 1024px) {
    .testimonial .testimonial-wrapper {
        grid-template-columns:var(--logo-size) 1fr
    }
}

body.brand section.hero {
    --lt-blue: #196bd4;
    --dk-blue: #1783e1;
    background-color: var(--primary);
    background-image: linear-gradient(to bottom,var(--lt-blue) 20%,transparent 60%),radial-gradient(ellipse at -50% -150%,transparent 80%,var(--lt-blue) 80%),linear-gradient(145deg,var(--lt-blue) 0,var(--dk-blue) 60%);
    padding: var(--gutter-xl) 0
}

body.brand section.hero .mantle {
    padding: var(--spacer) 0
}

body.brand section.hero .mantle .text h1,body.brand section.hero .mantle .text h4 {
    color: #fff
}

body.brand section.hero .mantle .text h1 {
    margin-bottom: var(--spacer)!important;
    max-width: 375px!important
}

body.brand section.hero .mantle .btn.quiet {
    color: #fff!important;
    font-weight: 400
}

body.brand section.hero .mantle .btn.quiet:hover {
    text-decoration: underline
}

@media (min-width: 768px) {
    body.brand section.hero .mantle .text h1 {
        max-width:570px!important
    }
}

@media (min-width: 1024px) {
    body.brand section.hero .mantle .text h1 {
        max-width:570px!important
    }
}

body.brand .downloadable-image-harness .downloadable-image {
    background-color: #fff;
    border: 1px solid var(--ui-border-color);
    border-radius: 16px;
    padding: var(--spacer)
}

body.brand .downloadable-image-harness .downloadable-image img {
    max-width: 100%
}

body.brand .downloadable-image-harness .downloadable-options {
    margin-left: 16px;
    padding: 10px 0
}

body.brand .downloadable-image-harness .downloadable-options a {
    color: var(--blue-7);
    display: inline-block;
    font-size: 14px;
    margin-right: 5px
}

body.brand .stacked-feature.brand-feature>hgroup {
    margin-bottom: var(--spacer);
    max-width: 100%;
    padding-left: 0;
    width: 100%
}

body.brand .stacked-feature.brand-feature>hgroup h2 {
    margin-bottom: var(--spacer-md)
}

body.brand .stacked-feature.brand-feature .feature {
    grid-template-columns: 1fr;
    padding: 0
}

body.brand .stacked-feature.brand-feature .feature .text {
    -webkit-box-ordinal-group: 2!important;
    -ms-flex-order: 1!important;
    order: 1!important;
    padding: 0
}

body.brand .stacked-feature.brand-feature .feature .text h3 {
    font-size: var(--font-size-heading-2)
}

body.brand .stacked-feature.brand-feature .feature .media {
    margin-bottom: 0
}

@media (min-width: 1024px) {
    body.brand .stacked-feature.brand-feature .feature {
        gap:var(--gutter-sm);
        grid-template-columns: 1fr 50%
    }
}

body.brand .variations hgroup h3 {
    font-size: var(--font-size-heading-2);
    margin-bottom: var(--gutter)
}

body.brand .variations .variation-grid {
    display: grid;
    gap: var(--gutter-sm);
    grid-template-columns: 1fr
}

body.brand .variations .variation-grid>div h4,body.brand .variations .variation-grid>div p {
    font-size: var(--font-size-heading-4);
    margin-bottom: var(--gutter-sm)
}

@media (min-width: 768px) {
    body.brand .variations .variation-grid {
        grid-template-columns:repeat(2,1fr)
    }

    body.brand .variations .variation-grid>div p {
        min-height: 85px
    }
}

@media (min-width: 1024px) {
    body.brand .variations .variation-grid {
        grid-template-columns:repeat(4,1fr)
    }

    body.brand .variations .variation-grid>div p {
        min-height: 120px
    }
}

body.brand .compare-cols {
    --green: #158477;
    --red: #d43324;
    display: grid;
    gap: var(--gutter-sm);
    grid-template-columns: 1fr
}

body.brand .compare-cols .image-harness {
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    align-items: center;
    background-color: #fff;
    border: 1px solid var(--ui-border-color);
    border-radius: 16px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: center;
    margin-bottom: 16px;
    padding: 35px 0
}

body.brand .compare-cols .compare-label {
    font-size: var(----font-size-default);
    font-weight: 400;
    padding: var(--spacer-sm) 0
}

body.brand .compare-cols .compare-label span {
    font-weight: 700
}

body.brand .compare-cols .compare-label.good {
    border-top: 12px solid var(--green);
    color: var(--green)
}

body.brand .compare-cols .compare-label.bad {
    border-top: 12px solid var(--red);
    color: var(--red)
}

@media (min-width: 768px) {
    body.brand .compare-cols {
        grid-template-columns:1fr 1fr
    }
}

body.brand .subsection {
    padding-top: var(--gutter-md)
}

body.brand .subsection hgroup {
    margin-bottom: var(--gutter)
}

body.brand .subsection hgroup h3 {
    font-size: var(--font-size-heading-2);
    margin-bottom: var(--gutter-sm)
}

body.brand .subsection hgroup p {
    font-size: var(--font-size-heading-4)
}

@media (min-width: 1024px) {
    body.brand .subsection {
        padding-top:var(--gutter-lg)
    }

    body.brand .subsection hgroup {
        margin-bottom: var(--gutter-md)
    }
}

body.brand section#logo {
    margin: var(--gutter-md) 0
}

body.brand section#logo .stacked-feature hgroup {
    margin-bottom: var(--gutter)
}

body.brand section#logo .downloadable-image-harness .downloadable-image {
    padding: var(--gutter-lg) var(--gutter-md)
}

@media (min-width: 768px) {
    body.brand section#logo .downloadable-image-harness .downloadable-image {
        padding:var(--gutter-lg) 150px
    }
}

@media (min-width: 1024px) {
    body.brand section#logo {
        margin:var(--gutter-lg) 0
    }

    body.brand section#logo .downloadable-image-harness .downloadable-image {
        padding: var(--gutter-lg) var(--gutter-md)
    }
}

body.brand section#logo-color-variations {
    background-image: var(--grad-blue-light-35);
    padding: var(--gutter-md) 0
}

body.brand section#logo-color-variations .variation-grid>div .downloadable-image {
    background-color: var(--blue-10);
    padding: 110px 70px
}

body.brand section#logo-color-variations .variation-grid>div:first-child .downloadable-image {
    background-color: #fff
}

@media (min-width: 1024px) {
    body.brand section#logo-color-variations {
        padding:var(--gutter-lg) 0
    }

    body.brand section#logo-color-variations .variation-grid>div .downloadable-image {
        padding: 110px 60px
    }
}

body.brand section#logo-variations {
    background-color: var(--grey-1);
    padding: var(--gutter-md) 0
}

body.brand section#logo-variations .variation-grid>div .downloadable-image {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background-color: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 370px;
    justify-content: center
}

body.brand section#logo-variations .variation-grid>div:first-child .downloadable-image img {
    width: 115px
}

body.brand section#logo-variations .variation-grid>div:nth-child(2) .downloadable-image img {
    width: 92px
}

body.brand section#logo-variations .variation-grid>div:nth-child(3) .downloadable-image img {
    width: 300px
}

@media (min-width: 1024px) {
    body.brand section#logo-variations {
        padding:var(--gutter-lg) 0
    }

    body.brand section#logo-variations .variation-grid {
        grid-template-columns: repeat(3,1fr)
    }

    body.brand section#logo-variations .variation-grid>div p {
        min-height: 100px
    }

    body.brand section#logo-variations .variation-grid>div .downloadable-image {
        padding: 110px 60px
    }
}

body.brand section#logo-sizing-spacing {
    padding-bottom: var(--spacer)
}

body.brand section#logo-sizing-spacing .compare-cols {
    background-color: #fff;
    border: 1px solid var(--ui-border-color);
    border-radius: 16px;
    gap: 30px;
    padding: 40px
}

@media (min-width: 768px) {
    body.brand section#logo-sizing-spacing .compare-cols {
        grid-template-columns:1fr;
        padding: 80px
    }
}

@media (min-width: 1024px) {
    body.brand section#logo-sizing-spacing .compare-cols {
        grid-template-columns:minmax(0,1fr) minmax(0,499px);
        padding: 120px 100px
    }
}

body.brand section#logo-alignment {
    padding-bottom: var(--gutter-lg)
}

body.brand section#logo-alignment .image-harness img {
    max-width: 300px
}

body.brand section#logo-contrast {
    background-color: var(--grey-1);
    padding-bottom: var(--spacer)
}

body.brand section#logo-contrast .compare-cols .image-harness {
    padding: 138px 0
}

body.brand section#logo-contrast .compare-cols .image-harness img {
    max-width: 65%
}

body.brand section#logo-contrast .compare-cols>div:first-child .image-harness {
    background-color: #2968d0
}

body.brand section#logo-contrast .compare-cols>div:nth-child(2) .image-harness {
    background-color: #53b7f7
}

body.brand section#logo-ligatures {
    background-color: var(--grey-1);
    padding-bottom: var(--gutter-md)
}

body.brand section#logo-ligatures .compare-cols .image-harness {
    padding: 45px
}

body.brand section#logo-ligatures .compare-cols .image-harness img {
    max-width: 85%
}

@media (min-width: 1024px) {
    body.brand section#logo-ligatures {
        padding-top:var(--gutter-lg)
    }

    body.brand section#logo-ligatures .compare-cols .image-harness img {
        max-width: 70%
    }
}

body.brand section#color {
    padding-bottom: var(--gutter-lg)
}

body.brand section#color hgroup {
    margin-bottom: var(--spacer)
}

body.brand section#color hgroup h2 {
    font-size: var(--font-size-heading-1)
}

body.brand section#color .colors-row {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: grid;
    gap: 0;
    grid-template-columns: 1fr
}

body.brand section#color .colors-row.colors-primary .colors-grid .color:first-child .color-chip {
    background-color: #042b59
}

body.brand section#color .colors-row.colors-primary .colors-grid .color:nth-child(2) .color-chip {
    background-color: #0553b1
}

body.brand section#color .colors-row.colors-primary .colors-grid .color:nth-child(3) .color-chip {
    background-color: #027dfd
}

body.brand section#color .colors-row.colors-secondary {
    padding-bottom: var(--spacer-md)
}

body.brand section#color .colors-row.colors-secondary .colors-grid .color:first-child .color-chip {
    background-color: #f25d50
}

body.brand section#color .colors-row.colors-secondary .colors-grid .color:nth-child(2) .color-chip {
    background-color: #fff275
}

body.brand section#color .colors-row.colors-secondary .colors-grid .color:nth-child(3) .color-chip {
    background-color: #6200ee
}

body.brand section#color .colors-row.colors-secondary .colors-grid .color:nth-child(4) .color-chip {
    background-color: #1cdac5
}

body.brand section#color .colors-grid {
    -webkit-box-ordinal-group: 3;
    -ms-flex-order: 2;
    display: grid;
    gap: 16px;
    order: 2;
    padding: var(--spacer) 0
}

body.brand section#color .colors-grid .color-chip {
    aspect-ratio: 1/1;
    width: 100%
}

body.brand section#color .colors-grid.col-3 {
    grid-template-columns: repeat(3,1fr)
}

body.brand section#color .colors-grid.col-4 {
    grid-template-columns: repeat(4,1fr)
}

body.brand section#color .colors-desc {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1
}

body.brand section#color .colors-desc h3 {
    font-size: var(--font-size-heading-2);
    margin-bottom: var(--gutter-sm)
}

body.brand section#color .colors-desc p {
    font-size: var(--font-size-heading-4)
}

body.brand section#color .color .color-chip {
    border-radius: var(--ui-border-radius-sm)
}

body.brand section#color .color .color-desc {
    display: block;
    min-width: 100%;
    padding: var(--spacer-sm) 0
}

body.brand section#color .color .color-desc h4 {
    font-size: 16px;
    margin-bottom: 5px
}

body.brand section#color .color .color-desc h5 {
    color: var(--grey-6);
    font-size: 14px;
    font-weight: 400
}

body.brand section#color .colors-grid.col-4 .color-desc {
    display: block
}

@media (min-width: 1024px) {
    body.brand section#color .colors-row {
        gap:var(--gutter-lg);
        grid-template-columns: 55% 1fr
    }

    body.brand section#color .colors-row .colors-grid {
        -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
        gap: var(--gutter-sm);
        order: 1
    }

    body.brand section#color .colors-row .colors-desc {
        -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
        order: 2
    }

    body.brand section#color .color .color-desc {
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        align-items: center;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        justify-content: space-between
    }
}

body.brand section#dash {
    padding-bottom: var(--gutter)
}

body.brand section#dash .feature {
    gap: var(--gutter);
    padding: 0
}

body.brand section#dash .feature .text {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1;
    padding-right: var(--gutter)
}

body.brand section#dash .feature .media {
    -webkit-box-ordinal-group: 3;
    -ms-flex-order: 2;
    order: 2
}

body.brand section#dash .feature .media .downloadable-image {
    padding: 90px 45px
}

@media (min-width: 1024px) {
    body.brand section#dash .feature {
        gap:var(--gutter-md);
        grid-template-columns: 1fr 50%
    }

    body.brand section#dash .feature .text {
        padding-right: 0
    }
}

body.community section.hero h1 {
    margin: 0 auto var(--gutter-lg);
    max-width: 885px
}

body.community section.hero .success-metrics {
    background-color: transparent;
    background-image: var(--grad-yellow-blue-35);
    border-radius: var(--ui-border-radius);
    padding: var(--gutter-md)
}

body.community section.hero .success-metrics .success-metrics-wrapper {
    -webkit-box-align: start;
    -ms-flex-align: start;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    align-items: flex-start;
    -webkit-column-gap: var(--gutter);
    -moz-column-gap: var(--gutter);
    column-gap: var(--gutter);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: wrap;
    flex-flow: wrap;
    justify-content: space-between;
    margin: 0 auto;
    max-width: 990px;
    padding: 0 var(--gutter-sm)
}

body.community section.hero .success-metrics .success-metrics-wrapper .success-metric {
    margin-bottom: 0px;
    text-align: left
}

body.community section.hero .success-metrics .success-metrics-wrapper .success-metric h4 {
    border-left: 3px solid var(--grey-5);
    font-size: 54px;
    line-height: .7;
    padding-left: 20px
}

body.community section.hero .success-metrics .success-metrics-wrapper .success-metric:first-child h4 {
    border-color: var(--violet-4)
}

body.community section.hero .success-metrics .success-metrics-wrapper .success-metric:nth-child(2) h4 {
    border-color: var(--primary)
}

body.community section.hero .success-metrics .success-metrics-wrapper .success-metric:nth-child(3) h4 {
    border-color: var(--green-1)
}

body.community section.hero .success-metrics .success-metrics-wrapper .success-metric h3 {
    font-family: var(--font-roboto);
    font-size: var(--font-size-heading-4);
    font-weight: var(--font-weight-default);
    padding-left: 20px
}

body.community section.hero .success-metrics h2 {
    font-size: var(--font-size-heading-2);
    max-width: 775px
}

body.community section.hero .success-metrics h2:first-child {
    margin-bottom: var(--gutter-md)
}

body.community section.hero .success-metrics p {
    font-family: var(--font-gsans);
    font-size: 16px;
    font-weight: var(--font-weight-bold)
}

@media (min-width: 1024px) {
    body.community section.hero .scuess-metrics-wrapper {
        margin-bottom:var(--gutter-md);
        padding: var(--gutter-lg)
    }

    body.community section.hero .scuess-metrics-wrapper .success-metric {
        margin-bottom: 0
    }
}

body.community #gdes {
    background-image: var(--grad-liteyellow-blue)
}

body.community #community-events .feature-header hgroup {
    max-width: 750px
}

body.community #map .map {
    background-color: #eee;
}

body.community #map .map .cluster img {
    width: 100%!important
}

body.community #twitter {
    padding: var(--gutter-sm) 0
}

body.community #twitter .text {
    -webkit-box-ordinal-group: 2!important;
    -ms-flex-order: 1!important;
    order: 1!important
}

body.community #twitter .media {
    -webkit-box-ordinal-group: 3!important;
    -ms-flex-order: 2!important;
    order: 2!important
}

body.community #twitter .social-icons>div {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

body.community #twitter .social-icons>div a {
    margin-right: 1.25rem
}

body.community #twitter .social-icons>div span {
    color: var(--grey-6);
    font-family: var(--font-gsans);
    font-size: var(--font-size-heading-5)
}

@media (min-width: 1024px) {
    body.community #twitter .feature {
        -webkit-box-align:start;
        -ms-flex-align: start;
        align-items: flex-start;
        grid-template-columns: 1fr 55%
    }

    body.community #twitter .twitter-embed {
        position: relative;
        top: -8px
    }

    body.community #twitter .social-icons {
        margin-bottom: 0
    }
}

body.community #community-grid {
    --dk-purple: #0e0e4c;
    --md-purple: #00186b;
    --lt-purple: #34137e;
    background-color: var(--dk-purple);
    background-image: linear-gradient(to bottom,var(--dk-purple) 20%,transparent 60%),radial-gradient(ellipse at -50% -150%,transparent 80%,var(--dk-purple) 80%),linear-gradient(145deg,var(--dk-purple) 0,var(--lt-purple) 60%)
}

body.community #community-grid>div a .icon {
    max-height: 74px;
    max-width: 74px
}

body.community #community-grid>div a .icon.framed-icon {
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    align-items: center;
    background-color: #fff;
    border-radius: 5px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 74px;
    justify-content: center;
    padding: 12px;
    width: 74px
}

body.community #community-grid>div a .icon.framed-icon img {
    width: 100%
}

body.community #community-grid>div a .icon img {
    margin-bottom: 0
}

body.community .dart-insert {
    background-image: -webkit-gradient(linear,left top,right top,from(#5bccfc),to(#beeafe));
    background-image: linear-gradient(90deg,#5bccfc,#beeafe);
    grid-template-columns: 1fr;
    overflow: hidden
}

body.community .dart-insert .media {
    position: static
}

body.community .dart-insert .media img {
    bottom: auto;
    height: 100%;
    top: 0;
    width: auto
}

body.communityEvents section.hero {
    background-image: var(--grad-yellow-blue-75)
}

body.communityEvents .hero .text h3 {
    font-size: var(--font-size-heading-1);
    line-height: 1;
}

body.communityEvents .hero .text p {
    font-size: var(--font-size-heading-4);
}

body.communityEvents .story-grid {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    justify-content: center
}

body.communityEvents .story-grid button {
    margin-top: 16px
}

body.communityEvents .story-grid .story-grid-header h3 {
    text-align: left
}

body.communityEvents .story-grid .story-grid-items .story-item .text h3 {
    margin-top: 12px
}

body.communityEvents #newsletter {
}

body.culture section.hero {
    background-image: linear-gradient(35deg,#dcf5ff 50%,#f3fcff 90%)
}

body.culture section.hero .container>h2 {
    font-size: var(--font-size-heading-2);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--gutter-sm)
}

body.culture section.hero .container>p {
    font-family: var(--font-gsans);
    font-size: var(--font-size-heading-3);
    margin-bottom: var(--gutter)
}

body.culture section.hero .container>h3 {
    font-size: var(--font-size-heading-3);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--gutter-sm)
}

body.culture #feature-columns .feature-columns>div {
    border-color: var(--blue-4)
}

body.culture #code {
    background-image: linear-gradient(35deg,#dcf5ff 10%,#f3fcff 60%);
    padding: var(--gutter-xl) 0
}

body.culture #code>.container {
    margin: 0 auto;
    max-width: 886px
}

body.culture #code .stacked-header hgroup {
    margin-bottom: 81px;
    max-width: 660px;
    padding-left: 0
}

body.culture #code .story-detail {
    padding: 0;
    text-align: left
}

body.culture #code .story-detail br {
    display: block
}

body.culture #code .story-detail ol,body.culture #code .story-detail p,body.culture #code .story-detail ul {
    padding: 0
}

body.culture #code .story-detail ol a,body.culture #code .story-detail ol a:hover,body.culture #code .story-detail p a,body.culture #code .story-detail p a:hover,body.culture #code .story-detail ul a,body.culture #code .story-detail ul a:hover {
    color: var(--grey-6);
    text-decoration: underline
}

body.developers section.hero {
    background-image: var(--grad-blue-green-145)
}

body.developers #feature-grid {
    --lt-blue: #196bd4;
    --dk-blue: #1783e1;
    background-color: var(--primary);
    background-image: linear-gradient(to bottom,var(--lt-blue) 20%,transparent 60%),radial-gradient(ellipse at -50% -150%,transparent 80%,var(--lt-blue) 80%),linear-gradient(145deg,var(--lt-blue) 0,var(--dk-blue) 60%)
}

body.developers #stories hgroup h2 {
    max-width: 650px
}

body.ecosystem section.hero {
    background-image: var(--grad-red-blue-35)
}

body.ecosystem #everyone {
    background-image: var(--grad-liteyellow-blue)
}

body.events section.hero {
    background-image: var(--grad-blue-yellow-35)
}

body.events .carousel-featured-card.flutter-apprentice .text {
    background-color: var(--blue-7)
}

body.events .carousel-featured-card.flutter-engage .text {
    background-color: var(--blue-4)
}

body.events #newsletter {
    margin-top: var(--gutter-lg)
}

body.events.event-detail .story-detail>h1 {
    margin-bottom: var(--spacer-md)
}

body.events.event-detail .story-detail>h2 {
    font-size: var(--font-size-heading-3);
    max-width: 725px
}

body.events.event-detail .story-detail .story-logo {
    padding: 35px
}

body.events.event-detail .story-detail .story-logo img {
    left: -3px;
    position: relative;
    top: -6px
}

body.events.event-detail .story-detail .story-body {
    margin: 0 auto;
    max-width: 950px
}

body.events.event-detail .story-detail .story-cta-button {
    margin-bottom: 3rem;
    position: relative;
    top: -1rem
}

body.events.event-detail .story-detail .story-cta-button a.btn {
    font-size: var(--font-size-heading-5);
    height: 50px;
    padding: 0 var(--gutter)
}

body.events.event-detail.event-challenge .story-detail>h1 {
    max-width: 90%!important
}

body.events.event-detail #mentions hgroup,body.events.event-detail #sessions hgroup,body.events.event-detail #winners hgroup {
    margin-bottom: var(--gutter-sm)
}

body.events.event-detail #sessions,body.events.event-detail #winners {
    background-color: var(--grey-1)
}

body.events.event-detail .event-sessions,body.events.event-detail .event-winners {
    -webkit-column-gap: var(--gutter);
    -moz-column-gap: var(--gutter);
    column-gap: var(--gutter);
    display: grid;
    padding: var(--spacer) 0;
    row-gap: var(--gutter-md);
    text-align: left
}

body.events.event-detail .event-sessions .event-session img,body.events.event-detail .event-sessions .event-winner img,body.events.event-detail .event-winners .event-session img,body.events.event-detail .event-winners .event-winner img {
    margin-bottom: 16px;
    width: 100%
}

body.events.event-detail .event-sessions .event-session h3,body.events.event-detail .event-sessions .event-winner h3,body.events.event-detail .event-winners .event-session h3,body.events.event-detail .event-winners .event-winner h3 {
    font-size: 16px;
    line-height: 1.4;
    margin-bottom: 10px;
    text-align: center
}

body.events.event-detail .event-sessions .event-session h3 span,body.events.event-detail .event-sessions .event-winner h3 span,body.events.event-detail .event-winners .event-session h3 span,body.events.event-detail .event-winners .event-winner h3 span {
    color: var(--grey-6);
    font-weight: 400
}

body.events.event-detail .event-sessions .event-session h4,body.events.event-detail .event-sessions .event-winner h4,body.events.event-detail .event-winners .event-session h4,body.events.event-detail .event-winners .event-winner h4 {
    font-size: var(--font-size-heading-3);
    line-height: 1.1;
    margin-bottom: var(--spacer-sm);
    max-width: 90%
}

body.events.event-detail .event-sessions .event-session p,body.events.event-detail .event-sessions .event-winner p,body.events.event-detail .event-winners .event-session p,body.events.event-detail .event-winners .event-winner p {
    font-size: var(--font-size-heading-5)
}

body.events.event-detail .event-sessions .event-session a:hover h4,body.events.event-detail .event-sessions .event-session a:hover p,body.events.event-detail .event-sessions .event-winner a:hover h4,body.events.event-detail .event-sessions .event-winner a:hover p,body.events.event-detail .event-winners .event-session a:hover h4,body.events.event-detail .event-winners .event-session a:hover p,body.events.event-detail .event-winners .event-winner a:hover h4,body.events.event-detail .event-winners .event-winner a:hover p {
    color: var(--primary)
}

@media (min-width: 768px) {
    body.events.event-detail .event-sessions,body.events.event-detail .event-winners {
        grid-template-columns:repeat(2,1fr)
    }
}

@media (min-width: 1024px) {
    body.events.event-detail .event-sessions,body.events.event-detail .event-winners {
        grid-template-columns:repeat(3,1fr)
    }
}

body.events.event-detail .event-mentions,body.events.event-detail .other-sessions {
    padding: var(--spacer) 0
}

body.events.event-detail .event-mentions ul,body.events.event-detail .other-sessions ul {
    -webkit-column-count: 1;
    -moz-column-count: 1;
    column-count: 1;
    line-height: 1.5
}

body.events.event-detail .event-mentions ul li,body.events.event-detail .other-sessions ul li {
    font-size: var(--font-size-heading-5);
    margin-bottom: 12px
}

body.events.event-detail .event-mentions ul li a,body.events.event-detail .other-sessions ul li a {
    color: var(--primary)
}

body.events.event-detail .event-mentions ul li a:hover,body.events.event-detail .other-sessions ul li a:hover {
    text-decoration: underline
}

@media (min-width: 768px) {
    body.events.event-detail .event-mentions ul,body.events.event-detail .other-sessions ul {
        -webkit-column-count:2;
        -moz-column-count: 2;
        column-count: 2
    }
}

@media (min-width: 1024px) {
    body.events.event-detail .event-mentions ul,body.events.event-detail .other-sessions ul {
        -webkit-column-count:3;
        -moz-column-count: 3;
        column-count: 3
    }
}

#banner {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    height: 1027px;
    justify-content: flex-end
}

#banner .embed-container {
    height: 100%;
    max-height: 600px;
    max-width: 1075px;
    padding: 0 var(--gutter-sm);
    width: 100%
}

#banner .embed-container iframe {
    position: static
}

#banner .hero-details {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: var(--gutter-sm);
    justify-content: space-between;
    margin-bottom: 69px;
    margin-top: 54px
}

#banner .hero-details .btn.secondary {
    background-color: #fff;
    border: none
}

#banner .hero-details .btn.secondary:hover {
    color: var(--primary)
}

#banner .hero-details p {
    color: #fff;
    font-size: var(--font-size-heading-5);
    max-width: 579px;
    text-align: center
}

#story .story-detail {
    max-width: none;
    padding: initial;
    width: auto
}

#story .story-detail .tabs {
    --anim-offset: 200px
}

#story .story-detail .tabs .modal {
    background-color: rgba(0,0,0,.5);
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100
}

#story .story-detail .tabs .modal,#story .story-detail .tabs .modal .modal-inner {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    justify-content: center
}

#story .story-detail .tabs .modal .modal-inner {
    background: #fff;
    border-radius: 10px;
    -webkit-box-shadow: 0 8px 24px rgba(0,0,0,.25);
    box-shadow: 0 8px 24px rgba(0,0,0,.25);
    padding: 0;
    position: relative;
    width: 312px
}

#story .story-detail .tabs .modal .modal-inner .modal-media {
    -webkit-box-flex: 50%;
    -ms-flex: 50%;
    flex: 50%
}

#story .story-detail .tabs .modal .modal-inner .modal-media .modal-img {
    border-radius: 10px 10px 0 0;
    height: 320px;
    -o-object-fit: cover;
    object-fit: cover
}

#story .story-detail .tabs .modal .modal-inner .modal-media .modal-inner-close {
    cursor: pointer;
    position: absolute;
    right: 16px;
    top: 16px
}

#story .story-detail .tabs .modal .modal-inner .modal-body {
    -webkit-box-flex: 50%;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex: 50%;
    flex: 50%;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 12px;
    justify-content: flex-start;
    padding: 24px;
    width: 100%
}

#story .story-detail .tabs .modal .modal-inner .modal-body a,#story .story-detail .tabs .modal .modal-inner .modal-body h3,#story .story-detail .tabs .modal .modal-inner .modal-body p,#story .story-detail .tabs .modal .modal-inner .modal-body>h5 {
    margin: 0;
    padding: 0
}

#story .story-detail .tabs .modal .modal-inner .modal-body>h5 {
    color: #13c2ad
}

#story .story-detail .tabs .modal .modal-inner .modal-body>a>h5 {
    margin-right: 8px
}

#story .story-detail .tabs .tabs-header {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    display: inherit;
    -ms-flex-direction: row;
    flex-direction: row;
    margin-bottom: 64px
}

#story .story-detail .tabs .tabs-menu ul {
    background-color: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 8px;
    overflow: scroll;
    text-align: center
}

#story .story-detail .tabs ul::-webkit-scrollbar {
    display: none
}

#story .story-detail .tabs ul {
    border-radius: 0;
    margin: 0;
    padding: 0
}

#story .story-detail .tabs ul>a {
    -webkit-box-flex: 0;
    border: none;
    -ms-flex: none;
    flex: none;
    margin-bottom: 0
}

#story .story-detail .tabs ul>a:hover {
    background-color: var(--grey-3);
    color: var(--grey-6)
}

#story .story-detail .tabs ul>a.active {
    background-color: var(--blue-6);
    color: #fff
}

#story .story-detail .tabs .tabs-content {
    margin: 64px auto;
    max-width: 1112px
}

#story .story-detail .tabs .tab-content {
    display: none;
    opacity: 0;
    position: relative;
    top: var(--anim-offset)
}

#story .story-detail .tabs .tab-content.no-spy {
    top: 0
}

#story .story-detail .tabs .tab-content.active {
    -webkit-animation-delay: 0ms;
    animation-delay: 0ms;
    -webkit-animation-duration: .6s;
    animation-duration: .6s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-name: slideup;
    animation-name: slideup;
    -webkit-animation-timing-function: var(--ui-anim-func);
    animation-timing-function: var(--ui-anim-func);
    display: block
}

#story .story-detail .tabs .tab-content #home.module {
    padding: 0
}

#story .story-detail .tabs .tab-content #home.module .features.container {
    width: 100%
}

#story .story-detail .tabs .tab-content #home.module .stacked-feature .overview {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 120px;
    position: static
}

#story .story-detail .tabs .tab-content #home.module .stacked-feature .overview,#story .story-detail .tabs .tab-content #home.module .stacked-feature .overview .overview-content {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    justify-content: space-between
}

#story .story-detail .tabs .tab-content #home.module .stacked-feature .overview .overview-content {
    -webkit-box-align: start;
    -ms-flex-align: start;
    -webkit-box-flex: 50%;
    align-items: flex-start;
    -ms-flex: 50%;
    flex: 50%;
    margin-top: 60px;
    padding: 0;
    text-align: left
}

#story .story-detail .tabs .tab-content #home.module .stacked-feature .overview .overview-content>hgroup {
    margin-bottom: 32px
}

#story .story-detail .tabs .tab-content #home.module .stacked-feature .overview .overview-content h1 {
    font-size: 46px;
    line-height: 55px
}

#story .story-detail .tabs .tab-content #home.module .stacked-feature .overview .overview-content h4.eyebrow.faqs {
    color: var(--violet-4);
    margin-bottom: 16px
}

#story .story-detail .tabs .tab-content #home.module .stacked-feature .overview .overview-content p {
    margin: 0;
    padding: 0
}

#story .story-detail .tabs .tab-content #home.module .stacked-feature .overview .overview-content .btn {
    margin-top: 32px
}

#story .story-detail .tabs .tab-content #home.module .stacked-feature .on-demand .overview-content p {
    margin-bottom: 40px!important
}

#story .story-detail .tabs .tab-content #home.module .stacked-feature .on-demand .btn {
    font-size: 16px;
    height: 50px
}

#story .story-detail .tabs .tab-content #home.module .stacked-feature .holo-booth .overview-content .btn.primary {
    background: linear-gradient(91.87deg,#4100e0 .1%,#f8bbd0 120.1%);
    border: none;
    -webkit-box-shadow: 1px 6px 16px rgba(148,85,217,.24);
    box-shadow: 1px 6px 16px rgba(148,85,217,.24);
    padding: 13px 48px
}

#story .story-detail .tabs .tab-content #home.module .stacked-feature .flutter-forward-extended .overview-content {
    width: 100%
}

#story .story-detail .tabs .tab-content #home.module .stacked-feature .flutter-forward-extended .btn {
    font-size: 16px;
    height: 50px
}

#story .story-detail .tabs .tab-content #home.module .stacked-feature .flutter-forward-extended p {
    font-size: 24px;
    line-height: 32px
}

#story .story-detail .tabs .tab-content #home.module .stacked-feature .get-involved .overview-content .get-involved-link {
    margin-bottom: 0
}

#story .story-detail .tabs .tab-content #home.module .stacked-feature hgroup {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    justify-content: center;
    padding: 0;
    text-align: left;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content
}

#story .story-detail .tabs .tab-content #home.module .stacked-feature .feature {
    margin-top: 100px;
    padding: 0
}

#story .story-detail .tabs .tab-content #home.module .stacked-feature .feature h3,#story .story-detail .tabs .tab-content #home.module .stacked-feature .feature p {
    margin: 0;
    padding: 0;
    text-align: left
}

#story .story-detail .tabs .tab-content #home.module .stacked-feature .feature p {
    margin-top: 24px
}

#story .story-detail .tabs .tab-content #faqs.module .features.container {
    margin: 0
}

#story .story-detail .tabs .tab-content #faqs.module .stacked-feature>hgroup {
    margin: 0 0 112px;
    max-width: -webkit-fit-content;
    max-width: -moz-fit-content;
    max-width: fit-content;
    padding: 0;
    text-align: left;
    width: 100%
}

#story .story-detail .tabs .tab-content #faqs.module .stacked-feature .feature {
    border-bottom: 1px solid var(--grey-3);
    margin-top: 40px;
    padding: 0
}

#story .story-detail .tabs .tab-content #faqs.module .stacked-feature .feature:last-child {
    border-bottom: none;
    padding-bottom: 0
}

#story .story-detail .tabs .tab-content #faqs.module .stacked-feature .feature {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    justify-content: space-between
}

#story .story-detail .tabs .tab-content #faqs.module .stacked-feature .feature h3 {
    margin: 0
}

#story .story-detail .tabs .tab-content #faqs.module .stacked-feature .feature p {
    margin: 24px 0 0;
    padding: 0 0 40px
}

#story .story-detail .tabs .tab-content #faqs.module .stacked-feature .feature p:empty {
    display: none
}

#story .story-detail .tabs .tab-content #schedule.module {
    padding: 0
}

#story .story-detail .tabs .tab-content #schedule.module .features.container {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content
}

#story .story-detail .tabs .tab-content #schedule.module .stacked-feature-banner {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
    justify-content: space-between;
    position: static
}

#story .story-detail .tabs .tab-content #schedule.module .stacked-feature-banner>hgroup {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    justify-content: center;
    margin-bottom: 16px;
    margin-top: 60px;
    max-width: 90%;
    padding-left: 0;
    text-align: left;
    width: 90%
}

#story .story-detail .tabs .tab-content #schedule.module .stacked-feature-banner>hgroup h1 {
    font-size: 46px;
    line-height: 55px
}

#story .story-detail .tabs .tab-content #schedule.module .stacked-feature-banner>hgroup h4.eyebrow.faqs {
    color: var(--violet-4)
}

#story .story-detail .tabs .tab-content #schedule.module .stacked-feature-banner>hgroup p {
    font-size: var(--font-size-heading-4)
}

#story .story-detail .tabs .tab-content #schedule.module .feature .schedule-section {
    margin-top: 64px
}

#story .story-detail .tabs .tab-content #schedule.module .feature .schedule-section p {
    margin-bottom: 0
}

#story .story-detail .tabs .tab-content #schedule.module .feature .schedule-section .btn.quiet.workshop-nav {
    color: var(--primary);
    font-size: var(--font-size-heading-4);
    margin-bottom: 80px;
    margin-top: 16px;
    padding: 0;
    text-align: left;
    text-decoration: underline
}

#story .story-detail .tabs .tab-content #schedule.module .feature {
    padding: 0;
    text-align: left
}

#story .story-detail .tabs .tab-content #schedule.module .feature h1 {
    font-size: 36px;
    line-height: 40px
}

#story .story-detail .tabs .tab-content #schedule.module .feature p {
    margin-top: 16px;
    padding: 0
}

#story .story-detail .tabs .tab-content #schedule.module .feature h2 {
    font-size: 34px;
    font-weight: var(--font-weight-default);
    line-height: 40px;
    margin: 64px 0
}

#story .story-detail .tabs .tab-content #schedule.module .feature .schedule-container {
    border-bottom: 1px solid var(--grey-3)
}

#story .story-detail .tabs .tab-content #schedule.module .feature .schedule-container,#story .story-detail .tabs .tab-content #schedule.module .feature .schedule-container .schedule-subsection {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    justify-content: space-between
}

#story .story-detail .tabs .tab-content #schedule.module .feature .schedule-container .schedule-subsection {
    margin-bottom: 64px
}

#story .story-detail .tabs .tab-content #schedule.module .feature .schedule-container .schedule-subsection h3 {
    color: var(--grey-6);
    font-size: 28px;
    font-weight: var(--font-weight-default);
    line-height: 34px;
    margin: 0 0 8px;
    min-width: 198px
}

#story .story-detail .tabs .tab-content #schedule.module .feature .schedule-container .schedule-subsection p {
    color: var(--grey-6);
    font-size: 20px;
    line-height: 30px;
    margin: 24px 0
}

#story .story-detail .tabs .tab-content #schedule.module .feature .schedule-container .schedule-subsection h4 {
    color: var(--grey-6);
    font-size: 20px;
    font-weight: var(--font-weight-default);
    line-height: 24px
}

#story .story-detail .tabs .tab-content #schedule.module .feature .schedule-container .schedule-subsection ul {
    margin-top: 16px
}

#story .story-detail .tabs .tab-content #schedule.module .feature .schedule-container .schedule-subsection ul>p {
    color: var(--grey-6);
    font-size: 16px;
    font-weight: var(--font-weight-bold);
    line-height: 24px;
    margin: 8px 0
}

#story .story-detail .tabs .tab-content #on-demand.module .stacked-feature .overview {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 80px;
    justify-content: space-between;
    margin-bottom: 120px;
    position: static
}

#story .story-detail .tabs .tab-content #on-demand.module .stacked-feature .overview .overview-content {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    -webkit-box-align: start;
    -ms-flex-align: start;
    -webkit-box-flex: 50%;
    align-items: flex-start;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex: 50%;
    flex: 50%;
    -ms-flex-direction: column;
    flex-direction: column;
    justify-content: flex-start;
    padding: 0;
    text-align: left
}

#story .story-detail .tabs .tab-content #on-demand.module .stacked-feature .overview .overview-content>hgroup {
    margin-bottom: 32px
}

#story .story-detail .tabs .tab-content #on-demand.module .stacked-feature .overview .overview-content h1 {
    font-size: 46px;
    line-height: 55px
}

#story .story-detail .tabs .tab-content #on-demand.module .stacked-feature .overview .overview-content h4.eyebrow.faqs {
    color: var(--violet-4)
}

#story .story-detail .tabs .tab-content #on-demand.module .stacked-feature .overview .overview-content p {
    font-size: 24px;
    margin: 0 0 32px;
    padding: 0
}

#story .story-detail .tabs .tab-content #on-demand.module .stacked-feature .overview .overview-content .btn.primary {
    margin-top: 8px
}

#story .story-detail .tabs .tab-content #on-demand.module .stacked-feature .overview .embed-container {
    height: 286px;
    margin: 0;
    padding: 0;
    position: static;
    width: 100%
}

#story .story-detail .tabs .tab-content #on-demand.module .stacked-feature .overview .embed-container>iframe {
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    position: relative;
    width: 100%
}

#story .story-detail .tabs .tab-content #on-demand.module .stacked-feature .overview.on-demand-demo {
    margin-bottom: 0;
    margin-top: 150px
}

#story .story-detail .tabs .tab-content #on-demand.module .stacked-feature .overview.on-demand-demo .overview-content hgroup {
    margin: 0
}

#story .story-detail .tabs .tab-content #on-demand.module .stacked-feature .overview.on-demand-demo .overview-content a {
    height: 50px
}

#story .story-detail .tabs .tab-content #on-demand.module .stacked-feature .overview.on-demand-demo .overview-content p {
    margin: 0
}

#story .story-detail .tabs .tab-content #on-demand.module .stacked-feature .overview.on-demand-demo .overview-content {
    gap: 40px
}

#story .story-detail .tabs .tab-content #on-demand.module .stacked-feature .overview.on-demand-demo .img-container {
    -webkit-box-flex: 50%;
    -ms-flex: 50%;
    flex: 50%;
    height: 375px
}

#story .story-detail .tabs .tab-content #on-demand.module .stacked-feature .overview.on-demand-demo .img-container>img {
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%
}

#story .story-detail .tabs .tab-content #on-demand.module .stacked-feature hgroup {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    justify-content: center;
    padding: 0;
    text-align: left;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content
}

#story .story-detail .tabs .tab-content #on-demand.module .stacked-feature .feature {
    display: block;
    margin-top: 100px;
    padding: 0
}

#story .story-detail .tabs .tab-content #on-demand.module .stacked-feature .feature h3,#story .story-detail .tabs .tab-content #on-demand.module .stacked-feature .feature p {
    margin: 0;
    padding: 0;
    text-align: left
}

#story .story-detail .tabs .tab-content #on-demand.module .stacked-feature .feature p {
    margin-top: 24px
}

#story .story-detail .tabs .tab-content #on-demand.module .stacked-feature .feature .on-demand-section-container {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    margin-top: 48px
}

#story .story-detail .tabs .tab-content #on-demand.module .stacked-feature .feature .on-demand-section-container .on-demand-grid {
    grid-gap: 24px;
    display: grid;
    grid-template-columns: 1fr;
    margin-top: 24px
}

#story .story-detail .tabs .tab-content #on-demand.module .stacked-feature .feature .on-demand-section-container .on-demand-grid .on-demand-card {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border: 1px solid var(--grey-3);
    border-radius: 4px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column
}

#story .story-detail .tabs .tab-content #on-demand.module .stacked-feature .feature .on-demand-section-container .on-demand-grid .on-demand-card .embed-container {
    margin: 0;
    min-height: 239px;
    padding: 0;
    position: static;
    width: 100%
}

#story .story-detail .tabs .tab-content #on-demand.module .stacked-feature .feature .on-demand-section-container .on-demand-grid .on-demand-card .embed-container>iframe {
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    position: relative;
    width: 100%
}

#story .story-detail .tabs .tab-content #on-demand.module .stacked-feature .feature .on-demand-section-container .on-demand-grid .on-demand-card .card-content {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 12px;
    padding: 32px 48px 32px 32px
}

#story .story-detail .tabs .tab-content #on-demand.module .stacked-feature .feature .on-demand-section-container .on-demand-grid .on-demand-card .card-content h3 {
    font-size: 28px;
    font-weight: 700;
    line-height: 34px
}

#story .story-detail .tabs .tab-content #on-demand.module .stacked-feature .feature .on-demand-section-container .on-demand-grid .on-demand-card .card-content p {
    color: var(--grey-6);
    font-size: 16px;
    margin: 0
}

#story .story-detail .tabs .tab-content #on-demand.module .stacked-feature .feature .on-demand-section-container h3 {
    color: #000;
    font-size: 46px;
    font-weight: var(--font-weight-normal)
}

#story .story-detail .tabs .tab-content #community.module {
    padding: 0
}

#story .story-detail .tabs .tab-content #community.module .community-header {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
    justify-content: space-between
}

#story .story-detail .tabs .tab-content #community.module hgroup {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    margin-top: 60px;
    min-width: 300px;
    text-align: left;
    width: -webkit-min-content;
    width: -moz-min-content;
    width: min-content
}

#story .story-detail .tabs .tab-content #community.module .eyebrow {
    color: var(--violet-4)
}

#story .story-detail .tabs .tab-content #community.module .community-section {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border-bottom: 1px solid var(--grey-3);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    justify-content: space-between;
    margin-bottom: 100px;
    margin-top: 100px;
    padding-bottom: 100px
}

#story .story-detail .tabs .tab-content #community.module .community-section #map {
    padding: 0;
    width: 100%
}

#story .story-detail .tabs .tab-content #community.module .community-section #map .map {
    background-color: #eee;
    width: 100%
}

#story .story-detail .tabs .tab-content #community.module .community-section #map .map .cluster img {
    height: 100%!important;
    width: 100%!important
}

#story .story-detail .tabs .tab-content #community.module .community-section #map .map .map-info-window {
    max-width: 354px;
    padding: 4px;
    text-align: left
}

#story .story-detail .tabs .tab-content #community.module .community-section #map .map .map-info-window h5 {
    color: #000;
    font-size: 16px;
    font-weight: var(--font-weight-normal);
    line-height: 20px;
    margin-bottom: 14px
}

#story .story-detail .tabs .tab-content #community.module .community-section #map .map .map-info-window h3 {
    color: #000;
    font-size: 24px;
    font-weight: var(--font-weight-normal);
    line-height: 30px
}

#story .story-detail .tabs .tab-content #community.module .community-section #map .map .map-info-window p {
    font-size: 14px;
    font-weight: var(--font-weight-normal);
    line-height: 20px;
    margin: 0;
    padding: 0
}

#story .story-detail .tabs .tab-content #community.module .community-section #map .map .map-info-window .btn.quiet {
    color: var(--primary);
    font-size: 18px;
    font-weight: var(--font-weight-normal);
    line-height: 20px;
    margin: 12px 0 0;
    padding: 0
}

#story .story-detail .tabs .tab-content #community.module .community-section>h1 {
    font-weight: var(--font-weight-normal)
}

#story .story-detail .tabs .tab-content #community.module .community-section>p {
    margin-bottom: 80px;
    margin-top: 24px;
    padding: 0;
    text-align: justify
}

#story .story-detail .tabs .tab-content #community.module .community-section .collapsible-container {
    grid-gap: 32px;
    display: grid;
    grid-auto-rows: 0;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(6,1fr)
}

#story .story-detail .tabs .tab-content #community.module .community-section .collapsible-container.expanded {
    grid-auto-rows: auto auto
}

#story .story-detail .tabs .tab-content #community.module .community-section .collapsible-container .qa-card {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border: 1px solid var(--grey-3);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    justify-content: center;
    max-width: 346px;
    padding: 48px
}

#story .story-detail .tabs .tab-content #community.module .community-section .collapsible-container .qa-card>h3 {
    font-weight: var(--font-weight-normal)
}

#story .story-detail .tabs .tab-content #community.module .community-section .collapsible-container .qa-card>p {
    font-size: var(--font-size-heading-4);
    font-weight: var(--font-weight-normal);
    line-height: 24px;
    margin: 0;
    padding: 0;
    text-align: center
}

#story .story-detail .tabs .tab-content #community.module .community-section .collapsible-container .qa-card .btn.quiet {
    color: var(--primary);
    font-size: 16px;
    margin-top: 40px
}

#story .story-detail .tabs .tab-content #community.module .community-section .collapsible-container .qa-card:nth-child(n+7) {
    display: none
}

#story .story-detail .tabs .tab-content #community.module .community-section .collapsible-container .qa-card:nth-child(n+7).expanded {
    display: block
}

#story .story-detail .tabs .tab-content #community.module .community-section .btn.quiet {
    margin-top: 32px
}

#story .story-detail .tabs .tab-content #community.module .community-section .btn.quiet i,#story .story-detail .tabs .tab-content #community.module .community-section .btn.quiet>p {
    color: var(--primary);
    font-size: var(--font-size-heading-3);
    margin: 0 12px 0 0;
    padding: 0
}

#story .story-detail .tabs .tab-content #community.module .community-section .btn.quiet:hover {
    color: var(--primary)!important
}

#story .story-detail .tabs .tab-content #twitter.module {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    justify-content: space-between;
    padding: var(--gutter-sm) 0
}

#story .story-detail .tabs .tab-content #twitter.module .text {
    -webkit-box-flex: 25%;
    -ms-flex: 25%;
    flex: 25%;
    max-width: 352px;
    padding: 0;
    text-align: left
}

#story .story-detail .tabs .tab-content #twitter.module .text h3 {
    font-size: 36px;
    line-height: 60px;
    margin: 0 0 16px
}

#story .story-detail .tabs .tab-content #twitter.module .media {
    -webkit-box-flex: 75%;
    -ms-flex: 75%;
    flex: 75%;
    max-width: 646px
}

#story .story-detail .tabs .tab-content #twitter.module .social-icons {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 16px;
    margin-bottom: var(--gutter)
}

#story .story-detail .tabs .tab-content #seventeen-days-of-flutter.module {
    padding: 0
}

#story .story-detail .tabs .tab-content #seventeen-days-of-flutter.module .features.container {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content
}

#story .story-detail .tabs .tab-content #seventeen-days-of-flutter.module .stacked-feature .explore {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
    justify-content: space-between;
    margin-bottom: 120px;
    position: static
}

#story .story-detail .tabs .tab-content #seventeen-days-of-flutter.module .stacked-feature .explore .explore-content {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    -webkit-box-align: start;
    -ms-flex-align: start;
    -webkit-box-flex: 50%;
    align-items: flex-start;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex: 50%;
    flex: 50%;
    -ms-flex-direction: column;
    flex-direction: column;
    justify-content: flex-start;
    margin-top: 60px;
    padding: 0;
    text-align: left
}

#story .story-detail .tabs .tab-content #seventeen-days-of-flutter.module .stacked-feature .explore .explore-content>hgroup {
    margin-bottom: 32px
}

#story .story-detail .tabs .tab-content #seventeen-days-of-flutter.module .stacked-feature .explore .explore-content h1 {
    font-size: 46px;
    line-height: 55px
}

#story .story-detail .tabs .tab-content #seventeen-days-of-flutter.module .stacked-feature .explore .explore-content h4.eyebrow.faqs {
    color: var(--violet-4)
}

#story .story-detail .tabs .tab-content #seventeen-days-of-flutter.module .stacked-feature .explore .explore-content p {
    margin: 0 0 32px;
    padding: 0
}

#story .story-detail .tabs .tab-content #seventeen-days-of-flutter.module .stacked-feature .explore .explore-content .btn.primary {
    margin-top: 8px
}

#story .story-detail .tabs .tab-content #seventeen-days-of-flutter.module .stacked-feature hgroup {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    justify-content: center;
    padding: 0;
    text-align: left;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content
}

#story .story-detail .tabs .tab-content #seventeen-days-of-flutter.module .stacked-feature .feature {
    margin-top: 100px;
    padding: 0
}

#story .story-detail .tabs .tab-content #seventeen-days-of-flutter.module .stacked-feature .feature h3,#story .story-detail .tabs .tab-content #seventeen-days-of-flutter.module .stacked-feature .feature p {
    margin: 0;
    padding: 0;
    text-align: left
}

#story .story-detail .tabs .tab-content #seventeen-days-of-flutter.module .stacked-feature .feature p {
    margin-top: 24px
}

#story .story-detail .tabs .tab-content #seventeen-days-of-flutter.module .content-cards {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 24px;
    justify-content: space-between
}

#story .story-detail .tabs .tab-content #seventeen-days-of-flutter.module .content-cards div {
    background: #041e3c;
    background-image: linear-gradient(359.97deg,rgba(58,241,215,.53) .03%,rgba(4,30,60,0) 22.5%);
    border-radius: 20px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 320px;
    overflow: hidden;
    position: relative;
    width: 312px
}

#story .story-detail .tabs .tab-content #seventeen-days-of-flutter.module .content-cards div:hover {
    background-image: linear-gradient(359.97deg,rgba(58,241,215,.53) .03%,rgba(4,30,60,0) 66.5%);
    -webkit-box-shadow: 0 8px 24px rgba(0,0,0,.25);
    box-shadow: 0 8px 24px rgba(0,0,0,.25);
    cursor: pointer
}

#story .story-detail .tabs .tab-content #seventeen-days-of-flutter.module .content-cards div:hover>img {
    opacity: 0;
    -webkit-transform: scale(1.5);
    transform: scale(1.5)
}

#story .story-detail .tabs .tab-content #seventeen-days-of-flutter.module .content-cards div:hover>h3 {
    left: 50%;
    opacity: 1;
    top: 50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%)
}

#story .story-detail .tabs .tab-content #seventeen-days-of-flutter.module .content-cards div.today-card {
    border: 8px solid #f9e84c
}

#story .story-detail .tabs .tab-content #seventeen-days-of-flutter.module .content-cards div.locked-card {
    background-image: linear-gradient(359.97deg,#502c69 .03%,rgba(4,30,60,0) 66.5%);
    cursor: auto
}

#story .story-detail .tabs .tab-content #seventeen-days-of-flutter.module .content-cards div>img {
    border-radius: 20px;
    -o-object-fit: cover;
    object-fit: cover;
    -webkit-transition: opacity .2s ease-in-out,-webkit-transform .3s cubic-bezier(.47,1.64,.41,.8);
    transition: opacity .2s ease-in-out,-webkit-transform .3s cubic-bezier(.47,1.64,.41,.8);
    transition: transform .3s cubic-bezier(.47,1.64,.41,.8),opacity .2s ease-in-out;
    transition: transform .3s cubic-bezier(.47,1.64,.41,.8),opacity .2s ease-in-out,-webkit-transform .3s cubic-bezier(.47,1.64,.41,.8)
}

#story .story-detail .tabs .tab-content #seventeen-days-of-flutter.module .content-cards div>h3 {
    color: #fff;
    font-size: 40px;
    left: 50%;
    line-height: 60px;
    opacity: 0;
    position: absolute;
    top: 70%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    -webkit-transition: top .5s cubic-bezier(.47,1.64,.41,.8),opacity .2s ease-in-out;
    transition: top .5s cubic-bezier(.47,1.64,.41,.8),opacity .2s ease-in-out;
    width: 100%
}

#story .story-detail .tabs .tab-content #seventeen-days-of-flutter.module .content-cards div .day-badge {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background-color: #27f5dd;
    border-radius: 12px;
    bottom: 8px;
    color: #041e3c;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-size: 40px;
    font-weight: 700;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    justify-content: center;
    line-height: 34px;
    min-height: 80px;
    min-width: 80px;
    padding: 21px 14px;
    position: absolute;
    right: 8px;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content
}

#story .story-detail .tabs .tab-content #seventeen-days-of-flutter.module .content-cards div .day-badge img {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
    -webkit-transition: none;
    transition: none
}

#story .story-detail .tabs .tab-content #seventeen-days-of-flutter.module .content-cards div .day-badge.today {
    background: #f9e84c;
    border-radius: 12px 0;
    bottom: 0;
    right: 0
}

#story .story-detail .tabs .tab-content #seventeen-days-of-flutter.module .content-cards div .day-badge.locked {
    background: #041e3c;
    color: #fff
}

#story .story-detail .tabs .tab-content #seventeen-days-of-flutter.module .content-cards div .day-badge.locked:hover {
    cursor: auto
}

#story .story-detail .tabs .tab-content #seventeen-days-of-flutter.module .content-cards div .day-badge:hover {
    -webkit-box-shadow: none;
    box-shadow: none
}

#story .story-detail #guidelines.module,#story .story-detail #workshop-details.module {
    padding: 0
}

#story .story-detail #guidelines.module .container .guidelines-nav,#story .story-detail #guidelines.module .container .workshop-details-nav,#story .story-detail #workshop-details.module .container .guidelines-nav,#story .story-detail #workshop-details.module .container .workshop-details-nav {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 27px
}

#story .story-detail #guidelines.module .container .guidelines-nav .btn.quiet,#story .story-detail #guidelines.module .container .workshop-details-nav .btn.quiet,#story .story-detail #workshop-details.module .container .guidelines-nav .btn.quiet,#story .story-detail #workshop-details.module .container .workshop-details-nav .btn.quiet {
    color: var(--primary);
    font-size: var(--font-size-heading-5)
}

#story .story-detail #guidelines.module .container .guidelines-nav .btn.quiet>i,#story .story-detail #guidelines.module .container .workshop-details-nav .btn.quiet>i,#story .story-detail #workshop-details.module .container .guidelines-nav .btn.quiet>i,#story .story-detail #workshop-details.module .container .workshop-details-nav .btn.quiet>i {
    margin-right: 5px
}

#story .story-detail #guidelines.module .container .guidelines-header,#story .story-detail #guidelines.module .container .workshop-details-header,#story .story-detail #workshop-details.module .container .guidelines-header,#story .story-detail #workshop-details.module .container .workshop-details-header {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
    justify-content: space-between;
    margin-bottom: 40px;
    padding: 0 28px
}

#story .story-detail #guidelines.module .container .guidelines-header hgroup,#story .story-detail #guidelines.module .container .workshop-details-header hgroup,#story .story-detail #workshop-details.module .container .guidelines-header hgroup,#story .story-detail #workshop-details.module .container .workshop-details-header hgroup {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    margin-top: 60px;
    min-width: 300px;
    text-align: left;
    width: -webkit-min-content;
    width: -moz-min-content;
    width: min-content
}

#story .story-detail #guidelines.module .container .guidelines-header hgroup .eyebrow,#story .story-detail #guidelines.module .container .workshop-details-header hgroup .eyebrow,#story .story-detail #workshop-details.module .container .guidelines-header hgroup .eyebrow,#story .story-detail #workshop-details.module .container .workshop-details-header hgroup .eyebrow {
    color: var(--violet-4)
}

#story .story-detail #guidelines.module .container .guidelines-body .text-block,#story .story-detail #guidelines.module .container .workshop-details-body .text-block,#story .story-detail #workshop-details.module .container .guidelines-body .text-block,#story .story-detail #workshop-details.module .container .workshop-details-body .text-block {
    border-bottom: 1px solid var(--grey-3);
    margin-bottom: 48px;
    margin-top: 48px;
    padding-bottom: 48px
}

#story .story-detail #guidelines.module .container .guidelines-body .text-block:last-child,#story .story-detail #guidelines.module .container .workshop-details-body .text-block:last-child,#story .story-detail #workshop-details.module .container .guidelines-body .text-block:last-child,#story .story-detail #workshop-details.module .container .workshop-details-body .text-block:last-child {
    border-bottom: none;
    margin: 0;
    padding: 0
}

#story .story-detail #guidelines.module .container .guidelines-body .text-block h2,#story .story-detail #guidelines.module .container .workshop-details-body .text-block h2,#story .story-detail #workshop-details.module .container .guidelines-body .text-block h2,#story .story-detail #workshop-details.module .container .workshop-details-body .text-block h2 {
    font-size: 28px;
    font-weight: 700;
    line-height: 34px;
    margin-bottom: 32px;
    text-align: left
}

#story .story-detail #guidelines.module .container .guidelines-body .text-block p,#story .story-detail #guidelines.module .container .workshop-details-body .text-block p,#story .story-detail #workshop-details.module .container .guidelines-body .text-block p,#story .story-detail #workshop-details.module .container .workshop-details-body .text-block p {
    color: var(----grey-6);
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    margin-bottom: 0;
    padding: 0
}

#story .story-detail #guidelines.module .container .guidelines-body .text-block a,#story .story-detail #guidelines.module .container .workshop-details-body .text-block a,#story .story-detail #workshop-details.module .container .guidelines-body .text-block a,#story .story-detail #workshop-details.module .container .workshop-details-body .text-block a {
    color: #1389fd
}

#story .story-detail #guidelines.module .container .guidelines-body .text-block ul,#story .story-detail #guidelines.module .container .workshop-details-body .text-block ul,#story .story-detail #workshop-details.module .container .guidelines-body .text-block ul,#story .story-detail #workshop-details.module .container .workshop-details-body .text-block ul {
    font-size: var(--font-size-heading-5);
    margin: 0 0 0 12px;
    padding: 0
}

#story .story-detail #guidelines.module .container .guidelines-body .text-block.columns,#story .story-detail #guidelines.module .container .workshop-details-body .text-block.columns,#story .story-detail #workshop-details.module .container .guidelines-body .text-block.columns,#story .story-detail #workshop-details.module .container .workshop-details-body .text-block.columns {
    display: grid;
    grid-template-columns: 1fr 1fr
}

#story .story-detail #guidelines.module .container .guidelines-body .text-block.columns h2,#story .story-detail #guidelines.module .container .guidelines-body .text-block.columns ul,#story .story-detail #guidelines.module .container .workshop-details-body .text-block.columns h2,#story .story-detail #guidelines.module .container .workshop-details-body .text-block.columns ul,#story .story-detail #workshop-details.module .container .guidelines-body .text-block.columns h2,#story .story-detail #workshop-details.module .container .guidelines-body .text-block.columns ul,#story .story-detail #workshop-details.module .container .workshop-details-body .text-block.columns h2,#story .story-detail #workshop-details.module .container .workshop-details-body .text-block.columns ul {
    grid-column: span 2
}

#story .story-detail #workshop-details.module .container .workshop-details-body .text-block {
    max-width: 800px;
    text-align: left
}

#story .story-detail #workshop-details.module .container .workshop-details-body .text-block b {
    font-size: 16px
}

#story .story-detail #workshop-details.module .container .workshop-details-body .text-block a {
    text-decoration: underline
}

#story .story-detail #workshop-details.module .container .workshop-details-body .text-block {
    border: none
}

#story .story-detail #workshop-details.module .container .workshop-details-body .text-block:last-child {
    border-bottom: 1px solid rgba(0,0,0,.1);
    margin-bottom: 52px;
    padding-bottom: 48px
}

#story .story-detail #workshop-details.module .btn.quiet {
    padding: 0
}

@media (min-width: 1024px) {
    #story .story-detail .tabs .modal .modal-inner {
        width:532px
    }

    #story .story-detail .tabs .tabs-menu ul {
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center
    }

    #story .story-detail .tabs .tab-content {
        margin-top: 116px
    }

    #story .story-detail .tabs .tab-content #home.module .stacked-feature .overview {
        margin-bottom: 160px
    }

    #story .story-detail .tabs .tab-content #home.module .stacked-feature .overview .overview-content {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        -webkit-box-align: start;
        -ms-flex-align: start;
        -webkit-box-flex: 50%;
        align-items: flex-start;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex: 50%;
        flex: 50%;
        -ms-flex-direction: column;
        flex-direction: column;
        justify-content: space-between;
        margin-top: 0;
        padding: 0;
        text-align: left
    }

    #story .story-detail .tabs .tab-content #home.module .stacked-feature .overview .overview-content>hgroup {
        margin-bottom: 32px
    }

    #story .story-detail .tabs .tab-content #home.module .stacked-feature .overview .overview-content h1 {
        font-size: 64px;
        line-height: 72px
    }

    #story .story-detail .tabs .tab-content #home.module .stacked-feature .overview .overview-content h4.eyebrow.faqs {
        color: var(--violet-4)
    }

    #story .story-detail .tabs .tab-content #home.module .stacked-feature .overview .overview-content p {
        margin: 0;
        padding: 0
    }

    #story .story-detail .tabs .tab-content #home.module .stacked-feature .overview .overview-content .btn {
        margin-top: 32px
    }

    #story .story-detail .tabs .tab-content #home.module .stacked-feature .overview:nth-child(odd) {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row
    }

    #story .story-detail .tabs .tab-content #home.module .stacked-feature .overview:nth-child(odd) .overview-content {
        margin-left: 82px
    }

    #story .story-detail .tabs .tab-content #home.module .stacked-feature .overview:nth-child(2n) {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
        flex-direction: row-reverse
    }

    #story .story-detail .tabs .tab-content #home.module .stacked-feature .overview:nth-child(2n) .overview-content {
        margin-right: 82px
    }

    #story .story-detail .tabs .tab-content #home.module .stacked-feature .holo-booth {
        -webkit-box-align: start;
        -ms-flex-align: start;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: reverse;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: flex-start;
        align-items: center;
        -ms-flex-direction: row-reverse;
        flex-direction: row-reverse;
        gap: 82px
    }

    #story .story-detail .tabs .tab-content #home.module .stacked-feature .holo-booth .img-container {
        -webkit-box-flex: 50%;
        -ms-flex: 50%;
        flex: 50%;
        height: 375px
    }

    #story .story-detail .tabs .tab-content #home.module .stacked-feature .holo-booth .overview-content {
        -webkit-box-flex: 50%;
        -ms-flex: 50%;
        flex: 50%;
        margin-left: 0
    }

    #story .story-detail .tabs .tab-content #home.module .stacked-feature .flutter-forward-extended p {
        width: 515px
    }

    #story .story-detail .tabs .tab-content #home.module .stacked-feature .get-involved {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: reverse;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
        -ms-flex-direction: row-reverse;
        flex-direction: row-reverse;
        gap: 63px
    }

    #story .story-detail .tabs .tab-content #home.module .stacked-feature .get-involved .overview-content {
        -webkit-box-flex: 50%;
        -ms-flex: 50%;
        flex: 50%;
        margin-left: 0
    }

    #story .story-detail .tabs .tab-content #schedule.module .stacked-feature-banner {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        -ms-flex-direction: row;
        flex-direction: row;
        justify-content: space-between
    }

    #story .story-detail .tabs .tab-content #schedule.module .stacked-feature-banner>hgroup {
        margin: 0 24px 120px 0;
        max-width: 885px
    }

    #story .story-detail .tabs .tab-content #schedule.module .stacked-feature-banner>hgroup h1 {
        font-size: 64px;
        line-height: 72px
    }

    #story .story-detail .tabs .tab-content #schedule.module .feature .schedule-section {
        margin-top: 80px
    }

    #story .story-detail .tabs .tab-content #schedule.module .feature .schedule-section .btn.quiet.workshop-nav {
        margin-bottom: 0
    }

    #story .story-detail .tabs .tab-content #schedule.module .feature h1 {
        font-size: 60px;
        line-height: 60px
    }

    #story .story-detail .tabs .tab-content #schedule.module .feature h2 {
        font-size: 40px;
        font-weight: var(--font-weight-default);
        line-height: 56px;
        margin: 80px 0
    }

    #story .story-detail .tabs .tab-content #schedule.module .feature .schedule-container {
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
        margin-top: 80px
    }

    #story .story-detail .tabs .tab-content #schedule.module .feature .schedule-container .schedule-subsection {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
        -ms-flex-direction: row;
        flex-direction: row;
        justify-content: flex-start;
        margin-bottom: 80px
    }

    #story .story-detail .tabs .tab-content #schedule.module .feature .schedule-container .schedule-subsection>h3 {
        margin-right: 24px;
        min-width: 198px
    }

    #story .story-detail .tabs .tab-content #schedule.module .feature .schedule-container .schedule-subsection h3 {
        color: var(--grey-6);
        font-size: 28px;
        font-weight: var(--font-weight-default);
        line-height: 34px
    }

    #story .story-detail .tabs .tab-content #schedule.module .feature .schedule-container .schedule-subsection p {
        color: var(--grey-6);
        font-size: 20px;
        line-height: 30px
    }

    #story .story-detail .tabs .tab-content #schedule.module .feature .schedule-container .schedule-subsection h4 {
        color: var(--grey-6);
        font-size: 20px;
        font-weight: var(--font-weight-default);
        line-height: 24px
    }

    #story .story-detail .tabs .tab-content #schedule.module .feature .schedule-container .schedule-subsection ul {
        margin-top: 16px
    }

    #story .story-detail .tabs .tab-content #schedule.module .feature .schedule-container .schedule-subsection ul>p {
        color: var(--grey-6);
        font-size: 16px;
        font-weight: var(--font-weight-bold);
        line-height: 24px;
        margin: 0 0 4px
    }

    #story .story-detail .tabs .tab-content #on-demand.module .stacked-feature .overview {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        margin-bottom: 160px
    }

    #story .story-detail .tabs .tab-content #on-demand.module .stacked-feature .overview .overview-content {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        -webkit-box-align: start;
        -ms-flex-align: start;
        -webkit-box-flex: 50%;
        align-items: flex-start;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex: 50%;
        flex: 50%;
        -ms-flex-direction: column;
        flex-direction: column;
        justify-content: flex-start;
        margin-top: 0;
        padding: 0;
        text-align: left
    }

    #story .story-detail .tabs .tab-content #on-demand.module .stacked-feature .overview .overview-content>hgroup {
        margin-bottom: 32px
    }

    #story .story-detail .tabs .tab-content #on-demand.module .stacked-feature .overview .overview-content h1 {
        font-size: 64px;
        line-height: 72px
    }

    #story .story-detail .tabs .tab-content #on-demand.module .stacked-feature .overview .overview-content h4.eyebrow.faqs {
        color: var(--violet-4)
    }

    #story .story-detail .tabs .tab-content #on-demand.module .stacked-feature .overview .overview-content p {
        font-size: 24px;
        margin: 0 0 32px;
        padding: 0
    }

    #story .story-detail .tabs .tab-content #on-demand.module .stacked-feature .overview .overview-content .btn.primary {
        font-size: 16px;
        height: 50px
    }

    #story .story-detail .tabs .tab-content #on-demand.module .stacked-feature .overview .embed-container {
        -webkit-box-flex: 50%;
        -ms-flex: 50%;
        flex: 50%
    }

    #story .story-detail .tabs .tab-content #on-demand.module .stacked-feature .feature {
        margin-top: 160px
    }

    #story .story-detail .tabs .tab-content #on-demand.module .stacked-feature .feature .on-demand-section-container {
        margin-top: 112px
    }

    #story .story-detail .tabs .tab-content #on-demand.module .stacked-feature .feature .on-demand-section-container .on-demand-grid {
        grid-gap: 24px;
        display: grid;
        grid-template-columns: repeat(2,1fr);
        margin-top: 56px
    }

    #story .story-detail .tabs .tab-content #on-demand.module .stacked-feature .feature .on-demand-section-container>h3 {
        font-size: 60px;
        font-weight: 700;
        line-height: 60px
    }

    #story .story-detail .tabs .tab-content #community.module .community-header {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -ms-flex-direction: row;
        flex-direction: row
    }

    #story .story-detail .tabs .tab-content #community.module hgroup {
        margin-top: 0;
        width: 400px
    }

    #story .story-detail .tabs .tab-content #community.module .community-section .collapsible-container {
        grid-template-columns: repeat(3,1fr);
        grid-template-rows: repeat(2,1fr)
    }

    #story .story-detail .tabs .tab-content #twitter.module {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        padding: 0 50px
    }

    #story .story-detail .tabs .tab-content #twitter.module .text {
        margin-right: 72px;
        max-width: 294px;
        padding-right: 24px
    }

    #story .story-detail .tabs .tab-content #twitter.module .text h3 {
        font-size: 60px;
        line-height: 60px;
        margin: 0 0 32px
    }

    #story .story-detail .tabs .tab-content #seventeen-days-of-flutter.module .features .stacked-feature .explore {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row
    }

    #story .story-detail .tabs .tab-content #seventeen-days-of-flutter.module .features .stacked-feature .explore .explore-content {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        -webkit-box-align: start;
        -ms-flex-align: start;
        -webkit-box-flex: 60%;
        align-items: flex-start;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex: 60%;
        flex: 60%;
        -ms-flex-direction: column;
        flex-direction: column;
        justify-content: flex-start;
        margin-right: 32px;
        margin-top: 0;
        padding: 0;
        text-align: left
    }

    #story .story-detail .tabs .tab-content #seventeen-days-of-flutter.module .features .stacked-feature .explore .explore-content>hgroup {
        margin-bottom: 32px
    }

    #story .story-detail .tabs .tab-content #seventeen-days-of-flutter.module .features .stacked-feature .explore .explore-content h1 {
        font-size: 64px;
        line-height: 72px
    }

    #story .story-detail .tabs .tab-content #seventeen-days-of-flutter.module .features .stacked-feature .explore .explore-content h4.eyebrow.faqs {
        color: var(--violet-4)
    }

    #story .story-detail .tabs .tab-content #seventeen-days-of-flutter.module .features .stacked-feature .explore .explore-content p {
        margin: 0 0 32px;
        padding: 0
    }

    #story .story-detail .tabs .tab-content #seventeen-days-of-flutter.module .features .stacked-feature .explore .explore-content .btn.primary {
        margin-top: 8px
    }

    #story .story-detail .tabs .tab-content #seventeen-days-of-flutter.module .features .stacked-feature .explore img {
        -webkit-box-flex: 40%;
        -ms-flex: 40%;
        flex: 40%
    }

    #story .story-detail .tabs .tab-content #seventeen-days-of-flutter.module .features .content-cards {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        gap: 48px
    }

    #story .story-detail .tabs .tab-content #seventeen-days-of-flutter.module .features .content-cards div {
        width: 338.65px
    }

    #story .story-detail .tabs .tab-content #seventeen-days-of-flutter.module .features .content-cards div img {
        border-radius: 20px 0 0 0;
        width: 100%
    }

    #story .story-detail .tabs .tab-content #seventeen-days-of-flutter.module .features .content-cards div>h3 {
        font-size: 44px
    }

    #story .story-detail .tabs .tab-content #seventeen-days-of-flutter.module .features .content-cards div .day-badge {
        width: -webkit-fit-content;
        width: -moz-fit-content;
        width: fit-content
    }

    #story .story-detail .tabs .tab-content #seventeen-days-of-flutter.module .features .content-cards div .day-badge.locked {
        background: #041e3c;
        min-width: 80px;
        width: -webkit-fit-content;
        width: -moz-fit-content;
        width: fit-content
    }

    #story .story-detail .tabs .tab-content #seventeen-days-of-flutter.module .features .content-cards div:nth-child(5n-3),#story .story-detail .tabs .tab-content #seventeen-days-of-flutter.module .features .content-cards div:nth-child(5n-4) {
        width: 532px
    }

    #story .story-detail #guidelines.module .container .guidelines-header,#story .story-detail #workshop-details.module .container .guidelines-header {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -ms-flex-direction: row;
        flex-direction: row;
        margin-bottom: 60px
    }

    #story .story-detail #guidelines.module .container .guidelines-header hgroup,#story .story-detail #workshop-details.module .container .guidelines-header hgroup {
        margin-top: 0;
        width: 400px
    }

    #story .story-detail #guidelines.module .container .guidelines-body,#story .story-detail #guidelines.module .container .workshop-details-body,#story .story-detail #workshop-details.module .container .guidelines-body,#story .story-detail #workshop-details.module .container .workshop-details-body {
        margin: 0 156px
    }

    #story .story-detail #guidelines.module .container .guidelines-body .text-block ul,#story .story-detail #guidelines.module .container .workshop-details-body .text-block ul,#story .story-detail #workshop-details.module .container .guidelines-body .text-block ul,#story .story-detail #workshop-details.module .container .workshop-details-body .text-block ul {
        display: grid;
        grid-auto-columns: 50%;
        grid-auto-flow: column;
        margin-left: 0
    }

    #story .story-detail #guidelines.module .container .guidelines-body .text-block ul li,#story .story-detail #guidelines.module .container .workshop-details-body .text-block ul li,#story .story-detail #workshop-details.module .container .guidelines-body .text-block ul li,#story .story-detail #workshop-details.module .container .workshop-details-body .text-block ul li {
        margin-left: 20px;
        text-align: left
    }

    #story .story-detail #guidelines.module .container .guidelines-body .text-block ul.five-rows,#story .story-detail #guidelines.module .container .workshop-details-body .text-block ul.five-rows,#story .story-detail #workshop-details.module .container .guidelines-body .text-block ul.five-rows,#story .story-detail #workshop-details.module .container .workshop-details-body .text-block ul.five-rows {
        grid-template-rows: auto repeat(4,1fr)
    }

    #story .story-detail #guidelines.module .container .guidelines-body .text-block ul.eight-rows,#story .story-detail #guidelines.module .container .workshop-details-body .text-block ul.eight-rows,#story .story-detail #workshop-details.module .container .guidelines-body .text-block ul.eight-rows,#story .story-detail #workshop-details.module .container .workshop-details-body .text-block ul.eight-rows {
        grid-template-rows: repeat(8,1fr)
    }

    #story .story-detail #guidelines.module .container .workshop-details-body,#story .story-detail #workshop-details.module .container .workshop-details-body {
        margin: 0 190px
    }
}

body.games section.hero {
    background-image: linear-gradient(35deg,#f3fcff 10%,#93faee 80%);
    padding-bottom: var(--gutter)!important;
    padding-top: var(--gutter)!important
}

@media (min-width: 1024px) {
    body.games section.hero .container>h2 {
        margin:48px auto
    }

    body.games section.hero .mantle {
        gap: 96px;
        grid-template-columns: 1fr 1fr
    }

    body.games section.hero .mantle .text {
        padding-left: 0;
        text-align: center
    }

    body.games section.hero .mantle .text h1 {
        font-size: 48px;
        max-width: 450px
    }

    body.games section.hero .mantle .media {
        max-width: 435px
    }

    body.games section.hero h2 {
        max-width: unset
    }
}

body.games #feature-columns.module {
    padding: 48px 0
}

body.games #feature-columns .feature-columns>div {
    border: none
}

@media (min-width: 1024px) {
    body.games #feature-columns .feature-columns p {
        min-height:141px
    }
}

body.games .feature.tic-tac {
    gap: var(--gutter)
}

body.games .feature.tic-tac .text {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1
}

body.games .feature.tic-tac .media {
    -webkit-box-ordinal-group: 3;
    -ms-flex-order: 2;
    order: 2
}

@media (min-width: 1024px) {
    body.games .feature.tic-tac {
        gap:0;
        grid-template-columns: 1fr 45%
    }

    body.games .feature.tic-tac .text {
        -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
        order: 1;
        padding-right: var(--gutter)
    }

    body.games .feature.tic-tac .media video {
        -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
        order: 2;
        width: 100%
    }
}

body.games #resources.module {
    padding: 8px 0
}

body.games #resources {
    background-image: linear-gradient(145deg,#0654b2 20%,#28f5de 80%)
}

body.games #resources .feature-header {
    margin-bottom: 32px
}

body.games #resources .feature-header hgroup {
    max-width: unset
}

body.games #resources .feature-header hgroup h2 {
    font-size: 48px;
    max-width: unset
}

body.games #resources .feature-grid-features>div {
    padding: var(--spacer-md)
}

@media (min-width: 1024px) {
    body.games #resources .feature-grid-features>div h3 {
        text-wrap:nowrap
    }
}

body.games #featured-games {
    background-color: #fff
}

body.games #featured-games .stacked-header hgroup {
    padding-left: 0!important
}

body.games #featured-games .stacked-header hgroup h2 {
    max-width: 100%!important
}

body.games #featured-games .carousel .story-item {
    max-width: 225px;
    min-width: 225px
}

body.games #featured-games .carousel .story-item img {
    margin-bottom: 32px
}

body.games #level-up {
    padding-top: var(--gutter-lg)
}

body.games #level-up p.t-c {
    color: var(--grey-5);
    font-size: .95rem
}

body.games #level-up .stacked-header {
    margin-bottom: var(--gutter)
}

body.games #level-up .stacked-header hgroup {
    padding-left: 0
}

body.games #level-up .stacked-header hgroup p {
    margin-top: var(--gutter-sm)
}

body.games #level-up .feature-compare>div:first-child .media {
    background-image: linear-gradient(35deg,#e8f9ff 40%,#faf9c5 80%)
}

body.games #level-up .feature-compare>div:first-child .media img {
    height: 74px
}

body.games #level-up .feature-compare>div:nth-child(2) .media {
    background-image: linear-gradient(35deg,#d0f2ff 40%,#e8f9ff 80%)
}

body.games #level-up .feature-compare>div:nth-child(2) .media img {
    height: 74px
}

body.games #notification.module {
    padding-bottom: 0
}

body.games .carousel .carousel-progress {
    margin-top: 0
}

body.games .carousel .carousel-progress .carousel-nav {
    padding: 0
}

body.home section.hero {
    background-color: #fb7762;
    background-image: radial-gradient(ellipse at bottom,#f2b762 5%,transparent 60%),linear-gradient(136deg,transparent,#f2b762 290%),linear-gradient(115deg,#f2b762,transparent 40%),linear-gradient(180deg,transparent 0,#eec742 70%),radial-gradient(ellipse at -70% -180%,transparent 80%,#fb7762 0),radial-gradient(ellipse at bottom,#eec742 40%,transparent 80%),radial-gradient(ellipse at 5% 340%,transparent 80%,#fd5f4f 0);
    overflow: hidden;
    padding-bottom: var(--gutter-lg);
    padding-top: calc(var(--ui-header-height) + 80px)
}

body.home section.hero .container {
    text-align: center
}

body.home section.hero {
    --anim-dur: 750ms;
    --anim-delay-1: 400ms;
    --anim-delay-2: 100ms;
    --anim-offset: 400px
}

@keyframes slideup {
    0% {
        opacity: 0
    }

    to {
        opacity: 1;
        top: 0
    }
}

body.home section.hero h1 {
    -webkit-animation-delay: var(--anim-delay-2);
    animation-delay: var(--anim-delay-2);
    -webkit-animation-duration: var(--anim-dur);
    animation-duration: var(--anim-dur);
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-name: slideup;
    animation-name: slideup;
    -webkit-animation-timing-function: var(--ui-anim-func);
    animation-timing-function: var(--ui-anim-func);
    color: #fff;
    margin-bottom: 80px;
    opacity: 0;
    position: relative;
    top: 110px
}

body.home section.hero h2 {
    color: #fff;
    font-size: var(--font-size-heading-2);
    font-weight: 400;
    margin: 0 auto 40px;
    max-width: 880px
}

body.home section.hero a.btn {
    background-color: #fff!important;
    border: 1px solid transparent;
    color: var(--blue-6)!important
}

body.home section.hero .gallery {
    --center-pad: 18px;
    --center-border-radius: 20px;
    --center-card-width: 250px;
    --center-card-height: 519px;
    --center-width: calc(var(--center-card-width) + var(--center-pad)*2);
    --card-inner-offset: var(--font-size-heading-4);
    --card-vert-offset: 110px;
    --card-ssm-height: 296px;
    --card-sm-height: 305px;
    --card-adjustment: 34px;
    --card-sm-portrait-width: 201px;
    height: 842px;
    position: relative
}

@media (min-width: 1024px) {
    body.home section.hero .gallery {
        --center-pad:32px;
        --center-border-radius: 32px;
        --center-card-width: 368px;
        --center-card-height: 764px;
        margin-bottom: 80px
    }
}

@-webkit-keyframes slideup-outer {
    0% {
        opacity: 0
    }

    to {
        opacity: 1;
        top: var(--card-vert-offset)
    }
}

@keyframes slideup-outer {
    0% {
        opacity: 0
    }

    to {
        opacity: 1;
        top: var(--card-vert-offset)
    }
}

@-webkit-keyframes slideup-center {
    0% {
        opacity: 0
    }

    to {
        opacity: 1;
        top: 0
    }
}

@keyframes slideup-center {
    0% {
        opacity: 0
    }

    to {
        opacity: 1;
        top: 0
    }
}

body.home section.hero .gallery .inner-fixed {
    display: grid;
    grid-template-columns: 1fr var(--center-width) 1fr;
    height: 100%;
    left: -50%;
    margin: auto;
    position: absolute;
    right: -50%
}

body.home section.hero .gallery .col {
    opacity: 0;
    position: relative
}

body.home section.hero .gallery .col-outer {
    -webkit-animation-delay: var(--anim-delay-1);
    animation-delay: var(--anim-delay-1);
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-name: slideup-outer;
    animation-name: slideup-outer;
    -webkit-animation-timing-function: var(--ui-anim-func);
    animation-timing-function: var(--ui-anim-func)
}

body.home section.hero .gallery .col-center,body.home section.hero .gallery .col-outer {
    -webkit-animation-duration: var(--anim-dur);
    animation-duration: var(--anim-dur);
    top: var(--anim-offset)
}

body.home section.hero .gallery .col-center {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-animation-delay: var(--anim-delay-2);
    animation-delay: var(--anim-delay-2);
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-name: slideup-center;
    animation-name: slideup-center;
    -webkit-animation-timing-function: var(--ui-anim-func);
    animation-timing-function: var(--ui-anim-func);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: center;
    padding: 0 var(--center-pad)
}

body.home section.hero .gallery .col-center .card-a {
    border-radius: var(--center-border-radius);
    -webkit-box-shadow: 0 16px 48px rgba(0,0,0,.35);
    box-shadow: 0 16px 48px rgba(0,0,0,.35);
    height: var(--center-card-height);
    position: relative;
    width: 100%
}

body.home section.hero .gallery .card {
    background-color: #fff;
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: var(--ui-border-radius-sm);
    -webkit-box-shadow: var(--ui-drop-shadow);
    box-shadow: var(--ui-drop-shadow);
    height: var(--card-sm-height);
    position: absolute;
    width: var(--card-sm-portrait-width)
}

body.home section.hero .gallery .col-left .card-a {
    height: var(--card-ssm-height);
    right: 0;
    top: 0;
    width: 545px;
    background-size: contain;
}

body.home section.hero .gallery .col-left .card-e {
    height: 320px;
    right: 0;
    top: 0;
}

body.home section.hero .gallery .col-left .card-b {
    right: 0;
    top: calc(var(--card-sm-height) + var(--card-inner-offset))
}

body.home section.hero .gallery .col-left .card-c {
    right: calc(201px + var(--card-inner-offset));
    top: calc(var(--card-vert-offset) + var(--card-sm-height) + var(--card-inner-offset))
}

body.home section.hero .gallery .col-left .card-e {
    right: calc(201px + var(--card-inner-offset));
    top: calc(32px + var(--card-sm-height) + var(--card-inner-offset))
}

body.home section.hero .gallery .col-right .card-a {
    left: 0;
    top: 0;
}

body.home section.hero .gallery .col-right .card-b {
    height: var(--card-ssm-height);
    left: calc(var(--card-sm-portrait-width) + var(--card-inner-offset));
    top: var(--card-vert-offset);
    width: 545px;
}

body.home section.hero .gallery .col-right .card-c {
    left: calc(var(--card-sm-portrait-width) + var(--card-inner-offset));
    top: calc(var(--card-vert-offset) + var(--card-sm-height) + var(--card-inner-offset))
}

body.home section.hero .gallery .col-right .card-d {
    left: 0;
    top: calc(var(--card-sm-height) + var(--card-inner-offset));
    background-size: 100% 100%;
}

body.home #notification {
    padding-bottom: 0!important;
    padding-top: var(--gutter-md)
}

body.home #tabs {
    padding-bottom: 0
}

body.home #tabs .tabs-header {
    margin-bottom: 50px
}

body.home #tabs .tab-content .media {
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: center;
    position: relative;
    top: -20px
}

body.home #tabs .tab-content .media video {
    max-width: none!important;
    width: 125%
}

body.home #tabs .tab-content .text {
    position: relative;
    top: -30px;
    z-index: 2
}

@media (min-width: 1024px) {
    body.home #tabs .tabs-header {
        margin-bottom:30px
    }

    body.home #tabs .tab-content .media,body.home #tabs .tab-content .text {
        top: 0
    }
}

body.home #community {
    overflow: hidden;
    padding-top: var(--gutter)
}

body.home #community .container {
    padding-top: var(--gutter);
    text-align: center
}

@media (min-width: 1024px) {}

body.home #community .logo-garden {
    --garden-height: 535px;
    --outer-pad: 18px;
    --outer-width: 100px;
    --centerpiece-pad: 30px;
    --centerpiece-width: 220px
}

@media (min-width: 1024px) {
    body.home #community .logo-garden {
        --garden-height:700px;
        --outer-pad: 35px;
        --outer-width: 163px;
        --centerpiece-pad: 35px;
        --centerpiece-width: 356px
    }
}

body.home #community .logo-garden {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: var(--garden-height);
    justify-content: center
}

body.home #community .logo-garden .inner-fixed {
    display: grid;
    gap: var(--gutter-sm);
    grid-template-columns: 1fr 1fr 1fr var(--centerpiece-width) 1fr 1fr 1fr;
    height: 100%
}

body.home #community .logo-garden .logo-col {
    position: relative
}

body.home #community .logo-garden .logo-col:first-child,body.home #community .logo-garden .logo-col:nth-child(7) {
    top: 24px
}

body.home #community .logo-garden .logo-col:nth-child(2),body.home #community .logo-garden .logo-col:nth-child(6) {
    top: -48px
}

body.home #community .logo-garden .logo-col:nth-child(3),body.home #community .logo-garden .logo-col:nth-child(5) {
    top: 60px
}

body.home #community .logo-garden .logo-col>div {
    background-color: var(--grey-1);
    border-radius: var(--ui-border-radius-sm);
    -webkit-box-shadow: var(--ui-drop-shadow-sm);
    box-shadow: var(--ui-drop-shadow-sm);
    display: grid;
    height: var(--outer-width);
    margin-bottom: 24px;
    padding: var(--outer-pad);
    place-items: center;
    width: var(--outer-width)
}

body.home #community .logo-garden .logo-col.logo-centerpiece>div {
    height: var(--centerpiece-width);
    padding: var(--centerpiece-pad);
    width: var(--centerpiece-width)
}

body.home #community .text {
    position: relative;
    text-align: center;
}

body.home #community .text hgroup {
    margin: 0 auto 40px;
    max-width: 780px
}

body.home #community .text h2 {
    font-size: var(--font-size-heading-11);
    line-height: 1
}

body.home #community .text p {
    font-size: var(--font-size-heading-4);
    margin: 0 auto 30px;
    max-width: 500px
}

body.home #newsletter {
    margin-top: var(--gutter-lg)
}

body.learn section.hero {
    background-image: var(--grad-violet-blue-35)
}

body.learn .learn-tabs {
    margin-bottom: var(--gutter-md);
    padding-top: var(--gutter)
}

body.learn .learn-tabs .tabs {
    border-bottom: 1px solid var(--grey-4);
    padding-bottom: var(--gutter-lg)
}

body.learn .learn-stage-grid {
    padding: 0
}

body.learn .learn-stage-grid .feature-grid-features>div {
    padding: var(--gutter-sm)
}

body.learn .learn-stage-grid .feature-grid-features>div:hover {
    -webkit-box-shadow: none!important;
    box-shadow: none!important
}

body.learn .learn-stage-grid .feature-grid-features>div i {
    background-color: #e7f8ff;
    background-repeat: no-repeat;
    border-radius: 100%;
    display: inline-block;
    height: 68px;
    margin-bottom: var(--gutter-sm);
    width: 68px
}

body.learn .learn-stage-grid .feature-grid-features>div h4 {
    border-bottom: 1px solid rgba(0,0,0,.1);
    font-size: var(--font-size-heading-3);
    margin-bottom: var(--spacer-md);
    min-height: 100px;
    padding-bottom: var(--spacer-md)
}

body.learn .learn-stage-grid .feature-grid-features>div ul {
    color: var(--grey-6);
    font-size: var(--font-size-heading-4);
    line-height: 1.4;
    list-style: none;
    padding-left: var(--gutter-sm);
    text-align: left
}

body.learn .learn-stage-grid .feature-grid-features>div ul li {
    margin-bottom: 14px;
    position: relative
}

body.learn .learn-stage-grid .feature-grid-features>div ul li a {
    color: var(--primary)
}

body.learn .learn-stage-grid .feature-grid-features>div ul li a:hover {
    text-decoration: underline
}

body.learn .learn-stage-grid .feature-grid-features>div ul li:not(.nested):before {
    color: var(--grey-6);
    content: "\2022";
    font-size: 1.2rem;
    left: -1.2rem;
    position: absolute;
    top: -2px
}

body.learn #transition-docs {
    background-image: linear-gradient(35deg,#f5fbfe 50%,#fcfce2 90%)
}

body.learn #cookbook {
    background-image: var(--grad-violet-blue-35)
}

body.learn #cookbook .features {
    margin-bottom: 0
}

body.learn #start-learning,body.learn .carousel-section {
    padding-top: var(--gutter-lg)
}

body.monetization section.hero {
    background-image: linear-gradient(35deg,#f3fcff 10%,#93faee 80%)
}

body.monetization #resources,body.monetization #resources-1 {
    background-image: linear-gradient(145deg,#0654b2 20%,#28f5de 80%)
}

body.monetization #resources-2 {
    background-image: linear-gradient(145deg,#0654b2 30%,#a57df7 90%)
}

body.multiplatform.mobile section.hero {
    background-image: linear-gradient(35deg,#fcfce2 30%,#dcf5fe 60%)
}

body.multiplatform.mobile #feature-grid {
    background-image: linear-gradient(145deg,#0569d8 30%,#833ff3 90%)
}

body.multiplatform.embedded section.hero {
    background-image: linear-gradient(35deg,#dcf5ff 10%,#f3fcff 60%)
}

body.multiplatform.embedded #feature-grid {
    background-image: linear-gradient(35deg,#0a71c8 30%,#14bafe 90%)
}

body.multiplatform.desktop section.hero {
    background-image: linear-gradient(35deg,#d9fef7 10%,#f3fcff 60%)
}

body.multiplatform.desktop section.hero .container>h2 {
    max-width: 800px
}

body.multiplatform.desktop #feature-grid {
    background-image: linear-gradient(145deg,#0654b2 30%,#14b8fd 90%)
}

body.multiplatform.web section.hero {
    background-image: linear-gradient(35deg,#e6e4fd 10%,#f3fcff 60%)
}

body.multiplatform.web #feature-grid {
    background-image: linear-gradient(145deg,#037efe 30%,#1cdac6 90%)
}

body.multiplatform #notification.module {
    padding-bottom: 0
}

body.multiplatform.ios section .container {
    padding: 0 58px
}

body.multiplatform.ios section .divider {
    background: var(--grey-3);
    height: 1px;
    margin-top: 56px;
    width: 100%
}

body.multiplatform.ios section .body {
    color: var(--grey-6);
    font-family: var(--font-roboto);
    font-size: 20px;
    font-weight: 400;
    line-height: 30px;
    margin-bottom: 40px
}

body.multiplatform.ios section.hero {
    background: linear-gradient(225deg,rgba(231,248,255,.5),rgba(184,234,254,.5))
}

@media (min-width: 1024px) {
    body.multiplatform.ios section.hero .container .mantle .text {
        width:553px
    }
}

body.multiplatform.ios section.hero .container .mantle .text h1 {
    font-size: 48px
}

body.multiplatform.ios section.hero .container .mantle .text h3 {
    margin-bottom: 32px;
    margin-top: 8px
}

body.multiplatform.ios section.ios-tabs {
    padding-top: var(--spacer)
}

@media (min-width: 1024px) {
    body.multiplatform.ios section.ios-tabs .tabs .tabs-header .tabs-menu {
        width:unset!important
    }
}

body.multiplatform.ios section.ios-tabs .tabs .tabs-header .tabs-menu {
    width: 300px
}

@media (min-width: 1024px) {
    body.multiplatform.ios section.ios-tabs .tabs .tabs-header .tabs-menu li {
        min-width:unset!important
    }
}

body.multiplatform.ios section.ios-tabs .tabs .tabs-header .tabs-menu li {
    min-width: 140px
}

body.multiplatform.ios section.ios-tabs .tabs .tabs-content .tab-content {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
}

@media (min-width: 1024px) {
    body.multiplatform.ios section.ios-tabs .tabs .tabs-content .tab-content {
        -webkit-box-orient:horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row
    }
}

body.multiplatform.ios section.ios-tabs .tabs .tabs-content .tab-content.active {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 24px;
    justify-content: center
}

body.multiplatform.ios section.ios-tabs .tabs .tabs-content .tab-content .btn {
    font-size: 16px!important;
    height: 48px
}

body.multiplatform.ios section.ios-tabs .tabs .tabs-content .tab-content .text {
    max-width: 500px;
    padding: 0
}

body.multiplatform.ios section.ios-tabs .tabs .tabs-content .tab-content img {
    height: 218px;
    width: auto
}

@media (min-width: 1024px) {
    body.multiplatform.ios section.ios-tabs .tabs .tabs-content .tab-content img {
        float:right
    }
}

body.multiplatform.ios section.ios-tabs .tabs .tabs-content .tab-content .mono {
    font-family: var(--font-roboto-mono)!important
}

body.multiplatform.ios section.ios-tabs .tabs .tabs-content .tab-content h3>a {
    color: var(--blue-6);
    text-decoration: underline
}

body.multiplatform.ios section.ios-tabs .tabs .tabs-title {
    margin: 48px 0;
    text-align: center
}

body.multiplatform.ios section.ios-tabs .tabs .title {
    color: #13c2ad;
    font-size: 24px;
    font-weight: 700;
    line-height: 32px;
    margin-bottom: 8px;
    text-align: left
}

body.multiplatform.ios section.ios-tabs .tabs .second-tab {
    color: var(--violet-2)
}

body.multiplatform.ios section.ios-tabs .tabs .third-tab {
    color: var(--coral)
}

body.multiplatform.ios section.ios-tabs .tabs h2 {
    font-size: 32px
}

@media (min-width: 1024px) {
    body.multiplatform.ios section.ios-tabs .tabs li {
        font-size:20px;
        height: 48px;
        max-width: 330px;
        width: -webkit-max-content;
        width: -moz-max-content;
        width: max-content
    }
}

body.multiplatform.ios section.ios-tabs .tabs li.active {
    background-color: var(--blue-5)
}

body.multiplatform.ios #list h2 {
    font-size: 48px;
    line-height: 72px;
    margin-bottom: 16px
}

body.multiplatform.ios #list h3 {
    color: var(--grey-6);
    font-size: 24px;
    line-height: 27px
}

body.multiplatform.ios #list p {
    color: var(--grey-6);
    font-size: 20px;
    line-height: 30px
}

body.multiplatform.ios #list .columns {
    display: grid;
    grid-template-columns: 1fr
}

@media (min-width: 1024px) {
    body.multiplatform.ios #list .columns {
        grid-template-columns:1fr 1fr
    }

    body.multiplatform.ios #list .columns ul {
        -webkit-column-gap: 48px;
        -moz-column-gap: 48px;
        column-gap: 48px;
        display: grid;
        grid-auto-flow: column;
        grid-column: span 2;
        grid-template-rows: repeat(3,1fr)
    }
}

body.multiplatform.ios #list .columns ul {
    margin-top: 32px
}

body.multiplatform.ios #list .columns ul li::marker {
    color: var(--blue-6);
    content: "\2022";
    display: inline-block;
    width: 24px
}

body.multiplatform.ios #list .columns ul li {
    color: var(--grey-6);
    font-size: 28px;
    margin-bottom: 24px;
    padding-left: 24px
}

body.multiplatform.ios #list .columns ul li span {
    font-size: 20px
}

body.multiplatform.ios #list .columns ul a {
    color: var(--blue-6)
}

body.multiplatform.ios #playlist h2 {
    font-size: 48px
}

body.multiplatform.ios #feature-grid {
    background-image: linear-gradient(145deg,#0569d8 30%,#833ff3 90%);
    padding: 32px
}

body.multiplatform.ios #feature-grid h2 {
    font-size: 48px
}

body.multiplatform.ios #feature-grid .feature-header {
    margin-bottom: 32px
}

body.multiplatform.ios #feature-grid .feature-grid-features>div {
    padding: 32px
}

body.multiplatform.ios #feature-grid .feature-grid-features .feature-with-link {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 32px
}

body.news section.hero {
    background-image: linear-gradient(35deg,#f3fcff 10%,#93faee 80%);
    padding-bottom: var(--gutter)!important;
    padding-top: var(--gutter)!important
}

@media (min-width: 1024px) {
    body.news section.hero .container>h2 {
        margin-bottom:var(--spacer)!important;
        margin-top: var(--spacer)!important;
        max-width: 600px!important
    }

    body.news section.hero .container .mantle {
        gap: 0;
        grid-template-columns: 1fr 55%
    }

    body.news section.hero .container .mantle .text {
        padding-left: 0
    }

    body.news section.hero .container .mantle .text h1 {
        font-size: 64px;
        font-weight: 700;
        line-height: 72px;
        max-width: 100%
    }

    body.news section.hero .container .mantle .text h2 {
        font-size: 34px;
        font-weight: 400;
        line-height: 40px
    }
}

body.news .divider {
    background: var(--grey-3);
    border-radius: 2px;
    height: 4px;
    margin: 16px auto;
    width: 1340px
}

body.news #feature-columns .container {
    margin: 0 auto
}

body.news #feature-columns .feature-columns .card {
    border: none;
    padding: 0;
    width: 100%
}

@media (min-width: 1024px) {
    body.news #feature-columns .feature-columns p {
        min-height:141px
    }
}

body.news #flutter-news-toolkit .container {
    margin: 0 auto
}

body.news #flutter-news-toolkit .media img {
    width: 312px
}

body.news #flutter-news-toolkit h3 {
    font-size: 44px
}

@media (min-width: 1024px) {
    body.news #flutter-news-toolkit .feature.toolkit {
        gap:137px;
        grid-template-columns: 1fr 1fr
    }

    body.news #flutter-news-toolkit .feature.toolkit h4 {
        font-size: 24px
    }

    body.news #flutter-news-toolkit .feature.toolkit h3 {
        font-size: 64px
    }

    body.news #flutter-news-toolkit .feature.toolkit p {
        font-size: 24px
    }

    body.news #flutter-news-toolkit .feature.toolkit .text {
        -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
        order: 2;
        padding: 0
    }

    body.news #flutter-news-toolkit .feature.toolkit .media img {
        -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
        height: 575px;
        order: 1;
        width: 544px
    }
}

body.news #resources {
    background-image: linear-gradient(145deg,#0654b2 20%,#28f5de 80%)
}

body.notfound section.hero {
    padding: 10px 0
}

body.notfound #content h1,body.notfound #content h2 {
    text-align: center
}

body.notfound #content h1 {
    font-size: var(--font-size-heading-1);
    margin-bottom: var(--gutter)
}

body.notfound #content h2 {
    font-size: var(--font-size-heading-3);
    margin: 0 auto;
    margin-bottom: var(--gutter);
    max-width: 658px
}

body.notfound #content img {
    display: block;
    margin: 0 auto;
    margin-bottom: var(--gutter);
    max-width: 850px;
    width: 100%
}

body.notfound #content .links {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    display: grid;
    -ms-flex-direction: column;
    flex-direction: column;
    grid-template-columns: 1fr;
    margin: 0 auto;
    margin-bottom: var(--gutter);
    max-width: 620px;
    text-align: center
}

body.notfound #content .links ul {
    display: block;
    margin: 0;
    padding: 0
}

body.notfound #content .links ul li {
    margin-bottom: var(--spacer-sm)
}

body.notfound #content .links a {
    color: var(--blue-6);
    font-size: var(--font-size-heading-5);
    font-weight: var(--font-weight-bold)
}

body.notfound #content .links a:hover {
    text-decoration: underline
}

@media (min-width: 640px) {
    body.notfound #content section.hero {
        padding:20px 0
    }

    body.notfound #content .links {
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        grid-template-columns: 1fr 1fr 15%;
        justify-content: space-between;
        position: relative;
        text-align: left
    }
}

body.partner {
    font-family: var(--font-roboto)
}

body.partner section.hero {
    background: linear-gradient(224deg,var(--blue-1) 0,var(--blue-2) 100%)
}

body.partner .hero-content {
    margin: 0 auto;
    width: 90%
}

body.partner .hero-content h2 {
    font-family: var(--font-gsans);
    font-size: 2.625rem!important;
    font-style: normal;
    font-weight: 700!important;
    margin: 0!important
}

body.partner .hero-content p {
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 400;
    margin: 1.5rem 0 0
}

body.partner section.content-container .story-grid {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: var(--gutter);
    justify-content: center
}

body.partner .terms-of-service-text-container {
    padding: 7rem 0
}

body.partner .text-container {
    margin: 0 auto;
    width: 85%
}

body.partner .text-container h3 {
    font-family: var(--font-gsans);
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 700;
    margin-bottom: 1.5rem
}

body.partner .text-container p.paragraph {
    font-family: var(--font-roboto);
    font-size: 1rem;
    line-height: 1.5rem;
    margin-bottom: 1.75rem
}

body.partner .text-container p.paragraph:first-of-type {
    margin-top: 1.75rem
}

body.partner .text-container p.paragraph:last-of-type {
    margin-bottom: 0
}

body.partner .text-container p>a {
    text-decoration-line: underline
}

body.partner .carousel-section h1 {
    margin: auto 24px
}

body.partner .carousel-section .carousel .carousel-slider {
    padding-left: var(--gutter)
}

body.partner .carousel-section .carousel .carousel-slider .carousel-featured-card .text .btn.quiet,body.partner .carousel-section .carousel .carousel-slider .carousel-featured-card .text h3,body.partner .carousel-section .carousel .carousel-slider .carousel-featured-card .text p {
    color: #fff
}

body.partner .carousel-section .carousel .carousel-slider .carousel-featured-card .text .btn.quiet:hover,body.partner .carousel-section .carousel .carousel-slider .carousel-featured-card .text h3:hover,body.partner .carousel-section .carousel .carousel-slider .carousel-featured-card .text p:hover {
    color: #fff!important
}

body.partner #newsletter {
    background-color: #fff;
    padding-top: var(--gutter-lg)
}

body.partner #cta {
    background-color: #fff
}

@media (min-width: 768px) {
    body.partner .hero-content {
        width:80%
    }

    body.partner .text-container {
        width: 70%
    }

    body.partner .carousel-section {
        padding: 0 80px 70px
    }

    body.partner .carousel-section h1 {
        margin-bottom: 44px;
        margin-left: 50px
    }
}

@media (min-width: 1024px) {
    body.partner .hero-content {
        width:70%
    }

    body.partner .hero-content h2 {
        font-size: 3.625rem!important
    }

    body.partner .text-container {
        width: 50%
    }

    body.partner .carousel-section {
        padding: 0 80px 70px
    }

    body.partner .carousel-section h1 {
        margin-bottom: 44px;
        margin-left: 50px
    }
}

body.showcase #stories {
    padding-bottom: var(--gutter-md)
}

body.showcase .see-more {
    padding-top: var(--gutter-md);
    text-align: center
}

body.showcase .see-more a.btn {
    padding: 0
}

body.showcase #companies {
    overflow: hidden
}

body.showcase #companies h2 {
    max-width: 460px
}

body.showcase #companies .logo-garden {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: center
}

body.showcase #companies .inner-fixed {
    justfiy-content: center;
    display: grid
}

body.showcase #companies .logo-row {
    -ms-flex-item-align: center;
    align-self: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: var(--gutter-sm);
    margin-bottom: var(--gutter-sm);
    position: relative
}

body.showcase #companies .logo-row:first-child,body.showcase #companies .logo-row:nth-child(3) {
    left: calc(82px + var(--gutter-sm)/2)
}

body.showcase #companies .logo-row>div {
    background-color: var(--grey-1);
    border-radius: var(--ui-border-radius-sm);
    -webkit-box-shadow: var(--ui-drop-shadow-sm);
    box-shadow: var(--ui-drop-shadow-sm);
    display: grid;
    height: 164px;
    min-width: 164px;
    padding: 37px;
    place-items: center;
    width: 164px
}