/**** RESET ****/
/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin:0; paddgin:0;
  outline:none;
  font-size:1em;
}

/* Prevent font size inflation */
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

/* Remove default margin in favour of better control in authored CSS */
body, h1, h2, h3, h4, p,
figure, blockquote, dl, dd {
  margin-block-end: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  line-height: 1.5;
}

/* Set shorter line heights on headings and interactive elements */
h1, h2, h3, h4,
button, input, label {
  line-height: 1.1;
}

/* Balance text wrapping on headings */
h1, h2,
h3, h4 {
  font-size:1em;
  text-wrap: balance;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
  color: currentColor;
}

em { font-style:normal; }

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input, button,
textarea, select {
  font-family: inherit;
  font-size: inherit;
}

/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
  min-height: 10em;
}

/* Anything that has been anchored to should have extra scroll margin */
:target {
  scroll-margin-block: 5ex;
}

/**** Styles ****/
/*********************************************** Structure ************************************************/

body, a, h11, h2, h3, h4, p, #lightbox, #lightbox * {transition:all 0.2s; -webkit-transition:all 0.2s }


#fv_loader      { position: fixed; top:0; left:0; height:4px; background-color:var(--accent-1); z-index:99999; width:0; opacity:0; }
#fv_transition  { position: fixed; top:0; left:0; width:0; height:100%; background-color:#eeeeee; z-index: 99998; overflow: hidden; }

/* ::-webkit-scrollbar { display: none; } */

:root {
  --section-bg-color-light: #F8F8F8;
  --section-bg-color-dark:  #191D1E;

  --bg-color-dark-pop: #272B2C;

  --pure-white:#ffffff;
  --deep-dark: #151818;

  --faded-bg-color-light: #C5CED8;
  --faded-bg-color-dark: #191D1E;

  --faded-text-color-light: #A6B4C2;
  --faded-text-color-dark: #303637;

  --text-color-light:#151818;
  --text-color-dark: #FFFFFF;

  --display-color-light-on: #151818;
  --display-color-light-off:#ECECEC;

  /*--accent-1: #FFCD5D;*/
  --accent-1: #ffffff;
  --accent-2: #F9B92A;
  --accent-dark-1: #151818;

  --spacer-xxl:150px;
  --spacer-xl:90px;
  --spacer-l: 50px;
  --spacer-m: 30px;
  --spacer-s: 20px;

  --border-radius:16px;

  --mobile-cta-padding:8px 8px 8px 16px;
  --mobile-cta-margin:8px 8px 8px 0px;
  --mobile-cta-size:16px;

  --toggle-sizer:12px;

}

.mt-xl{ margin-top:var(--spacer-xl)!important }
.mt-l { margin-top:var(--spacer-l)!important }
.mt-m { margin-top:var(--spacer-m)!important }
.mt-s { margin-top:var(--spacer-s)!important }

.mb-xl{ margin-bottom:var(--spacer-xl)!important }
.mb-l { margin-bottom:var(--spacer-l)!important }
.mb-m { margin-bottom:var(--spacer-m)!important }
.mb-s { margin-bottom:var(--spacer-s)!important }

.mr-xl{ margin-right:var(--spacer-xl)!important }
.mr-l { margin-right:var(--spacer-l)!important }
.mr-m { margin-right:var(--spacer-m)!important }
.mr-s { margin-right:var(--spacer-s)!important }

.pt-xxl { padding-top:var(--spacer-xxl)!important }
.pb-xxl { padding-bottom:var(--spacer-xxl)!important }

.pt-xl{ padding-top:var(--spacer-xl)!important }
.pt-l { padding-top:var(--spacer-l)!important }
.pt-m { padding-top:var(--spacer-m)!important }
.pt-s { padding-top:var(--spacer-s)!important }

.pb-xl{ padding-bottom:var(--spacer-xl)!important }
.pb-l { padding-bottom:var(--spacer-l)!important }
.pb-m { padding-bottom:var(--spacer-m)!important }
.pb-s { padding-bottom:var(--spacer-s)!important }

.pl-xl{ padding-left:var(--spacer-xl)!important }
.pl-l { padding-left:var(--spacer-l)!important }
.pl-m { padding-left:var(--spacer-m)!important }
.pl-s { padding-left:var(--spacer-s)!important }

.pr-xl{ padding-right:var(--spacer-xl)!important }
.pr-l { padding-right:var(--spacer-l)!important }
.pr-m { padding-right:var(--spacer-m)!important }
.pr-s { padding-right:var(--spacer-s)!important }

.p-xl { padding:var(--spacer-xl)!important }
.p-l { padding:var(--spacer-l)!important }
.p-m { padding:var(--spacer-m)!important }
.p-s { padding:var(--spacer-s)!important }

.wrap                 { overflow: hidden; opacity:0; transition:all 0.25s; -webkit-transition:all 0.25s; position: relative }
.loaded               { opacity: 1 }
.nooverflow           { overflow: hidden }
.overflow             { overflow: visible }
.none                 { display: none; opacity:0; position: absolute; top:-10000px; left:-10000px; width:0px; height:0px; overflow: hidden; z-index: -1 }
.hidden               { display: none }
.scale0               { transform:scale(0,0); -webkit-transform:scale(0,0); }
.abs                  { position:absolute; }
.fullwidth            { width:100% }
.abs.fullwidth        { left:0; right:0; }
.below                { z-index:9 }
.above                { z-index:11 }
.blurred              { background-color:rgba(255,255,255,0.2); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.dark .blurred        { background-color:rgba(0,0,0,0.2) }

.vh200                { height:200vh }
.vh100                { height:100vh }
.vh90                 { height:90vh }
.vh80                 { height:80vh }
.vh70                 { height:70vh }
.vh60                 { height:60vh }
.vh50                 { height:50vh }
.vh40                 { height:40vh }
.vh30                 { height:30vh }
.vh20                 { height:20vh }
.vh10                 { height:10vh }

.spinner              { position: absolute; display: block; overflow: hidden; z-index:30; left:50%; top:50%; width:24px; height:24px; margin:-12px 0 0 -12px; }
.spinner svg          { width:24px; height: 24px; transition:all 0.25s; -webkit-transition:all 0.25s; transform:scale(0); -webkit-transform:scale(0); opacity:0; }
.spinner.active svg   { transform:scale(1); -webkit-transform:scale(1); opacity:1; }
.spinner              { -webkit-animation:spin 1s linear infinite; -moz-animation:spin 1s linear infinite; animation:spin 1s linear infinite }


.fv_cursor .inner .spinner   { width:100px; height:100px; margin:-50px 0 0 -50px }
.fv_cursor .inner .spinner svg { width:100px; height:100px; }

.fv_cursor.loading .inner .spinner svg { transform:scale(1); -webkit-transform:scale(1); opacity:1; }

.dark                 { color:var(--text-color-dark) }
.dark.deepdark, .deepdark { background-color:var(--deep-dark) }
.dark #wordmark path  { fill:#ffffff }
.accentcolor          { color:var(--accent-2) }
.opacity25            { opacity:0.25 }
.fade50, .opacity50   { opacity:0.5 }
.opacity75            { opacity:0.75 }
.opacity0             { opacity:0 }

.shim                 { position: absolute; z-index:9; left:0; right:0; bottom:-1px; top:0; background:rgba(0,0,0,0.5); }
.bgfx                 { transition: all 1s cubic-bezier(.17,.67,.22,.98); -webkit-transition:all 1s cubic-bezier(.17,.67,.22,.98); background-size: cover; background-position: center center; background-repeat: no-repeat; transform:scale(1,1); -webkit-transform:scale(1,1); opacity:0.7; }
section.active .bgfx  { transform:scale(1.05,1.05); -webkit-transform:scale(1.05,1.05); opacity:1; transition: all 8s cubic-bezier(.17,.67,.22,.98); -webkit-transition:all 8s cubic-bezier(.17,.67,.22,.98); }

.testimonial img { width:100px; margin-left:auto; margin-right:auto }

@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}

/*********************************************** Context menu ************************************************/

.contextmenu-wrap           { position:fixed; z-index: 100; top:50px; left:0; right:0; display:flex; flex-direction:row; justify-content:center; align-items:center; gap:10px; height:1px }
.contextmenu                { display:flex; flex-direction:row; justify-content:space-between; align-items:center; background-color: rgba(230,230,230, 0.7); border-radius: 50px; overflow: hidden; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding:10px; transition:all 0.2s ease-out; -webkit-transition:all 0.2s ease-out }
.contextmenu.hidden         { bottom:-100px }
.contextmenu-items          { display:flex; flex-direction:row; justify-content:space-evenly; align-items:center; white-space: nowrap; transform:rotate(0deg) translate3d(0,0,0); transform-origin: bottom left; margin:0 auto; padding:0; gap:4px }

.contextmenu-items a        { color:var(--text-color-light); padding:6px 12px; border-radius:30px; opacity:1; text-decoration:none; font-weight:500 }
.contextmenu-items a.active { color:var(--text-color-dark); background-color:var(--accent-dark-1) }
.contextmenu-items span     { display:none }

.dark .contextmenu                { background-color: rgba(50,50,50,0.5); }
.dark .contextmenu-items a        { color:var(--text-color-dark) }
.dark .contextmenu-items a.active { color:var(--text-color-light); background-color:var(--accent-1) }

#mobile-menu.contextmenu-wrap,
#mobile-menu.contextmenu-wrap { display:none }


/*********************************************** Lightbox ************************************************/

.zmenu          { position: fixed; top:0; left:0; right:0; height:100vh; max-height:100vh; z-index: 21; display: none; opacity: 0; }
.zmenu.active   { display: block; }

.zpanel         { position: absolute; top:0; left:0; right:0; bottom:0; overflow: auto; -webkit-overflow-scrolling:touch; border-bottom:1px solid transparent; display: none; z-index: 21 }
.zpanel.light   { background-color: rgba(240,240,240,0.9) }
.zpanel.white   { background-color: #ffffff }
.zpanel.alt     { background-color: #191D1E }
.zpanel.darkbg  { background-color: rgba(0,0,0,0.8) }
.zpanel.sectionbg { background-color:var(--section-bg-color-light) }
.dark .zpanel.sectionbg { background-color:var(--section-bg-color-dark) }

.zpanel.flex.active { display: flex; align-items:center; }
.zpanel.flex section { flex-grow:1; }
.zpanel header  { justify-content:flex-end; position: fixed; left:auto; right:0; width:100px; padding-bottom:0; }

.zpanel.active  { display: block; }

.lightbox_src   { width:100%; margin:auto; cursor: zoom-out }

.lightbox_container         { position: absolute; z-index: 11; width:90vw; min-height: 100vh; left:5vw; right:5vw; }
video.lightbox_video,
img.lightbox_image          { width:100%; max-width: 1600px; transition:all 0.5s; -webkit-transition:all 0.5s; border-radius:8px; margin:5vh auto; }

@media all and (max-height:600px){
  .zpanel.flex.active { align-items: flex-start; padding:100px 0; }
}

.lightbox_zoomout           { cursor: zoom-out }

a.small_close             { font-family:"Inter", sans-serif; text-decoration: none; font-size:25px; color:#fff; width:40px; height:40px; position: absolute; top:0; right:0; z-index:12; text-align: center; line-height: 40px; opacity: 0.3; transition:all 0.25s; -webkit-transition:all 0.25s; }
a.small_close:hover         { opacity: 1; color:#007fff; }
a.small_close.circle        { background: rgba(0,0,0,0.5); opacity:1; border-radius:50%; overflow: hidden; color:#ffffff; top:15px; right:15px; position: fixed; backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); }
a.small_close.circle:hover      { color:#000000; background: #FFCD5D; }

a.chevron-prev,
a.chevron-next { padding:10px; display: block; border-radius: 50%; overflow: hidden; background-color: rgba(0,0,0,0.1); transition:all 0.25s; -webkit-transition:all 0.25s; }

a.chevron-prev svg,
a.chevron-next svg { display: block; width:20px; height:20px; transition:all 0.25s; -webkit-transition:all 0.25s }

a.chevron-prev:hover,
a.chevron-next:hover { background: #FFCD5D; box-shadow:0px 0px 40px rgba(0,0,0,0.2) }

svg .chevron-path { fill:#fff; }

a.chevron-prev:hover svg .chevron-path,
a.chevron-next:hover svg .chevron-path { fill:#000 }

a.chevron-prev          { margin:6px 3px 6px 6px }
a.chevron-next          { margin:6px 6px 6px 3px }

.lightbox_controls_container { position:fixed; z-index: 12; bottom:30px; left:0; right:0; display:flex; flex-direction:row; justify-content:center; align-items:center  }
.lightbox_controls { border-radius:30px; background:rgba(0,0,0,0.5); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); display:flex; flex-direction:row; justify-content:space-between; align-items:center }

/*********************************************** Layout ************************************************/

body      { font-family:"Plus Jakarta Sans", sans-serif; font-optical-sizing: auto; font-style: normal; background-color:var(--section-bg-color-light); font-weight:300; overflow-x:hidden; }
body.dark { background-color:var(--section-bg-color-dark) }
.page     { position:relative; z-index:10; margin:0 auto; background-color:var(--section-bg-color-light); color:var(--text-color-light); }

header    { padding:30px 50px; position:absolute; top:0; left:0; right:0; z-index: 11; display:flex; flex-direction:row; justify-content:space-between; align-items:center }
footer    { margin:0; padding:0 }
footer svg.img,
header svg.img { width:80px }

body.dark footer svg.img linearGradient stop.stop-start,
nav.appnav svg.img linearGradient stop.stop-start,
header svg.img linearGradient stop.stop-start   { stop-color:#000000 }

body.dark footer svg.img linearGradient stop.stop-end,
nav.appnav svg.img linearGradient stop.stop-end,
header svg.img linearGradient stop.stop-end     { stop-color:#676767 }

body.dark header svg.img linearGradient stop.stop-start,
body.dark nav.appnav svg.img linearGradient stop.stop-start,
footer svg.img linearGradient stop.stop-start  { stop-color:#ffffff }

body.dark header svg.img linearGradient stop.stop-end,
body.dark nav.appnav svg.img linearGradient stop.stop-end,
footer svg.img linearGradient stop.stop-end    { stop-color:#676767 }


nav       { position:relative; z-index: 11; display:flex; flex-direction:row; justify-content:flex-end; align-items:center; gap:20px }
nav a     { text-decoration:none; color:currentColor; opacity:0.5 }
nav a:hover, nav a:focus, nav a:active,
nav a.active { opacity:1 }
nav a.active { border-bottom: 2px solid var(--accent-2); font-weight:bold }

a.menu{ width:36px; height:36px; border-radius:21px; border:1px solid rgba(0,0,0,0.1); display:flex; flex-direction:row; justify-content:center; align-items:center; font-size:14px; line-height:14px }

.avatar{ cursor: default; width:32px; height:32px; border-radius:21px; border:1px solid rgba(0,0,0,0.1); display:flex; flex-direction:row; justify-content:center; align-items:center; font-size:10px; font-weight:600; background:rgba(230,230,230, 0.5) }
.dark .avatar { border-color:rgba(255,255,255,0.15); background-color:rgba(77,77,77,0.5) }

.large-avatar{ cursor: default; width:80px; height:80px; border-radius:40px; border:1px solid rgba(0,0,0,0.1); display:flex; flex-direction:row; justify-content:center; align-items:center; font-size:40px; font-weight:600; background:rgba(230,230,230, 0.5) }
.dark .large-avatar { border-color:rgba(255,255,255,0.15); background-color:rgba(77,77,77,0.5) }

.dark nav a.menu { border-color:rgba(255,255,255,0.1) }
.dark nav a.menu svg path { fill:var(--text-color-dark); }

nav a.menu svg.dark-mode    { display:block }
nav a.menu svg.light-mode   { display:none }

body.dark nav a.menu svg.dark-mode    { display:none }
body.dark nav a.menu svg.light-mode   { display:block }

.page-menu a,
section   { position:relative; z-index:10; padding:0 120px; overflow:hidden; }
section.hero { padding-top:var(--spacer-xxl); }
section.signup{padding-top:var(--spacer-xxl); padding-left:0; padding-right:0 }

.alt { background-color:var(--pure-white); }
.dark .alt,
.dark.alt { background-color:var(--deep-dark) }

section .page-menu { margin:0 -120px }

.page-menu a { text-decoration:none; color:currentColor; position:relative; z-index: 10; display: block; padding-top:45px; padding-bottom:45px }
.page-menu a p::before { display:block; position:absolute; top:50%; margin-left:-50px; content:"→"; opacity:0.25; transform:translateY(-50%); }
.page-menu a p { display:flex; flex-direction:row; justify-content:space-between; align-items:center; max-width:1200px; margin:0 auto}
.page-menu a p span { opacity:0.8; font-weight:500 }
.page-menu a p span.meta { border-radius:20px; display:block; padding:1px 10px; text-transform:uppercase; font-weight:300; opacity:0.4; font-size:10px; }


.dark #section-secondary .page-menu a:hover,
.page-menu a:hover { background-color:#fff }

.dark .page-menu a:hover { background-color:var(--accent-dark-1) }

.dark #section-secondary .page-menu,
.page-menu { border-bottom:1px solid rgba(0,0,0,0.1) }

.dark #section-secondary .page-menu a p span.meta,
.page-menu a p span.meta { background-color:#ECECEC }

.dark #section-secondary .page-menu a,
.page-menu a { border-top:1px solid rgba(0,0,0,0.1) }

.dark #section-secondary .page-menu a p::before,
.page-menu a p::before {color:currentColor;}

.dark #section-secondary .page-menu a.active,
.page-menu a.active { background-color:var(--accent-dark-1); color:var(--text-color-dark); }

.dark #section-secondary .page-menu a.active p:before,
.page-menu a.active p:before{color: var(--text-color-dark); opacity: 1 }

.dark #section-secondary .page-menu a.active p span,
.page-menu a.active p span { opacity:1; font-weight:400 }

.dark #section-secondary .page-menu a.active p span.meta,
.page-menu a.active p span.meta { background-color:#ffffff; color:var(--text-color-light); opacity:1; font-weight: 500 }


.dark .page-menu a.active { background-color:var(--accent-1); color:var(--text-color-light); }
.dark .page-menu a.active p:before{color: var(--text-color-light); opacity: 1 }
.dark .page-menu a.active p span.meta { background-color:var(--accent-dark-1); color:var(--text-color-dark); opacity:1}

.dark .page-menu { border-bottom:1px solid rgba(255,255,255,0.1) }
.dark .page-menu a p span.meta { background-color:#34393A }
.dark .page-menu a { border-top:1px solid rgba(255,255,255,0.1) }
.dark .page-menu a p::before {color:#ffffff}

article   { position:relative; display: block; z-index:10; max-width:1200px; margin:0 auto }

.product-demo-container { position:absolute; border-radius:var(--border-radius); top:var(--spacer-m); right:var(--spacer-m); left:50%; bottom:var(--spacer-m); overflow:hidden; }
.product-demo { position:relative; height:90vh; border-radius:var(--border-radius); overflow: hidden;
    background-image:url("/_s/img/bg/bg1.webp");
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment:scroll;
    background-size:auto 100%;
}

/* Glow */
#section-intro { background-position:top center; background-repeat:no-repeat; background-size:100% auto }
#section-intro { background-image:url("/_s/img/bg/hero/light.jpg"); }
.dark #section-intro { background-image:url("/_s/img/bg/hero/dark.jpg") }

/*#section-intro { background-image:url("/_s/img/bg/bg.png"); background-position:top center ; background-repeat:no-repeat; background-size:100% auto }*/

/*.dark
#pattern-2 { background-image:url("/_s/img/Pattern-2-Dark.svg"); background-position:top right; background-repeat:no-repeat; }
#pattern-2 { background-image:url("/_s/img/Pattern-2-Light.svg"); background-position:top right; background-repeat:no-repeat; position:absolute; top:0; left:0; right:0; height:100vh; z-index:9 }
*/


#section-secondary.dark { background-color:var(--section-bg-color-dark); background-image:url("/_s/img/bg/footer/dark.jpg"); background-position:bottom center; background-repeat:no-repeat; background-size: 100% auto }
.dark #section-secondary { background-color:var(--section-bg-color-light); color:var(--text-color-light); background-image:url("/_s/img/bg/footer/light.jpg"); background-position:bottom center; background-repeat:no-repeat; background-size: 100% auto}

.dark #section-secondary .playlist-container,
.dark #section-secondary .playlist .cell { border-color:rgba(0,0,0,0.1) }

.dark #section-secondary
.flexgrid.playlist .cell .cc svg.icon path { fill:var(--text-color-light); }

.dark #section-secondary
.flexgrid.playlist .cell:hover  { background-color:rgba(255,255,255,0.5) }

.dark #section-secondary #wordmark path  { fill:var(--accent-dark-1) }

#section-secondary { z-index:13 }

.features { border-radius:4px }
.rounded { border-radius:var(--border-radius); }
.rounded-container { overflow:hidden; border-radius:var(--border-radius); margin:var(--spacer-m); position:relative }
.rounded-container.pop { z-index:20 }

#integrations-block { background-image:url("/_s/img/integrations/Dots-Light.svg"); background-position:center center; background-repeat:no-repeat; background-size:50% auto }
.dark #integrations-block { background-image:url("/_s/img/integrations/Dots-Dark.svg") }

#integrations-block .logos.light {display: block }
#integrations-block .logos.dark {display: none }

.dark #integrations-block .logos.light {display: none }
.dark #integrations-block .logos.dark {display: block }

#integrations-block .logos { position:relative; width:100%; height:1px; z-index:20 }
#integrations-block .logos img { width:100px; position:absolute; box-shadow:30px 30px 50px rgba(0,0,0,0.1); border-radius:var(--border-radius) }
.dark #integrations-block .logos img { box-shadow:30px 30px 50px rgba(0,0,0,0.5) }

#integrations-block .logos img.img1 { top:-230px; left:230px; width:70px  }
#integrations-block .logos img.img2 { top:-120px; left:80px; }
#integrations-block .logos img.img3 { top:10px; left:0; width:70px  }
#integrations-block .logos img.img4 { top:120px; left:80px  }
#integrations-block .logos img.img5 { top:230px; left:230px; width:70px  }

#integrations-block .logos img.img6 { top:-230px; right:230px; width:70px  }
#integrations-block .logos img.img7 { top:-120px; right:80px; }
#integrations-block .logos img.img8 { top:10px; right:0; width:70px  }
#integrations-block .logos img.img9 { top:120px; right:80px  }
#integrations-block .logos img.img0 { top:230px; right:230px; width:70px  }

a.cta               { display:inline-block; text-decoration:none; background-image: linear-gradient(120deg, #333 25%, #555 37.5%, #ccc, #555 62.5%, #000 75%); background-position: right center; background-size: 400% auto; color:var(--text-color-dark); border-radius:50px; padding:6px 6px 6px 16px; font-weight:500; transition: background-position 500ms ease-out; position: relative;}
a.cta span          { display:inline-block; margin-left:6px; text-align:center; line-height:40px; height:40px; width:40px; border-radius:20px; background-color:var(--section-bg-color-light); color:var(--text-color-light); }

.dark a.cta         { background-image: linear-gradient(120deg, #fff 25%, #aaa 37.5%, #777, #aaa 62.5%, #fff 75%); color:var(--text-color-light); }
.dark a.cta span    { background:var(--section-bg-color-dark); color:var(--text-color-dark); }

.dark a.cta:hover, a.cta:hover {

    background-position:left center;

    /*&::before {
        --vibrance: 50%;
        content: " ";
        position: absolute;
        inset: 10px 10px -10px;
        background: linear-gradient(to right in oklch longer hue, oklch(95% var(--vibrance) 0) 0 100%);
        filter: blur(20px);
        border-radius: inherit;
        z-index: -1;
    }*/
}

a.large-cta { text-decoration:none; color:var(--accent-2); letter-spacing:-0.04em; font-weight:300; position:relative; padding-right:3em }

/*a.large-cta:after { content:""; display:block; width:100px; height:100px; border-radius:60px; background-color:rgba(249,185,42, 0.1); background-image:url("/_s/img/Arrow-right.svg"); background-repeat: no-repeat; background-position: center center; position:absolute; right:-80px; top:50%; margin:-50px 0 0 0; z-index: -1; transition:all 0.25s; -webkit-transition:all 0.25s;}
a.large-cta:hover:after { background-color:rgba(249,185,42, 0.2); width:120px; height:120px; margin-top:-60px; right:-90px }*/

a.large-cta:after { content:""; display:block; width:3em; height:3em; border-radius:3em; background-color:rgba(249,185,42, 0.1); background-image:url("/_s/img/Arrow-right.svg"); background-repeat: no-repeat; background-position: center center; background-size:1.5em; position:absolute; right:0.5em; top:50%; margin:-1.5em 0 0 0; z-index: -1; transition:all 0.25s; -webkit-transition:all 0.25s }
a.large-cta:hover:after { background-color:rgba(249,185,42, 0.2); width:3.2em; height:3.2em; margin-top:-1.6em; right:0.4em }

a.large-cta.reel-cta:hover:after { background-color:rgba(249,185,42, 0.6); width:400px; height:400px; margin-top:-200px; margin-right:-200px; right:-45px; border-radius:200px }

.scrolldash-container { height:100px; position:relative; width:2px }
.scrolldash   { height:100%; width:2px; background-color:var(--text-color-light); margin-left: 0; position:absolute; top:0; left:0; -webkit-animation:scrolldashanimation 2s linear infinite; -moz-animation:scrolldashanimation 2s linear infinite; animation:scrolldashanimation 2s linear infinite }
.dark .scrolldash { background-color:var(--text-color-dark) }

.vdash { height:100px; margin-left:auto; margin-right:auto; border:1px solid rgba(0,0,0,0.2); border-width:0 0 0 1px; width:1px }
.dark .vdash { border-color:rgba(255,255,255,0.1) }

.ldash { height:100px; border:1px solid rgba(0,0,0,0.2); border-width:0 0 0 1px; width:1px }
.dark .ldash { border-color:rgba(255,255,255,0.1) }

body.dark, .dark .page, .dark section, section.dark { color:var(--text-color-dark); }
.dark .page { background-color:var(--section-bg-color-dark) }

.page { overflow:hidden; }

.faded-text h1.display,
.faded-text { color:var(--faded-text-color-light); }

.dark .faded-text h1.display,
.dark .faded-text { color:var(--faded-text-color-dark) !important; }

/*
section { color:var(--faded-text-color-light) }
section.active { color:var(--text-color-light) }

.dark section, section.dark { color:var(--faded-text-color-dark) }
.dark section.active, section.dark.active { color:var(--text-color-dark) } */

footer a { text-decoration:none; color:currentColor; }

a.deco                              { text-decoration:none; color:currentColor; }
a.deco                              { position: relative; z-index:12 }
a.deco:after                        { content:""; position: absolute; z-index:12; bottom:-5px; width:0; border-bottom:2px solid var(--accent-2); left:0; z-index: -1; transition:0.2s all cubic-bezier(.23,.71,.08,.78); -webkit-transition:0.2s all cubic-bezier(.23,.71,.08,.78); }
a.deco.active:after,
a.deco:focus:after,
body.desktop a.deco:active:after, 
body.desktop a.deco:hover:after     { opacity:1; width:100%; left:0;}

a.deco2                              { text-decoration:none; color:currentColor; }
a.deco2                              { position: relative; z-index:12 }
a.deco2:before                       { content:""; opacity:1; position: absolute; z-index:12; bottom:-5px; width:100%; border-bottom:2px solid var(--accent-2); left:0; z-index: -1; transition:0.25s all cubic-bezier(.23,.71,.08,.78); -webkit-transition:0.25s all cubic-bezier(.23,.71,.08,.78); }
a.deco2.active:before,
a.deco2:focus:before,
body.desktop a.deco2:active:before, 
body.desktop a.deco2:hover:before     { opacity:0.5; width:0; left:100%;}

a.deco2:after                        { content:""; position: absolute; z-index:12; bottom:-5px; width:0; border-bottom:2px solid var(--accent-2); left:0; z-index: -1; transition:1s all cubic-bezier(.23,.71,.08,.78); -webkit-transition:1s all cubic-bezier(.23,.71,.08,.78); }
a.deco2.active:after,
a.deco2:focus:after,
body.desktop a.deco2:active:after, 
body.desktop a.deco2:hover:after     { opacity:1; width:100%; left:0;}




/*********************************************** Typography ************************************************/

h1.display  { font-family: "Plus Jakarta Sans", sans-serif; font-optical-sizing: auto; font-style: normal; font-weight:600; font-size:70px; letter-spacing:-0.01em; line-height:1em }
h1,h2,h3,h4 { font-family:"Plus Jakarta Sans", sans-serif; font-optical-sizing: auto; font-style: normal; font-weight:200; line-height:1.5em; letter-spacing:-0.02em }

h1.gradient-text { background-image: linear-gradient(120deg, #333 25%, #555 37.5%, #ccc, #555 62.5%, #000 75%); background-position: right center; background-size: 400% auto; transition: background-position 3500ms ease-out; -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.dark h1.gradient-text { background-image: linear-gradient(120deg, #fff 40%, #aaa 49%, #777, #aaa 51%, #fff 60%); }

section.active h1.gradient-text { background-position:left center }

/*.large-cta, */
h1        { font-size:36px; }
h2        { font-size:32px }
h3        { font-size:24px }
h4        { font-size:20px }

p         { font-size:18px; line-height:1.5em }
.ts-m     { font-size:14px; line-height:1.5em }
.ts-s     { font-size:12px; line-height:20px }
.ts-xs     { font-size:10px; line-height:10px }

.dark h1.display, h1.display.dark { color:var(--accent-1) }

.heavy    { font-weight:700 }
.center   { text-align:center; }
.text-block,
.quote    { max-width:600px; margin-left:auto; margin-right:auto }

.strikethrough { text-decoration: line-through; }


/*********************************************** Scrollspy Anchors ************************************************/

.scrollspy-anchor-wrap { position:fixed; z-index:13; display:block; margin-left:50px; margin-top:var(--spacer-xxl); }
.scrollspy-anchors { display:flex; flex-direction:row; justify-content:flex-start; align-items:center; gap:10px; white-space: nowrap; transform:rotate(90deg) translate3d(0,0,0); transform-origin: bottom left; margin:-25px 0 0 -5px}
.scrollspy-anchors a { text-decoration:none; color:currentColor; opacity:0.5 }
.scrollspy-anchors a:hover, .scrollspy-anchors a:focus, .scrollspy-anchors a:active,
.scrollspy-anchors a.active { opacity:1; font-weight:500 }
.scrollspy-anchors span { opacity:0.2 }

.dark .scrollspy-anchors a.active { color:var(--accent-1); }
.dark.faded .scrollspy-anchors a.active { color:var(--faded-text-color-dark) }

/*********************************************** Flexgrid ************************************************/

.flexgrid                       { box-sizing: border-box; position: relative; z-index: 12; display: flex; flex-direction: row; justify-content: flex-start; flex-wrap: wrap }
.flexgrid.nowrap                { flex-wrap: nowrap }
.flexgrid.nowrap .cell          { flex-grow: 1 }
.flexgrid.reverse               { flex-wrap: wrap-reverse; }

.flexgrid .cell                 { display: flex; justify-content: center; align-items: stretch; align-content: space-between; position: relative; z-index: 12; flex-grow: 0; box-sizing: border-box }
.flexgrid .cell.col1            { width:8.33%   }
.flexgrid .cell.col2            { width:16.66%  } 
.flexgrid .cell.col3            { width:24.99%  }

.flexgrid .cell,
.flexgrid .cell.col4            { width:33.33%  }
.flexgrid .cell.col5            { width:41.66%  }
.flexgrid .cell.col6            { width:50%   }
.flexgrid .cell.col7            { width:58.32%  }
.flexgrid .cell.col8            { width:66.63%  }
.flexgrid .cell.col9            { width:74.98%  }
.flexgrid .cell.col10           { width:83.33%  }
.flexgrid .cell.col11           { width:91.63%  }
.flexgrid .cell.col12           { width:100%  }

.flexgrid.project-list.spaced.offset { overflow:visible; }

.viewport_desktop .flexgrid.project-list.offset .cell:nth-child(3n+2){ margin-top:-100px; }

.viewport_mobile .flexwrap .flexgrid.project-list.offset .cell:nth-child(2n) { margin-top:0 }
.viewport_mobile .flexgrid.project-list.offset .cell:nth-child(2n),
.viewport_tablet .flexgrid.project-list.offset .cell:nth-child(2n){ margin-top:-50px; }

.flexgrid .cell .cc             { padding:0; position: relative; white-space:normal; width:100%; }

.flexgrid.spaced                { margin-left:-10px; margin-right:-10px }
.flexgrid.spaced .cell .cc      { padding:10px }

.flexgrid.cards .cell .cc       { background-color:rgba(255,255,255,0.5); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); margin:0 10px 20px; padding:var(--spacer-m); border-radius:var(--border-radius) }

.rounded-card                   { border-radius:var(--border-radius); overflow:hidden; background-color:var(--pure-white) }
.dark .rounded-card             { background-color:var(--deep-dark) }

.dark 
.flexgrid.cards .cell .cc       { background-color:rgba(20,20,20,0.5);}

.card-icon { display:block; width:50px; background-color:rgba(0,0,0,0.03); border-radius:4px }
.dark .card-icon { background-color:rgba(255,255,255, 0.05); }

.project-tile a                 { display:block; overflow:hidden; }
.project-tile img               { width:100%; transition:all 0.25s ease-out; -webkit-transition:all 0.25s ease-out; }
.project-tile video             { width:100%; transition:all 0.25s ease-out; -webkit-transition:all 0.25s ease-out; opacity:1; display:block; }

.project-tile video.playing     { opacity:1 }

.flexgrid.project-list          { border-radius:var(--border-radius) }

.project-tile-wrap,
.flexgrid.spaced .project-tile a, 
.flexgrid.spaced .project-tile img, 
.flexgrid.spaced .project-tile video { border-radius:var(--border-radius); overflow:hidden; }

.project-tile span {transition:all 0.2s ease-out; -webkit-transition:all 0.2s ease-out; position:absolute; top:20px; left:20px; color:rgba(255,255,255,0.7); z-index:14; display:block; padding:4px 8px; background-color:rgba(0,0,0,0.5); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); border-radius:20px; opacity:0; text-align:center; min-width:60px }
.project-tile:hover span       { opacity:1 }

.case-study-container { background-color:var(--accent-dark-1); border-radius:var(--border-radius); overflow:hidden; }
.dark #section-secondary .case-study-container { background-color:#ffffff }


.flexgrid .cc.signup-form { background-color:var(--pure-white); border-radius:var(--border-radius) }

/*********************************************** Marquee ************************************************/

.marquee                { width:100%; overflow:hidden; position:relative; pointer-events: none }
.marquee .curtain-left  { position:absolute; z-index:12; top:0; left:0; width:20%; bottom:0; background: linear-gradient(90deg, rgba(248,248,248,1) 20%, rgba(248,248,248,0) 100%); }
.marquee .curtain-right { position:absolute; z-index:12; top:0; right:0; width:20%; bottom:0; background: linear-gradient(90deg, rgba(248,248,248,0) 0%, rgba(248,248,248,1) 80%); }

.alt .marquee .curtain-left  { background: linear-gradient(90deg, rgba(255,255,255,1) 20%, rgba(255,255,255,0) 100%); }
.alt .marquee .curtain-right { background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 80%); }

.dark .marquee .curtain-left  { background: linear-gradient(90deg, rgba(25,29,30,1) 20%, rgba(25,29,30,0) 100%); }
.dark .marquee .curtain-right { background: linear-gradient(90deg, rgba(25,29,30,0) 0%, rgba(25,29,30,1) 80%); }

.dark .alt .marquee .curtain-left,
.dark.deepdark .marquee .curtain-left  { background: linear-gradient(90deg, rgba(21,24,24,1) 20%, rgba(21,24,24,0) 100%); }
.dark .alt .marquee .curtain-right,
.dark.deepdark .marquee .curtain-right { background: linear-gradient(90deg, rgba(21,24,24,0) 0%, rgba(21,24,24,1) 80%); }

.marquee .strip         { position:relative; z-index:11; white-space:nowrap; display:flex; display: flex; flex-direction:row; justify-content: flex-start; flex-wrap:nowrap }
.marquee .strip .tile   { min-width:200px; flex-grow:0 }
.marquee .strip .tile img { width:100px }

.dark .marquee .strip .tile img { filter:invert(1); }

.forward {
    animation: marquee-move-text var(--speed, 30s) linear infinite var(
      --direction,
      forwards
    );
}

.backward {
    animation: marquee-move-text var(--speed, 30s) linear infinite var(
      --direction,
      reverse
    );
}

@keyframes marquee-move-text {
  to {
    transform: translateX(-1800px);
  }
}

/*********************************************** Playlist ************************************************/

.playlist-container             { border-radius:var(--border-radius); border:1px solid rgba(0,0,0,0.1); overflow:hidden }
.flexgrid.playlist              { margin:0 -2px -1px 0 }
.flexgrid.playlist .cell .cc    { padding:20px }

.flexgrid.justified .cell .cc { display:flex; flex-direction: column; justify-content:space-between; }


.dark
.flexgrid.playlist .cell .cc svg.icon path { fill:var(--text-color-dark); }
.flexgrid.playlist .cell .cc svg.icon path { fill:var(--text-color-light); }

.flexgrid.playlist .cell .cc svg.icon,
.flexgrid.playlist .cell .cc img{ margin-bottom:30px }
.flexgrid.playlist .cell        { border:1px solid rgba(0,0,0,0.1); border-width:0 1px 1px 0 }

/* HOVER */
.flexgrid.playlist .cell                { cursor:pointer }
.flexgrid.playlist .cell:hover          { background-color:rgba(255,255,255,0.5) }
.dark .flexgrid.playlist .cell:hover    { background-color:rgba(0,0,0,0.25) }

.dark .playlist-container,
.dark .flexgrid.playlist .cell  { border-color:rgba(255,255,255,0.1) }

a.thumb { display:block; border-radius:35px; position: relative; transition:all 0.2s ease-out; -webkit-transition:all 0.2s ease-out }
a.thumb div { margin:0 auto; display:block; width:70px; height:70px; position:relative; border-radius:35px; overflow:hidden; transition:all 0.2s ease-out; -webkit-transition:all 0.2s ease-out; border:2px solid rgba(0,0,0,0.2) }
a.thumb:hover div { border:3px solid var(--accent-1) }

.dark a.thumb div { border-color:rgba(220,220,220,0.2) }
.dark a.thumb:hover div { border-color:var(--accent-1) }

a.thumb:after { content:""; display:block; width:100px; height:100px; border-radius:60px; background-color:rgba(249,185,42, 0.1); position:absolute; top:50%; left:50%; margin:-50px 0 0 -50px; z-index: -1; transition:all 0.15s; -webkit-transition:all 0.15s; opacity: 0; transform:scale(0.8)}
a.thumb:hover:after { background-color:rgba(249,185,42, 0.2); opacity:1; transform:scale(1) }

/*********************************************** Utility ************************************************/

.valign { align-items: center; display:flex; }
.balign { align-items:flex-end; display:flex; }
.bordertop { border-top:1px solid rgba(0,0,0,0.1); }
.borderbottom { border-bottom:1px solid rgba(0,0,0,0.1); }
.borderright { border-right:1px solid rgba(0,0,0,0.1); }
.borderleft { border-left:1px solid rgba(0,0,0,0.1); }
.ta-right { text-align:right; }
.marginauto { margin-left:auto; margin-right:auto }

.dark .bordertop, .dark .borderright, .dark .borderleft,
.dark .borderbottom { border-color:rgba(255,255,255,0.1) }

.transparent { background:transparent !important; }

.pill { display:block; width:100px; padding:6px 12px; border-radius:30px; border:1px solid rgba(0,0,0,0.1); background-color: var(--section-bg-color-light); text-align:center }
.dark .pill { border-color:rgba(255,255,255,0.15); background-color:var(--section-bg-color-dark) }


/*********************************************** Animations ************************************************/


@keyframes scrolldashanimation {
  0% {
    height:100%;
    top:0;
  }

  20% {
    height:0;
    top:100%;
  }

  80% {
    height:0;
    top:0;
  }

  100% {
    height:100%;
    top:0;
  }
}

/*********************************************** Play-stop button ************************************************/

body.no_cursor *,
body.no_cursor  { cursor:none !important; }

/*

fv_cursor
  custom-cursor-content
    play-stop-button
      inner
      video
*/

.fv_cursor_backdrop { transition:all 0.25s ease-out; -webkit-transition:all 0.25s ease-out; position: fixed; top:0; left:0; right:0; bottom:-100px; z-index:-1; display:block; background-color:rgba(0,0,0,0.1); opacity:0 }
.fv_cursor_backdrop.active { z-index:98; opacity:1 }
.fv_cursor { transition:all 0.1s ease-out; -webkit-transition:all 0.1s ease-out; position: absolute; pointer-events: none; z-index:99; top:0; left:0; display:block }
.fv_cursor .custom-cursor-content { pointer-events:none; margin:-150px 0 0 -150px; transition:all 0.2s ease-out; -webkit-transition:all 0.2s ease-out; display:block; transform:scale(0); }
#cursor.fv_cursor.active_cursor .custom-cursor-content { transform:scale(0.35) }

.play-stop-button { width:300px; height:300px; border-radius:150px; overflow:hidden; background-color:rgba(100,100,100,0.15); backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px); display: flex; align-items: center; justify-content: center; box-shadow:80px 80px 80px rgba(0,0,0,0.2) }
.play-stop-button .inner { position: relative; z-index:2; background-color:var(--accent-1); color:var(--text-color-light); width:260px; height:260px; overflow:hidden; border-radius:130px; display: flex; align-items: center; justify-content: center; text-align: center; transition:all 0.2s ease-out; -webkit-transition:all 0.2s ease-out; transform:scale(1); font-size:40px; font-weight:500 }
.play-stop-button .inner span { transition:opacity 0.2s linear; -webkit-transition:opacity 0.2s linear; opacity:1 }
.play-stop-button .video { position: absolute; z-index:1; top:50%; left:50%; margin:-130px 0 0 -130px; width:260px; height:260px; overflow:hidden; border-radius:130px; transition:all 0.2s ease-out; -webkit-transition:all 0.2s ease-out; transform:scale(0) }
.play-stop-button .video video { width:260px; height:260px; object-fit: cover; overflow:hidden; border-radius:130px; display:block; transition:all 0.5s ease-out; -webkit-transition:all 0.5s ease-out; opacity:0 }
.play-stop-button .video .video-progress {opacity:0; display: none; position:absolute; height:2px; bottom:0; left:0; right:0; z-index:12; background-color:rgba(255,255,255,0.3); overflow:hidden; border-radius:1px }
.play-stop-button .video .video-progress-inner { height:2px; width:50%; background-color:#ffffff }


#cursor.fv_cursor.loading .play-stop-button .inner { background-color:transparent; }
#cursor.fv_cursor.loading .play-stop-button .inner span { opacity:0 }
#cursor.fv_cursor.active_cursor .play-stop-button .inner {transform:scale(0.8); }
#cursor.fv_cursor.active_cursor .play-stop-button .video {transform:scale(0.8); }

#cursor.fv_cursor.active_cursor.playing .custom-cursor-content { transform:scale(1); }
#cursor.fv_cursor.active_cursor.playing .play-stop-button .video { transform:scale(1); }
#cursor.fv_cursor.active_cursor.playing .play-stop-button .video video { opacity:1 }

body.touch #cursor.fv_cursor.active_cursor.playing .play-stop-button .inner,
#cursor.fv_cursor.active_cursor.playing .play-stop-button .inner {transform:scale(0); }

body.touch .fv_cursor       { position:fixed; top:auto; bottom:-20px; left:50% }
body.touch .fv_cursor       { transition:none; -webkit-transition:none; } 
body.touch #cursor.fv_cursor.active_cursor .custom-cursor-content { transform:scale(0) }
body.touch #cursor.fv_cursor.active_cursor.loading .custom-cursor-content,
body.touch #cursor.fv_cursor.active_cursor.playing .custom-cursor-content { transform:scale(0.7) }
body.touch .play-stop-button .inner { background-color: transparent}
body.touch .play-stop-button .inner span { display: none }

.circular-progress        { position: absolute; top:0px; left:0px; z-index: 12; pointer-events: none; display:block; }
.circular-progress svg    { width:260px; height:260px; float:left; transform: rotate(-90deg); transform-origin: center; opacity:0; transition:all 0.5s ease-out }

#cursor.fv_cursor.active_cursor.playing .circular-progress svg #circle1 { transition:stroke-dashoffset 0.5s linear;  }
#cursor.fv_cursor.active_cursor.playing .circular-progress svg { opacity:1 }

#cursor.fv_cursor.active_cursor.playing .play-stop-button .video .video-progress {opacity: 1}

.background-video { position:absolute; display: flex; align-items: center; justify-content: center; top:50vh; left:0; right:0; height:100vh; z-index:9; opacity:0.25 }
.background-video video { display: block; width:50vw; height:50vw; border-radius:25vw; overflow:hidden; object-fit: cover }
.hero-video-spacer { height:50vh }

.fullscreen_video { display:block; width:100%; height:100vh; object-fit:cover; overflow: hidden }


/*********************************************** App nav ************************************************/

nav.appnav { display:flex; flex-direction:column; justify-content:space-between; align-items:center; gap:0px; width:70px; min-width:70px; border-right:1px solid rgba(0,0,0,0.1); padding:20px 0 }
.dark nav.appnav { border-color:rgba(255,255,255,0.15) }
nav a.logo { opacity:1 }
nav.appnav svg.img { width:40px; display: block; margin:0 auto 20px }

nav.appnav .line { display:flex; flex-direction:column; justify-content:flex-start; align-items:center; gap:12px; background:var(--pure-white); border-radius:50px; padding:5px }

.appnav-wrapper { display:flex; flex-direction:column; justify-content:space-between; align-items:center; gap:10px; }
nav.appnav .line a.active { border-bottom:none }
.dark nav.appnav .line { background-color:var(--bg-color-dark-pop) }

nav.appnav .line .line-links { display:flex; flex-direction:row; justify-content:flex-start; align-items:center; gap:20px; margin:5px 0 10px 0; white-space: nowrap; writing-mode: vertical-rl; text-orientation: mixed; }
nav.appnav .line .line-links a { text-decoration:none; color:currentColor; opacity:0.5 }
nav.appnav .line .line-links a:hover, nav.appnav .line .line-links a:focus, nav.appnav .line .line-links a:active,
nav.appnav .line .line-links a.active { opacity:1; font-weight:500 }
nav.appnav .line .line-links span { opacity:0.2 }

.dark nav.appnav .line .line-links a.active { color:var(--accent-1); }
.dark.faded nav.appnav .line .line-links a.active { color:var(--faded-text-color-dark) }


/*********************************************** Inbox ************************************************/

section.app                 { padding:0 }
.layout                     { position:relative; z-index: 13; display:flex; flex-direction:row; justify-content:flex-start; align-items:stretch; gap:0px; top:0; left:0; right:0; height:100vh }
.message-list               { max-width:500px; min-width:300px; overflow-x:hidden; overflow-y:scroll; -webkit-overflow-scrolling:touch; border-right:1px solid rgba(0,0,0,0.1) }
.dark .message-list         { border-color:rgba(255,255,255,0.1) }
.message-item               { border-top:1px solid rgba(0,0,0,0.1); border-left:2px solid transparent; cursor:pointer; opacity:1; transition:all 0.25s ease-out }
.message-item.active        { border-left-color:#000000; background-color:rgba(255,255,255,0.2); opacity:1; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.dark .message-item         { border-top:1px solid rgba(255,255,255,0.1) }
.dark .message-item.active  { border-left-color:#ffffff; background-color:rgba(40,40,40,0.3) }

.message-details-panel      { max-width:600px; opacity:0; position:relative; transition:opacity 0.5s ease-out }
.message-details-panel.active { opacity:1 }

.caller-details-panel       { max-width:400px; position:absolute; top:0; right:0; bottom:0; transition:opacity 0.5s ease-out; }

.call-record { display:flex; flex-direction:row; justify-content:space-between; align-items:center; gap:24px }

.caller-details-container,
.message-details-container  { position:relative; height:100%; overflow-x:hidden; overflow-y:scroll; -webkit-overflow-scrolling:touch; }
.full-width-container       { overflow-x:hidden; overflow-y:scroll; -webkit-overflow-scrolling:touch; }

#audio { min-width:100%; display:block; }

/* Visualizer */
.vis { position: relative; z-index:2; width:100%; height:300px; border-radius:16px; overflow: hidden; cursor:pointer; borderr:1px solid rgba(0,0,0,0.05); }
.dark .vis { border-color:rgba(255,255,255,0.1) }
.vis .container { position: absolute; top:25%; left:var(--spacer-m); right:var(--spacer-m); bottom:25%; z-index:2; pointer-events:none }
.vis audio { width: calc( 100% - 40px ); position: absolute; z-index: 3; bottom:20px; left:20px; opacity:1 }

.vis #vis_caller_details { position:absolute; top:0; left:0; right:0; pointer-events:none }
.vis #message_details_summary { position:absolute; bottom:0; left:0; right:0; pointer-events:none }

.vis-line { position:absolute; top:0; bottom:0; left:0; width:0; background: linear-gradient(90deg,rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.05) 100%); z-index:-1; pointer-events: none}
.dark .vis-line { background: linear-gradient(90deg,rgba(255,255,255, 0) 0%, rgba(255,255,255, 0.05) 100%);}

.vis-progress { height:2px; background-color:#000000; width:50% }
.dark .vis-progress { background-color:#ffffff }


/* Mobile ctas */

.mobile-cta-container       { position:absolute; left:0; right:0; bottom:0; padding-bottom:24px; z-index:100; display:flex; flex-direction:row; justify-content:center; align-items:center; /*height:1px*/ }
.mobile-cta-container       { background-image: linear-gradient(0deg,rgba(248, 248, 248, 1) 0%, rgba(248, 248, 248, 0) 100%); }
.mobile-cta-item-wrap       { display:flex; flex-direction:row; justify-content:space-between; align-items:center; transition:all 0.2s ease-out; -webkit-transition:all 0.2s ease-out }
.mobile-cta-items           { display:flex; flex-direction:row; justify-content:space-evenly; align-items:center; white-space: nowrap; margin:0 auto; padding:0; gap:4px }

.mobile-cta                 { display:flex; flex-direction:row; justify-content:flex-start; align-items:center; white-space:nowrap; border-radius:30px; background-color:var(--section-bg-color-dark); color:var(--text-color-dark); text-decoration:none; padding:var(--mobile-cta-padding); overflow:hidden; position:relative; z-index:2 }
.mobile-cta .icon           { display:flex; flex-direction:row; justify-content:center; align-items:center; border-radius:30px; overflow:hidden; position:relative; margin:var(--mobile-cta-margin) }
.mobile-cta .icon svg       { width:var(--mobile-cta-size); height:var(--mobile-cta-size) }
.mobile-cta-icon-stroke     { stroke:var(--text-color-dark) }
.mobile-cta .label          { display:flex; padding:var(--mobile-cta-margin); line-height:var(--mobile-cta-size); box-sizing:border-box; font-weight:500; transition:all 0.2s ease-out; overflow:hidden; }

.dark .mobile-cta-container { background-image: linear-gradient(0deg,rgba(20, 29, 30, 1) 0%, rgba(20, 29, 30, 0) 100%); }
.dark .mobile-cta           { background-color:var(--section-bg-color-light); color:var(--text-color-light); }
.dark .mobile-cta-icon-stroke{ stroke:var(--text-color-light) }

.mobile-cta .off-state            { transition:all 0.2s ease-out; transform:scale(1,1) }
.mobile-cta .on-state             { transition:all 0.2s ease-out; transform:scale(0,0); position:absolute }

.mobile-cta.active .off-state     { transform:scale(0,0) }
.mobile-cta.active .on-state      { transform:scale(1,1) }

.mobile-cta.active .hide-on-active { display:none }

.mobile-cta:after { content:""; display:'block'; z-index:-1; position:absolute; top:50%; left:50%; margin:-50px 0 0 -50px; width:100px; height:100px; border-radius:50px; overflow:hidden; background-color:#fff; opacity:0.5; transform:scale(0,0) }
.mobile-cta:hover:after { transform:scale(1,1); opacity:0.2; transition:all 0.5s ease-out; }

.dark .mobile-cta:after { background-color:var(--accent-2) }
.mobile-cta:hover:after { opacity:0 }

/* Mobile overlay */
.mobile-overlay             { position:fixed; z-index:99; top:0; left:0; right:0; bottom:0; display:flex; pointer-events:none; flex-direction:column; justify-content:flex-end; align-items:center; background-color:rgba(0,0,0,0); padding:10px 30px 90px 30px; transition:all 0.3s ease-out }
.mobile-overlay-backdrop    { position:absolute; z-index:100; top:0; left:0; right:0; bottom:0 }
.mobile-menu                { position:relative; z-index:101; background-color:#F0F0F0; border-radius:24px; width:100%; max-width:400px; padding:4px; opacity:0; transform:translateY(20px) scale(0.95,0.95); transition:all 0.08s ease-out }

body.mobile-menu-active .mobile-overlay { pointer-events:unset; background-color:rgba(0,0,0,0.4);}
body.mobile-menu-active .mobile-menu    { opacity:1; transform:translateY(0) scale(1,1); }

body.mobile-menu-active.dark .mobile-overlay { background-color:rgba(50,50,50,0.9) }

.mobile-menu-line   { background-color:#ffffff; border-radius:20px }
.mobile-menu-line a { display:block; text-decoration:none; color:currentColor }

.mobile-menu nav { justify-content:space-between; }

.dark .mobile-menu { background-color:var(--section-bg-color-dark) }
.dark .mobile-menu-line { background-color:var(--bg-color-dark-pop) }

.dark .active .svg-icon-stroke,
.svg-icon-stroke { stroke:#000000 }

.active .svg-icon-stroke,
.dark .svg-icon-stroke { stroke:#ffffff }

.menu .off-state { transition:all 0.2s ease-out; transform:scale(1,1); width:16px; height:16px }
.menu .on-state { transition:all 0.2s ease-out; transform:scale(0,0); position:absolute; width:16px; height:16px }

.menu.active .off-state { transform:scale(0,0) }
.menu.active .on-state { transform:scale(1,1) }

.integration-header { display:flex; flex-direction:row; justify-content:space-between; align-items:center; gap:24px }
.integration-header div { display:flex; flex-direction:row; justify-content:flex-start; align-items:center; gap:16px }
.integration-header div.stack { display:flex; flex-direction:column; justify-content:flex-start; align-items:flex-start; gap:2px }

.tile-icon { padding:2px; border:1px solid rgba(0,0,0,0.1); border-radius:7px; display:block !important; width:60px; min-width:60px }
.tile-icon img { margin:0 !important }

.dark .tile-icon { border-color:rgba(255,255,255,0.15) }

.hide-on-dark { display:block }
.hide-on-light { display:none }

.dark .hide-on-dark { display:none }
.dark .hide-on-light { display:block }

.toggle         { display:block; text-decoration: none; color:var(--text-color-light); padding:2px; border-radius:20px; overflow:hidden; transition:all 0.2s ease-out; border:1px solid rgba(0,0,0,0.5) }
.toggle span    { display:block; text-decoration: none; background-color:var(--text-color-light); width:var(--toggle-sizer); height:var(--toggle-sizer); border-radius:var(--toggle-sizer); text-align:center; line-height:var(--toggle-sizer); margin-right:var(--toggle-sizer); transition:all 0.2s ease-out }

.toggle:hover { background-color:#eee }

.toggle.active { background-color:var(--text-color-light); color:var(--text-color-dark) }
.toggle.active span { background:var(--text-color-dark); margin-left:var(--toggle-sizer); margin-right:0 }

.dark .toggle { color:var(--text-color-dark); border-color:rgba(255,255,255,0.5) }
.dark .toggle:hover { background-color:rgba(255,255,255,0.1) }
.dark .toggle span { background-color:var(--text-color-dark); }
.dark .toggle.active { background-color:var(--text-color-dark); color:var(--text-color-light) }
.dark .toggle.active span { background:var(--text-color-light); }

/*********************************************** Animated border ************************************************/

.animated-stroke {
  background: linear-gradient(var(--section-bg-color-dark), var(--section-bg-color-dark)) padding-box, linear-gradient(
        var(--angle),
        #ffffff,
        var(--section-bg-color-dark)
      ) border-box;
  animation: 4s rotate linear infinite;
}

.animated-stroke-orig {
  background: linear-gradient(#131219, #131219) padding-box, linear-gradient(
        var(--angle),
        #070707,
        #687aff
      ) border-box;
  animation: 4s rotate linear infinite;
}

@keyframes rotate {
  to {
    --angle: 360deg;
  }
}

@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

/*********************************************** Layout Media Queries ************************************************/

body.ios .hideonios { display:none !important }

@media all and (max-width:600px){

  :root {

    --spacer-xxl:170px;
    --spacer-xl:50px;
    --spacer-l: 30px;
    --spacer-m: 20px;
    --spacer-s: 15px;

    --border-radius:8px;
  }

  header          { padding:30px }
  footer          { padding-bottom:var(--spacer-xl) }
  footer svg.img,
  header svg.img  { width:60px }

  .page-menu a    { padding:30px }
  section         { padding:0 30px }
  section .page-menu { margin:0 -30px }

  h1.display      { font-size:13vw }
  h1              { font-size:28px }
  h2              { font-size:24px }
  h3              { font-size:20px }
  h4              { font-size:18px }
  p               { font-size:16px; line-height:1.5em }

  header {flex-direction:column; align-items:stretch; flex-wrap:wrap}
  nav { margin:0 -20px; padding:0 20px; border-bottomm:1px solid rgba(0,0,0,0.1); margin-top:20px; flex-grow: 1; align-items: flex-start; justify-content: flex-start;}
  nav a { margin-bottom:-1px; padding:5px 0; font-size:14px !important }
  .dark nav { border-bottom-color:rgba(255,255,255,0.1) }

  .ts-m           { font-size:14px; line-height:1.5em }
  .ts-s           { font-size:12px; line-height:1.25em }
  .ts-xs          { font-size:10px; line-height:1em }

  .ta-left-mobile{ text-align:left; }

  .flexgrid .cell.col-sm-1        { width:25%; }
  .flexgrid .cell.col-sm-2        { width:50%; }
  .flexgrid .cell.col-sm-3        { width:75%; }
  .flexgrid .cell.col-sm-4        { width:100%; }
  .flexgrid .cell.col-sm-33        { width:33.33%; }

  .flexwrap                       { -webkit-overflow-scrolling:touch; white-space: nowrap; overflow-x: scroll; margin-left:-30px; margin-right:-30px; padding-left:0; padding-bottom:0; }
  .flexwrap .flexgrid             { flex-wrap: nowrap; padding-left:30px; padding-right: 28px; padding-bottom:20px }
  .flexwrap .flexgrid .cell       { flex-grow:0; min-width: 75vw }
  .flexwrap .flexgrid .cell .cc   { margin-right:1px }
  .flexwrap .flexgrid.spaced      { margin:0 }
  .flexwrap .flexgrid.spaced .cell .cc { padding-right:0; padding-left:0 }

  .dark #section-secondary .flexwrap.case-study-container,
  .flexwrap.case-study-container { background-color:transparent }
  .flexwrap .flexgrid.cards .cell .cc { padding:var(--spacer-l); margin:0 20px 0 0 }

  .flexwrap.narrow .flexgrid .cell { flex-grow:0; min-width: 45vw }
  .flexwrap.small .flexgrid .cell  { flex-grow:0; min-width: 25vw }

  .flexwrap .flexgrid.project-list { overflow:auto }
  .flexwrap .flexgrid.project-list .project-tile a,
  .flexwrap .flexgrid.project-list .project-tile img,
  .flexwrap .flexgrid.project-list .project-tile video { border-radius:0; overflow:hidden; }

  .flexwrap .flexgrid.project-list .cell:first-child .project-tile a,
  .flexwrap .flexgrid.project-list .cell:first-child .project-tile img,
  .flexwrap .flexgrid.project-list .cell:first-child .project-tile video { border-radius:var(--border-radius) 0 0 var(--border-radius) }

  .flexwrap .flexgrid.project-list .cell:last-child .project-tile a,
  .flexwrap .flexgrid.project-list .cell:last-child .project-tile img,
  .flexwrap .flexgrid.project-list .cell:last-child .project-tile video { border-radius:0 var(--border-radius) var(--border-radius) 0 }

  .contextmenu-wrap { top:auto; bottom:44px }
  
  .scrollspy-anchor-wrap  { position:fixed; z-index:100; display:block; margin-left:0; left:34px; right:34px; bottom:24px; top:auto; background-color: rgba(220,220,220, 0.6); border-radius: 50px; overflow: hidden; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding:5px 10px; transition:all 0.2s ease-out; -webkit-transition:all 0.2s ease-out }
  .scrollspy-anchors      { display:flex; flex-direction:row; justify-content:space-evenly; align-items:center; white-space: nowrap; transform:rotate(0deg) translate3d(0,0,0); transform-origin: bottom left; margin:0 auto; padding:5px 0; gap:0px }
  .scrollspy-anchor-wrap.hidden { bottom:-100px }

  .scrollspy-anchors a        { color:var(--text-color-light); padding:6px 12px; border-radius:30px; opacity:1; font-size:11px }
  .scrollspy-anchors a.active { color:var(--text-color-dark); background-color:var(--accent-dark-1) }
  .scrollspy-anchors span     { display:none }

  .dark .scrollspy-anchor-wrap { background-color: rgba(70,70,70,0.5); }
  .dark .scrollspy-anchors a        { color:var(--text-color-dark) }
  .dark .scrollspy-anchors a.active { color:var(--text-color-light); background-color:var(--accent-1) }

  .hideonmobile { display:none !important }
  .hideondesktop { display:block !important }

  .flexgrid.playlist .cell .cc svg.icon,
  .flexgrid.playlist .cell .cc img{ margin-bottom:20px }

  .flexwrap .project-tile span { left:10px; }
  .project-tile span { opacity:1 }
  .page-menu a p span.meta { font-size:8px }

  .related-project { top:50px; left:10px; right:10px; bottom:50px }
  .playlist-container { border-radius:var(--border-radius) }
  .rounded-container { margin:0 20px 10px 20px; border-radius:var(--border-radius); overflow:hidden; }

  .marquee .strip .tile   { min-width:100px; flex-grow:0 }
  .marquee .strip .tile img { width:70px }

  @keyframes marquee-move-text { to { transform: translateX(-900px); } }

  #integrations-block { background-size:90% auto }
  #integrations-block .logos.light {display: flex }
  #integrations-block .logos.dark {display:none }

  .dark #integrations-block .logos.light {display: none }
  .dark #integrations-block .logos.dark {display:flex }

  #integrations-block .logos { height:80px; margin-top:60px; margin-bottom:40px; flex-direction:row; justify-content:flex-start; align-items:center; white-space: nowrap; gap:10px }
  #integrations-block .logos img { border-radius:4px; width:60px !important; position:static }


  /* Inbox */
  .layout { flex-wrap:nowrap; overflow-x:scroll; overflow-y:hidden; -webkit-overflow-scrolling:touch }
  .message-details-panel { min-width:100vw }
  .message-list {  min-width:100vw; max-width:100vw }

  nav.appnav { display:none }
  #mobile-menu.contextmenu-wrap { display:flex; }

  .message-container { border-radius:16px; overflow: hidden; margin:30px 0; background-color:#F0F0F0; border:1px solid rgba(0,0,0,0.1) }
  .dark .message-container { border-color:rgba(255,255,255,0.1) }
  .message-list { border:none; padding:10px; max-width:100% }
  .message-item:first-child { border-top:none }
  .message-item,
  .message-item.active { border-left-style:none; }
  .message-item.active { border-left-style:none; background-color:var(--pure-white) }

  .dark .message-container { background-color:var(--bg-color-dark-pop) }
  .dark .message-item.active { background-color:rgba(255,255,255,0.05) }

  .tile-icon { width:48px; min-width:48px; }
}

@media all and (min-width:601px) and (max-width:1024px){

  .flexgrid .cell.col-md-1        { width:25% }
  .flexgrid .cell.col-md-2        { width:50% }
  .flexgrid .cell.col-md-3        { width:75% }
  .flexgrid .cell.col-md-4        { width:100% }

  .ta-left-tablet                 { text-align:left; }
  .hideontablet { display:none !important }

  h1.display { font-size:9vw }

  .rounded-container { margin:20px }

  #integrations-block { background-size:80% auto }
  #integrations-block .logos img { border-radius:4px }

  #integrations-block .logos img.img1 { top:-230px; left:50px; width:50px  }
  #integrations-block .logos img.img2 { top:-140px; left:20px; width:70px }
  #integrations-block .logos img.img3 { top:0px; left:0; width:70px  }
  #integrations-block .logos img.img4 { top:120px; left:20px; width:70px  }
  #integrations-block .logos img.img5 { top:240px; left:50px; width:50px  }

  #integrations-block .logos img.img6 { top:-230px; right:50px; width:50px  }
  #integrations-block .logos img.img7 { top:-140px; right:20px; width:70px }
  #integrations-block .logos img.img8 { top:0px; right:0; width:70px  }
  #integrations-block .logos img.img9 { top:120px; right:20px; width:70px  }
  #integrations-block .logos img.img0 { top:240px; right:50px; width:50px  }

}

@media all and (min-width:1025px){
    .hideondesktop { display:none !important }
}


@media all and (min-width:2001px) {

  .page { margin-top:60px; margin-bottom:60px; border-radius:24px; overflow:hidden; max-width:2000px }
  body.dark { background-color:#292E2F }
  body.darkk,
  body { background-color:#E4E8E9 }

  h1.display { font-size:70px }

  section.app,
  .layout { height:90vh }

}

@media all and (max-height:750px){
    .vh100.valign { align-items: flex-start; padding:150px 0 50px; height:auto }
}/**** Forms ****/
:root {
  --form-width: 450px;
  --form-inner: 350px;
}

.form_steps 					{ background-color:rgba(255,255,255,0.25); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius:8px; border:1px solid rgba(0,0,0,0.1); overflow: hidden; position: relative; max-width:var(--form-width); display: flex; flex-wrap:nowrap; gap:0px; flex-direction: row; justify-content:flex-start; align-items:stretch; align-content:flex-start;}
.dark .form_steps 		{ background-color:rgba(30,30,30,0.25); border-color:rgba(255,255,255,0.15);  }

.form_wrap  					{ flex-grow:0; display: block; margin:0 auto; overflow: hidden; position: relative; min-width:100%; padding:50px; box-sizing: border-box  }
.form_wrap.off 				{ margin-left:-100%; }

.form_wrap, form 			{ width:auto; }

form 									{ padding:0 }
form .row 						{ position: relative; z-index: 1; margin:0 0 30px 0 }
form .row:last-child  { margin-bottom:0; }
form .row.actions			{ display: flex; flex-direction:row; flex-wrap:wrap; justify-content:space-between; align-items:center; position: relative; overflow:hidden }

form .row_multi label { top:0; margin-top:16px; }
form .row_multi label.on { margin-top:-10px; }

form label 						{ font-size:14px; line-height: 10px; font-weight: 400; text-transform:none; position: absolute; top:50%; margin-top:-5px; left:0; z-index: 4; transition:all 0.2s; -webkit-transition:all 0.2s; opacity:0.5; cursor: pointer}
form label.on 				{ top:0; margin:-10px 0 0 0; font-size:12px; opacity:0.5; z-index: 4; }

form .input 					{ font-size:16px; color:currentColor; font-weight: 500; border:1px solid rgba(0,0,0,0.1); border-width:0 0 1px 0; background:transparent; border-radius:0; margin:0 0 1px 0; padding:10px 0; width:100%; outline:none; -webkit-transition:border-color 0.2s; transition:border-color 0.2s; position: relative; z-index: 3; box-sizing:border-box; }
.dark form .input 		{ border-color:rgba(255,255,255,0.2) }

form .input:focus 		{ border-color:#000000; border-width:0 0 2px 0; margin-bottom:0; }
.dark form .input:focus{ border-color:#fff; border-width:0 0 2px 0; margin-bottom:0; }

.dark form input.error,
form .input.error 		{ border-color:#ff0000;}

form button 				{ font-weight: 500; cursor: pointer; display: inline-block; line-height: 30px; border:none; border-radius:4px; min-width: 120px; text-align: center; float: right; outline: none; padding:8px 10px; background-image: linear-gradient(120deg, #333 25%, #555 37.5%, #ccc, #555 62.5%, #000 75%); background-position: right center; background-size: 400% auto; color:var(--text-color-dark); transition: background-position 500ms ease-out; position: relative; }
form button:hover,
form button:focus 	{ background-color: #0B65FF }

.dark form button   { background-image: linear-gradient(120deg, #fff 25%, #aaa 37.5%, #777, #aaa 62.5%, #fff 75%); color:var(--text-color-light); }
.dark form button:hover, form button:hover { background-position:left center; }

form button.fullwidth { width:100%; padding-left:0; padding-right:0; }

.form_wrap.compact button { position: absolute; top:50%; right:2px; z-index: 2; transform: translateY(-50%); -webkit-transform:translateY(-50%); margin:0; }

form .option 				{ position:absolute; top:50%; margin-top:-6px; padding-left:0px; width:50% }
form .option label	{ padding-left:0px; position: relative; top:-3px; }
form .option input 	{ width:16px; height: 16px; outline: none }

form .options 			{ border:1px solid #eeeeee; border-width:0 0 1px 0; padding-bottom:5px; }
.options .option 		{ position: static; top:0; margin:0 0 10px 0; width:auto; }

.message 						{ position: absolute; top:5px; left:5px; right:5px; border-radius:4px; overflow: hidden; background:transparent; color:transparent; z-index: 2; transform:translateY(-120%); -webkit-transform:translateY(-120%); transition:all 0.2s; -webkit-transition:all 0.2s; cursor: default }
.message p 					{ padding:10px 30px; font-size:14px; color:inherit; text-align: center; font-weight:500; margin:0; }
.message.active 		{ transform:translateY(0); -webkit-transform:translateY(0); }
.message.error 			{ background: #ffffff; color:#ff0000; }
.message.success 		{ background: #00AC1F; color:#ffffff; }
.message p a 				{ color:currentColor; text-decoration: underline;}

.message.fixed  		{ position:fixed; top:10px; width:300px; left:50%; margin-left:-150px; z-index:90 }
.message.active 		{ box-shadow:0 20px 20px rgba(0,0,0,0.15) }

.dark .message.error { background-color:var(--faded-bg-color-dark); color:currentColor; }

form textarea.input { min-height: 120px; max-height:300px; line-height: 22px; min-width:200px; max-width:100%; padding:0 0 0 0; margin:10px 0 0 0; }
form textarea.input.tall { min-height: 300px; max-height: 600px; line-height: 30px; }

form button.danger { background-color: #D0011B; border-color:#D0011B; }
form button.danger.loading,
form button.danger:active { background-color: #FF5D5D; border-color:#FF5D5D; }

form button.loading,
form button:active { color:transparent; position: relative }
form button:active:before,
form button.loading:before { content:""; display:block; position:absolute; left:50%; top:50%; border-radius:50%; box-sizing:border-box; border:2px solid #ffffff; border-color:transparent #ffffff #ffffff #ffffff; width:16px; height:16px; margin:-8px 0 0 -8px; text-align:center; color:#ffffff; line-height: 10px; text-indent: 0; -webkit-animation:spin 1s linear infinite; -moz-animation:spin 1s linear infinite; animation:spin 1s linear infinite; }

.dark form button:active:before,
.dark form button.loading:before { border-color:transparent #000000 #000000 #000000;  }

@-moz-keyframes spin 		{ 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin 				{ 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }


/*************************************

Mobile

*************************************/

@media all and (max-width:600px){
	form label,
	form button,
	form .input { font-size:14px; }

	.form_steps { width:90vw }
	.form_steps .form_wrap 	{ padding:30px }

	form button { padding:5px; }
}






/*************************************

Tablet

*************************************/

@media all and (min-width:601px) and (max-width:1024px){

	form label,
	form button,
	form .input { font-size:16px; }

	form button { padding:5px; }
}






/*************************************

Desktop

*************************************/

@media all and (min-width:1025px) and (max-width:1440px){
	form label,
	form button,
	form .input { font-size:16px; }

	form button { padding:5px; }
}






/*************************************

Desktop HD

*************************************/

@media all and (min-width:1441px){
}