/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, main, section {
  display: block; }

body {
  line-height: 1; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

i {
  font-style: italic;
  opacity: .7; }

div.row {
  margin: 50px 0; }

button, .button, a.button {
  appearance: none;
  background: none;
  border: none;
  border-radius: 5px;
  background: #14383B;
  color: #FFF;
  cursor: pointer;
  display: inline-block;
  -webkit-font-smoothing: antialiased;
  font-weight: 600;
  line-height: 1;
  padding: 15px 35px;
  text-decoration: none;
  transition: background-color 250ms ease;
  user-select: none;
  vertical-align: middle;
  white-space: nowrap;
  outline: none; }
  button:hover, .button:hover, a.button:hover {
    text-decoration: none;
    background: #215c61; }
  button:disabled, .button:disabled, a.button:disabled {
    cursor: not-allowed;
    opacity: 0.5; }

figure {
  margin: 0; }

img,
picture {
  max-width: 100%;
  height: auto;
  vertical-align: top; }

img.profile {
  max-width: 200px;
  margin: 20px 0; }

iframe {
  border: none; }

body {
  font-family: 'Muli', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  margin: 0;
  background: lightgray;
  overflow-x: hidden; }

h1, h2, h3, h4, h5, h6 {
  font-family: 'Muli', sans-serif;
  font-weight: 600;
  line-height: 1.2;
  color: #215c61; }

h1 {
  font-size: 24px;
  margin-bottom: 20px; }
  @media (min-width: 768px) {
    h1 {
      font-size: 26px; } }

h2 {
  font-size: 20px;
  margin-bottom: 15px; }
  @media (min-width: 768px) {
    h2 {
      font-size: 22px; } }

h3 {
  font-size: 18px;
  margin-bottom: 10px; }
  @media (min-width: 768px) {
    h3 {
      font-size: 20px; } }

h4 {
  font-size: 16px;
  margin-bottom: 10px; }
  @media (min-width: 768px) {
    h4 {
      font-size: 18px; } }

a {
  color: #3f992d;
  text-decoration: none; }
  a:hover {
    text-decoration: underline; }
  a:link, a:visited, a:active {
    color: #3f992d; }

a.button {
  color: #FFF; }

p {
  font-family: 'Muli', sans-serif;
  width: auto;
  text-align: left;
  margin: .5em 0; }

strong {
  font-weight: 600; }

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

#header {
  background: #B4E8AA;
  padding: 20px 0 0; }
  @media (min-width: 768px) {
    #header {
      display: flex;
      align-items: flex-end;
      padding: 20px 0; } }
  #header .branding {
    text-align: center; }
    #header .branding img {
      width: 115px; }
      @media (min-width: 768px) {
        #header .branding img {
          width: 90px; } }
      @media (min-width: 960px) {
        #header .branding img {
          width: 100px; } }
      @media (min-width: 1200px) {
        #header .branding img {
          width: 115px; } }
    @media (min-width: 768px) {
      #header .branding {
        padding-left: 7%;
        flex-basis: 23%;
        position: relative; }
        #header .branding::before {
          content: '';
          width: 53px;
          height: 41px;
          background: #14383B;
          display: inline-block;
          position: absolute;
          left: 0;
          bottom: 0; } }
    @media (min-width: 960px) {
      #header .branding {
        flex-basis: 20%; }
        #header .branding::before {
          width: 67px;
          height: 48px; } }
    @media (min-width: 1200px) {
      #header .branding::before {
        width: 84px;
        height: 58px; } }
  @media (min-width: 768px) {
    #header > div:last-child {
      flex-basis: 77%; } }
  @media (min-width: 960px) {
    #header > div:last-child {
      flex-basis: 80%; } }
  #header span {
    display: block;
    text-align: center;
    margin: 10px 0;
    font-size: 20px;
    font-weight: 600;
    color: #14383B; }
    @media (min-width: 768px) {
      #header span {
        text-align: right;
        padding-right: 10%;
        margin-bottom: 0; } }
    @media (min-width: 960px) {
      #header span {
        padding-right: 20%; } }
  #header h1 {
    background: #14383B;
    color: #D8F2D3;
    text-align: center;
    padding: 10px;
    margin-bottom: 0; }
    @media (min-width: 768px) {
      #header h1 {
        text-align: right;
        padding: 5px 10% 5px 0; } }
    @media (min-width: 960px) {
      #header h1 {
        font-size: 32px;
        padding-right: 20%; } }
    @media (min-width: 1200px) {
      #header h1 {
        font-size: 40px; } }

.video-container {
  overflow: hidden;
  padding-bottom: 56.25%;
  position: relative;
  height: 0; }
  .video-container iframe,
  .video-container object,
  .video-container embed {
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    position: absolute; }

aside.left-sidebar {
  position: relative;
  padding: 50px 0; }
  aside.left-sidebar .back-to-home {
    padding: 20px 10px; }
    aside.left-sidebar .back-to-home a {
      font-size: 14px;
      text-decoration: none; }
      aside.left-sidebar .back-to-home a:hover {
        text-decoration: underline; }

.book-a-demo-square {
  padding: 10px;
  background: #FFF;
  text-align: center; }
  .book-a-demo-square a.helpjuice-logo {
    display: block;
    margin-bottom: 10px; }
    .book-a-demo-square a.helpjuice-logo img {
      width: 100px; }
  .book-a-demo-square h4 {
    margin-bottom: 10px; }
  .book-a-demo-square .logos {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center; }
    .book-a-demo-square .logos img {
      margin: 10px;
      width: 60px; }

ul.accordion {
  margin: 0;
  padding: 0; }
  ul.accordion .dcjq-icon {
    background: url("/images/logos/angle-right.svg") center no-repeat;
    background-size: 6px;
    left: 0; }
  ul.accordion li {
    list-style-type: none;
    background: #215c61; }
    ul.accordion li:hover {
      background: #276e74; }
    ul.accordion li a {
      display: block;
      color: #FFF;
      text-decoration: none;
      padding: 5px 10px;
      font-size: 14px; }
    ul.accordion li #hj-star {
      background-image: url("/images/svg/star.svg");
      background-size: 16px;
      background-repeat: no-repeat;
      background-position: 9px 7px;
      background-color: #14383B;
      border-left: 3px solid #efce4a;
      padding-left: 35px; }
    ul.accordion li ul {
      padding: 0; }
  ul.accordion li.dcjq-parent-li {
    position: relative;
    background: #14383B;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2); }
    ul.accordion li.dcjq-parent-li a {
      padding-left: 10px; }
    ul.accordion li.dcjq-parent-li a.dcjq-parent::after {
      content: '';
      display: block;
      position: absolute;
      right: 15px;
      top: 9px;
      width: 12px;
      height: 12px;
      border-top: 2px solid #FFF;
      border-right: 2px solid #FFF;
      border-bottom: 2px solid transparent;
      border-left: 2px solid transparent;
      border-radius: 2px;
      transform: rotate(45deg); }
    ul.accordion li.dcjq-parent-li a.dcjq-parent.test::after {
      transform: rotate(135deg);
      top: 7px; }

div.socialbottom .fb_iframe_widget {
  display: block;
  margin: 10px 0; }

div.mobile-navigation .icon {
  display: block;
  background: #14383B;
  height: 32px;
  position: absolute;
  top: 0;
  right: 0;
  padding: 7px; }
  div.mobile-navigation .icon span {
    width: 25px;
    height: 3px;
    background: #D8F2D3;
    display: block;
    position: relative;
    cursor: pointer;
    float: right; }
  div.mobile-navigation .icon span::before,
  div.mobile-navigation .icon span::after {
    content: '';
    display: inline-block;
    background: #D8F2D3;
    width: 25px;
    height: 3px;
    position: absolute; }
  div.mobile-navigation .icon span::before {
    top: 7px; }
  div.mobile-navigation .icon span::after {
    top: 14px; }

#mobile-menu {
  display: none; }

nav#mobile-menu.opened {
  display: block; }
  nav#mobile-menu.opened .dropdown-list {
    display: none; }
  nav#mobile-menu.opened .active {
    display: block; }
  nav#mobile-menu.opened #nav > li {
    background: #276e74; }
    nav#mobile-menu.opened #nav > li:hover {
      background: #2d8087; }
    nav#mobile-menu.opened #nav > li a {
      color: #FFF;
      border-bottom: 1px solid rgba(255, 255, 255, 0.2); }
  nav#mobile-menu.opened #nav > li:last-child a {
    background-image: url("/images/svg/star.svg");
    background-size: 16px;
    background-repeat: no-repeat;
    background-position: 9px 7px;
    background-color: #14383B;
    border-left: 3px solid #efce4a;
    padding-left: 35px; }
  nav#mobile-menu.opened #nav li a {
    font-size: 14px;
    display: block;
    padding: 5px 10px;
    text-decoration: none; }
  nav#mobile-menu.opened #nav li a.parent {
    position: relative;
    pointer-events: none; }
    nav#mobile-menu.opened #nav li a.parent::after {
      content: '';
      display: block;
      position: absolute;
      right: 15px;
      top: 9px;
      width: 12px;
      height: 12px;
      border-top: 2px solid #FFF;
      border-right: 2px solid #FFF;
      border-bottom: 2px solid transparent;
      border-left: 2px solid transparent;
      border-radius: 2px;
      transform: rotate(45deg); }
  nav#mobile-menu.opened #nav li a.activeParent::after {
    transform: rotate(135deg);
    top: 7px; }
  nav#mobile-menu.opened #nav li.has-dropdown {
    position: relative;
    background: #14383B;
    color: #FFF; }
    nav#mobile-menu.opened #nav li.has-dropdown:hover {
      background: #14383B; }
    nav#mobile-menu.opened #nav li.has-dropdown a {
      color: #FFF; }
    nav#mobile-menu.opened #nav li.has-dropdown .dropdown-list li {
      background: #215c61; }
      nav#mobile-menu.opened #nav li.has-dropdown .dropdown-list li:hover {
        background: #276e74; }

@media (min-width: 768px) {
  div.mobile-navigation {
    display: none; } }
@media (max-width: 767px) {
  ul.accordion {
    display: none; } }
aside.right-sidebar {
  background: #D8F2D3;
  color: #14383B;
  padding: 50px 15px; }
  @media (min-width: 768px) {
    aside.right-sidebar {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr;
      padding: 50px 20px; } }
  aside.right-sidebar .socialbottom {
    margin: 50px 0; }
    @media (min-width: 768px) {
      aside.right-sidebar .socialbottom {
        margin: 0;
        grid-column: 1/2;
        grid-row: 1/2; } }
  @media (min-width: 768px) {
    aside.right-sidebar .site-news {
      margin-top: 0;
      grid-column: 2/5;
      grid-row: 1/2;
      padding: 0 20px; } }
  aside.right-sidebar .site-news span {
    display: block;
    margin-bottom: 10px; }

#footer {
  background: #14383B;
  padding: 20px;
  text-align: center;
  color: #D8F2D3; }
  #footer a {
    color: #FFF; }

div.main-wrapper {
  max-width: 1200px;
  margin: 0 auto; }

main.main {
  display: grid;
  display: -ms-grid;
  grid-template-columns: 1fr;
  -ms-grid-columns: 1fr 1fr 1fr 1fr; }
  @media (min-width: 960px) {
    main.main {
      grid-template-columns: 1fr 1fr 1fr 1fr; }
      main.main .left-sidebar {
        grid-column: 1/2;
        grid-row: 1/2;
        -ms-grid-column: 1;
        -ms-grid-column-span: 1;
        -ms-grid-row: 1;
        -ms-grid-row-span: 1; }
      main.main .main-content {
        grid-column: 2/5;
        grid-row: 1/2;
        -ms-grid-column: 2;
        -ms-grid-column-span: 3;
        -ms-grid-row: 1;
        -ms-grid-row-span: 1; }
      main.main .right-sidebar {
        grid-column: 1/5;
        grid-row: 2/3;
        -ms-grid-column: 1;
        -ms-grid-column-span: 4;
        -ms-grid-row: 2;
        -ms-grid-row-span: 1; } }

.two-col-layout-50-50 {
  display: flex;
  flex-wrap: wrap; }
  .two-col-layout-50-50 .column-left {
    flex-basis: 100%; }
    @media (min-width: 768px) {
      .two-col-layout-50-50 .column-left {
        flex-basis: 50%; } }
  .two-col-layout-50-50 .column-right {
    flex-basis: 100%; }
    @media (min-width: 768px) {
      .two-col-layout-50-50 .column-right {
        flex-basis: 50%; } }

.two-col-layout-30-70 {
  display: flex;
  flex-wrap: wrap; }
  .two-col-layout-30-70 .column-left {
    flex-basis: 100%; }
    @media (min-width: 768px) {
      .two-col-layout-30-70 .column-left {
        flex-basis: 30%; } }
  .two-col-layout-30-70 .column-right {
    flex-basis: 100%; }
    @media (min-width: 768px) {
      .two-col-layout-30-70 .column-right {
        flex-basis: 70%; } }

.two-col-layout-60-40 {
  display: flex;
  flex-wrap: wrap; }
  .two-col-layout-60-40 .column-left {
    flex-basis: 100%; }
    @media (min-width: 768px) {
      .two-col-layout-60-40 .column-left {
        flex-basis: 60%; } }
  .two-col-layout-60-40 .column-right {
    flex-basis: 100%; }
    @media (min-width: 768px) {
      .two-col-layout-60-40 .column-right {
        flex-basis: 40%; } }

.three-col-layout {
  display: flex;
  flex-wrap: wrap; }
  .three-col-layout .column-left {
    flex-basis: 100%; }
    @media (min-width: 768px) {
      .three-col-layout .column-left {
        flex-basis: 33%; } }
  .three-col-layout .column-middle {
    flex-basis: 100%; }
    @media (min-width: 768px) {
      .three-col-layout .column-middle {
        flex-basis: 34%; } }
  .three-col-layout .column-right {
    flex-basis: 100%; }
    @media (min-width: 768px) {
      .three-col-layout .column-right {
        flex-basis: 33%; } }

div.main-wrapper {
  background: #FFF; }

.main-content {
  padding: 50px 20px; }

@media (min-width: 960px) {
  .intro {
    display: flex; }
    .intro .column-left {
      flex-basis: 50%; }
    .intro .column-right {
      flex-basis: 50%; } }

.book-a-demo-banner {
  margin: 50px 0; }
  .book-a-demo-banner h3 {
    margin-bottom: 20px; }
  .book-a-demo-banner a.helpjuice-logo {
    display: block;
    margin-bottom: 10px; }
    .book-a-demo-banner a.helpjuice-logo img {
      width: 100px; }
  .book-a-demo-banner .column-right {
    text-align: center; }
    .book-a-demo-banner .column-right .logos {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center; }
      .book-a-demo-banner .column-right .logos img {
        margin: 10px;
        width: 60px; }
  @media (min-width: 768px) {
    .book-a-demo-banner {
      display: flex;
      justify-content: space-around;
      align-items: center; } }

@media (min-width: 768px) {
  img.frontpageimg {
    float: left;
    margin-right: 10px; } }

ul.frontpage {
  margin: 20px;
  list-style-type: disc; }
  ul.frontpage li {
    padding-left: 10px;
    margin: 10px 0; }

ul.inner-list li {
  list-style-type: none; }

div.youtube-video {
  margin: 20px 0;
  max-width: 430px; }

div.table-row {
  overflow-x: auto;
  margin: 50px 0; }
  div.table-row table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%; }
    div.table-row table td {
      border: 1px solid #14383B;
      padding: 10px;
      text-align: center;
      vertical-align: middle; }
  @media (max-width: 560px) {
    div.table-row table, div.table-row thead, div.table-row tbody, div.table-row th, div.table-row td, div.table-row tr {
      display: block; }
    div.table-row td.empty {
      display: none; } }

div.book span.author {
  color: #adadad; }
div.book .review {
  margin: 20px 0; }
div.book .book-cover {
  margin-top: 20px; }
div.book img.cover {
  max-width: 200px; }
div.book .more {
  display: none; }
div.book .where-to-buy {
  margin: 20px 0; }
  div.book .where-to-buy .list a {
    display: inline-block;
    margin-right: 10px; }

/*# sourceMappingURL=new-styles.css.map */
.main-content ul,ol {

  display: block;
list-style-type: disc;
margin-top: 1em;
margin-bottom: 1 em;
margin-left: 0;
margin-right: 0;
padding-left: 40px;

}

.main-content ol {

  list-style-type: decimal; 
   list-style-position: inside; 

}