@import url(https://symphonypro.net/static/bootstrap/css/bootstrap.css);

@font-face {font-family: proximanova-light; src: url(../ttf/proxima-nova/proximanova-light-webfont.ttf);}
@font-face {font-family: proximanova-regular; src: url(../ttf/proxima-nova/proximanova-regular-webfont.ttf);}
@font-face {font-family: proximanova-semibold; src: url(../ttf/proxima-nova/proximanova-semibold-webfont.ttf);}
@font-face {font-family: proximanova-bold; src: url(../ttf/proxima-nova/proximanova-bold-webfont.ttf);}
@font-face {font-family: SanFranciscoText-Regular; src: url(https://symphonypro.net/static/ttf/SanFranciscoText-Regular.otf);}





/* Force scrollbar on iOS ----- */

::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(0,0,0,.3);
    -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}

#sidebar.touch-enabled::-webkit-scrollbar-thumb  {
    border-radius: 4px;
    background-color: rgba(0,0,0,.3);
    -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}

#manual.touch-enabled::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(0,0,0,.3);
    -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}

/* ----- */

* {text-shadow: 0 1px 1px rgba(255,255,255,.3);}
html {background-color: #fafafa;}
body {
    background-color: #ffffff;
    color: #000000;
    font-family: "proximanova-regular", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
h1, h2, h3, h4, h5, h6 {font-family: "proximanova-semibold", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-weight: normal; color: #333; padding-top: 0px; line-height: 1.2em;}
h1 {font-size: 48px;}
p {font-family: "proximanova-light", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; color: #333; font-size: 18px; line-height: 24px; padding-bottom: 15px;}
p b {font-family: "proximanova-semibold", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-weight: normal;}
input, button {font-smoothing: antialiased;}
input[type="email"] {box-shadow: none;}
hr {margin: 60px 0 60px; border: 0; border-top: 1px solid #c6c6c6;}
hr.no-margin-top {margin-top: 0px;}
hr.faded {clear: both; float: none; width: 100%; height: 1px; margin: 1.5em 0 1.5em 0; border: none; background: #ddd; background-image: gradient(linear,left bottom,right bottom,color-stop(0, rgb(255,255,255)),color-stop(0.2, rgb(221,221,221)),color-stop(0.9, rgb(221,221,221)),color-stop(1, rgb(255,255,255)));}
hr.gradient {
  width:680px;
  margin-top: 50px;
  margin-bottom: 50px;
  height: 3px;
  border: 0;
  background-color: #c3c3c3;
  background-image: -webkit-gradient(linear, 0 0, 100% 0, from(#fafafa), to(#fafafa), color-stop(50%, #fff));
  background-image: -webkit-linear-gradient(left, #fafafa, #fff, #fafafa);
  background-image: -moz-linear-gradient(left, #fafafa, #fff, #fafafa);
  background-image: -ms-linear-gradient(left, #fafafa, #fff, #fafafa);
  background-image: -o-linear-gradient(left, #fafafa, #fff, #fafafa);
}
hr.gradient::after {
  content: '';
  display: block;
  height: 1px;
  background-color: #fafafa;
  background-image: -webkit-gradient(linear, 0 0, 100% 0, from(#fafafa), to(#fafafa), color-stop(50%, #c3c3c3));
  background-image: -webkit-linear-gradient(left, #fafafa, #c3c3c3, #fafafa);
  background-image: -moz-linear-gradient(left, #fafafa, #c3c3c3, #fafafa);
  background-image: -ms-linear-gradient(left, #fafafa, #c3c3c3, #fafafa);
  background-image: -o-linear-gradient(left, #fafafa, #c3c3c3, #fafafa);
}
hr.glyph {
    padding: 0;
    border: none;
    border-top: 1px solid #c6c6c6;
    text-align: center;
}
hr.glyph:after {
    content:  url(p-glyph.png);
    display: inline-block;
    position: relative;
    top: -0.7em;
    font-size: 1.5em;
    padding: 0 0.25em;
    background-color: #ffffff;
}
#btn-nav ul {list-style: none;}
#btn-nav li {display:inline; padding-left: 5px;}
.btn {font-family: "proximanova-semibold", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-weight: normal; font-size: 13px; padding: 5px 10px 5px 10px; min-width: 75px; position:relative;}
.navbar {margin-bottom: 0px;}
.navbar-inner {padding: 10px 0 10px 0; border-radius: 0px; background-image: none; background-color: #fafafa;}
.navbar .links {display:inline;}
.navbar .nav > li > a {padding: 10px 15px 10px 15px; color: #999; text-shadow: none;}
.navbar .nav > li > a:focus, .navbar .nav > li > a:hover {color: #333; text-decoration: none;}
.navbar-fixed-top .navbar-inner, .navbar-static-top .navbar-inner {box-shadow: none; border:none;}
.small-navbar {padding: 0px; border-bottom: 1px solid #c6c6c6;}
.navbar .nav > .active > a, .navbar .nav > .active > a:hover, .navbar .nav > .active > a:focus {color: #fff;background-color: #555;}
.head {padding: 50px 0 50px 0;}
.head h1 {font-size: 42px; padding-top: 50px;}
.head h2 {font-family: "proximanova-light", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";font-size: 30px;color: #999;}
#logo {padding-right:10px;vertical-align: middle;}
#branding {/*margin-left:10px; */display: inline;}
.brand-text {font-family: "proximanova-light", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-weight: normal;}
#brand-text {font-family: "proximanova-semibold", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-weight: normal; font-size: 24px; padding-left: 7px; color: black; vertical-align: middle; letter-spacing: -1px;}
#facebook-like {border:none; overflow:visible; height:20px; vertical-align:middle; padding-left: 15px; }
.twitter-share-button {vertical-align: middle; padding-left: 10px;}
#home-hero #facebook-like, #home-hero .twitter-share-button {padding-top: 15px;}
.banner {width:100%; min-height: 590px;}
#home-hero {background: #fafafa url(banner5.jpg) center; margin-bottom: 40px; background-repeat: no-repeat;}
#grabtext {padding: 50px 0px 0px 0px; text-align: left;}
#grabtext h1 {font-family: "proximanova-semibold", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-weight: normal; font-size: 60px; padding-bottom: 0px; color: white; line-height: 1.0em;text-shadow: 0 2px 8px #444444; }
.skinny-text {font-family: "proximanova-light", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";text-shadow: 0 2px 8px #444444; }
#grabtext h2 {font-family: "proximanova-semibold", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 28px; padding-bottom: 20px; color: white; font-weight: normal; padding-top: 0px; line-height: 1.0em; text-shadow: 0 1px 10px rgb(128,128,128);}
#grabtext p {font-family: "proximanova-regular", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 18px; color: white; font-weight: normal; line-height: 26px; text-shadow: 0 2px 8px #444444; padding: 40px 0 40px 0;}
#footer-wrapper {padding-top: 0px;}
#footer-divider {padding-top: 50px; background: url(footer.png); background-repeat: no-repeat; background-position: center top;}
#footer-inner {width: 100%; color: black; padding-top: 25px; padding-bottom: 30px}
#footer-inner img {}
#footer-inner a {text-decoration: none;}
#company-brand {font-family: "proximanova-semibold", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-weight: normal;}
#copyright p {font-family: "proximanova-light", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 16px; color: #999999; padding-top: 20px;    white-space: nowrap;}
#copyright #company-brand {color: black; font-size: 14px; padding: 0 2px 0 0px;}
#subscribe-input {background: rgba(0,0,0,0.03); padding: 8px; margin-right: 10px; margin-bottom: 0px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; color: #545454; font-weight: bold;}
#sidebar {
    border-right: 1px solid #c6c6c6;
    bottom: 0;
    float: left;
    font-family: "proximanova-light", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-size: 12px;
    height: 100%;
    left: 0;
    overflow-y: auto;
    position: fixed;
    text-align: left;
    top: 0;
    width: 260px;
}
#sidebar li a {text-align: left; color: #404040;}
#sidebar li.header, #sidebar li.header a {font-family: "proximanova-semibold", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-weight: normal; color: black;}
.nav-list > .active > a, .nav-list > .active > a:hover, .nav-list > .active > a:focus {color: #ffffff; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2); background-color: #c5c5c5;}
#sidebar li.active a {color: white;}
#sidebar .title {padding-top: 20px;}
#sidebar li.nav-header a {color:black;}

.nav-header {font-family: "proximanova-bold", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-weight:normal; color: black;}
#manual-wrapper {
    float: right;
    width: 99%;
}
#manual {
    margin-left: 265px;
    overflow-y: auto;
    padding-right: 25px;
}
#manual p {font-family: "proximanova-regular", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; color: black; font-size: 14px; color:#424242}
#manual h1 {font-family: "proximanova-bold", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 28px; padding: 10px 0 10px 0; border-bottom: 1px solid black; margin-top: 30px; margin-bottom:30px;}
#manual h2, #manual h3 {font-size: 18px; padding-bottom: 0px; color:#171717}
#top-nav-links {display: inline;}
#top-nav-links ul {padding-top: 5px;}
form {padding-bottom: 20px; padding-top: 20px;}
.label-error, .badge-error {background-color: #b94a48;}
.margin-b-0 {margin-bottom: 0px;}
.margin-top-40 {margin-top: 40px;}
.push-top-10 {padding-top: 10px;}
.push-top-20 {padding-top: 20px;}
.push-top-30 {padding-top: 30px;}
.push-top-40 {padding-top: 40px;}
.push-top-50 {padding-top: 50px;}
.push-top-60 {padding-top: 60px;}
.push-top-80 {padding-top: 80px;}
.push-top-100 {padding-top: 100px;}
.push-left-50 {padding-left: 50px;}
.push-left-60 {padding-left: 60px;}
.divider {background-image: url(divider.png); background-repeat: no-repeat; background-position: center; width:680px;height: 4px; padding-top: 80px; padding-bottom:80px;}
.features h1 {padding:0; font-size: 42px;}
.features h2, #introducing h2 {font-family: "proximanova-light", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 30px; color: #999; padding-bottom: 10px;}
.download {display:block; padding-bottom: 40px; padding-top: 20px;}
.links {list-style: none;}
.links li {display: inline; padding-right: 30px;}
.links li a { font-family: "proximanova-light", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 18px; color: #999;}
.links li a:hover {color: #333;}
.features .row {padding-bottom: 75px;}
.features .row:last-child {padding-bottom: 0px;}
.nav-pills > li > a {border-radius: 20px;}
#coming-soon {padding-bottom: 0px;}
#ipad-banner {position: relative; top: 18px; left: 25px;}
#grabtext {opacity: 0; animation:fadeFromRight 800ms ease-in 1; animation-fill-mode:forwards; animation-delay:.3s; -webkit-animation:fadeFromRight 800ms ease-in 1; -webkit-animation-fill-mode:forwards; -webkit-animation-delay:.3s;}
.fade-in{animation:fadeIn 800ms ease-in 1; animation-fill-mode:forwards; -webkit-animation:fadeIn 800ms ease-in 1; -webkit-animation-fill-mode:forwards;}

@-webkit-keyframes fadeFromRight{
    0%{-webkit-transform:translateX(10px);opacity:0;}
    30%{-webkit-transform:translateX(10px);opacity:0;}
    100%{-webkit-transform:translateX(0);opacity:1;}
}
@-moz-keyframes fadeFromRight{
    0%{-moz-transform:translateX(10px);opacity:0;}
    30%{-moz-transform:translateX(10px);opacity:0;}
    100%{-moz-transform:translateX(0);opacity:1;}
}

@-webkit-keyframes fadeIn{
    0%{-webkit-transform:scale(.98);opacity:0;}
    100%{-webkit-transform:scale(1.0);opacity:1;}
}
@-moz-keyframes fadeIn{
    0%{-moz-transform:scale(.95);opacity:0;}
    100%{-moz-transform:scale(1.0);opacity:1;}
}

#manual a {text-decoration: underline;}

/* Extra layout changes / overwrites to fix layout on smaller screens ----- */

#nav-toggle {
    background: #0088cc none repeat scroll 0 0;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    color: #ffffff;
    display: none;
    padding: 6px 8px;
    position: fixed;
    right: 12px;
    text-decoration: none;
    top: 12px;
    z-index: 12;
}
#nav-toggle:hover {
    background: #005580 none repeat scroll 0 0;
}
@media only screen and (max-width: 640px) {
    #nav-toggle {
        background: #0088cc none repeat scroll 0 0;
        border-radius: 4px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        color: #ffffff;
        display: block;
        padding: 6px 8px;
        position: fixed;
        right: 12px;
        top: 12px;
        z-index: 12;
    }
    #sidebar {
        background-color: #fafafa;
        display: none;
        width: 100%;
        z-index: 6;
    }
    #sidebar.open-sidebar {
        display: block;
    }
    ##nav-toggle {
        margin: 0;
        padding: 16px;
    }
}



/* Accordion Style (Web Manual) ----- */

.accordion-header {
    position: relative;
}

#sidebar li.accordion-header > a {
    display: inline;
    outline: none;
    padding-right: 0;
    padding-left: 0;
    margin-left: 0;
}

#sidebar li.accordion-header > a:active,
#sidebar li.accordion-header > a:focus,
#sidebar li.accordion-header > a:hover {
    background-color: transparent;
}

#sidebar li.accordion-header > a:hover {
    color: #0054B0;
}

#sidebar ul.accordion-content a:hover {
    color: #0054B0;
}

.nav-list > li > a.accordion-arrow {
    position: absolute;
    display: inline-block;
    margin: 0;
    padding: 0;
    width: 30px;
    height: 26px;
    top: 16px;
    right: 0;
    text-indent: -9999px;
    background-image: url(sidebar-down-arrow.svg);
    background-size: 25px 25px;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    opacity: 0.3;
    transition: opacity 0.2 ease;
}

.nav-list > li > a.accordion-arrow.active {
    background-image: url(sidebar-up-arrow.svg);
}

#sidebar li.nav-header {
    padding: 20px 0 6px 15px !important;
}

.nav-list > li > a.accordion-arrow:active,
.nav-list > li > a.accordion-arrow:focus,
.nav-list > li > a.accordion-arrow:hover {
    background-color: transparent;
    opacity: 0.72;
}

.nav > li > a:hover, .nav > li > a:focus, .nav > li > a:active {

}