ihk24/templates/source/sass/partials/objects/_social.scss

@charset "UTF-8";

section.social {
  @media(max-width: 767px) {
    .container {
      padding: 0;
    }
  }

  h2 {
    margin-bottom: 0.4em;
  }

  .social-wrapper {
    position: relative;
    background-color: $color-primary-light-04;
    background-color: var(--theme-color-primary-dimmed-04, $color-primary-light-04);
    padding: 60px;
    display: flex;
    border-bottom: 8px solid $color-secondary;
    border-bottom: 8px solid var(--theme-color-secondary, $color-secondary);

    @media(max-width: 999px) {
      padding: 40px;
      flex-direction: column;
    }

    @media(max-width: 767px) {
      padding: 20px;
    }

    @media(min-width: 1000px) {
      > div {
        flex: 1 1 50%;
        max-width: 50%;
      }
    }
  }

  .social-box {
    position: relative;
    min-height: 500px;
    display: block;
    line-height: 0 !important;

    @media(max-width: 767px) {
      min-height: 350px;
    }

    iframe {
      min-height: 100%;
    }

    .fb_iframe_widget {
      float: right;
      @media(max-width: 999px) {
        float: none;
        display: inline-block;
        transform: translateX(-50%);
        left: 50%;
      }
    }
  }

  @media(min-width: 1000px) {
    .social-profiles {
      position: absolute;
      bottom: 60px;
      left: 60px;

      ~ .text-box {
        padding-bottom: 120px;
      }
    }

    .text-box {
      padding-right: 40px;
    }
  }

  @media(max-width: 999px) {
    .social-profiles {
      position: absolute;
      bottom: 24px;
      left: 20px;

      ~ .social-box {
        margin-bottom: 120px;
      }
    }

    .text-box {
      margin-bottom: 10px;
    }
  }
}

.social-icons {
  margin: 0 0 -15px -15px;
  padding: 0;
  font-size: 0;
  line-height: 0;

  li {
    display: inline-block;
    vertical-align: top;
    margin-left: 15px;
    margin-bottom: 15px;
  }

  a {
    position: relative;
    display: block;
    width: 50px;
    height: 50px;
    color: $color-white;
    text-decoration: none;
    text-align: center;
    font-size: 0;
    line-height: 0;
    @include focusvisible;
    transition: 0.3s ease;
    z-index: 1;
    overflow: hidden;

    &:after {
      content: "";
      @include fullsize;
      margin: 1px;
      background-color: $color-white;
      z-index: -1;
    }

    &:before {
      display: block;
      font-size: 52px;
      line-height: 52px;
      font-family: "Icons";
      margin: -1px;
    }

    &.facebook {
      @extend .icon-social-facebook;
      color: $color-facebook;
    }
    &.twitter {
      @extend .icon-social-twitter;
      color: $color-twitter;
    }
    &.linkedin {
      @extend .icon-social-linkedin;
      color: $color-linkedin;
    }
    &.youtube {
      @extend .icon-social-youtube;
      color: $color-youtube;
    }
    &.instagram {
      @extend .icon-social-instagram;
      color: $color-instagram;
    }
    &.xing {
      @extend .icon-social-xing;
      color: #126567;
    }
    &.threema {
      @extend .icon-social-threema;
      color: #05a63f;
    }
    &.telegram {
      @extend .icon-social-telegram;
      color: #0088cc;
    }
    &.whatsapp {
      @extend .icon-social-whatsapp;
      color: #25D366;
    }
    &.pinterest {
      @extend .icon-social-pinterest;
      color: #FF0000;
    }

  }
}