/* Responsive YouTube video : http://avexdesigns.com/responsive-youtube-embed/ */
.video-wrapper {
  position: relative;
  padding-bottom: 56.25%;
  /*padding-top:30px;*/
  height: 0;

  iframe, video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

/* Socialhub page design */
.socialhub-page {
  &.content-body {
    padding: 0;
  }
  .background-wrapper {
    background-position: center top;
    background-repeat: no-repeat;
  }
  .socialhub-page--header {
    padding-left: 3%;
    padding-top: 70px;

    .field-name-body {
      margin: 15px 0;
    }

    .field-name-body p {
      font: 200 2.2em raleway;
    }
  }
  .socialhub-page--title {
    font-family: Oswald;
    font-size: 2.2em;
    text-transform: uppercase;
  }
}

/* Socialhub load more */
a.socialhub-list--load-more {
  display: table;
  margin: 30px auto 0;
  table-layout: fixed;
  text-align: left;
  font: 200 1em raleway;
  color: #666666;
  text-decoration: none;
  text-transform: uppercase;

  &:before {
    content: "";
    display: table-cell;
    vertical-align: middle;
    width: 50px;
    height: 50px;
    background: url('../../safran/images/load-more.png') no-repeat center;
  }

  .text {
    display: table-cell;
    padding-left: 10px;
    vertical-align: middle;
  }
}

/* Socialhub filters */
.socialhub-list--filters {
  &.toggle-layout {
    color: #888c8d;
    display: block;
    margin: 10vh 0 15px 0;
    padding-right: 5px;
    text-align: right;
  }
  button {
    border: none;
    float: none;
    text-transform: uppercase;
    vertical-align: top;
  }
  & [class^='btn-'] {
    background-image: url('../images/socialhub-filters.png');
    padding: 0;
    width: 36px;
  }
  .btn-twitter {
    background-position: -36px -36px;

    &.active, &:hover {
      background-position: -36px 0;
    }
  }

  .btn-facebook {
    background-position: -72px -36px;

    &.active, &:hover {
      background-position: -72px 0;
    }
  }

  .btn-youtube {
    background-position: -108px -36px;

    &.active, &:hover {
      background-position: -108px 0;
    }
  }

  .btn-instagram {
    background-position: -144px -36px;

    &.active, &:hover {
      background-position: -144px 0;
    }
  }

  .btn-linkedin {
    background-position: 0 -36px;

    &.active, &:hover {
      background-position: 0 0;
    }
  }

  .btn-encouragement {
    background-position: -180px -36px;

    &.active, &:hover {
      background-position: -180px 0;
    }
  }

  .active, button:hover {
    color: #fff;
  }
}

/* Common rules for socialhub post */
.node-socialhub-post {
  position: relative;

  img {
    height: auto;
    max-width: 100%;
  }

  .network-logo {
    background: url('../images/sprite-social.png') no-repeat;
    display: inline-block;
    height: 36px;
    margin-right: 10px;
    vertical-align: middle;
    width: 36px;
  }
  &.twitter .network-logo {
    background-position: -36px 0;
  }
  &.facebook .network-logo {
    background-position: -72px 0;
  }
  &.youtube .network-logo {
    background-position: -108px 0;
  }
  &.instagram .network-logo {
    background-position: -144px 0;
  }
  &.linkedin .network-logo {
    background-position: 0 0;
  }
  &.encouragement .network-logo {
    background-position: -180px 0;
  }
}

/* Socialhub grid design */
.socialhub-grid--item {
  color: #fff;
  float: left;
  font: 200 1.15em raleway;
  height: 238px;
  margin: 0.5%;
  overflow: hidden;
  position: relative;
  width: 19%;

  &.twitter {
    background-color: #53a2da;
  }
  &.facebook {
    background-color: #3e5a99;
  }
  &.encouragement {
    background-color: #a7b02a;
  }
  a {
    color: #fff;
    &:hover {
      text-decoration: none;
    }
  }
  .content {
    height: 100%;
    margin-top: 0;
    padding: 20px;
  }
  .field-name-field-socialhub-image {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 0;
  }
  .field-name-body {
    height: 70%;
    overflow: hidden;
    position: relative;
    z-index: 10;

    &.field-type-text-with-summary p {
      font: inherit;
    }
  }
  .item--meta {
    bottom: 20px;
    position: absolute;
    left: 20px;
    z-index: 10;

    .time {
      display: inline-block;
      font: 400 1em Oswald;
      opacity: 0.5;
      vertical-align: middle;
    }
  }
  .video-mark {
    background: url('../../safran/images/picto-medias.png') no-repeat;
    height: 68px;
    left: 50%;
    margin-left: -34px;
    margin-top: -34px;
    opacity: 0.8;
    position: absolute;
    top: 50%;
    width: 68px;
    z-index: 20;
  }
  /* Encouragement block */
  &.encouragement-block {
    background: url('../images/bg-encouragement-block.png') 80% 50% no-repeat #fff;

    .catch-phrase {
      color: #333;
      font-size: 1.6em;
    }

    .button {
      background-color: #a7b02a;
      bottom: 20px;
      font-size: 0.75em;
      left: 20px;
      position: absolute;
      right: 56px;
    }
  }
}

/* Socialhub Post node view */
.socialhub-post {
  margin: 0 auto;
  position: relative;
  max-width: 960px;

  .socialhub-post--main-content {
    background-color: #f0f0f0;
    float: left;
    width: 67%;

    .field-name-body {
      margin-left: 20px;
      margin-right: 20px;
    }
  }

  .field-name-body {
    margin: 20px 0;
  }

  .field-name-field-socialhub-image img {
    display: block;
    margin: 0 auto;
    width: auto;
  }
  .socialhub-post--infos {
    float: right;
    width: 33%;

    .field-name-body {
      overflow-x: visible;
      overflow-y: auto;
    }

    .pad {
      padding: 20px 20px 60px;
    }
  }

  .infos--head {
    display: table;
  }

  &.twitter {
    .infos--head .network-logo {
      background-position: -36px -36px;
    }
    .socialhub-post--actions .see {
      background-color: #53a2da;
    }
  }
  &.facebook {
    .infos--head .network-logo {
      background-position: -72px -36px;
    }
    .socialhub-post--actions .see {
      background-color: #3e5a99;
    }
  }
  &.youtube {
    .infos--head .network-logo {
      background-position: -108px -36px;
    }
    .socialhub-post--actions .see {
      background-color: #d4261d;
    }
  }
  &.instagram {
    .infos--head .network-logo {
      background-position: -144px -36px;
    }
  }
  &.linkedin {
    .infos--head .network-logo {
      background-position: 0 -36px;
    }
  }
  &.encouragement {
    .infos--head .network-logo {
      background-position: -180px -36px;
    }
    .socialhub-post--actions .see {
      background-color: #a7b02a;
    }
  }

  .infos--network, .infos--author {
    display: table-cell;
    vertical-align: middle;
  }
  .infos--author {
    padding-left: 10px;

    a {
      font-family: Oswald;
    }
  }

  .socialhub-post--actions {
    border-top: 1px solid #333;
    border-bottom: 1px solid #333;
    margin: 20px 0;

    .see {
      background-color: #333;
      color: #fff;
      font-size: 0.9em;
      display: inline-block;
      line-height: 20px;
      margin-right: 5px;
      padding: 5px 10px;
      vertical-align: middle;
    }

    & [class^='icon-'] {
      background: url('../images/socialhub-post-actions.png') no-repeat;
      display: inline-block;
      height: 30px;
      margin: 0 3px;
      vertical-align: middle;
      width: 25px;
    }

    .icon-tw-retweet {
      background-position: 0 center;
    }
    .icon-tw-favorite {
      background-position: -25px center;
    }
    .icon-fb-share {
      background-position: -50px center;
    }
  }


  .socialhub-post--follow {
    background-color: #333;
    bottom: 0;
    color: #fff;
    font-family: Oswald;
    padding: 20px 60px 20px 20px;
    position: absolute;
    right: 0;
    text-transform: uppercase;
    width: 33%;

    &:hover {
      color: #fff;
    }

    .network-logo {
      margin-right: 0;
      margin-top: -18px;
      position: absolute;
      right: 20px;
      top: 50%;
    }
  }

  .socialhub-post .close {
    background: url('../../safran/images/close.png') no-repeat;
    height: 27px;
    opacity: 1;
    position: absolute;
    right: 0;
    top: 10px;
    width: 27px;
  }
}

/* Responsive */
@media only screen and (max-width: 1160px) {
  .socialhub-grid--item.encouragement-block .catch-phrase {
    font-size: 1.2em;
  }
}

@media only screen and (max-width: 1023px) {
  .socialhub-grid--item.encouragement-block .button {
    font-size: 0.65em;
  }
}

@media only screen and (max-width: 767px) {
  .socialhub-grid--item.encouragement-block .catch-phrase {
    font-size: 1.2em;
  }
}

@media only screen and (max-width: 400px) {
  .socialhub-grid--item .field-name-body {
    height: 60%;
  }

  .socialhub-grid--item.encouragement-block .catch-phrase {
    font-size: 0.7em;
  }

  .socialhub-grid--item.encouragement-block .button {
    font-size: 0.35em;
  }
}