
/*------------- #TYPOGRAPHY --------------*/


h1, .h1 {
  font-size: $h1-fontsize;
  font-weight: $h-font-weight;
  color: $heading-color;
  font-family: $heading-font-family;
  margin: .5em 0;
  line-height: 1.1em;

  a {
    color: inherit;
  }

  @media (max-width: 800px) {
    font-size: 40px;
  }

  @media (max-width: 640px) {
    font-size: 36px;
  }

  @media (max-width: 480px) {
    font-size: 30px;
  }

  @media (max-width: 360px) {
    font-size: 24px;
  }
}

h2, .h2 {
  margin: .5em 0;
  font-size: $h2-fontsize;
  line-height: 1.15em;
  font-weight: $h-font-weight;
  color: $heading-color;
  font-family: $heading-font-family;

  a {
    color: inherit;
  }

  @media (max-width: 800px) {
    font-size: 36px;
  }

  @media (max-width: 570px) {
    font-size: 32px;
  }

  @media (max-width: 480px) {
    font-size: 26px;
  }
}

h3, .h3 {
  margin: .5em 0;
  font-size: $h3-fontsize;
  line-height: 1.3em;
  font-weight: $h-font-weight;
  color: $heading-color;
  font-family: $heading-font-family;

  a {
    color: inherit;
  }

  @media (max-width: 800px) {
    font-size: 30px;
  }

  @media (max-width: 570px) {
    font-size: 26px;
  }

  @media (max-width: 480px) {
    font-size: 22px;
  }
}

h4, .h4 {
  margin: .5em 0;
  font-size: $h4-fontsize;
  line-height: 1.3em;
  font-weight: $h-font-weight;
  color: $heading-color;
  font-family: $heading-font-family;

  a {
    color: inherit;
  }

  @media (max-width: 800px) {
    font-size: 28px;
  }

  @media (max-width: 570px) {
    font-size: 24px;
  }

  @media (max-width: 480px) {
    font-size: 20px;
  }
}

h5, .h5 {
  margin: .5em 0;
  font-size: $h5-fontsize;
  line-height: 1.5em;
  font-weight: $h-font-weight;
  color: $heading-color;
  font-family: $heading-font-family;

  a {
    color: inherit;
  }

  @media (max-width: 980px) {
    font-size: 18px;
  }

  @media (max-width: 480px) {
    font-size: 16px;
  }
}

h6, .h6 {
  margin: .5em 0;
  font-size: $h6-fontsize;
  line-height: 1.5em;
  font-weight: $h6-font-weight;
  color: $heading-color;
  font-family: $heading-font-family;

  a {
    color: inherit;
  }

  @media (max-width: 800px) {
    font-size: 14px;
  }
}

/*------------- #Styles for First-Letter --------------*/

.first-letter--dark-round span:first-of-type {
  display: block;
  position: relative;
  width: 70px;
  height: 70px;
  background-color: #2f2c2c;
  border-radius: 50%;
  float: left;
  margin-right: 20px;
  line-height: 70px;
  font-size: 30px;
  color: #fff;
  text-align: center;
}

.first-letter--squared span:first-of-type {
  display: block;
  position: relative;
  width: 70px;
  height: 70px;
  border-radius: 5px;
  float: left;
  margin-right: 20px;
  line-height: 70px;
  font-size: 30px;
  color: #fff;
  text-align: center;
  background-color: var(--primary-accent-color);
}

.first-letter--dark span:first-of-type {

  margin-right: 20px;
  font-size: 48px;
  line-height: 48px;
  color: $heading-color;
  float: left;
}

.first-letter--primary span:first-of-type {
  color: var(--primary-accent-color);
  margin-right: 20px;
  font-size: 48px;
  line-height: 48px;
  float: left;
}

/*------------- #Styles for Text Selection --------------*/

/*Selection dark*/

.selection--dark::-moz-selection {
  background: $heading-color;
  color: $font-color;
}

.selection--dark::selection {
  background: $heading-color;
  color: $font-color;
}

/*Selection primary*/

.selection--primary::-moz-selection {
  color: $white-color;
}

.selection--primary::selection {
  color: $white-color;
}

/*Selection gray*/

.selection--gray::-moz-selection {
  background: #aeaeae;
  color: $heading-color;
}

.selection--gray::selection {
  background: #aeaeae;
  color: $heading-color;
}


/*------------- #Styles for list --------------*/

ul{
  padding: 0;
  margin: 0;
}

.list {
  ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  li {
    margin-bottom: .8em;
    font-size: 18px;
    overflow: hidden;
    clear: both;
    transition: all .3s ease;

    @media (max-width: 640px) {
      font-size: 14px;
    }

    a, li {
      color: inherit;
      display: block;
      overflow: hidden;
    }

    i {
      margin-right: 25px;
      margin-top: 8px;
      font-size: 12px;
      float: left;
    }
  }

  &.with-padding {
    padding-left: 60px;
  }

}

.list--standard {

  a, li {

    &:hover {
      color: $heading-color;
    }
  }

  .number {
    color: $heading-color;
    margin-right: 24px;
    float: left;
  }
}

.list--primary a:hover,
.list--primary i {
  color: var(--primary-accent-color);
}

.list--secondary a:hover,
.list--secondary i {
  color: var(--secondary-accent-color);
}

.list {
  list-style: none;
  padding: 0;
  margin: 0;
}

ol {
  padding-left: 20px;

  li {
    font-size: 18px;
    position: relative;

    a {
      display: inline-block;
    }
  }
}

blockquote {
  p {
    margin: 0;
  }
}

p {
  margin: 0 0 1em 0;
}

table {
  margin: 1.5em 0;
}

blockquote {
  margin: 1em 0;
  padding: 15px 15px 15px 80px;
  position: relative;

  @media (max-width: 640px) {
    padding-left: 50px;
    margin: 1em 0;
  }

  cite {
    display: block;
    color: $body-font-color;
    font-size: .9em;

    &:before {
      content: "\2014\00a0";
      color: $body-font-color;
    }
  }

  &:before {
    content: "\e904";
    font-size: 70px;
    color: $border-color;
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    font-family: 'seosight';
    line-height: 1;

    @media (max-width: 640px) {
      font-size: 40px;
      top: 0;
    }
  }

  p {
    margin: 0;
    font-size: 20px;
    line-height: 1.3em;

    @media (max-width: 640px) {
      font-size: 16px;
    }
  }
}

dl {
  margin-bottom: 24px;
}

dl dt {
  margin-bottom: 5px;
  color: #777;
  font-weight: bold;
}

dl dd {
  margin-bottom: 5px;
  margin-left: 20px;
}

abbr {
  border-bottom: 1px dotted;
  cursor: help;
  border-color: $body-font-color;
}

.kc_text_block,
.entry-content-no-builder {
  ul {
    padding-left: 20px;
    margin-bottom: 1em;

    li {
      list-style: disc;
      margin-bottom: 5px;
    }
  }
}

.clear,
.entry-content,
.entry-footer,
.comment-content,
.site-header,
.site-content,
.site-footer,
.nav-links,
.pagination,
.comment-author,
.widget-area,
.widget,
.comment-meta,
.entry-content-no-builder {
  &:after,
  &:before {
    content: "";
    display: table;
    table-layout: fixed;
  }

  &:after {
    clear: both;
  }
}

.entry-content-no-builder {
  .page-links {
    display: block;
    padding: 0;
    background-color: transparent;
    border-radius: 0;
    clear: both;
  }
}

.entry-content-no-builder ul.woocommerce-error {
  padding-left: 50px;
}


/*------------- Responsive mode styles --------------*/

@media (max-width: 640px) {
  ol li {
    font-size: 14px;
  }
}