/* Social row inside the dropdown */
#cssmenu .nav-social{
  padding:10px 15px 14px;
  border-top:1px solid rgba(255,255,255,.15);
  text-align:center;
}
#cssmenu .nav-social-label{
  display:block;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:1px;
  color:#cccccc;
  margin-bottom:6px;
}
/* Icons */
#cssmenu .nav-social-icon{
  display:inline-block;
  margin:0 6px;
}
#cssmenu .nav-social-icon img{
  width:24px;
  height:24px;
  vertical-align:middle;
  opacity:0.8;
  transition:opacity .2s ease, transform .2s ease;
}
#cssmenu .nav-social-icon:hover img{
  opacity:1;
  transform:translateY(-1px);
}
/* On wider screens keep it tidy - social row full-width under the links */
@media (min-width: 900px){
  #cssmenu > ul > li.nav-social{
    display:block;
    width:100%;
  }
}
/* Center the MENU (hamburger) button */
#cssmenu #menu-button{
  text-align:center;
  width:100% !important;
  padding:18px 0 !important;
  position:relative;
}
/* Center the hamburger lines */
#cssmenu #menu-button::after,
#cssmenu #menu-button::before{
  right:50% !important;
  transform:translateX(11px);   /* half of width (22px/2) */
}
#cssmenu #menu-button{
  background:#000;         
  color:#fff;
  letter-spacing:2px;
  font-size:14px;
}
/* Desktop only: center the main menu items (HOME, SPORT, etc.) */
@media (min-width: 900px){
  /* Center the whole row */
  #cssmenu > ul{
    text-align:center;
  }

  /* Make each top-level item inline instead of floated left */
  #cssmenu > ul > li{
    float:none;
    display:inline-block;
  }

  /* Keep the social row as a full-width row beneath */
  #cssmenu > ul > li.nav-social{
    display:block;
    width:100%;
  }
}