/* BB Magazine - MOBILE SEARCH / MENU FIX */
@media screen and (max-width: 1024px) {
 /* Search returns after the menu closing animation. */
 #main-nav.mobile a.cmp-search-icon-btn {
  opacity: 1; visibility: visible; pointer-events: auto;
  transition: opacity 0.20s ease 0.45s, visibility 0s linear 0.45s;
 }
 /* Keep the search element present but invisible while the menu is open. */
 #main-nav.mobile.active a.cmp-search-icon-btn {
  display: inline !important; opacity: 0 !important; visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity 0s linear 0s, visibility 0s linear 0s !important;
 }
}
/* BB Magazine - MOBILE SEARCH / MENU FIX - ENDS HERE */

/* BB Magazine - MOBILE TITLE & TAGLINE CENTER FIX */
@media screen and (max-width: 767px) {
 body .site-branding {
  width: 100% !important; max-width: 100% !important; float: none !important;
  display: block !important; margin-left: auto !important; margin-right: auto !important;
  padding-left: 0 !important; padding-right: 0 !important; text-align: center !important;
  position: relative !important; left: auto !important; right: auto !important; transform: none !important;
 }
 body .site-title, body .site-title a, body .site-description {
  width: 100% !important; margin-left: auto !important; margin-right: auto !important;
  padding-left: 0 !important; padding-right: 0 !important; text-align: center !important;
  float: none !important; display: block !important;
 }
}
/* BB Magazine - MOBILE TITLE & TAGLINE CENTER FIX - ENDS HERE */

/* BB Magazine - MOBILE MENU WIDTH FIX */
@media screen and (max-width: 1024px) {
 #main-nav.mobile.active a.cmp-search-icon-btn {
  position: absolute !important; width: 0 !important; min-width: 0 !important;
  max-width: 0 !important; padding: 0 !important; margin: 0 !important; overflow: hidden !important;
 }
 #main-nav.mobile.active .menu, #main-nav.mobile.active .nav-menu, #main-nav.mobile.active > ul {
  width: 100% !important; max-width: 100% !important; margin-left: 0 !important;
  margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important;
 }
 #main-nav.mobile.active .menu > li, #main-nav.mobile.active .nav-menu > li, #main-nav.mobile.active > ul > li {
  width: 100% !important; max-width: 100% !important;
 }
 #main-nav.mobile.active .menu > li > a, #main-nav.mobile.active .nav-menu > li > a, #main-nav.mobile.active > ul > li > a {
  width: 100% !important; box-sizing: border-box !important;
 }
}
/* BB Magazine - MOBILE MENU WIDTH FIX ENDS */

/* BB Magazine - MODERN NAVIGATION MENU - FOR PC */
.main-navigation {
 background: #202020; border-radius: 10px; padding: 0 10px;
 box-shadow: 0 5px 18px rgba(0, 0, 0, 0.10);
}
.main-navigation ul { margin: 0; padding: 0; }
.main-navigation ul li a {
 position: relative; display: block; padding: 20px 17px; color: #ffffff;
 text-decoration: none; transition: background-color 0.25s ease, color 0.25s ease;
}
.main-navigation ul li a:hover { background: rgba(255, 255, 255, 0.07); color: #ffffff; }
.main-navigation ul li a::after {
 content: ""; position: absolute; left: 17px; right: 17px; bottom: 11px; height: 2px;
 background: #ffffff; border-radius: 2px; transform: scaleX(0); transform-origin: center;
 transition: transform 0.25s ease;
}
.main-navigation ul li a:hover::after { transform: scaleX(1); }
.main-navigation ul li.current-menu-item > a::after,
.main-navigation ul li.current_page_item > a::after { transform: scaleX(1); }
.main-navigation .search-toggle { transition: background-color 0.25s ease, transform 0.25s ease; }
.main-navigation .search-toggle:hover { background: rgba(255, 255, 255, 0.08); }
.main-navigation *, .main-navigation *::before, .main-navigation *::after { box-sizing: border-box; }
/* BB Magazine - MODERN NAVIGATION MENU - FOR PC - ENDS HERE */

/* BB Magazine - MODERN NAVIGATION MENU - FOR MOBILE / TABLET */
@media screen and (max-width: 768px) {
 .main-navigation { background: #202020 !important; border-radius: 10px; padding: 0; }
 /* Keep overflow visible so search can work. */
 .main-navigation ul, .main-navigation .menu, .main-navigation .nav-menu,
 .main-navigation.toggled ul, .main-navigation.toggled .menu, .main-navigation.toggled .nav-menu {
  background: #202020 !important;
 }
 .main-navigation ul li, .main-navigation .menu li, .main-navigation .nav-menu li {
  background: transparent !important; border: none;
 }
 .main-navigation ul li a, .main-navigation .menu li a, .main-navigation .nav-menu li a {
  background: transparent !important; color: #ffffff !important; padding: 17px 22px;
 }
 .main-navigation ul li a:hover, .main-navigation .menu li a:hover, .main-navigation .nav-menu li a:hover {
  background: rgba(255, 255, 255, 0.07) !important; color: #ffffff !important;
 }
 .main-navigation ul li a::after, .main-navigation .menu li a::after, .main-navigation .nav-menu li a::after {
  left: 22px; right: auto; width: 0; bottom: 9px; transform: none; transition: width 0.25s ease;
 }
 .main-navigation ul li a:hover::after { width: 35px; }
 .main-navigation ul li.current-menu-item > a::after,
 .main-navigation ul li.current_page_item > a::after { width: 35px; }
}
/* BB Magazine - MODERN NAVIGATION MENU - FOR MOBILE / TABLET - ENDS HERE */

/* BB Magazine - CUSTOMIZATION OF TOP MENU - STARTS HERE */
#menu-top-header-menu > li { position: relative; }
#menu-top-header-menu > li:not(:last-child)::after {
 content: ""; position: absolute; right: -6px; top: 50%; transform: translateY(-50%);
 width: 1px; height: 16px; background: rgba(0, 0, 0, 0.22);
}
#menu-top-header-menu > li > a {
 position: relative; display: block; padding-left: 12px; padding-right: 12px; transition: color 0.25s ease;
}
#menu-top-header-menu > li:first-child > a { padding-left: 0; }
#menu-top-header-menu > li > a::before {
 content: ""; position: absolute; left: 12px; right: 12px; bottom: -5px; height: 2px;
 background: #333; transform: scaleX(0); transform-origin: center; transition: transform 0.25s ease;
}
#menu-top-header-menu > li:first-child > a::before { left: 0; }
#menu-top-header-menu > li > a:hover::before { transform: scaleX(1); }
/* BB Magazine - CUSTOMIZATION OF TOP MENU - ENDS HERE */

/* BB Magazine - CUSTOMIZATION OF SOCIAL ICONS - STARTS HERE */
.top-header-social-links .social-icons li a {
 display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
 border-radius: 50%; background: transparent; transition: background-color 0.25s ease, transform 0.25s ease;
}
.top-header-social-links .social-icons li a svg {
 width: 18px !important; height: 18px !important; transition: transform 0.25s ease, opacity 0.25s ease;
}
.top-header-social-links .social-icons li a:hover { background: rgba(0, 0, 0, 0.06); transform: translateY(-2px); }
.top-header-social-links .social-icons li a:hover svg { transform: scale(1.08); opacity: 0.9; }
.top-header-social-links { transform: translateY(2px); }
/* BB Magazine - CUSTOMIZATION OF SOCIAL ICONS - ENDS HERE */