/* ---- Edit CSS ----

If you are unfamiliar with CSS, there are some learning resources in the help
section on the right-hand side of the page.

Here are some things you should know before you begin:

1. Any definitions you enter here will be related to your custom theme. If you
   change to a different theme, these definitions will no longer be visible on
   this page. If you switch back to your custom theme, your changes will be
   present.

2. Your custom css definitions will be included *after* the theme
   css files. So, your definitions will take precedence over the theme ones.

3. When you preview your changes, you are the only one who can see the preview.

4. Feel free to delete these comments!

*/

@import url("https://cdnjs.cloudflare.com/ajax/libs/SocialIcons/1.0.1/soc.min.css");

a {
    color: #7f8fbf;
}

a:focus, a:hover {
    color: #4f65a8;
    text-decoration: underline;
}

.rowcontent {
    padding-top: 50px;
    padding-bottom: 80px;
}

.LocaleOptions {
    display: none;
}

.OnlineUserWrap {
    padding: 5px 0;
}

.ShareThisButtonWrapper {
    margin: 1em 0;
}

.PhotoWrap-Category {
    display: none;
}

/*** Pager ***/

.NumberedPager .Highlight, .NumberedPager .Highlight:focus, .NumberedPager .Highlight:hover, .pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover {
    z-index: 2;
    color: #fff;
    background-color: #4f65a8;
    border-color: #3a4a7b;
    cursor: default;
}

edPager>a, .NumberedPager>div, .NumberedPager>span, .pagination>li>a, .pagination>li>span {
    color: #4f65a8;
}

.NumberedPager>a, .NumberedPager>div, .NumberedPager>span, .pagination>li>a, .pagination>li>span {
    color: #4f65a8;
}

/*** Remove Activity functionality ***/

li.Activities {display:none;}

/*** Quotes ***/

blockquote {font-size:1em;}

/*** HOMEPAGE ***/

body.bestof {
    background-image: url('https://us.v-cdn.net/5018637/uploads/editor/ka/gb0xtj2ofo9l.jpg'), linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 10%, rgba(255,255,255,1) 60%, rgba(255,255,255,1) 100%);
    background-position: 0px 50px;
    background-size: 100%;
    background-repeat: no-repeat;
}

body.bestof .BestOfWrap,
body.bestof h1 {
    display: none
}

#welcome-video {
    width: 60%;
    margin: 3.5em auto;
}

#welcome-video .VideoPlayer {
    padding-bottom: 0;
}

#welcome-video .YTPreview a:after {
    width: 60px;
    height: 60px;
    margin: 0 auto;
    border-radius: 50%;
    background-color: #969696;
    font-size: 30px;
    letter-spacing: -3px;
    line-height: 60px;
    text-align: center;
    display: inline-table;
    vertical-align: middle;
    cursor: pointer;
    content: "\f04b";
    color: #fff;
    margin-top: -30px;
    margin-left: -30px;
    font-family: FontAwesome;
    top:50%;
    left:50%;
    position:absolute;
}

#welcome-video .YTPreview a:hover:after {
    color: #fff;
    background-color: red;
}

.welcome-buttons {
    text-align: center;
    margin-bottom: 3em;
}

.welcome-buttons .btn {
    font-size: 1.5em;
    font-weight: bold;
}

.welcome-ad {
    margin-bottom: 3em;
}

.welcome-ad img {
    width: 100%;
    height: auto;
    border: 1px solid #000;
}

/*** Keep the container responsive ***/

@media (min-width: 768px) {
    .container {
        width: 100%;
    }
}

@media (min-width: 992px) {
    .container {
        width: 100%;
    }
}

@media (min-width: 1200px) {
    .container {
        width: 1170px;
    }
}

/*** Modify Title depending viewport ***/

@media (max-width: 1199px) {
    .navbar-brand {
        text-indent: -9999px;
        line-height: 0;
    }
    
    .navbar-brand:after {
        content: "KTVA Singers Forums";
        text-indent: 0;
        display: block;
        line-height: initial;
    }
}

/*** Collapse Header Navigation ***/

@media (min-width: 768px) and (max-width: 991px) {
    .navbar-header {
        float: none;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin: 7.5px -15px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .navbar-text {
        float: none;
        margin: 15px 0;
    }
    /* since 3.1.0 */
    .navbar-collapse.collapse.in { 
        display: block!important;
    }
    .collapsing {
        overflow: hidden!important;
    }
    
    .MeBox {
        padding-left: 15px;
    }
}

/*** Homepage ***/

.responsive-video {
    position: relative;
    padding-bottom: 56.25%; 
    padding-top: 25px;
    height: 0;
}

.responsive-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/*** Remove Best of ... ***/

.Reactions-BestOf {
    display: none;
}

.BestOf {
    display: none;
}

/*** Remove Panel Action Button ***/

.page-sidebar .BoxButtons .Action {
    display: none;
}

/*** Page-Sidebar ***/


.page-sidebar .FilterMenu {
    padding:0;
}

/*** FontAwesome ***/

.fas {
    font-family: FontAwesome;
    font-style: normal;
}

/*** Navigation Bar ***/

.navbar-default {
    border: none;
}

.navbar-default {
    background-color: #000;
}

.navbar-default .navbar-nav>li>.Selected {
    background-color: #000;
    color: #7f8fbf;
}

.navbar-default .navbar-nav>li>a {
    color: #fff;
}

.navbar-default .navbar-brand, .navbar-default .navbar-text {
    color: #fff;
}

.navbar-default .navbar-brand:focus, .navbar-default .navbar-brand:hover {
    color: #ddd;
}

.navbar-default .navbar-nav>li>a:hover {
    color: #7f8fbf;
}

.navbar-default .navbar-nav>li>.Selected:hover {
    color: #7f8fbf;
    background-color: #000;
}

.navbar-default .MeBox .FlyoutButton:focus, .navbar-default .MeBox .FlyoutButton:hover, .navbar-default .MeBox .Username:focus, .navbar-default .MeBox .Username:hover, .navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover {
    color: #ddd;
}

/*** Sticky Breadcrumbs / Bookmark / Search ***/

/*** Jump correction for fixed header ***/

.sticky_fake_div {
    display:none;
    height:107px;
}

.sticky_breads {
    position: fixed;
    width: 100%;
    top: 50px;
    background-color: #f5f5f5;
    z-index: 1000;
    padding: 5px 0;
    border-bottom: 1px solid #ccc;
}

.breads {
    display: inline-block;
    width: 75%;
    float: left;
    padding: 8px 15px;
}

.breads .Breadcrumbs {
    padding:0;
    margin:0;
    display: inline;
}

.breads .Options {
    float:right;
}

.books {
    display: inline-block;
    width: 10%;
    float: left;
}

.searches {
    display: inline-block;
    width: 25%;
    float: left;
    padding: 0 15px;
}

.searches .well.search-form.js-sphinxAutoComplete {
    margin-bottom: 0;
}

.page-sidebar .well.search-form.js-sphinxAutoComplete {
    display:none;
}

.page-content .Breadcrumbs {
    display:none;
}

a.Bookmark:focus,
a.Bookmark:hover,
.OptionsMenu .SpFlyoutHandle:focus,
a.Bookmark:focus:before, a.Bookmark:hover:before,
.OptionsMenu .SpFlyoutHandle:hover {
    color: #ba3742;
}



/*** Buttons ***/

.Button.Primary, .btn-primary {
    background-color: #4f65a8;
    border-color: #3a4a7b;
}   

.Button.Primary:active, .Button.Primary:focus, .Button.Primary:hover, .btn-primary.active, .btn-primary.focus, .btn-primary:active, .btn-primary:focus, .btn-primary:hover, .open>.dropdown-toggle.btn-primary {
    color: #fff;
    background-color: #3a4a7b;
    border-color: #2c385c;
}

.Button.Primary[disabled], .Button.Primary[disabled]:active, .Button.Primary[disabled]:focus, .Button.Primary[disabled]:hover, .btn-primary.disabled, .btn-primary.disabled.active, .btn-primary.disabled.focus, .btn-primary.disabled:active, .btn-primary.disabled:focus, .btn-primary.disabled:hover, .btn-primary[disabled], .btn-primary[disabled].active, .btn-primary[disabled].focus, .btn-primary[disabled]:active, .btn-primary[disabled]:focus, .btn-primary[disabled]:hover, fieldset[disabled] .Button.Primary, fieldset[disabled] .Button.Primary:active, fieldset[disabled] .Button.Primary:focus, fieldset[disabled] .Button.Primary:hover, fieldset[disabled] .btn-primary, fieldset[disabled] .btn-primary.active, fieldset[disabled] .btn-primary.focus, fieldset[disabled] .btn-primary:active, fieldset[disabled] .btn-primary:focus, fieldset[disabled] .btn-primary:hover {
    background-color: #7f8fbf;
    border-color: #9fabcf;
}

.FilterMenu .Active>a {
    background-color: #4f65a8;
}

.FilterMenu .Active>a, .FilterMenu .Active>a:focus, .FilterMenu .Active>a:hover, .nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover {
    color: #fff;
    background-color: #4f65a8;
}

span.Tag.Tag-Announcement {
    background-color: #ba3742;
    color: #ddd;
}

.Note.Closed.SignInOrRegister, .label-primary, .token-input-token {
    background-color: #4f65a8;
}

/*** Panel ***/

.PanelInfo .Active a, .PanelInfo .Active a:focus, .PanelInfo .Active a:hover, .list-group-item.active, .list-group-item.active:focus, .list-group-item.active:hover {
    text-decoration: none;
    color: #ddd;
    background-color: #6b8f71;
    border-color: #4e6953;
}

.PanelInfo .Active.public a {
    background-color: #4f65a8;
    border-color: #3a4a7b;
    color: #ddd;
}

.PanelInfo .Active.pro a {
    background-color: #eacc33;
    border-color: #ab9526;
    color: #333;
}

.PanelInfo .Active.mods a {
    background-color: #ff963a;
    border-color: #ab9526;
    color: #333;
}

.PanelInfo .Active a {
    background-color: #6b8f71;
    border-color: #4e6953;
    color: #ddd;
}

.PanelCategories .Depth2 a,
.PanelCategories .Depth3 a {
    text-overflow: ellipsis;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
}

/*** Color-coding the categroies when viewing a discussion ***/

.Item .Meta .MItem.Category a, .Tag, .label-default {
    background-color: #6b8f71;
    color: #ddd;
}

.Item .Meta .MItem.Category.public a, .Tag, .label-default {
    background-color: #4f65a8;
}

.Item .Meta .MItem.Category.pro a, .Tag, .label-default {
    background-color: #eacc33;
    color: #333;
}

.Item .Meta .MItem.Category.mods a, .Tag, .label-default {
    background-color: #ff963a;
    color: #333;
}

body.public .Item .Meta .MItem.Category a, .Tag, .label-default {
    background-color: #4f65a8;
}

body.pro .Item .Meta .MItem.Category a, .Tag, .label-default {
    background-color: #eacc33;
    color: #333;
}

body.mods .Item .Meta .MItem.Category a, .Tag, .label-default {
    background-color: #ff963a;
    color: #333;
}

/*** Color-coding and formatting the category in the breadcrums ***/

body .sticky_breads span.Last a span {
    background-color: #666;
    color: #ddd;
    display:inline;
    padding: .2em .6em .3em;
    font-size:75%;
    font-weight:700;
    line-height:1;
    text-align:center;
    white-space:nowrap;
    vertical-align:baseline;
    border-radius: .25em;
}

body.stud .sticky_breads span.Last a span {
    background-color: #6b8f71;
}

body.public .sticky_breads span.Last a span {
    background-color:#4f65a8;
}

body.pro .sticky_breads span.Last a span {
    background-color:#eacc33;
    color:#333;
}

body.mods .sticky_breads span.Last a span {
    background-color: #ff963a;
    color: #333;    
}

/*** Color-Coding categories in Category List Mode ***/

span.MItem.RSS {
    display: none;
}

.CategoryList li.Item {
    border-left: 5px solid #6b8f71;
}

.CategoryList li.Item.public {
    border-left: 5px solid #4f65a8;
}

.CategoryList li.Item.pro {
    border-left: 5px solid #eacc33;
}

.CategoryList li.Item.pro {
    border-left: 5px solid #ff963a;
}

.CategoryList li.Item.Depth1 {
    margin-top: 1em;
}

.CategoryList li.Item.Depth2 {
    margin-left: 1em;
}

li.ClearFix.Depth1.Category-volume-1,
li.ClearFix.Depth1.Category-volume-2,
li.ClearFix.Depth1.Category-volume-3,
li.ClearFix.Depth1.Category-volume-4,
li.ClearFix.Depth1.Category-volime-5-mixed-voice {
    font-weight: bold;
}

.CategoryList li.Item.Category-volume-1,
.CategoryList li.Item.Category-volume-2,
.CategoryList li.Item.Category-volume-3,
.CategoryList li.Item.Category-volume-4,
.CategoryList li.Item.Category-volime-5-mixed-voice {
    border-left-width: 19px;
}

li#Category_91 {
    border: 5px solid #d00;
    background-color: #dd00001f;
}

/*** Color-coding the Category View in Mixed Mode ***/

div.CategoryBox > span
{
    float: right;
    top: 10px;
    right: 15px;
    color:#ddd;
}

div.CategoryBox > span > span :before
{
    color:#ddd;
}

/*** Standard: Green ***/

div.CategoryBox > h2.H{
    color:#ddd; 
    background-color: #6b8f71;
}

div.CategoryBox > h2 a {
    color:#ddd; 
}

/*** Special: Red ***/

div.CategoryBox.Category-new-students-please-read-this {
    border: 5px solid #ba3742;
}

div.CategoryBox.Category-new-students-please-read-this > h2.H{
    background-color: #ba3742;
    border-radius: 0px;
}

/*** Public: Blue ***/

div.CategoryBox.Category-terms-of-use > h2.H,
div.CategoryBox.Category-reviews > h2.H,
div.CategoryBox.Category-what-s-new-ktva-2-0-the-new-course > h2.H,
div.CategoryBox.Category-ktva-the-pro-s-vocal-method > h2.H,
div.CategoryBox.Category-ktva-student-videos > h2.H,
div.CategoryBox.Category-welcome > h2.H,
div.CategoryBox.Category-introduce-yourself h2.H,
div.CategoryBox.Category-favorite-vocal-movies-and-videos h2.H,
div.CategoryBox.Category-divas-and-dudes-webcam-lesson-videos h2.H,
div.CategoryBox.Category-general-singing h2.H,
div.CategoryBox.Category-SINGERSONGWRITERS h2.H,
div.CategoryBox.Category-ken-tamplin-s-corner h2.H,
div.CategoryBox.Category-webinars h2.H,
div.CategoryBox.Category-off-topic h2.H,
div.CategoryBox.Category-newbies-demo-area h2.H,
div.CategoryBox.Category-vocal-demonstrations h2.H,
div.CategoryBox.Category-show-time-vocal-performance-day h2.H,
div.CategoryBox.Category-vocalist-bulletin-board h2.H,
div.CategoryBox.Category-recording-techniques-and-gear h2.H,
div.CategoryBox.Category-gear-and-equipment h2.H,
div.CategoryBox.Category-the-lobby h2.H,
div.CategoryBox.Category-technical-support h2.H,
div.CategoryBox.Category-about-ktva h2.H,
div.CategoryBox.Category-psychology-of-singing h2.H,
div.CategoryBox.Category-vocal-health-and-wellness h2.H
{
    color:#ddd; 
    background-color: #4f65a8;
    
}

/*** PRO: Gold ***/

div.CategoryBox.Category-pro > h2.H,
div.CategoryBox.Category-pro-videos > h2.H,
div.CategoryBox.Category-volume-4 > h2.H,
div.CategoryBox.Category-head-voice > h2.H,
div.CategoryBox.Category-volime-5-mixed-voice > h2.H
{
    background-color:#eacc33;
    color:#333;
}

div.CategoryBox.Category-pro > h2 a,
div.CategoryBox.Category-pro-videos > h2 a,
div.CategoryBox.Category-volume-4 > h2 a,
div.CategoryBox.Category-head-voice > h2 a,
div.CategoryBox.Category-volime-5-mixed-voice > h2 a
{
    color:#333;
}

/*** Moderators ***/

div.CategoryBox.Category-moderators-lobby h2.H
{
    color:#333;
    background-color: #ff963a;
}

div.CategoryBox.Category-moderators-lobby > h2 a
{
    color:#333;
}

/*** Discussions ***/

.DataList .Item.Read {
    background-color: #f5f5f5;
}

/*** Who's online ***/

#WhosOnline span.Count {
    margin-left: 0.5em;
}

/*** Remove Troll ***/

.CountItemWrap-Troll {
    display:none;
}

/*** Color-Code Members ***/

/*** BLUE ***/

.Role_Guest .Item-Header .AuthorWrap .AuthorInfo .RoleTitle,
.Role_Applicant .Item-Header .AuthorWrap .AuthorInfo .RoleTitle,
.Role_Member .Item-Header .AuthorWrap .AuthorInfo .RoleTitle,
.Role_View .Item-Header .AuthorWrap .AuthorInfo .RoleTitle,
.Role_Confirm_Email .Item-Header .AuthorWrap .AuthorInfo .RoleTitle
{
    background-color: #4f65a8;
    color: #ddd;
    display: inline;
    padding: .2em .6em .3em;
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    vertical-align: baseline;
    border-radius: .25em;
}

/*** GREEN ***/

.Role_Volume1 .Item-Header .AuthorWrap .AuthorInfo .RoleTitle,
.Role_Enrolled .Item-Header .AuthorWrap .AuthorInfo .RoleTitle,
.Role_20ENROLLED .Item-Header .AuthorWrap .AuthorInfo .RoleTitle,
.Role_STREAMINGVolume1 .Item-Header .AuthorWrap .AuthorInfo .RoleTitle,
.Role_STREAMING-THECOURSE .Item-Header .AuthorWrap .AuthorInfo .RoleTitle,
.Role_STREAMINGINTERMEDIATE .Item-Header .AuthorWrap .AuthorInfo .RoleTitle,
.Role_20INTERMEDIATE .Item-Header .AuthorWrap .AuthorInfo .RoleTitle 
{
    background-color: #6b8f71;
    color: #ddd;
    display: inline;
    padding: .2em .6em .3em;
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    vertical-align: baseline;
    border-radius: .25em;
}

/*** GOLD ***/

.Role_20PRO .Item-Header .AuthorWrap .AuthorInfo .RoleTitle,
.Role_Pro .Item-Header .AuthorWrap .AuthorInfo .RoleTitle,
.Role_STREAMINGPRO .Item-Header .AuthorWrap .AuthorInfo .RoleTitle,
.Role_Premium .Item-Header .AuthorWrap .AuthorInfo .RoleTitle {
    background-color: #eacc33;
    color: #333;
    display: inline;
    padding: .2em .6em .3em;
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    vertical-align: baseline;
    border-radius: .25em;
}

/*** ORANGE ***/

.Role_Moderator .Item-Header .AuthorWrap .AuthorInfo .RoleTitle {
    background-color: #ff963a;
    color: #333;
    display: inline;
    padding: .2em .6em .3em;
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    vertical-align: baseline;
    border-radius: .25em;
}

/*** BLACK ***/

.Role_Administrator .Item-Header .AuthorWrap .AuthorInfo .RoleTitle {
    background-color: #333;
    color: #ddd;
    display: inline;
    padding: .2em .6em .3em;
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    vertical-align: baseline;
    border-radius: .25em;
}

/*** GREY ***/

.Role_FacilityManagement .Item-Header .AuthorWrap .AuthorInfo .RoleTitle {
    background-color: #999;
    color: #eee;
    display: inline;
    padding: .2em .6em .3em;
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    vertical-align: baseline;
    border-radius: .25em;
}

.Role_hidden_admin .Item-Header .AuthorWrap .AuthorInfo .RoleTitle {
    content: " ";
    display: none;
}

.Role_hidden_admin .Item-Header .AuthorWrap .AuthorInfo .RoleTitle:after {
    background-color: #eacc33;
    color: #333;
    content: "2.0 PRO";
}

/*** Markup the Featured Video ***/

.fa {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.fa-play:before {
    content: "\f04b";
}

.play-button .fa {
    color: #fff;
}

.play-button {
    display: block;
    width: 2em;
    height: 2em;
    margin: 0 auto;
    border-radius: 50%;
    background-color: #969696;
    font-size: 1.333em;
    letter-spacing: -3px;
    line-height: 2em;
    text-align: center;
    display: inline-table;
    vertical-align:middle; 
    cursor: pointer;
}

#kenslatestvideo {
    position: relative;
    padding: 0;
    margin: 0;
    text-align: center;
    margin-bottom:1em;
}

.video-container {
    cursor:pointer;
    position: relative;
    display: block;
}

.video-overlay {
    position: absolute;
    top: 0; right: 0;
    bottom: 0; left: 0;
    width: 300px;
    height: 200px; 
    text-align: center;
    vertical-align:middle;
    line-height:200px;
}

.video-overlay:hover .play-button {
    background-color: #f00; 
}

/*** Ken's latest Youtube ***/

#kenslatestyoutube .YTPreview a:after {
    width: 40px;
    height: 40px;
    margin: 0 auto;
    border-radius: 50%;
    background-color: #969696;
    font-size: 20px;
    letter-spacing: -3px;
    line-height: 40px;
    text-align: center;
    display: inline-table;
    vertical-align: middle;
    cursor: pointer;
    content: "\f04b";
    color: #fff;
    margin-top: -20px;
    margin-left: -20px;
    font-family: FontAwesome;
    top:50%;
    left:50%;
    position:absolute;
}

#kenslatestyoutube .YTPreview a:hover:after {
    color: #fff;
    background-color: red;
}

/*** Remove breadcrums from comment form ***/

.MessageForm .Buttons .Back {
    display: none;
}

/*** MeBox ***/

div#meboxinpanel {
    background-color: #f5f5f5;
    padding: 10px;
    border: 1px solid #ccc;
    height: 60px;
    font-size: 16px;
}

#meboxinpanel>.PhotoWrap {
    float: left;
}

#meboxinpanel>.PhotoWrap img {
    width: 40px;
    height: 40px;
    vertical-align: top;
    margin-right: 10px;
}

.MeButton .Alert {
    position: absolute;
    top: 7px;
    right: 7px;
    font-size: 12px;
    line-height: 1;
    padding: 3px;
    background-color: #d00;
}

#meboxinpanel .WhoIs .MeMenu span .SpFlyoutHandle {
    display:none;
}

#meboxinpanel .WhoIs .MeMenu .ToggleFlyout {
    margin-right: 10px;
}

/*** Footer ***/

.page-footer .container .clearfix p.pull-left {
    text-align: center;
    width: 100%;
}

.soc {
    text-align: center;
    margin-top: 1em;
}

/*** Youtube-Video-Preview ***/

.VideoPreview:after {
    width: 60px;
    height: 60px;
    margin: 0 auto;
    border-radius: 50%;
    background-color: #969696;
    font-size: 30px;
    letter-spacing: -3px;
    line-height: 60px;
    text-align: center;
    display: inline-table;
    vertical-align: middle;
    cursor: pointer;
    content: "\f04b";
    color: #fff;
    margin-top: -30px;
    margin-left: -30px;
}

.VideoPreview:hover:after {
    color: #fff;
    background-color: red;
}

@media screen and (max-width: 767px) {
    
    .navbar-static-top {
        position: fixed;
        top: 0;
        width: 100%;
    }
    
    .rowcontent {
        padding-top: 0px;
        padding-bottom: 0px;
    }
    
    .collapse.in .BestOf {
        display: none;
    }
    
    .page-content {
        padding-top: 100px;
    }
    
    span.MItem.Category {
        display: inline-flex;
    }
    
    span.MItem.Category a {
        width: 150px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    h1.H, h1 {
        font-size: 24px;
        margin: 20px 0;
    }
    
    .page-sidebar {
        padding-bottom: 200px;
    }
    
    .mobilenotifications {
        position: fixed;
        top: 50px;
        width: 100%;
        z-index: 1000;
        height: 40px;
        background-color: #000;
        margin-left: -15px;
        text-align: right;
        /* float: right; */
    }
    
    .MeBox .ToggleFlyout {
        /* float: right!important; */
        display: inline-block;
        float: none!important;
    }
    
    .Excerpt {
        width: 150px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        height: 20px;
    }
    
    .mobilenotifications .ToggleFlyout:nth-child(2) .Flyout {
        width: 340px;
        right: -122px;
        left: unset;
    }
    
    .mobilenotifications .ToggleFlyout:nth-child(3) .Flyout {
         width: 340px;
         right: -78px;
         left: unset;
    }
    
    .mobilenotifications .ToggleFlyout:nth-child(4) .Flyout {
         width: 340px;
         right: -34px;
    }
    
    .mobilenotifications .ToggleFlyout:nth-child(5) .Flyout {
         width: 200px;
         right: 8px;
    }
    
    .ProfilePhoto {
        display: none;
    }
    
    .MessageList .Item {
        margin-left: 0px;
    }
    
    .Item .Meta .MItem.Category a {
        margin-left: 1em;
        height: 14px;
        margin-top: 0.4em;
    }
    
    .mobileshortcuts {
        display: inline-block;
        float: left;
        line-height: 40px;
    }
    
    .mobileshortcuts a {
        padding-left: 15px;
    }
    
    .MessageForm {
        margin: 0;
    }
    
    .MessageForm .Buttons {
        margin: 15px -32px -15px;
    } 
    
    .navbar-collapse {
        margin-top: 39px;
    }
    
    .PageControls {
        text-align: center;
    }

    .Pager {
        font-size: 12px;
    }

    .NumberedPager>a, .NumberedPager>div, .NumberedPager>span, .pagination>li>a, .pagination>li>span {
        padding: 4px 8px;
    }

    .PageControls .NumberedPager {
        float: none!important;
        margin-bottom: 10px;
    }
    
}