.socials {
  @extend .inline-list;
    li + li {
      @if ( true == $is_rtl ) {
        margin-right: .833rem;
      }
      @else {
        margin-left: .833rem;
      }
    }
  a {
    display:block;
  }
}


//
// 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;
    -webkit-box-shadow: 0 0 0 2px rgba(2, 117, 216, 0.25);
            box-shadow: 0 0 0 2px rgba(2, 117, 216, 0.25);
  }

  // Disabled comes first so active can properly restyle
  &.disabled,
  &:disabled {
    cursor: $cursor-disabled;
    opacity: .65;
    -webkit-box-shadow: none;
            box-shadow: none;
  }

  &:active,
  &.active {
    background-image: none;
    -webkit-box-shadow: 0 0 0 2px rgba(2, 117, 216, 0.25);
            box-shadow: 0 0 0 2px rgba(2, 117, 216, 0.25);
  }
}


.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;
    }
  }
}

input[type=submit] {
  @extend %btn_base;
  @extend .btn-skin-dark;
  @extend .caps;
  cursor: pointer;
}

//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) {
    margin-right: 1.5em;
    &::after{
      content: '/';
      color: $grey;
      z-index: 1;
      pointer-events: none;
      position: absolute;
      top: 0;
      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{
      top:$base-line-height*2;
      left:$base-line-height*2;
      position: absolute;
      font-size: ms(2);
      display: inline-block;
      vertical-align: top;
      font-family: "customizr";
      font-style: normal;
      font-weight: normal;
      speak: none;
      width: 1em;
      margin-right: .2em;
      text-align: center;
      font-variant: normal;
      text-transform: none;
      margin-left: .2em;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
}

// Blockquotes and cites
blockquote {
  p {
    margin-left: 5em;
    max-width: 90%;
    padding-left:$base-line-height*4;
    color: $black;
    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;
  padding-left: $base-line-height*4.1;
  padding-right: $base-line-height/5;
  position: relative;
  display: inline-block;
  &::before {
    content: "";
    position: absolute;
    width: $base-line-height*4;
    height:1px;
    bottom:2px;
    left:0;
    background: $black;
  }
  &::first-child {
    float: left
  }
}
// Blockquotes and cites END

// Link
.entry-link {
  a {
    margin-left: 10em;
    max-width: 90%;
    color: $black;
    margin-top: $base-line-height;
    margin-bottom: 1em;
  }
  &::before{
    content: '\e812';
  }
}
// link


.tags {
    @extend .inline-list;
    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;
}

.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 {
  border-bottom: 2px solid $grey-light;
  //@extend .bold;
  li {
      position: relative;
      font-size: ms(2);
      margin-bottom: -2px;
      @if ( true == $is_rtl ) {
        text-align: right;
      }
      @else {
        text-align: left;
      }
  }
  .nav-link {
      color: $grey;
      position: relative;
      @include underlined_simple (transparent, 2px);
      @extend .small;
      text-align: left;
      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
  li + li {
      padding-left: $base-line-height;
      margin-left: 0 !important;
  }
}

.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;
  -webkit-transform: translate3d(-50%, -50%, 0);
  -ms-transform: translate3d(-50%, -50%, 0);
  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 */

// Carousel dots for the main slider
[id^=customizr-slider-] {
  .flickity-page-dots {
    bottom: 30px;
    .dot {
      background-color: white;
      &::before { content: none; }
    }
  }
}

// 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: 100px;
    }
  }
  .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;
    }
  }
}

// carousel

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

  @at-root .carousel-caption {
    height: auto;
    max-height: 80%;
    width: 80%;
    text-align: center;
    z-index: 3;
    overflow: hidden;

    // temporary centering
    transform: translate(-50%, -50%);
    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
    transform: translate(-50%, -50%);
    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 perspective( 1000px );
    @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;
}


//
// Suppress link underline on hover effect
//
.czr-link-hover-underline-off {
    .comment-author a::before, .comment-link::before,
    .czr-format-link::before,
    .widget__wrapper a:hover::before, .widget-area a:hover::before,
    [class*=nav__menu] li.show > a > span:first-of-type::before,
    li > a > span:first-of-type:hover::before {
        content: none !important;
    }
}