.czr-contact-info,
.socials {
  margin: 0 -6.5px;
  @extend .inline-list-nospace;
  li {
    padding: 0 6.5px;
  }
  a {
    display:block;
  }
}
.czr-contact-info {
  i {
    font-size: 0.9em;
    + span {
        @if ( true == $is_rtl ) {
          padding-right: $base-line-height/4;
        }
        @else {
          padding-left: $base-line-height/4;
        }
    }
  }
  .fa-envelope {
    position:relative;
    top: .05em;
  }
}


//
// Button Base styles (bs based)
//
%btn_base {
  display: inline-block;
  font-weight: normal;
  line-height: 1.25;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  user-select: none;
  border: 1px solid transparent;
  padding: 0.5em 1em;
  border-radius: 2px;
  border-width: 2px;
  border-style: solid;
  font-size: 1em;
  @extend .service-font;
  cursor: pointer;
  text-decoration: none;
  @include transition( all 0.2s ease-in-out );

  // Share hover and focus styles
  @include hover-focus {
    text-decoration: none;
  }
  &:focus,
  &.focus {
    outline: 0;
    //($top, $left, $blur, $color, $inset: false, $spread_radius: false)
    @include box-shadow(0, 0, 0, rgba(2, 117, 216, 0.25), false, 2px);
  }

  // Disabled comes first so active can properly restyle
  &.disabled,
  &:disabled {
    cursor: $cursor-disabled;
    opacity: .65;
    @include box-shadow_none();
  }

  &:active,
  &.active {
    background-image: none;
    //($top, $left, $blur, $color, $inset: false, $spread_radius: false)
    @include box-shadow(0, 0, 0, rgba(2, 117, 216, 0.25), false, 2px);
  }
}


.btn {
  @extend %btn_base;
}

// Future-proof disabling of clicks on `<a>` elements
a.btn.disabled,
fieldset[disabled] a.btn {
  pointer-events: none;
}

// SKINNED
// .btn modifier
.btn-skin {
  background-color: $skin;
  border-color: $skin;
  color: $white;

  &:hover, &:focus, &:active {
    color: $skin;
    background-color: transparent;
    border-color: $skin;
  }

  // .btn modifier
  &.inverted {
    background-color: transparent;
    color: $skin;

    &:hover, &:focus, &:active {
      color: $white;
      background-color: $skin;
    }
  }
}

// .btn modifier
.btn-skin-dark {
  background-color: $skin-dark;
  color: $white;
  border-color: $skin-dark;

  &:hover, &:focus, &:active {
    color: $skin-dark;
    background-color: transparent;
    border-color: $skin-dark;
  }

  // .btn modifier
  &.inverted {
    background-color: transparent;
    color: $skin-dark;//$black;
    &:hover, &:focus, &:active {
      color: $white;
      background-color: $skin-dark;//previously $black;
    }
  }
}

// .btn modifier
.btn-skin-dark {
  background-color: $skin-dark;
  color: $white;
  border-color: $skin-dark;

  &:hover, &:focus, &:active {
    color: $skin-dark;
    background-color: transparent;
    border-color: $skin-dark;
  }

  // .btn modifier
  &.inverted {
    background-color: transparent;
    color: $skin-dark;//$black;
    &:hover, &:focus, &:active {
      color: $white;
      background-color: $skin-dark;//previously $black;
    }
  }
}
// .btn modifier
.btn-skin-light {
  background-color: $skin-light;
  border-color: $skin-light;
  color: $white;

  &:hover, &:focus, &:active {
    color: $skin-light;
    background-color: transparent;
    border-color: $skin-light;
  }

  // .btn modifier
  &.inverted {
    background-color: transparent;
    color: $skin-light;

    &:hover, &:focus, &:active {
      color: $white;
      background-color: $skin-light;
    }
  }
}

// .btn modifier
.btn-skin-dark-shaded {
  background-color: $skin-dark-color-shade-low;
  border-color: transparent;
  color: $white;

  &:hover, &:focus, &:active {
    background-color: $skin-dark-color-shade-high;
  }

  // .btn modifier
  &.inverted {
    background-color: $skin-dark-color-shade-high;
    &:hover, &:focus, &:active {
      background-color: $skin-dark-color-shade-low;
    }
  }
}

// .btn modifier
.btn-dark {
  background-color: $black;
  border-color: $black;
  color: $white;

  &:hover, &:focus, &:active {
    color: $grey-dark;
    background-color: transparent;
    border-color: $grey-light;
  }

  // .btn modifier
  &.inverted {
    color: $grey-dark;
    background-color: transparent;
    border-color: $grey-light;

    &:hover, &:focus, &:active {
      background-color: $black;
      border-color: $black;
      color: $white;
    }
  }
}

// .btn modifier
.btn-skin-dark-oh {
  background-color: $black;
  border-color: $black;
  color: $white;

  &:hover, &:focus, &:active {
    color: $skin-dark;
    background-color: transparent;
    border-color: $skin-dark;
  }

  // .btn modifier
  &.inverted {
    color: $grey-dark;
    background-color: transparent;
    border-color: $grey-light;

    &:hover, &:focus, &:active {
      border-color: $skin-dark;
      color: $white;
      background-color: $skin-dark;//previously $black;
    }
  }
}

// .btn modifier
.btn-skin-h-dark {
  background-color: $skin;
  color: $white;
  border-color: $skin;

  &:hover, &:focus, &:active {
    color: $white;
    background-color: $skin-dark;
    border-color: $skin-dark;
  }

  // .btn modifier
  &.inverted {
    background-color: $skin-dark;
    border-color: $skin-dark;
    &:hover, &:focus, &:active {
      background-color: $skin;
      border-color: $skin;
    }
  }
}

button[type="submit"],
input[type=submit] {
  @extend %btn_base;
  @extend .btn-skin-dark;
  @extend .caps;
  cursor: pointer;
  line-height: inherit;
}

//end buttons

.readmore-holder {
  padding-top: $base-line-height;
  padding-bottom: $base-line-height;
  border-bottom: 0;
  border-bottom: none;
  display: block;
}

.btn-more {
  font-size: 0.75em;
  @extend .caps;
  @extend .semi-bold;
  line-height: $base-line-height*2;
  padding: 0 $base-line-height*2;
  span {
    display: inline-block;
    vertical-align: middle;
  }
}

.btn-large {
  @extend .bold;
  letter-spacing: 3px;
  @extend .caps;
  padding: $base-line-height $base-line-height*2;
}
.btn-small {
  font-size: 0.65em;
  text-transform: uppercase;
  @extend .semi-bold;
  letter-spacing: 3px;
  background: transparent;
  border: 1.5px solid $grey-light;
  font-family: $serviceFont;
  color: $grey-dark;
  padding: 0.65em 1.3em;
  @include transition (all 0.3s ease);
  &:hover { color: $black; border-color: transparent; background: $grey-light; }
}
.btn-edit {
    @extend .btn-small;
    &.inverse {
      color: $white;
      &:hover { color: $black; background: $grey-light; }
    }
    @if ( true == $is_rtl ) {
      padding: 0 $base-line-height/2 0 $base-line-height;
    }
    @else {
      padding: 0 $base-line-height 0 $base-line-height/2;
    }
    line-height: 2em;
    vertical-align: middle;
    display: inline-block;
    margin-bottom: 1em;
  i {
    @if ( true == $is_rtl ) {
      margin-left: $base-line-height;
      border-left: 2px solid $grey-light;
      padding-left: $base-line-height/2;
    }
    @else {
      margin-right: $base-line-height;
      border-right: 2px solid $grey-light;
      padding-right: $base-line-height/2;
    }
    line-height: 2em;
    height: 2em;
    display:inline-block;
  }
}

a.external { position: relative; @extend .semi-bold; }
a[target="_blank"]:hover:after {
}

%table-base {
  width: 100%;
  border-collapse: collapse;
  // @include media-breakpoint-down(sm) {
  //   table-layout: fixed;
  // }
  /*&:not([id^=wp-calendar]) {
    border: 2px solid $grey-lightest;
    th { @extend .caps; @extend  .letter-spacing-2; font-family: $serviceFont; }
    th, td { @extend .demi-small; padding: $base-line-height; border: 1px solid $grey-lightest; }
    td { color: $grey-dark; }
  }*/
}
%table-style {
    border: 2px solid $grey-lightest;
    th { @extend .caps; @extend  .letter-spacing-2; font-family: $serviceFont; }
    th, td { @extend .demi-small; padding: $base-line-height; border: 1px solid $grey-lightest; }
    td { color: $grey-dark; }
}


%categories  {
  a {
    @extend .caps;
    @extend .service-font;
    @extend .letter-spacing-2;
    @extend .semi-bold;
    position: relative;
    display: inline-block;
    vertical-align:  middle;
  }
  a:not(:last-of-type) {
    @if ( true == $is_rtl ) {
        margin-left: 1.5em;
    }
    @else {
        margin-right: 1.5em;
    }
    &::after{
      color: $grey;
      z-index: 1;
      pointer-events: none;
      position: absolute;
      top: 0;
      @if ( true == $is_rtl ) {
          content: '\\';
          left: -1em;
      }
      @else {
          content: '/';
          right: -1em;
      }
    }
  }
}

// go-to-top button
.czr-btta {
  background-color: $skin-dark-color-shade-high;
  &:hover, &:focus, &:active {
    background-color: $skin-dark-color-shade-low;
  }
  color: $white;
  display: none;
  width: 46px;
  height: 45px;
  position: fixed !important;
  bottom: 100px;
  cursor: pointer;
  @include opacity(0);
  z-index: 100;
  border-width: 1px;
  padding: 0;
  &.right {
    right: -45px;
  }
  &.left {
    left: -45px;
  }
  i {
    line-height: 43px;
    display: inline-block;
    &:before {
      font-weight: 700;
    }
  }
  &.show {
    cursor: pointer;
    @include opacity(1);
    &.left {
      left: -1px
    }
    &.right {
      right: -1px
    }
  }
  //(min-width: 576px)
  @include media-breakpoint-up(sm) {
    display: block
  }
}

// Quote and link formats
blockquote, .entry-link {
    position: relative;
    margin: $base-line-height*2 0;
    padding-top: $base-line-height*2;
    padding-bottom: $base-line-height*2;
    border-top: 1px solid $grey-lightest;
    border-bottom: 1px solid $grey-lightest;
    @extend .bold;

    &::before{
      font-size: ms(2);

      vertical-align: top;
      font-family: "customizr";
      font-style: normal;
      font-weight: normal;
      speak: none;
      display: block;

      text-align: inherit;

      font-variant: normal;
      text-transform: none;

      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
}
//(min-width: 576px)
@include media-breakpoint-up(sm) {
  blockquote, .entry-link {
      &::before{
        top:$base-line-height*2;
        display: inline-block;
        width: 1em;
        @if ( true == $is_rtl ) {
          right: $base-line-height*2;
        }
        @else {
          left:$base-line-height*2;
        }
        text-align: center;
        position: absolute;
        width: 1em;
        margin-right: .2em;
        margin-left: .2em;
      }
  }
}

// Blockquotes, Links and cites
blockquote > *,
.entry-link a {
    margin-top: $base-line-height;
    margin-bottom: 1em;
    word-break: break-word;
    color: $black;
}


blockquote {
  cite {
    clear: both;
    display: block;
    margin-top: 1.5em;
    &::before {
      top: 1em;
      bottom: auto;
    }
  }

  &::before{
    content: "\e808";
  }
}

cite {
  color: $grey-dark;
  font-weight: 300;
  font-style: normal;

  @if ( true == $is_rtl ) {
    padding-right: $base-line-height*2.1;
    padding-left: $base-line-height/5;
  }
  @else {
    padding-left: $base-line-height*2.1;
    padding-right: $base-line-height/5;
  }

  position: relative;
  display: inline-block;
  &::before {
    content: "";
    position: absolute;
    width: $base-line-height*2;
    height:1px;
    bottom:2px;
    @if ( true == $is_rtl ) {
      right: 0;
    }
    @else {
      left:0;
    }

    border-bottom: 1px solid;
    color: $black;
  }
}
// Blockquotes and cites END

// Link
.entry-link {
  &::before{
    content: '\e812';
  }
}
// link
//(min-width: 576px)
@include media-breakpoint-up(sm) {
    blockquote > * {
        @if ( true == $is_rtl ) {
          margin-right: $base-line-height*4;
          padding-right:$base-line-height*4;
        }
        @else {
          margin-left: $base-line-height*4;
          padding-left:$base-line-height*4;
        }
    }

    .entry-link a {
        @if ( true == $is_rtl ) {
          margin-right: $base-line-height*8;
        }
        @else {
          margin-left: $base-line-height*8;
        }
    }
}
//blockquote and Gutenberg
//blockquote
.wp-block-quote {
    padding-top: $base-line-height*3;
    &::before {
        //top: $base-line-height/2;
        @if ( true == $is_rtl ) {
            right: 0;
        }
        @else {
            left: 0;
        }
        top: $base-line-height;
    }
    & > * {
        margin-right: $base-line-height/2;
        margin-left: $base-line-height/2;
        padding-left: 0;
        padding-right: 0;
    }
    cite {
        &::before {
            @if ( true == $is_rtl ) {
                margin-right: $base-line-height*-2;
            }
            @else {
                margin-left: $base-line-height*-2;
            }
            position: static;
            display: inherit;
        }
        display: inline-block;
        @if ( true == $is_rtl ) {
            padding-right: $base-line-height*2;
            padding-left: 0;
        }
        @else {
            padding-left: $base-line-height*2;
            padding-right: 0;
        }
        margin: 0;
    }
}
//pullquote
.wp-block-pullquote {
    margin: $base-line-height*2 0;
    padding: 0;
    border-top: 1px solid $black;
    border-bottom: 1px solid $black;
    blockquote {
        @extend .wp-block-quote;
        border: none;
        margin: 0;
        &.has-text-color {
            & > p,
            & cite,
            & cite::before {
              color: inherit;
            }
        }
        & > p {
          margin-top: 0
        }
    }
    &:not([class*=align]) {
        clear: both;
    }
}
//blockquote, link, cite end

.tags {
    @extend .inline-list-nospace;
    a {
      text-decoration: none !important;
    }
}
.tagcloud a,
.tag__link {
  padding: $base-line-height/4 $base-line-height/2;
  border-width: 1px;
  @extend .service-font;
  @include transition (all 0.3s ease);
  line-height: 1em;
  white-space: normal;
  word-break: break-word;
}

.tagcloud a,
.tags li {
  @if ( true == $is_rtl ) {
    margin: $base-line-height/4 0 $base-line-height/4 $base-line-height/4;
  }
  @else {
    margin: $base-line-height/4 $base-line-height/4 $base-line-height/4 0;
  }
}

.tagcloud a + a,
.tags li + li {
  @if ( true == $is_rtl ) {
      margin-right: 0;
  }
  @else {
       margin-left:0;
  }
}

.v-separator { margin: 0  $base-line-height/2; text-align: center; }


// tabs
%tabs-li {
    position: relative;
    font-size: ms(2);
    width: 100%;
    text-align: center;
    padding: 0;
    margin: 0 0 -2px;
    @include media-breakpoint-up(sm) {
      width: auto;
      @if ( true == $is_rtl ) {
        text-align: right;
      }
      @else {
        text-align: left;
      }
      & + li {
          @if ( true == $is_rtl ) {
            padding-right: $base-line-height;
            margin-right: 0;
          }
          @else {
            padding-left: $base-line-height;
            margin-left: 0;
          }
      }
    }
}
.tabs {
  border-bottom: 2px solid $grey-light;
  //@extend .bold;
  li {
    @extend %tabs-li;
  }
  .nav-link {
      color: $grey;
      @include underlined_simple (transparent, 2px);
      @extend .small;
      padding: $base-line-height/2 0;

      &::before {
        @include transition(all, .3s ease);
        @include transform(scale(0));
      }
      &:hover, &.active, &.active:hover, &.active:focus {
        background-color: transparent;
      }
      &.active::before {
        @include transform(scale(1));
      }
  }
  //.nav-link
}

.tab-content {
    margin-top: $base-line-height;
}

// end tabs

// CSS Loader
.czr-img-gif-loader {
  width: 100%;
  display: inline-block;
  height: 100%;
}
// Pure CSS loader
@-webkit-keyframes czr-mr-loader {
  0% {
    -webkit-transform: scale(0.1);
    transform: scale(0.1);
    opacity: 1;
  }
  70% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0.7;
  }
  100% {
    opacity: 0.0;
  }
}
@keyframes czr-mr-loader {
  0% {
    -webkit-transform: scale(0.1);
    transform: scale(0.1);
    opacity: 1;
  }
  70% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0.7;
  }
  100% {
    opacity: 0.0;
  }
}
.czr-css-loader {
  display: none;
  width: 50px;
  height: 50px;
  position: absolute;
  @include transform( translate3d(-50%, -50%, 0) );
  top: 50%;
  left: 50%;
}
.csstransforms3d .czr-css-loader {
  display: block;
}
.czr-mr-loader > div:nth-child(0) {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}
.czr-mr-loader > div:nth-child(1) {
  -webkit-animation-delay: -0.6s;
  animation-delay: -0.6s;
}
.czr-mr-loader > div:nth-child(2) {
  -webkit-animation-delay: -0.4s;
  animation-delay: -0.4s;
}
.czr-mr-loader > div:nth-child(3) {
  -webkit-animation-delay: -0.2s;
  animation-delay: -0.2s;
}
.czr-mr-loader > div {
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  position: absolute;
  /*top: -4%;
  left: -4%;*/
  top: -0%;
  left: -0%;
  width: 100%;
  height: 100%;
  border-radius: 100%;
  border: 2px solid #777;
  -webkit-animation: czr-mr-loader 1.25s 0s infinite cubic-bezier(0.21, 0.53, 0.56, 0.8);
  animation: czr-mr-loader 1.25s 0s infinite cubic-bezier(0.21, 0.53, 0.56, 0.8);
}

//  slider/gallery

// Loader
html.no-js [id*=czr-slider-loader-wrapper] { display: none; }

// Gif Loader if center slide option is checked
.czr-slider-loader-wrapper {
  height: 100%;
  width: 100%;
  position: absolute;
  z-index: 99;
  //less than the default sticky-header z-index
  background: #ffffff;
}
/* end loader */

// slider dots
.czr-carousel {
  .flickity-page-dots {
    bottom: 0.5em;
    padding: 0 1em;
    .dot {
      position: relative;
      z-index: 10;
      background-color: white;
      &::before { content: none; }
      //should be smaller when printed in the post list sliders
      .grid__item & {
        width: 7px;
        height: 7px;
        margin: 0px 4px;
      }
    }
    //bullets should be smaller
    @include media-breakpoint-down(xs) {
      @at-root .czr-carousel .flickity-page-dots {
        bottom: 0.3em;
        .dot {
          width: 7px;
          height: 7px;
          margin: 1px 4px;
        }
      }
    }
  }
}

// slider/gallery arrows
.czr-carousel-control {
 letter-spacing: 0;
 font-family: inherit;
}

.czr-carousel-nav {
  display:block;
  width: 100%;
  .czr-carousel-control {
    position: absolute;
    z-index: 9;
    top: calc((100% - 60px)/2);
    text-align: center;
    padding: 0px;
    display: block;
    height: 60px;
    width: 50px;
    @include backface-visibility(hidden);
    @include transition ( width 0.3s cubic-bezier(0.39, 0.575, 0.565, 1));
    @include transform(translateZ(0));
    @include transform-style(preserve-3d);
    line-height: 60px;
    border: none;
    &:hover{
      opacity: 1;
      width: 60px;
      background-color: rgba(59, 59, 59, 0.2)!important;
    }
    //should be smaller on mobiles < 576px
    @include media-breakpoint-down(xs) {
      @at-root .czr-carousel-nav .czr-carousel-control {
        top: calc((100% - 45px)/2);
        height: 45px;
        line-height: 45px;
        width: 35px;
        &:hover{
          opacity: 1;
          width: 40px;
        }
      }
    }
  }
  .czr-carousel-prev {
    left: 0;
    @include border-radius(0px, 2px, 2px, 0px);
  }
  .czr-carousel-next  {
    right: 0;
    @include border-radius(2px, 0px, 0px, 2px);
  }
}

.mfp-gallery {
  @extend .czr-carousel-nav;
  [class*=mfp-arrow] {
    z-index: 9999;
    &::before,
    &::after {
      border: none;
      margin-right: .2em;
      margin-left: .2em;
    }
  }
}

// carousel

.czr-carousel {
  position: relative;
  overflow: hidden;

  .carousel-cell {
    position: relative;
    width: 100%;
    overflow: hidden;
  }

  @at-root .carousel-caption {
    height: auto;
    max-height: 80%;
    width: 80%;
    text-align: center;
    z-index: 3;
    overflow: hidden;
    @include transform( translate(-50%, -50%) );
    @include transform( translate3d(-50%, -50%, 0) );
    top: 50%;
    left: 50%;
    position: absolute;
  }

  @at-root .carousel-image img {
    width: 100%;
    height: auto;
  }

  @at-root .center-slides-disabled .carousel-image img {
    // temporary CSS centering
    @include transform( translate(-50%, -50%) );
    @include transform( translate3d(-50%, -50%, 0) );
    top: 50%;
    left: 50%;
    position: absolute;
  }

  // If automatic centering is enabled
  .center-slides-enabled > .item > .carousel-image img {
    display: block;
    position: relative;
  }
}

/* avatars */

.avatar { border-radius: 50% }

.avatar-80 {
  width:  80px;
  height: 80px;
}
.avatar-64 {
  width:  64px;
  height: 64px;
}
.avatar-48 {
  width:  48px;
  height: 48px;
}

/*
* Link mask, like round divs
*/
.czr-link-mask {
  position: absolute;
  border-color: white;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  overflow: hidden;
  z-index: 1;


  &::before {
    @include backface-visibility( hidden );
    @include transform-style( preserve-3d );
    position: absolute;
    width: 63%;
    //
    // this refers to the parent width, allowing us to have a perfect square despite the parent
    // as it has the same element's width percentage value.
    //
    padding-bottom: 63%;
    content: '';
    z-index: 1;
    /* Centering */
    left: 50%;
    top: 50%;
    @include transform ( translate(-50%,-50%) ); // fallback for those browsers w/o translate3d transform property
    @include transform ( translate3d(-50%,-50%, 0) );
    // end of centering
    border: 150px solid;
    border-color: inherit;
    .ie9 & {
      border-color: transparent !important;
    }
    @include box-sizing( content-box );
    transition: all .3s ease;
    .no-effect & { border: transparent }
    .round & { border-radius: 50% }

    .expanded  &,
    .czr-link-mask-p.hover & {
      @include transform ( translate(-50%,-50%) scale(1.4) ); // fallback for those browsers w/o translate3d transform property
      @include transform ( translate3d(-50%,-50%, 0) scale(1.4) );
    }
  }
}

svg.czr-svg-placeholder {
  fill: none;
  stroke: #eee;
  stroke-width: 50px;
  opacity: 0;
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 50%;
  top: 25%;
  @include transition(opacity .5s ease)
}

.bg-link, .bg-icon-link {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1;
    @include transform( translate3d( 0, 0, 0 ) );
}
.bg-link {
  @include transition(all, 0.6s ease);
  background: transparent;
}
.hover .bg-link, .bg-link:hover {
  background: rgba($black, 0.25);
  z-index: 2;
}


//
// Widget link underline on hover effect
//
.czr-link-hover-underline {
  .widgets-list-layout-links, //<-jetpack top post/pages textual links only
  .widget_archive,
  .widget_nav_menu,
  .widget_rss ul,
  .widget_recent_entries,
  .widget_product_categories,//<- woocommerce widget
  .widget_categories,
  .widget_meta,
  .widget_recent_comments,
  .widget_pages,
  .widget_calendar {
    a {
      @include underlined_nocolor( 1px );
      display: inline-block;
      text-decoration: none;
    }
  }
}