.countdown-section {
    width: 23.5% !important;
}

.page-sidebar-fixable {
    max-width: 215px;
}

.page-sidebar-fixable.fixed {
    position: fixed;
    top: 100px;
}

.icon-bar-text {
    color: #777777;
    float: right;
    padding-left: 30px;
    font-weight: bold;
    margin-top: -3px;
}

footer {
    position: relative;
    z-index: 100;
}

.client-image {
    width: initial !important;
    margin-right: 20px !important;
}

.center-wrap {
	position:relative;
	margin-left:auto;
	margin-right:auto;
	padding-right:15px;
	padding-left:15px
}

/* cmsfiler uses "right" for images instead of letting us use Bootstrap's pull-right */
img.right {
    float: right !important;
}

.navbar {
    border: none;
}

.navbar.navbar-default {
    position: relative !important;
}

.navbar-collapse .right-logo {
    position: absolute;
    top: 10px;
    right: 0px;
}

#logo_img { 
    height: 60px;
}

.fixed-header-on .header .logo img {
    max-height: 50px;
}

fieldset.testmode {
    border: 1px solid #aa0000;
    background-color: rgba(240, 230, 25, 0.65);
}

@media (max-width: 768px) {
    .navbar-header .header-dropdown-buttons {
        margin-top: 7px;
    }
    
}

@media (max-width: 991px) {
    .navbar-collapse .right-logo img {
        max-height: 55px;
    }
    
    .navbar-header .header-dropdown-buttons {
        display: inline-block !important;
        float: right;
        margin-right: 15px;
    }
    
    .navbar-header .logo {
        float: left;
        margin-top: 5px;
    }
}


/**  padding helper classes **/
.pr5 { padding-right: 5px; }
.pr10 { padding-right: 10px; }
.pr15 { padding-right: 15px; }
.pr20 { padding-right: 20px; }
.pr25 { padding-right: 25px; }
.pr30 { padding-right: 30px; }
.pr35 { padding-right: 35px; }
.pr40 { padding-right: 40px; }

.pl5 { padding-left: 5px; }
.pl10 { padding-left: 10px; }
.pl15 { padding-left: 15px; }
.pl20 { padding-left: 20px; }
.pl25 { padding-left: 25px; }
.pl30 { padding-left: 30px; }
.pl35 { padding-left: 35px; }
.pl40 { padding-left: 40px; }


.background-img-activities {
    background: url("/static/otasite/otakon/images/activities_bg.jpg") 50% 0px no-repeat;
    background-size: cover;
}

/* Icons inside buttons should ignore theme style */
.btn .icon, .nav .icon, .alert .icon {
  background-color: transparent;
  width: initial;
  height: initial;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
  border: none;
}

.alert-icon .icon {
  font-size: 28px;
  position: absolute;
  top: 13px;
  left: 21px;
}

/* Tab layouts */
.tabs-primary ul.nav-tabs {
    background-color: #2460A9;
}

/* ========================================================================
   Component: notify
 ========================================================================== */
.uk-notify {
  position: fixed;
  top: 50px;
  left: 50px;
  z-index: 1040;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 350px;
}
.uk-notify-top-right,
.uk-notify-bottom-right {
  left: auto;
  right: 50px;
}
.uk-notify-top-center,
.uk-notify-bottom-center {
  left: 50%;
  margin-left: -175px;
}
.uk-notify-bottom-left,
.uk-notify-bottom-right,
.uk-notify-bottom-center {
  top: auto;
  bottom: 50px;
}
@media (max-width: 480px) {
  .uk-notify {
    left: 10px;
    right: 10px;
    width: auto;
    margin: 0;
  }
}
.uk-notify-message {
  position: relative;
  margin-bottom: 10px;
  padding: 15px;
  font-size: 16px;
  line-height: 22px;
  border-radius: 3px;
  padding-right: 35px;
  cursor: pointer;
}
.uk-notify-message.alert.alert-normal {
  background: #444;
  color: #fff;
}
.uk-notify-message > .close {
  visibility: hidden;
}
.uk-notify-message:hover > .close {
  visibility: visible;
}

/* Our icon styles interfere with cardJS icons, so fix */
.card-js .icon {
    line-height: normal !important;
    font-size: inherit !important;
    border: none !important;
}

.feature-box-300 {
    display: block;
    height: 400px;
}
.feature-box-400 {
    display: block;
    height: 400px;
}
.feature-box-500 {
    display: block;
    height: 400px;
}


/* guest cards in a masonary grid should get some bottom margin love */
.masonry-grid-item .team-member {
    margin-bottom: 50px;
    background-color: #fafafa;
}

.team-member-content {
    font-size: 15px;
    line-height: 1.466666667;
    color: #777;
    background-color: #fafafa;
    font-weight: 300;
    padding: 15px;
}


/* Extra social links */
.social-links.animated-effect-1 li.imdb a:hover {
  border-color: #f3c800;
}

.social-links li.imdb i {
    transform: scale(1.4);
}

.social-links:not(.animated-effect-1) li.imdb a:hover,
.colored.social-links li.imdb a,
.social-links.animated-effect-1 li.imdb a:after,
.btn.imdb {
  background-color: #f3c800;
  border-color: #f3c800;
  color: #ffffff;
}



/* ========================================================================
   Component: countdown
 ========================================================================== */
.is-countdown {
    border: none !important;
    background-color: transparent !important;
}


/* ========================================================================
   Animated Button overrides (Bootstrap button plugin uses <span> instead of <i>)
 ========================================================================== */
.btn-animated span {
  -webkit-transition: right 0.2s ease-in-out;
  -o-transition: right 0.2s ease-in-out;
  transition: right 0.2s ease-in-out;
  z-index: 3;
  right: 17px;
  position: absolute;
  line-height: 34px;
  top: 0;
  min-width: 12px;
}

.btn-animated.btn-sm span {
  right: 14px;
  line-height: 28px;
  min-width: 11px;
}

.btn-animated.btn-sm:hover span {
  right: 7px;
}


.btn-animated.btn-lg span {
  right: 25px;
  line-height: 48px;
  min-width: 15px;
}

.btn-animated.btn-lg:hover span {
  right: 15px;
}

/* Nav pills
---------------------------------- */
.nav-pills:not(.nav-stacked) {
  margin-bottom: 15px;
}

.nav-pills > li .nav-link {
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
  padding: 7px 10px;
  border: 1px solid transparent;
  color: #999999;
  font-size: 13px;
  text-transform: uppercase;
  font-weight: 400;
}

.nav-pills > li .nav-link.active,
.nav-pills > li .nav-link.active:hover,
.nav-pills > li .nav-link.active:focus,
.nav-pills > li .nav-link:hover,
.nav-pills > li .nav-link:focus {
  color: #777777;
  background-color: transparent;
  border-bottom: 1px solid #777777;
}

.nav-pills.style-2 > li .nav-link {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

.nav-pills.style-2 > li .nav-link.active,
.nav-pills.style-2 > li .nav-link.active:hover,
.nav-pills.style-2 > li .nav-link.active:focus,
.nav-pills.style-2 > li .nav-link:hover,
.nav-pills.style-2 > li .nav-link:focus {
  background-color: #fafafa;
  border: 1px solid #eaeaea;
}

.nav-pills > li + li {
  margin-left: 5px;
}

ul.menu > li > ul > li {
  margin-left: 20px;
}

ul.menu > li > ul > li > a {
  color: #333;
}

.social-links:not(.animated-effect-1) li.twitch a:hover, .colored.social-links li.twitch a, .social-links.animated-effect-1 li.twitch a:after, .btn.twitch {
  background-color: #772ce8;
  border-color: #772ce8;
  color: #ffffff;
}

.social-links:not(.animated-effect-1) li.spotify a:hover, .colored.social-links li.spotify a, .social-links.animated-effect-1 li.spotify a:after, .btn.spotify {
  background-color: #1DB954;
  border-color: #1DB954;
  color: #ffffff;
}
