/**
 * Top Bar Social
 */
#top-bar-social {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li {
    float: left;

    a {
      display: block;
      float: left;
      font-size: 14px;
      color: $color-13;
      padding: 0 6px;
    }
  }

  &.top-bar-left li:first-child a {
    padding-left: 0;
  }

  &.top-bar-right li:last-child a {
    padding-right: 0;
  }

  li a {
    &.oceanwp-twitter a:hover { color: #46d4fe; }
    &.oceanwp-facebook a:hover { color: #37589b; }
    &.oceanwp-googleplus a:hover { color: #de5a49; }
    &.oceanwp-pinterest a:hover { color: #cb2027; }
    &.oceanwp-dribbble a:hover { color: #ea4c89; }
    &.oceanwp-vk a:hover { color: #597BA5; }
    &.oceanwp-instagram a:hover { color: #3F729B; }
    &.oceanwp-linkedin a:hover { color: #3399CC; }
    &.oceanwp-tumblr a:hover { color: #2C4762; }
    &.oceanwp-github a:hover { color: #60b044; }
    &.oceanwp-flickr a:hover { color: #fa4086; }
    &.oceanwp-skype a:hover { color: #00AFF0; }
    &.oceanwp-youtube a:hover { color: #C4302B; }
    &.oceanwp-vimeo a:hover { color: #1ab7ea; }
    &.oceanwp-vine a:hover { color: #00bf8f; }
    &.oceanwp-xing a:hover { color: #006464; }
    &.oceanwp-yelp a:hover { color: #C41200; }
    &.oceanwp-tripadvisor a:hover { color: #589442; }
    &.oceanwp-rss a:hover { color: #ff7900; }
    &.oceanwp-email a:hover { color: #13aff0; }
  }
}

/**
 * Top Bar Social Right
 */
#top-bar-social.top-bar-right {
  position: absolute;
  right: 0;
  top: 50%;
  height: 20px;
  line-height: 20px;
  margin-top: -10px;
}

/**
 * Top Bar Social Left
 */
#top-bar-social.top-bar-left {
  position: absolute;
  left: 0;
  top: 50%;
  height: 20px;
  line-height: 20px;
  margin-top: -10px;
}

/**
 * Top Bar Social Centered
 */
#top-bar-social.top-bar-centered {
  padding-top: 15px;

  li {
    display: inline-block;
    float: none;
  }
}

/*------------------------------------*
  Phone Portrait and Landscape
*------------------------------------*/
@media only screen and (max-width: 767px) {

  #top-bar-social {
    text-align: center;

    &.top-bar-left,
    &.top-bar-right {
      position: inherit;
      left: auto;
      right: auto;
      float: none;
      height: auto;
      line-height: 1.5em;
      margin-top: 0;
    }

    li {
      float: none;
      display: inline-block;
    }
  }
  
}