#tc-page-wrap {
  position: relative;
  background: inherit;
  z-index: 1;
  word-wrap: break-word;
  &.czr-boxed {
    padding: 0;
    @include box-shadow( 0, 0, 10px, rgba(0,0,0,.2) );
  }
}


#tc-page-wrap,
#main-wrapper {
  &::before, &::after {
    display: table;
    content: '';
    line-height: 0
  }
}

#main-wrapper,
#content {
  padding-bottom:$base-line-height*2;
}

.container[role="main"] {
  margin-top: 2em;
}




//formatting
//http://www.456bereastreet.com/archive/201105/styling_ordered_list_numbers/
//https://css-tricks.com/almanac/properties/l/list-style/
//https://en.oxforddictionaries.com/punctuation/bullet-points
ol {
  counter-reset: item;
  > li:before {
    content: counters(item, ".") ".";
    counter-increment: item;
    @if ( true == $is_rtl ) {
      padding-left: .5em;
    }
    @else {
      padding-right: .5em;
    }
    word-wrap: normal;
    word-break: normal;
  }
  @at-root .czr-wp-the-content ol {
    > li {
      position: relative;
      padding: 0.25rem 0.5rem;
    }
    @if ( true == $is_rtl ) {
      > li:before {
        content: counters(item, ".") ".";
        counter-increment: item;
        margin-left: 0.5em;
        right: -1em;
        position: absolute;
        width: 1em;
      }
      > li li:before {
          right: -1.8em;
      }
      > li li li:before {
          right: -2.5em;
      }
    }
    @else {
      > li:before {
        content: counters(item, ".") ".";
        counter-increment: item;
        margin-right: 0.5em;
        left: -1em;
        position: absolute;
        width: 1em;
      }
      > li li:before {
          left: -1.8em;
      }
       > li li li:before {
          left: -2.5em;
      }
    }
  }
}


ol, ul {
  .czr-wp-the-content & {

    @if ( true == $is_rtl ) {
      padding: 0.5rem 3rem 1rem 0;
      @include media-breakpoint-down(xs) {
        padding: 0.5rem 2rem 1rem 0;
      }
    }
    @else {
      padding: 0.5rem 0 1rem 3rem;
      //(max-width: 576px)
      @include media-breakpoint-down(xs) {
        padding: 0.5rem 0 1rem 2rem;
      }
    }
  }
  @at-root .czr-wp-the-content ul {
    list-style: square outside;
    > li {
      padding: 0.25rem 0.5rem;
    }
  }
  // @at-root .tc-content-inner ol li:before {
  //   left: 34px;
  //   position: absolute;
  //   top: 2px;
  //   counter-increment: li;
  //   content: counter(li,decimal) ". ";
  // }
}

ol, ul {
  ol, ul {
    @if ( true == $is_rtl ) {
      margin-right: 1em;
      @include media-breakpoint-down(xs) {
        margin-right: 0;
      }
    }
    @else {
      margin-left: 1em;
      @include media-breakpoint-down(xs) {
        margin-left: 0;
      }
    }
  }
}

ul.socials, ul.tags {
  .tc-content-inner & {
    list-style: none;
    margin: 0;
  }
}


table {
  @extend %table-base;
  &:not([id^=wp-calendar]):not(.ui-datepicker-calendar):not(.tribe-mini-calendar):not(.pika-table) {
    @extend %table-style;
  }
}

dl {
  margin-bottom:  $base-line-height;
  dt {
    @if ( true == $is_rtl ) {
      text-align: right;
    }
    @else {
      text-align: left;
    }
    position: relative;
    padding : $base-line-height $base-line-height $base-line-height/2 $base-line-height;
    &::before {
      content: "";
      position: absolute;
      width: $base-line-height;
      height: 2px;
      bottom: calc(#{$base-line-height} - 6px);
      @if ( true == $is_rtl ) {
        right: 0;
      }
      @else {
        left: 0;
      }
      background: $black;
    }
  }
  .wp-caption-dt::before { content: none }
  dd {
    @if ( true == $is_rtl ) {
      padding-right: $base-line-height;
    }
    @else {
      padding-left: $base-line-height;
    }
  }
}


%dl_reset {
  margin-bottom: 0;
  dt {
    white-space: normal;
    clear: none;
    text-align: inherit;
    padding: 0;
    &::before {
      display: none;
    }
  }
  dd {
    padding: 0;
  }
  p {
    margin-top: 0;
  }
}


/* featured pages*/
.marketing {
  margin-bottom: $base-line-height * 5;
  margin-top: 0.5em;
}
.featured-page {
  margin-top: 2em;
  position: relative;
  text-align:center;
  font-size: 1.15em;
  .czr-thumb-wrapper {
    overflow: hidden;
  }
  .no-effect .czr-thumb-wrapper {
    margin-bottom: $base-line-height*2
  }

  & img {
    @include transform( translate3d(0 ,0, 0) );
    backface-visibility: hidden;
  }
  .center-images-disabled & img {
    // temporary CSS centering
    @include transform( translate(-50%, -50%) ); // fallback for those browsers w/o translate3d transform property
    @include transform( translate3d(-50%, -50%, 0) );
    top: 50%;
    left: 50%;
  }
  @at-root .fp-title,
           .fp-button,
    [class*=fp-text-] {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
  }

  @at-root .fp-title {
    line-height: $base-line-height;
    margin-top : $base-line-height/2;
    margin-bottom: $base-line-height;
    word-break: break-word;
    position: relative;
    &::after {
      content: "";
      position: absolute;
      width: $base-line-height;
      background: $black;
      height: 2px;
      top: 100%;
      left: 0;
      right: 0;
      margin: $base-line-height/4 auto 0;
      @include transition (all 0.6s ease);
      @at-root .widget-front.hover & {
        background: $grey-dark;
        width: $base-line-height*2;
      }
    }
  }

  .btn-edit { margin: -1em 0 0 }

  @at-root [class*=fp-text-] {
    margin: $base-line-height*1.2 auto;
    color: $grey-dark;
  }

  @at-root .fp-button {
    display: inline-block;
    padding: 0;
    .btn-more {
      margin-bottom: $base-line-height
    }
  }



  & .widget-front.hover {
    color: $grey-dark;
  }
}