/* SOCIAL MEDIA

01	TWITTER FEED
02	CHANNELS MARKETING
03	CHANNELS MARKETING BLOCK

*/

/* -----------------------------------------------------------------------
	01	TWITTER FEED
/* ---------------------------------------------------------------------*/

.main-content .field--name-field-ements-wfbb-page > .social_media_twitter_wfbb_block_ {
  padding-left: var(--section-inner-side-padding);
  padding-right: var(--section-inner-side-padding);
}


.social_media_twitter_wfbb_block_ .list-group {
  display: grid;
  grid-gap: var(--grid-gap);
  grid-template-columns: var(--grid-columns);
  overflow: hidden;
  position: relative;
}

.social_media_twitter_wfbb_block_ .list-group-item {
  grid-column: span 4;
  width: 100% !important;
  padding: 0;
  border: 0;
}

.social_media_twitter_wfbb_block_ .content .twitterembed-canvas .twitter-tweet {
  max-width: 100% !important;
  height: auto !important
}

.social_media_twitter_wfbb_block_ .content .twitterembed-canvas iframe {
  width: 100% !important;
}

div[data-service].twitterembed-canvas {
  aspect-ratio: 1/1;
  width: 100%;
  border-radius: 11px;
}

.social_media_twitter_wfbb_block_ .content .twitterembed-canvas .twitter-tweet {
  max-width: 100% !important;
  margin: 0 !important;
  background-color: #fff;
}

.social_media_twitter_wfbb_block_ .content .twitterembed-canvas iframe {
  width: 100% !important;
}

.paragraph .twitter-tweet.twitter-tweet-rendered {
  z-index: 10;
  position: relative;
}

.paragraph div[data-service].twitterembed-canvas .cll .c-nt {
  color: var(--color-grey-dark);
}

.paragraph div[data-service] .cll div.twitter-placeholder {
  padding-top: 1em;
}


.paragraph div[data-service].twitterembed-canvas, .tweet {
  height: 100%;
  background-color: var(--color-grey-light);
  border-radius: 11px;
}

.paragraph div[data-service].twitterembed-canvas.show-ph {
  background-color: #fff !important;
  aspect-ratio: unset !important;
}

/* -----------------------------------------------------------------------
	03	CHANNELS MARKETING BLOCK
/* ---------------------------------------------------------------------*/

#block-wfbballsocialmedia {
  text-align: center;
  position: relative;
  z-index: 10;
  width: 100%;
  padding-top: calc(var(--section-gap) * 2);
  pointer-events: none;
}

#block-wfbballsocialmedia h2 {
  margin-bottom: 0;
}

.paragraph--type--wfbb-pm-social-media-block {
  background: var(--color-primary);
  color: #fff;
  padding: var(--section-inner-side-padding) 0 var(--section-gap);
  text-align: center;
  border-radius: var(--border-radius);
}

.pm-links-to-socialmedia > div a,
.links-to-socialmedia > div a {
  display: block;
  text-align: center;
  color: transparent;
}

.links-to-socialmedia > div a:hover  {
  color: var(--color-primary);
  text-decoration: none;
}

.pm-links-to-socialmedia > div a:hover {
  color: #fff;
  text-decoration: none;
}

.pm-links-to-socialmedia,
.links-to-socialmedia {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  grid-column: 4 / 10;
  width: 100%;
  pointer-events: all;
}

.pm-links-to-socialmedia > div a:before,
.links-to-socialmedia > div a:before {
  display: block;
  content: '';
  height: 4rem;
  width: 4rem;
  margin: 0 auto .5rem;
  border-radius: calc(var(--border-radius) * 2);
  overflow: hidden;
  background-size: contain;
  background-repeat: no-repeat;
  transition: all ease-in-out .2s;
  box-shadow: 0 12px 20px rgba(0,0,0,0);
}

.pm-links-to-socialmedia > div a:hover:before,
.links-to-socialmedia > div a:hover:before {
  transform: scale(1.2);
  box-shadow: 0 20px 40px rgba(0,0,0,.3);
}

.pm-links-to-socialmedia > div,
.links-to-socialmedia > div {
  padding: 1rem;
  text-align: center;
  flex-grow: 1;
}

.pm-social-media,
.social-media {
  display: grid;
  grid-gap: var(--grid-gap);
  grid-template-columns: var(--grid-columns);
  row-gap: calc(var(--grid-gap));
}

.pm-title-social-media,
.title-social-media,
.pm-text-social-media {
  grid-column: 3 / 11;
}

.pm-links-to-socialmedia > div.pm-social-link_xing a:before {
  background-image: var(--icon-xing-white);
}

.pm-links-to-socialmedia > div.pm-social-link_linkedin a:before {
  background-image: var(--icon-linkedin-white);
}

.pm-links-to-socialmedia > div.pm-social-link_facebook a:before {
  background-image: var(--icon-facebook-white);
}

.pm-links-to-socialmedia > div.pm-social-link_twitter a:before {
  background-image: var(--icon-twitter-white);
}

.pm-links-to-socialmedia > div.pm-social-link_youtube a:before {
  background-image: var(--icon-youtube-white);
}

.pm-links-to-socialmedia > div.pm-social-link_instagram a:before {
  background-image: var(--icon-instagram-white);
}


.links-to-socialmedia > div.social-link_xing a:before {
  background-image: var(--icon-xing-primary);
}

.links-to-socialmedia > div.social-link_linkedin a:before {
  background-image: var(--icon-linkedin-primary);
}

.links-to-socialmedia > div.social-link_facebook a:before {
  background-image: var(--icon-facebook-primary);
}

.links-to-socialmedia > div.social-link_twitter a:before {
  background-image: var(--icon-twitter-primary);
}

.links-to-socialmedia > div.social-link_youtube a:before {
  background-image: var(--icon-youtube-primary);
}

.links-to-socialmedia > div.social-link_instagram a:before {
  background-image: var(--icon-instagram-primary);
}


@media (max-width: 991px) {

  .main-content .field--name-field-ements-wfbb-page > .social_media_twitter_wfbb_block_ {
    padding-left: 0;
    padding-right: 0;
  }

  .pm-links-to-socialmedia, .links-to-socialmedia {
    grid-column: 2 / 12;
  }

  .pm-links-to-socialmedia > div a:before, .links-to-socialmedia > div a:before {
    height: 3rem;
    width: 3rem;
  }

}

@media (max-width: 900px) and (min-width: 768px) {

  .block-twitter-tweets-block .content .twitterembed-canvas {
    grid-column: span 6;
  }

}

@media (max-width: 767px) {

  .block-twitter-tweets-block .content .twitterembed-canvas {
    grid-column: span 12;
  }

  .pm-links-to-socialmedia, .links-to-socialmedia,
  .pm-title-social-media, .title-social-media, .pm-text-social-media {
    grid-column: 1 / 13;
  }

  .social_media_twitter_wfbb_block_ .list-group {
    display: flex;
    justify-content: flex-start;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scroll-padding: 1rem;
    padding-right: var(--page-gap);
    padding-left: var(--page-gap);
    width: calc(100% + var(--page-gap) * 2);
    left: calc(var(--page-gap) * -1);
  }

  .social_media_twitter_wfbb_block_ .list-group-item {
    scroll-snap-align: start;
    flex-shrink: 0;
    max-width: 90%;
    min-height: 500px;
  }

  #block-wfbballsocialmedia {
    width: calc(100% + var(--page-gap) * 2);
    left: calc(var(--page-gap) * -1);
    padding-left: var(--page-gap);
    padding-right: var(--page-gap);
  }

}

@media (max-width: 500px) {

  .pm-links-to-socialmedia > div, .links-to-socialmedia > div {
    padding: .5rem;
  }

  .pm-links-to-socialmedia > div a:before, .links-to-socialmedia > div a:before {
    height: 2rem;
    width: 2rem;
    border-radius: var(--border-radius);
  }

}