:root {
    --slate:#515b6c;
    --charcoal-grey:#292c31;
    --pale-grey:#e0e6ef;
}

@font-face {
    font-family:CircularStd-Book;
    src:url(./../fonts/CircularStd-Book.woff2) format("woff2"), url(./../fonts/CircularStd-Book.woff) format("woff")
}

@font-face {
    font-family:CircularStd-Medium;
    src:url(./../fonts/CircularStd-Medium.woff2) format("woff2"), url(./../fonts/CircularStd-Medium.woff) format("woff")
}

@font-face {
    font-family:CircularStd-Bold;
    src:url(./../fonts/CircularStd-Bold.woff2) format("woff2"), url(./../fonts/CircularStd-Bold.woff) format("woff")
}

/* Global backgrounds */
body {
    background-image:linear-gradient(to top, rgba(255, 255, 255, 0.5) 70%, rgba(231, 236, 243, 0.83) 108%), url(./../img/notes.svg), url(./../img/lines-bg.svg);
    background-position:left top, left 50%, 200% -200px;
    background-repeat:repeat-x, no-repeat, no-repeat;
    background-size:100% 100%, 310px 138px, 1320px 746px;
}

body#index {
    background-image:linear-gradient(to top, rgba(255, 255, 255, 0.5) 70%, rgba(231, 236, 243, 0.83) 108%);
    background-position:left top;
    background-repeat:repeat-x;
    background-size:100% 100%;
}

body#beta-index {
    background-image:linear-gradient(to top, rgba(255, 255, 255, 0.5) 70%, rgba(231, 236, 243, 0.83) 108%), url(./../img/notes.svg), url(./../img/lines-bg-left.svg), url(./../img/lines-bg.svg);
    background-position:left top, 55% 90px, -750px 350px, 600px -580px;
    background-repeat:repeat-x, no-repeat, no-repeat, no-repeat;
    background-size:100% 100%, 310px 138px, 1160px 686px, 1320px 746px;
}

body#about {
    background-image:linear-gradient(to top, rgba(255, 255, 255, 0.5) 70%, rgba(231, 236, 243, 0.83) 108%), url(./../img/about_head_bg_lg.jpg), url(./../img/lines-bg-left.svg), url(./../img/lines-bg.svg), url(./../img/lines-bg-left.svg), url(./../img/lines-bg.svg);
    background-position:left 700px, center top, -350px 2000px, 45% 780px, -700px 3000px, 220% 2400px;
    background-repeat:repeat-x, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
    background-size:100% 100%, auto, 1160px 686px, 1320px 746px, 1160px 686px, 1320px 746px;
}

body#careers {
    background-image:linear-gradient(to top, rgba(255, 255, 255, 0.5) 70%, rgba(231, 236, 243, 0.83) 108%), url(./../img/jobs_head_bg_lg.jpg), url(./../img/notes.svg), url(./../img/lines-bg-left.svg), url(./../img/lines-bg.svg);
    background-position:left 626px, center top, 10% 1570px, -700px 1900px, 80% 1418px;
    background-repeat:repeat-x, no-repeat, no-repeat, no-repeat, no-repeat;
    background-size:100% 100%, auto, 310px 138px, 1160px 686px, 1320px 746px;
}

body#vision {
    background-image:linear-gradient(to top, rgba(255, 255, 255, 0.5) 70%, rgba(231, 236, 243, 0.83) 108%), url(./../img/vision_head_bg_lg.jpg), linear-gradient(to top, #000 0%, #000 100%);
    background-position:left 700px, center top, left top;
    background-repeat:repeat-x, no-repeat, repeat-x;
    background-size:100% 100%, auto, 100% 699px;
}

body#press {
    background-image:linear-gradient(to top, rgba(255, 255, 255, 0.5) 70%, rgba(231, 236, 243, 0.83) 108%), url(./../img/notes.svg), url(./../img/lines-bg.svg);
    background-position:left top, left 50%, 200% -200px;
    background-repeat:repeat-x, no-repeat, no-repeat;
    background-size:100% 100%, 310px 138px, 1320px 746px;
}

/* iMac (xxl) */
@media (min-width:1921px) {
    body#careers {
        background-image:linear-gradient(to top, rgba(255, 255, 255, 0.5) 70%, rgba(231, 236, 243, 0.83) 108%), url(./../img/jobs_head_bg_xxl.jpg), url(./../img/notes.svg), url(./../img/lines-bg-left.svg), url(./../img/lines-bg.svg);
    }
    body#about {
        background-image:linear-gradient(to top, rgba(255, 255, 255, 0.5) 70%, rgba(231, 236, 243, 0.83) 108%), url(./../img/about_head_bg_xxl.jpg), url(./../img/lines-bg-left.svg), url(./../img/lines-bg.svg), url(./../img/lines-bg-left.svg), url(./../img/lines-bg.svg);
    }
}

/* Desktop (lg) */
@media (max-width:1440px) {
    body#beta-index {
       background-position:left top, 55% 90px, -800px 300px, 400px -620px;
    }
    body#press {
        background-position:left top, left 50%, 500px -20px;
    }
}

@media (max-width:1260px) {
    body {
        background-position:left top, left 45%, 500px 400px;
    }

    body#beta-index {
        background-position:left top, 120px 580px, -850px 870px, 400px -620px;
    }
    body#about {
        background-image:linear-gradient(to top, rgba(255, 255, 255, 0.5) 70%, rgba(231, 236, 243, 0.83) 108%), url(./../img/about_head_bg_md.jpg), url(./../img/lines-bg-left.svg), url(./../img/lines-bg.svg), url(./../img/lines-bg-left.svg), url(./../img/lines-bg.svg);
        background-position:left 888px, center top, -400px 2400px, -150px 880px, -800px 3600px, 300px 2800px;
    }

    body#careers {
        background-image:linear-gradient(to top, rgba(255, 255, 255, 0.5) 70%, rgba(231, 236, 243, 0.83) 108%), url(./../img/jobs_head_bg_md.jpg), url(./../img/notes.svg), url(./../img/lines-bg-left.svg), url(./../img/lines-bg.svg);
        background-position:left 847px, center top, 10% 2320px, -800px 500px, 50% 2318px;
    }
    body#press {
        background-image:linear-gradient(to top, rgba(255, 255, 255, 0.5) 70%, rgba(231, 236, 243, 0.83) 108%), url(./../img/notes.svg), url(./../img/lines-bg.svg);
        background-position:left top, 300% 50%, 30% 50px;
    }
}

@media (max-width:792px) {
    body {
        background-position:left top, left 32%, 150px 280px;
    }
    body#beta-index {
        background-position:left top, 120px 580px, -920px 670px, 0px -750px;
    }
    body#about {
        background-image:linear-gradient(to top, rgba(255, 255, 255, 0.5) 70%, rgba(231, 236, 243, 0.83) 108%), url(./../img/about_head_bg_sm.jpg), url(./../img/lines-bg-left.svg), url(./../img/lines-bg.svg), url(./../img/lines-bg-left.svg), url(./../img/lines-bg.svg);
        background-position:left 560px, center top, -400px 2000px, 0px 440px, -800px 2900px, 200px 2300px;
    }
    body#careers {
        background-image:linear-gradient(to top, rgba(255, 255, 255, 0.5) 70%, rgba(231, 236, 243, 0.83) 108%), url(./../img/jobs_head_bg_sm.jpg), url(./../img/notes.svg), url(./../img/lines-bg-left.svg), url(./../img/lines-bg.svg);
        background-position:left 456px, center top, left 1750px, -2000px -2000px, 100px 1550px;
    }

}

@media (max-width:576px) {
    body {
        background-position:left top, left 28%, 100px 230px;
    }
    body#beta-index {
        background-position:left top, 120px 580px, -920px 600px, 50px -700px;
    }
    body#careers {
        background-image:linear-gradient(to top, rgba(255, 255, 255, 0.5) 70%, rgba(231, 236, 243, 0.83) 108%), url(./../img/jobs_head_bg_xs.jpg);
        background-position:left 348px, center top;
        background-repeat:repeat-x, no-repeat;
        background-size:100% 100%, auto;
    }
}


/* Fonts */
h1 { font-family:CircularStd-Bold; }
nav, h2, h3, .btn-lg { font-family:CircularStd-Medium; }

h1 { color:var(--charcoal-grey); }
.highlight { color:var(--primary); }
.no-border { border:0 !important; }
.vertical-separator { width:1px; background-color:#e6e9ef;}
.gradient-bg { background-image:linear-gradient(to top, rgba(255, 255, 255, 0.5) 0%, #f5f7fa 108%); }
.gradient-bg-line-right { 
    background-image:linear-gradient(to top, rgba(255, 255, 255, 0.5) 0%, #f5f7fa 108%), url(./../img/lines-bg.svg);
    background-position:left top, 180% top;
    background-repeat:repeat-x, no-repeat;
    background-size:100% 100%, 1320px 746px;
}
.oval-icon { display:inline-block; width:96px; height:96px; border-radius:96px; line-height:96px; box-shadow:0 10px 20px 0 rgba(52, 66, 89, 0.1); background-color:var(--white); text-align:center; }
.nowrap { white-space:nowrap; }
.mh-60vh { min-height:60vh; }
.mh-90vh { min-height:90vh; }
.mh-100vh { min-height:100vh; }

/* Video Embed */
.video-wrapper { position:relative; top:-15px; }
.video-wrapper .overlay { position:absolute; left:0; top:0; }
.video-ipad-black-portrait .video-padding { padding:9.2% 14.2% 0% 14.2%; }
.video-ipad-white-landscape .video-padding { padding:5.2% 12% 0% 12% /*padding:4.4% 12% 0% 11.3%; */}
.video-ipad-black-landscape .video-padding { padding:7.2% 11.3% 0% 11.3%; }

/* Youtube Embed */
.youtube-container {
    position: relative;
    padding-bottom: 56.25%;
    /*padding-top: 30px;*/
    height: 0;
    overflow: hidden;
}

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

@media (min-height:1200px) {
    /* Wokaround: set minimum height to a number that is not taking too much space */
    /* TODO implement a nicer solution for that */
    .mh-60vh { min-height:600px; }
    .mh-90vh { min-height:900px; }
    .mh-100vh { min-height:900px; }
}

@media (min-width:1260px) and (max-height:800px) {
    /* Workaround: set minimum height to a number that is large enough to display all backgrounds */
    /* TODO implement a nicer solution for that */
    .mh-90vh { min-height:800px; }
    .mh-100vh { min-height:800px; }
}

/* Navbar */
.navbar-toggler { border:0; }
.navbar.navbar-shrinkable { padding-top:2rem; padding-bottom:2rem; }
.navbar.navbar-shrinkable.shrink { padding-top:0.5rem; padding-bottom:0.5rem; }

.navbar-shrinkable, .navbar-shrinkable .navbar-brand img {
    -moz-transition: all 0.25s ease-in-out;
    -o-transition: all 0.25s ease-in-out;
    -webkit-transition: all 0.25s ease-in-out;
    transition: all 0.25s ease-in-out;
}

.navbar-white-shadow {
    background-color:white;
    box-shadow:0 3px 2px rgba(52, 66, 89, 0.1);
}

body#index main,
body#beta-explanation main,
body#text-page main,
body#jobinfo main,
body#press main { padding-top:5rem; }
@media (max-width:1260px) {
    body#index main { padding-top:6rem; }
}

/* Footer */
footer { background-image:linear-gradient(to bottom, #31384f, #2a3146); color:var(--white); font-size:87.5%; position:relative; z-index:300 }
footer h5 { font-size:1rem; margin:10px 0 15px; font-family:CircularStd-Medium; }
footer a, footer p { opacity:0.7; }
footer li { line-height:1.71; margin-bottom:8px; }
footer li img { width:16px; margin-right:5px; }
footer a:link, footer a:visited { color:var(--white); }
footer a:hover, footer a:active { opacity:0.5; text-decoration:none; }
#footer-logo { margin-bottom:20px; }
#footer-copyright { margin-top:35px; }

/* About */
#about-head { text-align:center; color:var(--white); margin:250px 0 200px; height:300px; }
#about-head h1 { color:var(--white); font-size:5.5rem; }
#about-head p { font-size:1.5rem; max-width:740px; margin:0 auto; opacity:0.7; }
#about h2 { font-size:4.5rem; text-align:center; font-family:CircularStd-Bold; color:var(--charcoal-grey); }
#about .subhead { font-size:1.5rem; max-width:830px; margin:0 auto; text-align:center; }
#about-features h3 { color:var(--charcoal-grey); font-size:1.5rem; line-height:1.33;}
.reward { border-radius:8px; border:solid 1px #e8ecf2; height:120px; }
.reward-logo { float:left; width:30%; height:118px; border-right:1px solid #e8ecf2; text-align:center; line-height:118px; }
.reward-logo img { max-width:70%; max-height:70%; }
.reward-name { float:left; width:60%; height:118px; margin-left:5%; font-size:1.25rem; display:table; }
.reward-name div { display:table-cell; vertical-align:middle;}
.stats { height:100px; text-align:center; }
/* .stats .slick-active { border-left:1px solid #e8ecf2; } */
.stats .number { font-size:4rem; font-family:CircularStd-Bold; color:var(--charcoal-grey); display:block; line-height:80px; }
.stats .number img { display:inline; }
.stats .name { font-size:1.25rem; display:block; }
#about-slider { position:relative; height:80px; margin:0 0 6rem 0; }
#about-slider .slider.oval-icon.prev { position:absolute; left:0; top:10px; }
#about-slider .slider.oval-icon.next { position:absolute; right:0; top:10px; }
.slider.oval-icon { width:80px; height:80px; border-radius:80px; line-height:80px; cursor:pointer; }
.cursor-pointer { cursor:pointer; }
#about-career { 
    text-align:center; 
    background-image:linear-gradient(to top, rgba(255, 255, 255, 0.5) 0%, rgba(231, 236, 243, 0.83) 108%), url(./../img/lines-bg.svg);
    background-position:left top, 180% top;
    background-repeat:repeat-x, no-repeat;
    background-size:100% 100%, 1320px 746px; 
}
#about-career p { text-align:center; }

/* Index Page November 2020 */
.scroll-next { width:80px; height:80px; line-height:76px; text-align:center; border:1px solid var(--pale-grey); border-radius:80px; cursor:pointer; }
#index h1 { font-size:5.5rem; }
#index h2 { font-size:4.5rem; color:var(--charcoal-grey); font-family:CircularStd-Bold; }
#index .subhead { font-size:1.5rem; }
#index .subhead-small { font-size:1.25rem; }
.bg-index-first {
    background-image:url(./../img/notes.svg), url(./../img/lines-bg.svg);
    background-position:60% center, 120% -70px;
    background-repeat:no-repeat, no-repeat;
    background-size:310px 138px, 1320px 746px;
}
.bg-ipad-left-instrument-right {
    background-image:url(./../img/ipad-left@2x.png), url(./../img/instrument-right@2x.png), url(./../img/lines-bg-left.svg), url(./../img/notes.svg);
    background-position:-112px center, right 100px, -250px center, right 200px;
    background-repeat:no-repeat, no-repeat, no-repeat, no-repeat;
    background-size:594px 722px, 402px 652px, 1160px 686px, 310px 138px; 
}
.bg-our-library {
    background-image:url(./../img/lines-bg.svg), url(./../img/notes.svg);
    background-position:150% -100px, center 200px;
    background-repeat:no-repeat, no-repeat;
    background-size:1320px 746px, 310px 138px; 
}
.bg-personalize {
    background-image:url(./../img/lines-bg-left.svg), url(./../img/notes.svg);
    background-position:-250px top, 40% 50px;
    background-repeat:no-repeat, no-repeat;
    background-size:1160px 686px, 310px 138px; 
}
.bg-seamlessly {
    background-image:url(./../img/index-iphone-right@3x.png), url(./../img/index-ipad-right@3x.png), url(./../img/instrument-left.png), url(./../img/lines-bg-left.svg);
    background-position:97.5% 92%, right center, left 85%, -490px 85px;
    background-repeat:no-repeat, no-repeat, no-repeat, no-repeat;
    background-size:510px 340px, 430px 663px, 659px 322px, 1160px 686px;
}
.bg-annotate {
    background-image:url(./../img/hand-left@2x.png), /*url(./../img/cello-side.png),*/ url(./../img/notes.svg), url(./../img/lines-bg-left.svg);
    background-position:left bottom, /*right top,*/ 30% 100px, -50px bottom;
    background-repeat:no-repeat, /*no-repeat,*/ no-repeat, no-repeat;
    background-size:766px 779px, /*572px 682px,*/ 310px 138px, 1160px 686px;
}
.bg-automation {
    background-image:url(./../img/lines-bg.svg), url(./../img/notes.svg);
    background-position:150% -100px, center 200px;
    background-repeat:no-repeat, no-repeat;
    background-size:1320px 746px, 310px 138px; 
    padding-bottom:100px;
}
.bg-filter {
    background-image: linear-gradient(to top, rgba(255, 255, 255, 0.5) 0%, rgba(231, 236, 243, 0.83) 108%), url(./../img/lines-category.svg), url(./../img/notes.svg);
    background-position:left top, center 250px, 65% 40%;
    background-repeat:repeat-x, no-repeat, no-repeat;
    background-size:100% 100%, 1232px 1232px, 310px 138px; 
}
.bg-useful { 
    background-image:url(./../img/lines-useful-tools.svg);
    background-position:70% 80%;
    background-repeat:no-repeat;
    background-size: 1294px 627px;
}
.bg-print {
    background-image:url(./../img/print-bg@2x.png), url(./../img/notes.svg), url(./../img/lines-bg-left.svg);
    background-position:left 100px, 30% 150px, -200px -50px;
    background-repeat:no-repeat, no-repeat, no-repeat;
    background-size:772px 828px, 310px 138px, 1160px 686px;
}
.bg-bag {
    background-image:url(./../img/lines-bg.svg), url(./../img/notes.svg), linear-gradient(to top, rgba(255, 255, 255, 0.5) 0%, rgba(231, 236, 243, 0.83) 108%);
    background-position:right top, 50% 10%, left top;
    background-repeat:no-repeat, no-repeat, repeat-x;
    background-size:1320px 746px, 310px 138px, 100% 100%; 
}
.row-border-bottom {
    border-bottom:1px solid #e6e9ef;
}
#index-video { background-color:#001624; background-image:url(./../img/video-bg.jpg); background-repeat: no-repeat; background-position:top center; background-size:auto 100%; /* height:768px; */ }
@media (min-width:1921px) { #index-video { background-position:center center; background-size:100% auto; } }

#index-video .row { /*height:56.25vw;*/ min-height:768px; }
#index-video h2 { color:#FFF; font-size:5.5rem; }

#featured-in h3 { font-family:CircularStd-Medium; font-weight:normal; font-size:1.5rem; color:var(--charcoal-grey); }
#featured-in-with-arrows-wrapper { position:relative; padding:0 100px 0rem 100px; }
#featured-in-with-arrows-wrapper .slider.oval-icon.prev { position:absolute; left:0; top:50%; margin-top:-40px; }
#featured-in-with-arrows-wrapper .slider.oval-icon.next { position:absolute; right:0; top:50%; margin-top:-40px; }
#featured-in-with-arrows-wrapper .feature { text-align:center; }
@media (max-width:792px) {
    #featured-in h3 { font-size:1.125rem; }
    #featured-in-with-arrows-wrapper { padding:0 60px 0 60px; }
    #featured-in-with-arrows-wrapper .slider.oval-icon.prev { margin-top:-24px; }
    #featured-in-with-arrows-wrapper .slider.oval-icon.next { margin-top:-24px; }
}

.dark-bg { 
    background-image:url(./../img/dark-bg-lines.svg), url(./../img/notes.svg), linear-gradient(to bottom, #1b1f2c 0%, #1a1e2a 99%); 
    background-position:130% bottom, 70% 10%, left top;
    background-repeat:no-repeat, no-repeat, repeat-x;
    background-size:1318px 1036px, 310px 138px, 100% 100%;
    color:var(--white) !important; 
    overflow:hidden;
}
.dark-bg h2 { color:var(--white) !important; font-family:CircularStd-Bold; }
.dark-bg p { opacity: 0.7; }
.slider-arrow { display:inline-block; width:80px; height: 80px; box-shadow: 0 10px 20px 0 #151923; background-color:rgba(77, 84, 101, 0.4); border-radius:80px; text-align:center; line-height:80px; cursor:pointer; }
.slider-arrow:not(:nth-last-of-type(1)) { margin-right:2rem; }
#index .dark-bg .btn-outline-light { background-color:rgba(77, 84, 101, 0.4); }
#index .dark-bg .btn-outline-light:hover { background-color:#FFF; }
.negative-margin-top { margin-top:-200px; }
#useful-tools-bg { 
    background-image:url(./../img/metronome@2x.png), url(./../img/tuner@2x.png), url(./../img/recorder@2x.png)/*, url(./../img/lines-useful-tools.svg)*/; 
    background-position:left top, center top, 104% top/*, right bottom*/;
    background-repeat:no-repeat, no-repeat, no-repeat/*, no-repeat*/;
    background-size:361px 457px, 361px 539px, 388px 474px/*, 1294px 627px*/;
    height:530px; 
}

.timeline { position:relative; min-height:100px;}
.timeline-background { 
    position:absolute;
    margin:64px 0;
    width:100%;
    height:4px;
    border-radius:5px;
    background-color:rgba(202, 206, 216, 0.4);
}
.timeline-finished { background-color:var(--primary); height: 4px; border-radius:5px;}
.timeline .circle, .timeline-vertical .circle {
    margin:54px 0;
    display:inline-block;
    width: 24px;
    height: 24px;
    box-shadow: 0 5px 10px 0 rgba(52, 66, 89, 0.16);
    border: solid 2px var(--primary);
    background-color: var(--white);
    border-radius:24px;
}
.timeline .when { position:absolute; top:16px; left:0; display:block; width:70%; margin:0 15%; font-size:0.75rem; font-family:CircularStd-Bold; }
.timeline .what { position:absolute; top:96px; left:0; display:block; width:70%; margin:0 15%; font-size:0.875rem; }
.timeline .finished .when, .timeline-vertical .finished .when { color:var(--primary); }

.timeline-vertical { position:relative; height:280px; margin:3rem 0 0;}
.timeline-vertical .timeline-background { width:4px; height:100%; margin:0 24px;}
.timeline-vertical .vertical-items { padding:2px 0; }
.timeline-vertical .vertical-items div { height:34px; margin:26px 0; position:relative; }
.timeline-vertical .when { position:absolute; left:60px; top:4px; font-size:0.75rem; font-family:CircularStd-Bold; }
.timeline-vertical .what { position:absolute; left:60px; top:20px; font-size:0.875rem; }
.timeline-vertical .circle { position:absolute; left:13px; top:16px; margin:0; }

.category-select li { line-height:64px; border-radius: 4px; border:solid 1px #e6e9ef; font-size:1.25rem; color:var(--charcoal-grey); cursor:pointer; }
.category-select li img { margin:0 25px; }
.category-select li.active { border-color:var(--primary); color:var(--primary); }
.coming-soon { font-family:CircularStd-Bold; position:absolute; right:-40px; top:25px; padding:1rem 5rem 1rem 8rem; transform:rotate(-330deg); box-shadow:0 30px 20px 0 rgba(19, 22, 33, 0.6); background:#0073c8; }
.future-features { font-size:1.75rem; font-family:CircularStd-Bold; }

/* Vision */
#vision-head { color:var(--white); margin:100px 0 250px 0; height:350px; }
#vision-head h1 { color:var(--white); font-size:5.5rem; }
#vision-head p { font-size:1.25rem; opacity:0.8; }
#vision h2 { color:var(--charcoal-grey); font-size:4.5rem; font-family:CircularStd-Bold; }
#vision p { font-size:1.25rem; }
.vision-border-separator { width:1px; height:100%; background:#e6e9ef; margin:0 auto; }
.social-circle { display:inline-block; width:56px; height:56px; line-height:50px; text-align:center; border:1px solid #e6e9ef; border-radius:56px; margin-right:1rem;}
#vision .justify-content-center a { color:var(--slate); font-family:CircularStd-Bold;  font-size:1.5rem; font-weight:normal; }
#vision .justify-content-center a.active { color:var(--primary); border-bottom:2px solid var(--primary); }
.vision-feature { display:inline-block; margin:0 1rem 1rem; font-size:1.25rem; border-radius:8px; box-shadow:0 10px 20px 0 rgba(52, 66, 89, 0.1); background-color:var(--white); min-height:195px !important;}
.vision-feature img { margin-bottom:18px !important; display:inline-block; }
#vision-timeline { position:absolute; left:calc(50% - 4px); top:0; height:100%; width:2px; border-left:2px dashed var(--primary); }
.vision-timeline-row { position:relative; }
.vision-timeline-item { box-shadow: 0 10px 20px 0 rgba(52, 66, 89, 0.1); background-color:var(--white); width:40%; font-size:1.125rem; }
.vision-timeline-item img { margin-left:-50px; width:26px; margin-right:24px; }
.vision-timeline-item.left { float:left; }
.vision-timeline-item.right { float:right; }
.vision-timeline-item h3 { font-size:2.5rem; font-family:CircularStd-Bold; color:var(--charcoal-grey); }
.vision-timeline-item li { margin:0.5rem 0 0.5rem 60px; text-indent:0; }
.vision-timeline-item .circle { position:absolute; top:50%; left:calc(50% - 4px - 16px); width:32px; height:32px; border-radius:32px; box-shadow: 0 10px 20px 0 rgba(52, 66, 89, 0.1); border: solid 2px var(--primary); background-color: var(--white); text-align:center; line-height:24px;}
.vision-timeline-item .circle .circle-filled { width:8px; height:8px; border-radius:8px; background-color:var(--primary); display:inline-block; }

/* Beta Main Landing Page*/
#beta-features h2 { font-size:1.25rem; color:var(--charcoal-grey); }
#beta-features img { margin-bottom:16px; }
.beta-subhead { color:var(--slate); font-size:1.25rem; }
#mlb2-2383129.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow label .label-description p { color:#52617e !important; font-size:0.875rem !important; }
#mlb2-2383129.ml-form-embedContainer .ml-form-embedWrapper.embedForm { max-width:500px !important; }
.ml-form-embedBody.ml-form-embedBodyHorizontal.row-form { padding:0 !important; }
.ml-form-align-center { margin:0; text-align:left !important; }
#mlb2-2383129 .form-control { border-radius:0 !important; border-right:0 !important; border-top:0 !important; border-left:0 !important; background:transparent !important; }
#mlb2-2383129 label { color:var(--slate) !important; font-weight:normal !important; font-size:0.875rem !important; }
#mlb2-2383129 * { font-family:CircularStd-Book !important; }
#mlb2-2383129 .ml-button-horizontal * { font-family:CircularStd-Medium !important; font-weight:normal !important; font-size:1.25rem; }

/* Beta Explanation */
#beta-explanation h1 { font-size:5.5rem; }
#beta-explanation .subhead, .explanation-list { font-size:1.5rem; }
#beta-explanation h2 { font-size:4.5rem; color:var(--charcoal-grey); font-family:CircularStd-Bold; }
#beta-explanation h2 small { font-size:2.5rem; }
.explanation-list img { margin-right:16px; }
.howto-step { border-radius:8px; box-shadow:0 10px 20px 0 rgba(52, 66, 89, 0.1); background-color:var(--white); }
.howto-step .step { font-size:4rem; font-family:CircularStd-Bold; color:var(--charcoal-grey); }
#beta-explanation h3 { font-size:1.25rem; color:var(--charcoal-grey); }
.section-border-bottom { border-bottom:1px solid #e6e9ef; }
.report-bugs p { font-size:1.25rem; }
#catching-bugs-outer { position:relative; }
#catching-bugs-outer .slider.oval-icon.prev { position:absolute; left:60px; top:calc(50% - 40px); }
#catching-bugs-outer .slider.oval-icon.next { position:absolute; right:60px; top:calc(50% - 40px); }
.gradient-lines-left {
    background-image:linear-gradient(to top, rgba(255, 255, 255, 0.5) 0%, rgba(231, 236, 243, 0.83) 108%), url(./../img/lines-bg-left.svg);
    background-position:left top, -600px -200px;
    background-repeat:repeat-x, no-repeat;
    background-size:100% 100%, 1160px 686px;
}
.no-gradient-lines-left {
    background-image:url(./../img/lines-bg-left.svg);
    background-position:-50px 120px;
    background-repeat:no-repeat;
    background-size:1160px 686px;
}

.feedback-bg {
    background-image:url(./../img/feedback-iphone.png), url(./../img/feedback-ipad.png) , url(./../img/feedback-ipad-pro.png), url(./../img/lines-bg-left.svg), url(./../img/notes.svg), url(./../img/lines-bg.svg);
    background-position:-192px center, right 60px, right -70px, -490px -240px, 80% 70%, 200% -200px;
    background-repeat:no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
    background-size:548px 359px, 284px 567px, 419px 643px, 1160px 686px, 310px 138px, 1320px 746px;
}

/* Careers */
#careers-head { position:relative !important; left:0; top:0; padding-top:234px; width:100%; height:734px; }
#careers-head h1 { color:var(--white); font-size:5.5rem; text-align:center; max-width:465px; }
#careers-form { margin-top:130px; width:100%; height:104px; line-height:100px; border-radius:6px; box-shadow:0 10px 20px 0 rgba(52, 66, 89, 0.1); background-color:var(--white); } 
#careers-keyword { outline:none; float:left; line-height:100px; min-width:50%; border:0; border-radius:0; font-size:1.125rem; color:var(--slate); padding:0 85px; background:url(./../img/zoom.svg) no-repeat 32px center; }
#careers-form .vertical-separator { float:left; height:104px;}
#careers-form-right { float:right; }
#careers-submit { float:left; margin:20px 32px 0 0;}
#careers-category { outline:none; float:left; line-height:50px; width:200px; height:50px; border:0; font-size:1.125rem; color:var(--slate); margin:25px 32px; -moz-appearance:none; -webkit-appearance:none; appearance:none; background:url(./../img/small-down.svg) no-repeat right center;}
#careers-category option { font-size:1rem; line-height:150%; padding:3px 0; }
#careers h2 { font-size:4.5rem; color:var(--charcoal-grey); font-family:CircularStd-Bold; }
.future-technology h3 { font-family:CircularStd-Medium; font-weight:normal; font-size:1.5rem; color:var(--charcoal-grey); }
.limit-heading-width-720 { max-width:720px; margin:0 auto; }
#careers .subhead { font-size:1.5rem; max-width:850px; margin:0 auto; }
#careers-slider1 { position:relative; padding:0;  }
#careers-slider1 img { margin:8px; }
#careers-slider1 .slider.oval-icon.prev { position:absolute; left:-40px; top:150px; z-index:999; }
#careers-slider1 .slider.oval-icon.next { position:absolute; right:-40px; top:150px; z-index:999; }
.job { border-radius:4px; box-shadow:0 10px 20px 0 rgba(52, 66, 89, 0.1); background-color:var(--white); cursor:pointer; }
.job h3 { color:var(--charcoal-grey); font-size:1.25rem;}
.job h3 a { color:var(--charcoal-grey); }
#career-results .row { border-top:1px solid #e6e9ef; line-height:32px; }
#career-results { border-bottom:1px solid #e6e9ef; font-size:1.25rem; }
#career-results .text-primary { text-align:right; }
#career-results a { color:var(--charcoal-grey) !important; font-size:1.5rem; }

/* Careers - Jobinfo */
#jobinfo h2 { color:var(--charcoal-grey); }
#jobinfo-head .category { color:var(--primary); margin-bottom:32px; font-size:1.25rem; }
#jobinfo-head .category img { margin-right:16px; }
.share-box { text-align:center; border-radius:4px; box-shadow:0 10px 20px 0 rgba(52, 66, 89, 0.1); background-color:var(--white); }
.share-box h2 { font-size:1.25rem; }
.share-button { display:inline-block; margin:32px 8px; text-align:center; line-height:48px; width:48px; height:48px; background-color:#f5f7fa; border-radius:48px; }
#jobinfo-content h2 { font-size:2rem; }
#jobinfo-content p, #jobinfo-content li { font-size:1.25rem; }
#jobinfo-similar h2 { font-size:4rem; font-family:CircularStd-Bold; }
#jobinfo-content li { margin:16px 0; list-style:none; }
#jobinfo-content ul li::before { content:"\2022"; color:var(--primary); font-weight:bold; display:inline-block; width:1em; margin-left:-1em; }

/* 404 page */
#error-404 { max-width:820px; margin:0 auto; }

/* Content */
#content { max-width:820px; margin:0 auto; }
#content h2 { font-size:2.5rem; text-align:center; font-family:CircularStd-Bold; color:var(--charcoal-grey); }

/* Imprint */
#imprint h1 { color:#2a2c32; }
#imprint h2 { font-size:1.25rem; color:var(--charcoal-grey); }
#imprint img { margin-bottom:16px; }

/* Privacy policy */
#privacy-policy h1 { color:#2a2c32; }
#privacy-policy h2 { font-size:1.5rem; margin-bottom:32px; color:var(--charcoal-grey);  }
#privacy-policy p, #privacy-policy li { font-size:1.25rem; }
#privacy-policy p strong { font-size:1.5rem; font-family:CircularStd-Medium; font-weight:normal; color:var(--charcoal-grey); }
#privacy-policy > p, #privacy-policy li { margin-bottom:32px; }

/* Terms and conditions */
#tos h1 { color:#2a2c32; }
#tos ol { counter-reset:item; margin-left:0px; }
#tos li:before { content:counters(item, ".") " "; counter-increment:item; margin-left:-40px; width:40px; display:inline-block; }
#tos ol ol, #tos ol li { list-style:none; margin-left:0; padding-left:0;}
#tos ol li { padding-bottom:32px; font-size:1.5rem; font-family:CircularStd-Medium; color:var(--charcoal-grey); }
#tos ol li ol { margin-top:32px; }
#tos ol li li, #tos ol li .normal-text { font-size:1.25rem; font-family:CircularStd-Book; color:var(--slate); }

/* Press */
.notes-bg-top-center {
    background-image:url(./../img/notes.svg);
    background-position:60% 100px;
    background-repeat:no-repeat;
    background-size:310px 138px;
}
.notes-bg-top-right {
    background-image:url(./../img/notes.svg);
    background-position:right center;
    background-repeat:no-repeat;
    background-size:310px 138px;
}
#press-head { min-height:80vh; }
#press h1 { font-size:5.5rem; }
#press h2 { font-size:4.5rem; color:var(--charcoal-grey); font-family:CircularStd-Bold; }
.press-subhead { font-size:1.5rem; }
.press-box { border-radius:4px; box-shadow: 0 10px 20px 0 rgba(52, 66, 89, 0.1); background-color:var(--white); }
.press-box h3 { font-size:1.25rem; }
.press-box h3 a { color:var(--charcoal-grey); text-decoration:none; }
.press-box-top h2 { font-size:1.5rem !important; }
.press-box-top h3 { font-size:1.125rem !important; color:#2a2c31; font-family:CircularStd-Bold; }
.press-library { border-radius:4px; box-shadow: 0 10px 20px 0 rgba(52, 66, 89, 0.1); background-color:var(--white); line-height:75px; }
.press-library a { display:block; text-decoration:none; background:url(./../img/small-right.svg) no-repeat right center; font-size:1.25rem; color:var(--charcoal-grey); }
.press-library img { margin:0 25px; }
#press button img { margin-left:1rem; }

@media (min-width:1260px) {
    #about .text-left * { text-align:left; }
    .max-width-400-lg { max-width:400px; }
    .feedback-bg { padding:10rem 0 6rem; }
}

@media (min-width:1441px) {
    .job h3 { min-height:48px; } /* 2 lines */
    .bg-bag .col-xl-6.sm-smaller-center { padding-right:100px; }
}

/* Desktop (lg) */
@media (max-width:1440px) {
    .job h3 { min-height:48px; }
    #beta-explanation h1 { font-size:5rem; }
    #about-features h3 { font-size:1.5rem; }

    .feedback-bg {
        background-image:url(./../img/feedback-iphone.png), url(./../img/feedback-ipad.png) , url(./../img/feedback-ipad-pro.png), url(./../img/lines-bg-left.svg), url(./../img/notes.svg), url(./../img/lines-bg.svg);
        background-position:-192px 360px, 1170px 120px, 1050px -20px, -490px -35px, 900px 500px, -5000px -5000px;
        background-repeat:no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
        background-size:548px 359px, 284px 567px, 419px 643px, 1160px 686px, 310px 138px, 1320px 746px;
        min-height:750px;
    }
}

@media (max-width:1500px) and (min-width:1260px) {
    #about-features div { padding-right:2.5rem; }
    #about-features h3 { min-height:64px; }

    .bg-index-first {
        background-position:60% center, 450px -200px;
    }
    .bg-ipad-left-instrument-right {
        background-position:-250px center, 105% 100px, -362px center, right 200px;
    }
    .bg-our-library {
        background-image:url(./../img/lines-bg.svg), url(./../img/notes.svg);
        background-position:500px -250px, center 200px;
        background-repeat:no-repeat, no-repeat;
        background-size:1320px 746px, 310px 138px; 
    }
    .bg-seamlessly {
        background-position:right 90%, 108% center, -250px 90%, -590px -50px;
    }
    .bg-annotate .mh-100vh { min-height:850px !important; }
    .bg-automation {
        background-position:350px -100px, center 200px;
    }
    .bg-print {
        background-image:url(./../img/print-bg@2x.png), url(./../img/notes.svg), url(./../img/lines-bg-left.svg);
        background-position:-119px 100px, 30% 150px, -200px -50px;
        background-repeat:no-repeat, no-repeat, no-repeat;
        background-size:772px 828px, 310px 138px, 1160px 686px;
    }
    .bg-bag {
        background-position:500px top, 50% 10%, left top;
    }

    #useful-tools-bg { 
         background-position:3% top, center top, right top/*, right bottom*/;
    }
}
/* Tablet (md) */
@media (max-width:1260px) {
    #about-features * { text-align:center; }
    #about-head { margin:350px 0 300px; height:300px; }

    .ml-form-align-center { text-align:center !important; }

    .explanation-list { text-align:center; }
    .explanation-list img { display:block; margin:0 auto; }

    #error-404 h1 { font-size:2rem; }    
    #redirecting h1 { font-size:2rem; }
    #error-404 a.btn-lg { font-size:1rem; }
    
    #beta-index h1 { max-width:500px; margin:0 auto; }
    .md-smaller-center { text-align:center; }
    .max-width-400-lg { width:100%; }

    .feedback-bg {
        background-image:url(./../img/feedback-iphone.png), url(./../img/feedback-ipad.png) , url(./../img/feedback-ipad-pro.png), url(./../img/lines-bg-left.svg), url(./../img/notes.svg), url(./../img/lines-bg.svg);
        background-position:-162px 440px, right 440px, right 310px, -275px 190px, 80% 670px, 500% 500%;
        background-size:360px 237px, 187px 374px, 277px 424px, 766px 452px, 204px 91px, 871px 492px;
        min-height:900px;
    }

    .no-gradient-lines-left {
        background-image:url(./../img/lines-bg-left.svg);
        background-position:-150px 340px;
        background-repeat:no-repeat;
        background-size:1160px 686px;
    }

    #careers-head { height:1034px; }
    #careers-head h1 { margin:100px 0 237px; }
    #careers-form { margin-top:0; height:200px; line-height:100px; } 
    #careers-form-right { float:none; }
    #careers-keyword { float:left; line-height:64px; width:100%; padding:0 85px; border-bottom:1px solid #e6e9ef; }
    #careers-form .vertical-separator { display:none; }
    #careers-submit { width:calc(100% - 2 * 16px); margin:16px; }
    #careers-category { line-height:32px; width:calc(100% - 2 * 32px); height:32px; margin:16px 32px 0; }
    #careers .subhead { font-size:1.25rem;}
    .job h3 { font-size:1.125rem;}
    #jobinfo-content h2 { font-size:1.5rem; }
    #jobinfo-content p, #jobinfo-content li { font-size:1rem; }
    .share-box a.btn { width:100%; }

    #press-head { min-height:0vh; }
    .notes-bg-top-center { background:none; }
    .notes-bg-top-right { background:none; }
    #press h1 { font-size:4.5rem; }
    #press h2 { font-size:4rem; }
    #press .gradient-bg-line-right { 
        background-image:linear-gradient(to top, rgba(255, 255, 255, 0.5) 0%, #f5f7fa 108%), url(./../img/lines-bg.svg);
        background-position:left top, -200px bottom;
        background-repeat:repeat-x, no-repeat;
        background-size:100% 100%, 1320px 746px;
    }

    .category-select li { display:inline-block; }
    .bg-index-first {
        background-position:15% center, -50px bottom;
    }
    .bg-ipad-left-instrument-right {
        background-image:url(./../img/instrument-right@2x.png), url(./../img/lines-bg-left.svg), url(./../img/notes.svg);
        background-position:right bottom, -250px center, 60% 70%;
        background-repeat:no-repeat, no-repeat, no-repeat;
        background-size:402px 652px, 1160px 686px, 310px 138px; 
        padding-bottom:650px;
        margin-bottom:-200px;
    }
    .bg-our-library {
        background-image:url(./../img/lines-bg.svg), url(./../img/notes.svg);
        background-position:-50px 110px, left 200px;
        background-repeat:no-repeat, no-repeat;
        background-size:1320px 746px, 310px 138px; 
    }
    .bg-personalize {
        background-image:url(./../img/lines-bg-left.svg);
        background-position:-200px 580px;
        background-repeat:no-repeat;
        background-size:1160px 686px; 
        padding-bottom:150px;
    }
    .bg-seamlessly {
        background-image:url(./../img/index-iphone-right@2x.png), url(./../img/ipad-center@2x.png), url(./../img/instrument-left-tablet.png), url(./../img/lines-bg.svg),url(./../img/notes.svg) ;
        background-position:25% bottom, 60% 90%, left top, -100px 400px, 35% 65%;
        background-repeat:no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
        background-size:525px 350px, 519px 625px, 580px 352px, 1320px 746px, 310px 138px;
        margin-top:-100px;
        padding-top:250px;
        padding-bottom:340px;
        margin-bottom:3rem;
    }
    .dark-bg { 
        background-image:url(./../img/dark-bg-lines.svg), url(./../img/notes.svg), linear-gradient(to bottom, #1b1f2c 0%, #1a1e2a 99%); 
        background-position:-200px 100px, left 40%, left top;
        background-repeat:no-repeat, no-repeat, repeat-x;
        background-size:1318px 1036px, 310px 138px, 100% 100%;
        padding:5rem 0; text-align:center;
    }
    .bg-annotate {
        background-image:url(./../img/hand-left@2x.png), url(./../img/notes.svg), url(./../img/lines-bg-left.svg);
        background-position:left bottom, 60% 450px, -150px 450px;
        background-repeat:no-repeat, no-repeat, no-repeat;
        background-size:690px 682px, 310px 138px, 1160px 686px;
        padding-bottom:480px;
    }
    .bg-automation {
        background-image:url(./../img/lines-bg.svg), url(./../img/notes.svg);
        background-position:-50px 450px, 5% 650px;
        background-repeat:no-repeat, no-repeat;
        background-size:1320px 746px, 310px 138px; 
        padding-bottom:180px;
    }
    .bg-print {
        background-image:url(./../img/print-bg@2x.png), url(./../img/notes.svg), url(./../img/lines-bg-left.svg);
        background-position:left 420px, 80% 480px, -200px 400px;
        background-repeat:no-repeat, no-repeat, no-repeat;
        background-size:700px 750px, 310px 138px, 1160px 686px;
        padding-bottom:650px;
    }
    .bg-print .row { min-height:500px !important; }
    .bg-bag {
        background-image:url(./../img/lines-bg.svg), url(./../img/notes.svg), linear-gradient(to top, rgba(255, 255, 255, 0.5) 0%, rgba(231, 236, 243, 0.83) 108%);
        background-position:0px 50%, left center, left top;
        background-repeat:no-repeat, no-repeat, repeat-x;
        background-size:1320px 746px, 310px 138px, 100% 100%; 
    }
    .negative-margin-top { margin-top:-200px; padding-top:10rem; }
    #useful-tools-bg { 
        background-image:url(./../img/tuner@2x.png), url(./../img/recorder@2x.png), url(./../img/metronome@2x.png), url(./../img/notes.svg); 
        background-position:right 128px, 10% 309px, 10% top, left 20%;
        background-repeat:no-repeat, no-repeat, no-repeat, no-repeat;
        background-size:292px 372px, 277px 355px, 253px 339px, 310px 138px;
        height:660px; 
    }

    #vision-timeline { left:calc(5% - 4px); top:0; }
    .vision-timeline-item { width:90%; margin:1.5rem 0; }
    .vision-timeline-item.left { float:right; }
    .vision-timeline-item.right { float:right; }
    .vision-timeline-item .circle { top:50%; left:calc(5% - 32px);}
    .vision-border-separator { width:100%; height:1px; margin:0 0 3rem 0; }

}
/* Smartphone (sm) */
@media (max-width:792px) {
    .sm-smaller-center { text-align:center; }
    .mh-90vh, .mh-100vh { min-height:0 !important; }
    
    #index h1 { font-size:3.125rem; }
    #index h2 { font-size:2.875rem; }
    #index .subhead { font-size:1rem; }
    #index .subhead-small { font-size:1rem; }
    #index-video h2 { font-size:3.125rem; }
    .future-features { font-size:1.25rem; }

    .bg-index-first {
        background-position:15% 60%, -250px 85%;
    }
    .bg-ipad-left-instrument-right {
        background-image:url(./../img/instrument-right2x.png), url(./../img/lines-bg-left.svg), url(./../img/notes.svg);
        background-position:110% bottom, -250px center, 55% 70%;
        background-repeat:no-repeat, no-repeat, no-repeat;
        background-size:227px 368px, 1160px 686px, 310px 138px; 
        padding-bottom:350px;
        margin-bottom:-200px;
    }
    .bg-our-library {
        background-image:url(./../img/lines-bg.svg), url(./../img/notes.svg);
        background-position:-500px -30px, left 180px;
        background-repeat:no-repeat, no-repeat;
        background-size:1320px 746px, 310px 138px; 
    }
    .bg-personalize {
        background-image:url(./../img/lines-bg-left.svg);
        background-position:-400px 200px;
        background-repeat:no-repeat;
        background-size:1160px 686px; 
        padding-bottom:100px;
    }
    .bg-seamlessly {
        background-image:url(./../img/index-iphone-right@2x.png), url(./../img/ipad-center@2x.png), url(./../img/instrument-left-tablet.png), url(./../img/lines-bg.svg),url(./../img/notes.svg) ;
        background-position:30% bottom, 75% 90%, -120px top, -300px 280px, 35% 60%;
        background-repeat:no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
        background-size:375px 250px, 361px 434px, 580px 352px, 1320px 746px, 218px 98px;
        margin-top:-100px;
        padding-top:350px;
        padding-bottom:280px;
        margin-bottom:2rem;
    }
    .dark-bg { 
        background-image:url(./../img/dark-bg-lines.svg), linear-gradient(to bottom, #1b1f2c 0%, #1a1e2a 99%); 
        background-position:-400px 100px, left top;
        background-repeat:no-repeat, repeat-x;
        background-size:1318px 1036px, 100% 100%;
    }
    .coming-soon { right:-80px; top:23px; padding:0.75rem 5rem 0.75rem 4.5rem; transform:rotate(-330deg); box-shadow:0 30px 20px 0 rgba(19, 22, 33, 0.6);}
    #cello-side { max-width:60% !important; }
    .bg-annotate {
        background-image:url(./../img/hand-left@2x.png), url(./../img/notes.svg), url(./../img/lines-bg-left.svg);
        background-position:left 280px, 80% 280px, -360px 80px;
        background-repeat:no-repeat, no-repeat, no-repeat;
        background-size:530px 524px, 310px 138px, 1160px 686px;
        padding-top:5rem;
        padding-bottom:530px;
    }
    #flute-right { max-width:50% !important; }
    .bg-automation {
        background-image:url(./../img/lines-bg.svg), url(./../img/notes.svg);
        background-position:-250px 200px, 5% 450px;
        background-repeat:no-repeat, no-repeat;
        background-size:1320px 746px, 310px 138px; 
        padding-bottom:200px;
    }
    .bg-filter {
        background-image: linear-gradient(to top, rgba(255, 255, 255, 0.5) 0%, rgba(231, 236, 243, 0.83) 108%), url(./../img/lines-category.svg);
        background-position:left top, center 250px;
        background-repeat:repeat-x, no-repeat;
        background-size:100% 100%, 1232px 1232px; 
    }
    .bg-print {
        background-image:url(./../img/print-bg@2x.png), url(./../img/notes.svg), url(./../img/lines-bg-left.svg);
        background-position:left 250px, 85% 300px, -200px 50px;
        background-repeat:no-repeat, no-repeat, no-repeat;
        background-size:533px 571px, 218px 96px, 1160px 686px;
        padding-top:5rem;
        padding-bottom:520px;
    }
    .bg-print .row { min-height:200px !important; }
    .bg-bag {
        background-image:url(./../img/lines-bg.svg), url(./../img/notes.svg), linear-gradient(to top, rgba(255, 255, 255, 0.5) 0%, rgba(231, 236, 243, 0.83) 108%);
        background-position:-200px 50%, left 35%, left top;
        background-repeat:no-repeat, no-repeat, repeat-x;
        background-size:1320px 746px, 310px 138px, 100% 100%; 
    }
    #useful-tools-bg {
        background-image:url(./../img/tuner@2x.png), url(./../img/recorder@2x.png), url(./../img/metronome@2x.png), url(./../img/notes.svg); 
        background-position:80% 110px, 20% 225px, 20% top, left 20%;
        background-repeat:no-repeat, no-repeat, no-repeat, no-repeat;
        background-size:183px 275px, 200px 244px, 183px 231px, 310px 138px;
        height:475px; 
    }

    #beta-index h1 { font-size:2.5rem; max-width:300px; margin:0 auto; }
    .beta-subhead { font-size:0.875rem; }
    #beta-features { font-size:0.875rem; }
    #beta-features h2 { font-size:1.125rem; }
    #mlb2-2383129.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow label .label-description p {  font-size:0.75rem !important; }
    #mlb2-2383129 .ml-input-horizontal { width:95% !important; }
    #mlb2-2383129 .ml-button-horizontal { width:95% !important; }
    .ml-form-embed { margin:0 !important; padding:0 !important; }
    .ml-form-align-center { text-align:left !important; }

    #beta-explanation h1 { font-size:3.125rem; }
    #beta-explanation .subhead, .explanation-list { font-size:1.125rem; }
    #beta-explanation h2 { font-size:2.875rem; }
    .howto-step .step { font-size:3rem; }
    #beta-explanation h3 { font-size:1.125rem; }
    #beta-explanation p { font-size:0.875rem;}
    #beta-explanation h2 small { font-size:1.5rem; }
 
    #imprint h1 { font-size:2.5rem; }
    #imprint h2 { font-size:1.125rem; }
    #imprint p { font-size:0.875rem;}

    #privacy-policy h1 { font-size:2.5rem; }
    #privacy-policy h2 { font-size:1.25rem; }
    #privacy-policy p, #privacy-policy li { font-size:1rem; }
    #privacy-policy p strong { font-size:1.25rem; }

    #tos h1 { font-size:2.5rem; }

    #about-head { margin:200px 0 150px; height:250px; }
    #about-head h1 { font-size:3.125rem; }
    #about-head p, #about .subhead { font-size:1.125rem; }
    #about h2 { font-size:2.875rem; }
    #about-features h3 { font-size:1.125rem; }
    #about-features p { font-size:0.875rem; }
    .stats .number { font-size:3rem; }
    .stats .name { font-size:1rem; }
    .reward-name { font-size:1.125rem; }
    .slider.oval-icon { width:48px; height:48px; border-radius:48px; line-height:48px; }

    #careers-head { height:664px; }
    #careers-head h1 { margin:0px 0 97px; font-size:3.125rem; }
    #careers-keyword, #careers-category { font-size:1rem; }
    #careers h2 { font-size:2.875rem; }
    #careers .subhead { font-size:1.125rem;}
    .future-technology h3 { font-size:1.125rem; }
    .future-technology p, .jobs span { font-size:0.875rem; }
    .job h3 { font-size:1.125rem;}
    #career-results .text-primary { text-align:left; }
    #career-results img { margin-bottom:0.5rem;}
    #career-results { font-size:0.875rem; }
    #career-results a { font-size:1rem; }

    #jobinfo-head .category { font-size:1.125rem; }
    #jobinfo-head h1 { font-size:2.5rem; }
    .share-box h2 { font-size:1.125rem; }
    #jobinfo-content h2 { font-size:1.25rem; }
    #jobinfo-content p, #jobinfo-content li { font-size:0.875rem; }
    #jobinfo-similar h2 { font-size:2.875rem; }

    #press h1, #press h2 { font-size:2.5rem; }
    .press-subhead { font-size:1rem; }
    .press-box { font-size:0.875rem; }
    .press-box h3 { font-size:1.125rem; }
    .press-box-top h2 { font-size:1.25rem !important; }
    .press-box-top h3 { font-size:1rem !important; }
    .press-library a { font-size:1rem; }
    #press .gradient-bg-line-right { 
        background-image:linear-gradient(to top, rgba(255, 255, 255, 0.5) 0%, #f5f7fa 108%), url(./../img/lines-bg.svg);
        background-position:left top, -400px bottom;
        background-repeat:repeat-x, no-repeat;
        background-size:100% 100%, 1320px 746px;
    }

    #vision-head h1 { font-size:3.125rem; }
    #vision-head p { font-size:1rem; }
    #vision h2 { font-size:2.875rem;}
    #vision p { font-size:1rem; }
    #vision .justify-content-center a { font-size:1.125rem; }
    .vision-feature {  font-size:1rem; }
    .vision-timeline-item { font-size:0.875rem; }
    .vision-timeline-item h3 { font-size:1.75rem; }

    #vision-timeline { left:calc(10% - 4px); top:0; }
    .vision-timeline-item { width:80%; margin:1.5rem 0; }
    .vision-timeline-item.left { float:right; }
    .vision-timeline-item.right { float:right; }
    .vision-timeline-item .circle { top:50%; left:calc(10% - 32px);}

}

/* Smartphone (xs) */
@media (max-width:576px) {
    #index h1 { font-size:2.875rem; }
    .bg-index-first {
        background-position:15% 60%, -400px 85%;
    }
    .bg-ipad-left-instrument-right {
        background-image:url(./../img/instrument-right.png), url(./../img/lines-bg-left.svg), url(./../img/notes.svg);
        background-position:110% bottom, -250px 20%, 55% 70%;
        background-repeat:no-repeat, no-repeat, no-repeat;
        background-size:227px 368px, 1160px 686px, 310px 138px; 
        padding-bottom:350px;
        margin-bottom:-150px;
    }
    .bg-personalize {
        background-image:url(./../img/lines-bg-left.svg);
        background-position:-180px 380px;
        background-repeat:no-repeat;
        background-size:773px 457px; 
    }
    .bg-seamlessly {
        background-image:url(./../img/index-iphone-right.png), url(./../img/ipad-center.png), url(./../img/instrument-left-tablet.png), url(./../img/lines-bg.svg),url(./../img/notes.svg) ;
        background-position:30% bottom, 75% 90%, -200px top, -250px 100px, 35% 60%;
        background-repeat:no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
        background-size:270px 180px, 257px 308px, 580px 352px, 1320px 746px, 218px 98px;
        margin-top:-100px;
        padding-top:300px;
        padding-bottom:180px;
        margin-bottom:2rem;
    }
    .bg-annotate {
        background-image:url(./../img/hand-left.png), url(./../img/notes.svg), url(./../img/lines-bg-left.svg);
        background-position:left 330px, 80% 330px, -360px 130px;
        background-repeat:no-repeat, no-repeat, no-repeat;
        background-size:530px 524px, 310px 138px, 1160px 686px;
        padding-top:5rem;
        padding-bottom:580px;
    }
    .bg-print {
        background-image:url(./../img/print-bg.png), url(./../img/notes.svg), url(./../img/lines-bg-left.svg);
        background-position:-100px 300px, 85% 350px, -200px 120px;
        background-repeat:no-repeat, no-repeat, no-repeat;
        background-size:450px 481px, 218px 96px, 1160px 686px;
        padding-top:5rem;
        padding-bottom:400px;
    }
    /* TODO other backgrounds */
    .bg-bag {
        background-image:url(./../img/lines-bg.svg), linear-gradient(to top, rgba(255, 255, 255, 0.5) 0%, rgba(231, 236, 243, 0.83) 108%);
        background-position:-400px 50%, left top;
        background-repeat:no-repeat, repeat-x;
        background-size:1320px 746px, 100% 100%; 
    }
    #beta-explanation h1 { font-size:2.875rem; }
    #beta-explanation h2 { font-size:2.5rem; }
    .report-bugs h3 { font-size:1.25rem; }

    #careers-head { height:484px; padding:50px 0 0px; }
    #careers-head h1 { margin:84px 0 89px; }
    #jobinfo-content h2 { font-size:1.125rem; }
}

/* zoom in some background images on very large screens */
@media (min-width:2400px) {
    .bg-ipad-left-instrument-right {
        background-image:url(./../img/ipad-left@2x.png), url(./../img/instrument-right@2x.png), url(./../img/lines-bg-left.svg), url(./../img/notes.svg);
        background-position:-146px center, right 100px, -250px center, right 200px;
        background-repeat:no-repeat, no-repeat, no-repeat, no-repeat;
        background-size:772px 938px, 522px 848px, 1160px 686px, 310px 138px; /* first two images scaled by factor 1.3 */
    }
    .bg-seamlessly {
        background-image:url(./../img/index-iphone-right@3x.png), url(./../img/index-ipad-right@3x.png), url(./../img/instrument-left.png), url(./../img/lines-bg-left.svg);
        background-position:97.5% 95%, right top, left 85%, -490px -85px;
        background-repeat:no-repeat, no-repeat, no-repeat, no-repeat;
        background-size:663px 442px, 559px 862px, 856px 418px, 1508px 891px; /* all images scaled by factor 1.3 */
    }
    .bg-annotate {
        background-image:url(./../img/hand-left@3x.png), url(./../img/notes.svg), url(./../img/lines-bg-left.svg);
        background-position:left bottom, 30% 100px, -50px bottom;
        background-repeat:no-repeat, no-repeat, no-repeat;
        background-size:909px 923px, 310px 138px, 1392px 823px; /* first and last image scaled by factor 1.3 */
    }
    .bg-print {
        background-image:url(./../img/print-bg@3x.png), url(./../img/notes.svg), url(./../img/lines-bg-left.svg);
        background-position:left center, 30% 150px, -200px -50px;
        background-repeat:no-repeat, no-repeat, no-repeat;
        background-size:926px 993px, 372px 165px, 1392px 823px;  /* all images scaled by factor 1.2 */
    }
}

/* Cookie Consent */
.cc-window{opacity:1;-webkit-transition:opacity 1s ease;transition:opacity 1s ease}.cc-window.cc-invisible{opacity:0}.cc-animate.cc-revoke{-webkit-transition:transform 1s ease;-webkit-transition:-webkit-transform 1s ease;transition:-webkit-transform 1s ease;transition:transform 1s ease;transition:transform 1s ease,-webkit-transform 1s ease}.cc-animate.cc-revoke.cc-top{-webkit-transform:translateY(-2em);transform:translateY(-2em)}.cc-animate.cc-revoke.cc-bottom{-webkit-transform:translateY(2em);transform:translateY(2em)}.cc-animate.cc-revoke.cc-active.cc-top{-webkit-transform:translateY(0);transform:translateY(0)}.cc-animate.cc-revoke.cc-active.cc-bottom{-webkit-transform:translateY(0);transform:translateY(0)}.cc-revoke:hover{-webkit-transform:translateY(0);transform:translateY(0)}.cc-grower{max-height:0;overflow:hidden;-webkit-transition:max-height 1s;transition:max-height 1s}
.cc-revoke,.cc-window{position:fixed;overflow:hidden;-webkit-box-sizing:border-box;box-sizing:border-box;font-family:Helvetica,Calibri,Arial,sans-serif;font-size:16px;line-height:1.5em;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:nowrap;flex-wrap:nowrap;z-index:9999}.cc-window.cc-static{position:static}.cc-window.cc-floating{padding:2em;max-width:24em;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.cc-window.cc-banner{padding:1em 1.8em;width:100%;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}.cc-revoke{padding:.5em}.cc-revoke:hover{text-decoration:underline}.cc-header{font-size:18px;font-weight:700}.cc-btn,.cc-close,.cc-link,.cc-revoke{cursor:pointer}.cc-link{opacity:.8;display:inline-block;padding:.2em;text-decoration:underline}.cc-link:hover{opacity:1}.cc-link:active,.cc-link:visited{color:initial}.cc-btn{display:block;padding:.4em .8em;font-size:.9em;font-weight:700;border-width:2px;border-style:solid;text-align:center;white-space:nowrap}.cc-highlight .cc-btn:first-child{background-color:transparent;border-color:transparent}.cc-highlight .cc-btn:first-child:focus,.cc-highlight .cc-btn:first-child:hover{background-color:transparent;text-decoration:underline}.cc-close{display:block;position:absolute;top:.5em;right:.5em;font-size:1.6em;opacity:.9;line-height:.75}.cc-close:focus,.cc-close:hover{opacity:1}
.cc-revoke.cc-top{top:0;left:3em;border-bottom-left-radius:.5em;border-bottom-right-radius:.5em}.cc-revoke.cc-bottom{bottom:0;left:3em;border-top-left-radius:.5em;border-top-right-radius:.5em}.cc-revoke.cc-left{left:3em;right:unset}.cc-revoke.cc-right{right:3em;left:unset}.cc-top{top:1em}.cc-left{left:1em}.cc-right{right:1em}.cc-bottom{bottom:1em}.cc-floating>.cc-link{margin-bottom:1em}.cc-floating .cc-message{display:block;margin-bottom:1em}.cc-window.cc-floating .cc-compliance{-webkit-box-flex:1;-ms-flex:1 0 auto;flex:1 0 auto}.cc-window.cc-banner{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.cc-banner.cc-top{left:0;right:0;top:0}.cc-banner.cc-bottom{left:0;right:0;bottom:0}.cc-banner .cc-message{display:block;-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;max-width:100%;margin-right:1em}.cc-compliance{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-line-pack:justify;align-content:space-between}.cc-floating .cc-compliance>.cc-btn{-webkit-box-flex:1;-ms-flex:1;flex:1}.cc-btn+.cc-btn{margin-left:.5em}
@media print{.cc-revoke,.cc-window{display:none}}@media screen and (max-width:900px){.cc-btn{white-space:normal}}@media screen and (max-width:414px) and (orientation:portrait),screen and (max-width:736px) and (orientation:landscape){.cc-window.cc-top{top:0}.cc-window.cc-bottom{bottom:0}.cc-window.cc-banner,.cc-window.cc-floating,.cc-window.cc-left,.cc-window.cc-right{left:0;right:0}.cc-window.cc-banner{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.cc-window.cc-banner .cc-compliance{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto}.cc-window.cc-floating{max-width:none}.cc-window .cc-message{margin-bottom:1em}.cc-window.cc-banner{-webkit-box-align:unset;-ms-flex-align:unset;align-items:unset}.cc-window.cc-banner .cc-message{margin-right:0}}
.cc-floating.cc-theme-classic{padding:1.2em;border-radius:0px}.cc-floating.cc-type-info.cc-theme-classic .cc-compliance{text-align:center;display:inline;-webkit-box-flex:0;-ms-flex:none;flex:none}.cc-theme-classic .cc-btn{border-radius:0px}.cc-theme-classic .cc-btn:last-child{min-width:140px}.cc-floating.cc-type-info.cc-theme-classic .cc-btn{display:inline-block}
.cc-theme-edgeless.cc-window{padding:0}.cc-floating.cc-theme-edgeless .cc-message{margin:2em;margin-bottom:1.5em}.cc-banner.cc-theme-edgeless .cc-btn{margin:0;padding:.8em 1.8em;height:100%}.cc-banner.cc-theme-edgeless .cc-message{margin-left:1em}.cc-floating.cc-theme-edgeless .cc-btn+.cc-btn{margin-left:0}
.cc-revoke { display:none !important; }


/*
    GitHub URL: https://github.com/gucastiliao/video-popup-js
*/

.videopopupjs{
    background-color:#000;
    background-color:rgba(0,0,0,0.8);
    width:100%;
    height:100%;
    position:fixed;
    top:0;
    left:0;
    z-index:99999;
    text-align: start!important;
    display:flex;
}
.videopopupjs--hide{
    -webkit-animation-duration: 0.2s;
    animation-duration: 0.2s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: videoPopupJsHide;
    animation-name: videoPopupJsHide;
}
.videopopupjs__close{
    width:45px;
    height:45px;
    cursor:pointer;
    display:block;
    margin-bottom:30px;
    color:rgba(255, 255, 255, 0.59);
    position:absolute;
    right:0px;
    top:0px; 
}
.videopopupjs__close:after{
    width:45px;
    height:45px;
    display:block;
    text-align:center;
    content:'X';
    font-family:'Verdana';
    line-height:3.3;
    font-size:13px;
}
.videopopupjs__close:hover{
    opacity:0.5;
}
.videopopupjs--animation{
    opacity: 0;
    -webkit-animation-duration: 0.2s;
    animation-duration: 0.2s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: videoPopupJs;
    animation-name: videoPopupJs;
}
.videopopupjs__content{
    margin:auto auto;
    height:54vw; /* 0.5625 * 96vw */
    /* height:500px; */
    width:96vw;
    max-height:900px !important;
    max-width:1600px !important;
}
@media (min-height:1200px) {
    .videopopupjs__content{
        max-height:1080px !important;
        max-width:1920px !important;
    }
}
.videopopupjs__content iframe{
    width:100%;
    height:100%;
}
.videopopupjs__block--notfound{
    position:absolute;
    top: 0;
    bottom: 0;
    margin: auto 0;
    width:100%;
    height:500px;
    background-color:#fff;
    text-align:center;
    vertical-align: middle;
    line-height: 500px;
    font-family:'Arial';
    font-size:20px;
}
@media(max-width: 768px){
    .videopopupjs__content{
        max-width:90%!important;
    }
}
@-webkit-keyframes videoPopupJs{
    0%{
        opacity: 0;
    }

    100%{
        opacity: 1;
    }
}

@keyframes videoPopupJs{
    0%{
        opacity: 0;
    }

    100%{
        opacity: 1;
    }
}

@-webkit-keyframes videoPopupJsHide{
    0%{
        opacity: 1;
    }

    100%{
        opacity: 0;
    }
}

@keyframes videoPopupJsHide{
    0%{
        opacity: 1;
    }

    100%{
        opacity: 0;
    }
}

/* Cookies Consent */
.cc_overlay_lock h1, .cookie-consent-preferences-dialog h1 { font-size:1.5rem !important; }
.cookie-consent-preferences-dialog h2 { font-size:1rem !important; }
.cc_dialog button.cc_b_ok, .light.cc_dialog button.cc_b_ok, 
.light.cookie-consent-preferences-overlay .cookie-consent-preferences-dialog .cc_cp_container .cc_cp_footer .cc_cp_f_save button {background-color:#0066b3 !important;}
.cc_dialog.interstitial{top:8vh !important;margin:0 auto !important;max-width:600px !important;}
.cc_css_reboot a {color:var(--primary) !important;}
.cc_b_cp { background:transparent!important;font-weight:normal!important;text-decoration:underline;color:#999 !important;}
@media (max-width:792px) { .cc_overlay_lock div { text-align:center; } }