@mixin button(){
  // border: 2px solid transparent;
  display: inline-block;
  color: $primary-color; 
  text-align:center;
  transition: all .2s;
 

  min-height: $input-height; 
  padding: .5em 1em;
  &:hover {
    background-color: $primary-color;
    color:#fff;
  }
}




button, input[type=button], input[type=submit] {
  border: 0px solid transparent;
}
//
// Buttons 
// --------------------------------------------------


// Button variants
//
// Easily pump out default styles, as well as :hover, :focus, :active,
// and disabled options for all buttons

@mixin button-variant($background, $border, $hover-background: darken($background, 7.5%), $hover-border: darken($border, 10%), $active-background: darken($background, 10%), $active-border: darken($border, 12.5%)) {
  color: color-yiq($background);
  @include gradient-bg($background);
  border-color: $border;
  @include box-shadow($btn-box-shadow);

  // @include hover {
  //   color: color-yiq($hover-background);
  //   @include gradient-bg($hover-background);
  //   border-color: $hover-border;
  // }

  // Disabled comes first so active can properly restyle
  &.disabled,
  &:disabled {
    color: color-yiq($background);
    background-color: $background;
    border-color: $border;
  }

  &:not(:disabled):not(.disabled):active,
  &:not(:disabled):not(.disabled).active,
  .show > &.dropdown-toggle {
    color: color-yiq($active-background);
    background-color: $active-background;
    @if $enable-gradients {
      background-image: none; // Remove the gradient for the pressed/active state
    }
    border-color: $active-border;


  }
}

@mixin button-outline-variant($color, $color-hover: color-yiq($color), $active-background: $color, $active-border: $color) {
  // border-width: 2px;
  color: $color;
  background-color: transparent;
  background-image: none;
  // border-color: $color;
      box-shadow: inset 0px 0px 0px 2px $color;


  &:hover {
    color: $color-hover;
    background-color: $active-background;
      box-shadow: inset 0px 0px 0px 2px $active-border;
  }



  &.disabled,
  &:disabled {
    color: $color;
    background-color: transparent;
  }

  &:not(:disabled):not(.disabled):active,
  &:not(:disabled):not(.disabled).active,
  .show > &.dropdown-toggle {
    color: color-yiq($active-background);
    background-color: $active-background;
    border-color: $active-border;

  }
}

$btn-border-radius: 50px;
// Button sizes
@mixin button-size($padding-y, $padding-x, $font-size, $line-height, $border-radius:0) {
  padding: $padding-y $padding-x;
  font-size: $font-size;
  line-height: $line-height;
  // Manually declare to provide an override to the browser default
  // @if $enable-rounded {
    border-radius: $border-radius;
  // } @else {
  //   border-radius: 0;
  // }
}

// Alternate buttons
// --------------------------------------------------


// Base styles
//



.btn-primary, .btn-color, .btn, .pagination a:not(.number) {
  @include button-variant($btn-color-color, $btn-color-bg, $btn-color-border);
  border-color: $blue;
  background-image: $green-gradient;
  // @include shadow-6dp();
  // margin: 30px 0;
  // min-width: 140px;
  &:hover, &:active, &:focus {
    color: white;
    border-color: transparent;
    background-color: $blue;
    background-image: none;
    // background-image: $green-gradient;
    // @include shadow-2dp();
  }
  &.no-shadow {
    box-shadow: none;
    &:hover, &:active, &:focus {
      box-shadow: none;
    }
  }
}



.btn-gray {
  @include button-variant(#A8A9B9, #A8A9B9, $btn-gray-border);
  background-color: $btn-gray-color
}

.btn-white {
  @include button-variant($btn-white-color, $btn-white-bg, $btn-white-border);
  &:focus {
    box-shadow: none;
  }
}
.btn {
  display: inline-block;
}

.btn, .top-menu-container .menu a, .pagination a:not(.number) {
  border-radius: 35px;
  color: #fff;
  font-size: $button-small-fontsize; /*11px*/
  font-weight: 700;
  letter-spacing: 0.15rem; /*15*/
  text-transform: uppercase;
  padding: .88em 3em;
  @include media-breakpoint-down(sm) {
    // font-size: 0.625; /*10px*/
  }
}
.btn-white-outline {
  border-color: #fff;
}
.btn-dark,.pagination a:not(.number) {
  // @include button-variant($gray-dark, $gray-dark );
  background-color: $gray-dark;
  border-color: $gray-dark;
  color: #fff;  
  background-image: none;
  &:hover {
    background-image: $green-gradient;

  }
}

.btn-grey {
  background-color: $gray-mid;
  &:hover {
    background-image: $green-gradient;
    border-color: transparent;

  }
}

button, .btn {
  img, svg {
    display: inline-block;
    vertical-align:middle;
  }
}

.btn.btn-dropdown {
  background: transparent;
  [class*=icon-]:before {
    font-size: 0.625rem;
  }
}

.btn-wide {
  width: 60vw;
  max-width: 240px;
}

// Remove all backgrounds

.btn-outline-gray, .top-menu-container .menu a {
  @include button-outline-variant($btn-gray-bg);
  background-color: rgba(255,255,255,0.6);
  // border: 2px solid $btn-gray-bg;
      box-shadow: inset 0px 0px 0px 2px $btn-gray-bg;

  &:focus {
    box-shadow: none;
  }

    &:hover {
      color: #fff;
      background-image: $green-gradient;
      border-color: transparent;
      box-shadow: none;
      background-color: $green;
  }

  &.btn-no-hover {

  }

  &.btn-translucent {

    &:not(:hover) {
      // background-color: rgba($btn-gray-bg, 0.25);
    }
  }

  &.btn-transparent {

    &:not(:hover) {
      background-color: transparent;
    }
  }
}

.btn-outline-gray.overlap.overlap-dark,
.btn-outline-white, {
  // border: 2px solid white;
      box-shadow: inset 0px 0px 0px 2px #fff;
  @include button-outline-variant($btn-white-bg, $btn-white-color);

  &:hover, &:active, &:focus {
    color: $black;
  }

  &:focus {
    color: white;
    background-color: transparent;
    box-shadow: none;
    box-shadow: none;
  }

  &.btn-no-hover {

    &:hover {
      color: $btn-white-bg;
    border-color: transparent;
      background-color: transparent;
    }
  }

  &.btn-translucent {

    &:not(:hover) {
      // background-color: rgba($btn-white-bg, 0.25);
    }
  }
}



.btn.btn-active, .btn.active-btn {
  @include button-variant($btn-color-color, $btn-color-bg, $btn-color-border);
  border-color: $blue;
  border-width: 0px;
  color: #fff;
  background-image: $green-gradient;
  // @include shadow-6dp();
  // margin: 30px 0;
  // min-width: 140px;
  &:hover, &:active, &:focus {
    color: white;
    border-color: transparent;
    background-color: $blue;
    background-image: none;
    // background-image: $green-gradient;
    // @include shadow-2dp();
  }
  &.no-shadow {
    box-shadow: none;
    &:hover, &:active, &:focus {
      box-shadow: none;
    }
  }
}
// Button Styles
// --------------------------------------------------

.btn-round {
  padding: 0;
  white-space: normal;
  border-radius: 50%;

  // &:not(.btn-sm),
  // &:not(.btn-lg) {
    width: 0.25rem + ($btn-padding-y * 2) + ($btn-line-height * $btn-font-size-base);
    height: 0.25rem + ($btn-padding-y * 2) + ($btn-line-height * $btn-font-size-base);
    line-height: ($btn-padding-y * 2) + ($btn-line-height * $btn-font-size-base);
  // }

  &.btn-sm {
    width: 0.25rem + ($btn-padding-y-sm * 2) + ($btn-line-height-sm * $font-size-sm);
    height: 0.25rem + ($btn-padding-y-sm * 2) + ($btn-line-height-sm * $font-size-sm);
    line-height: ($btn-padding-y-sm * 2) + ($btn-line-height-sm * $font-size-sm);
  }

  &.btn-lg {
    width: 0.25rem + ($btn-padding-y-lg * 2) + ($btn-line-height-lg * $font-size-lg);
    height: 0.25rem + ($btn-padding-y-lg * 2) + ($btn-line-height-lg * $font-size-lg);
    line-height: ($btn-padding-y-lg * 2) + ($btn-line-height-lg * $font-size-lg);
  }
}

.btn-toggle {

  span {
    display: inline-block;
    width: 0;
    transition: width 0.3s;
    overflow: hidden;
    vertical-align: middle;
  }

  &:hover,
  &:focus,
  &:active {

    span {
      width: 40px;
    }
  }
}

.btn-close {
  position: absolute;
  top: $gutter-width;
  right: $gutter-width;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  opacity: 1;

  .sup-navigation & {
    &.control-close {
      top: 0;
      right: 0;
    }
  }

  &:hover {

    &:before {
      transform: rotate(180deg);
    }
  }

  &:before {
    font-size: 0.5rem;
    width: 0.5rem;
    height: 0.5rem;
    transition: all .2s ease-in-out;
  }
}

.btn-opacity {

  opacity: 0.5;

  &:hover,
  &:active,
  &:focus,
  &.active {
    opacity: 1;
  }
}


//
// Button Sizes
//

.btn-sm {
  line-height: $btn-line-height-sm;
}

.btn-md {
  line-height: $btn-line-height;
}

.btn-lg {
  line-height: $btn-line-height-lg;
}


//
// Button Placeholders
//

@include placeholder('btn') {
  display: inline-block;
  font-weight: $btn-font-weight;
  line-height: $btn-line-height;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  user-select: none;
  border: $input-btn-border-width solid transparent;
  @include button-size($btn-padding-y, $btn-padding-x, $font-size-base, $btn-border-radius);
  // @include transition($btn-transition);

  font-family: Montserrat, arial, sans-serif;
  font-size: $btn-font-size-base; /*11px*/
  font-weight: 700;
  letter-spacing: 0.15rem; /*15*/
  text-transform: uppercase;

  // Share hover and focus styles
  // @include hover-focus {
  //   text-decoration: none;
  // }
  &:focus,
  &.focus {
    outline: 0;
    box-shadow: $btn-focus-box-shadow;
  }

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

  &:active,
  &.active {
    background-image: none;
    @include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow);
  }
}

@include placeholder('btn-outline-white') {
  @include button-outline-variant($btn-white-bg, $btn-white-color);

  &.btn-no-hover {

    &:hover {
      color: $btn-white-bg;
      background-color: transparent;
    }
  }

  &.btn-translucent {

    &:not(:hover) {
      background-color: rgba($btn-white-bg, 0.25);
    }
  }
}

/**
 * addthis fix
 */
.addthis_button_expanded > .at-icon-wrapper {
  display: none !important;
}
.addthis_default_style .addthis_separator,
.addthis_default_style .at4-icon,
.addthis_default_style .at300b,
.addthis_default_style .at300bo,
.addthis_default_style .at300bs,
.addthis_default_style .at300m  {
  float: none !important;
}

button[type="button"] {
  cursor: pointer;
}



// Fancy back buttons


.control-back, .control-close {
    color: #a8a9b9 !important;
    border-color: #a8a9b9 !important;
    text-transform: uppercase;
    border: 2px solid #a8a9b9;
    border-radius: 30px;
    height: 40px;
    line-height: 35px;

        display: inline-block;
        text-align: center;
        white-space: nowrap;
        vertical-align: middle;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        border: 2px solid transparent;
        padding: 0 1.25rem;
    font-size:14px;
        border-radius: 2.1875rem;
        transition: all .5s ease-in-out;
        &:hover {
          background-color: #fff;
        }
        z-index: 2;
    
}

.icon-close:before { 
  display: block;
  font-size: 11px !important;

  // margin-left: -5px;
  // margin-top: -3px;

  width: 11px !important;
  height: 11px !important;
}
.icon-close span {

}
.theme-button {
  // @include button();
  margin: 2em 0em;
}

.navigation.sup-navigation a, .navigation.sup-navigation .btn-outline-gray.overlap.overlap-dark {
    color: #a8a9b9;
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.btn-toggle span, .control-back span, .control-next span, .control-prev span, .control-close span {
    display: inline-block;
    width: 0;
    transition: width .3s;
    overflow: hidden;
    vertical-align: middle;
}

.btn-toggle:active span, .btn-toggle:focus span, 
.btn-toggle:hover span, .control-back:active span,
 .control-next:active span, .control-next:focus span, 
.control-back:focus span, .control-back:hover span,
 .control-next:hover span, .control-prev:active span, 
 .control-prev:focus span, .control-prev:hover span {
    width: 55px;
}
 .control-close:hover span {
  width: 70px;
}

.btn-small {
  font-size: $button-small-fontsize;
}

.btn-med {
  font-size: $button-med-fontsize;
}
.btn-large {
  font-size: $button-large-fontsize;
}



.site-header .view-more-button, .view-more-button  {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0;
    color:#2D2F37;
    line-height: 19px;
    &:after {
      width: 8px;
      height: 1em;
      vertical-align: middle; 
      display: inline-block;
      margin-left: 1em;
      content: " ";
      background-image: url(../../img/icons/chevron-right-grey.svg);
      @include containbg();
    }
}