/*
Theme Name: Karis

Uka Share Buttons styles override.
*/

.share-links {
  width: 100%;
  max-width: 800px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-bottom: 4rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: calc(1rem - .625rem);
  padding-right: calc(1rem - .625rem);
}

.share-links__title {
  display: none;
}

.share-links .uka-share-button {
  position: relative;
  -webkit-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  margin: 0 .625rem 1.25rem;
  padding: .875rem;
  color: #ffffff;
  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: .6875em;
  font-weight: 600;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  background-color: #1c1d21;
}

.share-links .uka-share-button .svg-icon {
  margin-right: .75em;
  vertical-align: middle;
}

.share-links .uka-share-button__text {
  position: relative;
  top: 2px;
}

.share-links .uka-share-button:hover,
.share-links .uka-share-button:focus {
  color: #ffffff;
  opacity: .8;
}

.share-links .uka-share-button--facebook {
  background-color: #3b5998;
}

.share-links .uka-share-button--twitter {
  background-color: #1da1f2;
}

.share-links .uka-share-button--linkedin {
  background-color: #0077b5;
}

.share-links .uka-share-button--pinterest {
  background-color: #bd081c;
}

.share-links .uka-share-button--reddit {
  background-color: #ff4500;
}

.share-links .uka-share-button--telegram {
  background-color: #2ca5e0;
}

.share-links .uka-share-button--vk {
  background-color: #4680c2;
}

@media only screen and (min-width: 480px) {
  .share-links {
    padding-left: calc(2.5rem - .625rem);
    padding-right: calc(2.5rem - .625rem);
  }
}

@media only screen and (min-width: 600px) {
  .share-links {
    margin-bottom: 5rem;
  }
}

@media only screen and (min-width: 768px) {
  .share-links {
    margin-bottom: 6rem;
  }

  .main-content > article + .share-links {
    margin-top: -2rem;
  }
}

@media only screen and (min-width: 1280px) {
  .share-links {
    margin-bottom: 8rem;
  }
}