/*
Theme Name: The Drumeo Beat
Author: Trent Harms
Description: Default theme for The Drumeo Beat
Version: 0.0.1
Tags: foundation
*/

.top-bar {
    z-index:10001;
}
.beat-navigation {
    z-index:10002;
}
.menu-overlay {
    z-index:10003;
}
.nav-side-bar {
    z-index:10004;
}

i.fa-chording:before {
    font-family: 'drumeo' !important;
    content: "\73";
}

i.fa-song-tutorials:before {
    content: "\f001";
}

i.fa-technique:before {
    content: "\f256";
}

i.fa-theory:before {
    content: "\f8c9";
}

i.fa-vlog:before {
    content: "\f832";
}

i.fa-podcast:before {
    content: "\f2ce";
}

i.fa-articles:before {
    content: "\f4a4";
}

.feat-post-wrap form#searchform:focus-within button,
.single-search form#searchform:focus-within button,
.beat-navigation .nav-item i,
.feat-post-wrap .featured-posts.podcast .row .logo-wrap .logo .sub-list a:hover,
.feat-post-wrap.simple .featured-posts i,
.content-grid .white-box .post-ordering .sub-toggle,
.content-grid .white-box .post-ordering .sub-list a:hover,
.content-grid .white-box .post-grid .post-tile p .blue,
.content-grid.post-page .white-box blockquote,
.content-grid.post-page .white-box a,
.content-grid.post-page .white-box .box-snippet .content .icon
{
    /*pianote red*/
    color:#F61A30;
}

.fwtgf-sign-up .text-wrap input[type=submit],
.content-grid .white-box .mejs-container .mejs-controls .mejs-time-rail .mejs-time-current,
.content-grid.search-results .white-box .search-field button,
.content-grid.post-page .white-box .box-snippet .content
{
    /*pianote red*/
    background-color:#F61A30;
}

.content-grid .filtering h1.active,
.content-grid .filtering h1.active:hover,
.content-grid.post-page .white-box blockquote,
.content-grid.search-results .white-box .search-field button,
.content-grid.post-page .white-box .box-snippet .shadow
{
    /*pianote red*/
    border-color:#F61A30;
}

.fwtgf-sign-up .text-wrap input[type=submit]:hover,
.content-grid.search-results .white-box .search-field button:hover
{
    /*hover color*/
    background-color:#FF5258;
}

.content-grid.search-results .white-box .search-field button:hover
{
    /*hover color*/
    border-color:#FF5258;
}

.content-grid .filtering h1.active,
.content-grid .filtering h1.active:hover
{
    background-color:#FAEBEC;
}

.content-grid.post-page .white-box .blue-text-block
{
    background-color:rgba(255, 56, 69, 0.15);
}

.content-grid .filtering h1:hover
{
    border-color:rgba(246, 26, 48, 0.1);
}

.join.smaller {
    font-size:13px;
    padding:7px 10px
}

@media (min-width:768px) {
    .join.smaller {
        font-size:14px;
        padding:13px 30px
    }
}

.join.white {
    background:#FFF;
    color:#000
}

.join.white:hover {
    background:#EEE
}

.join.outline {
    background:transparent;
    border:2px solid #FFF;
    color:#FFF
}

.join.outline:focus, .join.outline:hover {
    background:#FFF;
    color:#000
}

.join.outline.red {
    border-color:#F61A30;
    color:#F61A30
}

.join.outline.red:hover {
    background:#F61A30;
    color:#000
}

.beat-navigation.drumeo .nav-item img {
    height: 29px;
}

.beat-navigation.drumeo .nav-item {
    text-transform:uppercase;
    font-weight:600;
    padding: 5px 5px 6px;
    letter-spacing: -0.05em;
}

@media (min-width: 640px) {
    .beat-navigation.drumeo .nav-item {
        font-size:11px;
        padding: 8px 4px;
    }
}

@media (min-width: 768px) {
    .beat-navigation.drumeo .nav-item {
        font-size:13px;
        padding: 13px 6px;
    }
}

@media (min-width: 1024px) {
    .beat-navigation.drumeo .nav-item {
        font-size:15px;
        padding: 13px 16px;
    }
}