/* ----------------------------------------------------------------
Copyright (c) Demosphere International Inc.
No permission is granted for any purpose without prior
written consent from Demosphere International Inc.
-------------------------------------------------------------------*/

#design-social div { display: inline-block; margin-left: 6px; text-align: center; }
#design-social a { display: block; margin: 0 auto; width: 30px; height: 30px; font-size: 18px; color: #fff; border-radius: 4px; background: #636363; line-height: 30px; text-align: center; text-decoration: none; transition: all 0.3s ease-in-out; }
#design-social a:hover { background: #000; }
#design-social div:first-child a { background: #1a1a1a; }
#design-social div:first-child a:hover { background: #000; }
#design-social span { display: block; margin-top: 6px; color: #636363; text-align: center; font-family: 'Lato', sans-serif; font-size: 11px; font-weight: 700; line-height: 1; text-transform: uppercase; }
#design-social div:first-child span { color: #000; }

@media screen and (max-width: 850px) {

  #design-social { top: 12px; right: 10px; }

}

@media screen and (max-width: 480px) {

  #design-social a { width: 24px; height: 24px; font-size: 13px; line-height: 24px; }
  #design-social span { margin-top: 5px; font-size: 10px; }

}

@media screen and (max-width: 375px) {

  #design-social { top: 10px; }
  #design-social a { width: 20px; height: 20px; font-size: 12px; line-height: 20px; }
  #design-social span { margin-top: 4px; font-size: 9px; }

}