@font-face {
    font-family: 'pixel_operator_8regular';
    src: url('../fonts/pixeloperator8-webfont.woff2') format('woff2'),
    url('../fonts/pixeloperator8-webfont.woff') format('woff'),
    url('../fonts/pixeloperator8-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}

.bg-grad{
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#eceefa+0,3742cf+100 */
    /*background: #eceefa;
    background: -moz-linear-gradient(top,  #eceefa 0%, #3742cf 100%);
    background: -webkit-linear-gradient(top,  #eceefa 0%,#3742cf 100%);
    background: linear-gradient(to bottom,  #eceefa 0%,#3742cf 100%);
    background-image: url("../img/nav_gradient.jpg");
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eceefa', endColorstr='#3742cf',GradientType=0 );*/
    background: url('../img/header-span.jpg'); background-size: 100% 100%; background-position: center top; height:95px; width: 100%;

}


body { background-color: #3d2dd8; cursor: url(../img/32x32.png), auto; overflow-y:hidden; }

/* HEADER */
.logo{ text-align: center; font-family: 'pixel_operator_8regular'; font-size:50px; color:#ffe4ff; margin-top: 0; }
.logo-mobile{ display:none; text-align: center; font-family: 'pixel_operator_8regular'; font-size:60px; color:#ffe4ff; margin-top: 0; }
.header{ width:100%; padding: 15px; text-align: center; height: 95px; position: relative; }
.header nav {     margin-top: 0; }
.header nav ul { list-style: none; margin:0; display:table; width:100%; padding-left: 0; margin-top: 8px;}
.header nav ul li { display:table-cell; padding:10px; text-align: center; }
.header nav ul li ul { display:none; position: absolute; border-top: 6px solid #ea85ff; width:142px; }
.header nav ul li ul li { text-align: left; }
.header a{ color:#fce5ff; font-size: 15px; text-transform: uppercase; font-family: 'pixel_operator_8regular'; }

.logo-wrapper{display:block;}

/* Body */
main { background: url('../img/bg2-1920px.gif'); background-size: 100%; background-position: center top; height:calc(100vh - 95px); width: 100%; background-repeat: no-repeat; }

.header nav ul li.open ul{ display:block !important; }

.sub-menu li { display: block !important; padding: 5px !important; }
ul.sub-menu { position: relative;     background-color: rgba(55,55,255,.6); border-radius: 0 0 10px 10px; -moz-border-radius: 0 0 10px 10px;}
.sub-menu a { font-size: 12px !important; }


/* Music player */
.audiojs {
    background: rgba(0,0,200,.6);
    position: fixed;
    bottom: 0;
    right: 0;
    box-shadow: none;
    border-radius: 10px 0 0 0;
}
.audiojs .play-pause {
    width: 25px;
    height: 40px;
    padding: 4px 6px;
    margin: 0px;
    float: left;
    overflow: hidden;
    border-right: none;
}

.audiojs .progress {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 14px;
    width: 0px;
    background: rgba(55,100,255,0.8);
    z-index: 1;
    background-image: none;
}


.navbar-default {
    background-color: transparent;
    border-color: transparent;
}

.navbar-default .navbar-toggle, .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:active, .navbar-default .navbar-toggle:focus {
    background-color: #ea85ff;
}

.navbar-default .navbar-toggle {
    border-color: #be4dff;
}

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


.music-caption {
    position: fixed;
    bottom: 35px;
    right: 10px;
    color: white;
}

.music-caption a {
    color: white;
}


/* Media Queries */
@media (min-width:1071px) and (max-width:1279px){
    .header nav a{ font-size: 13px; }
    .logo { font-size: 44px;}
}

@media (max-width:1070px){
    .hide-mobile {display:none;}
    .nav-row{ float:left; width:50%;}
    .logo-mobile{ margin-left:0;left: 0;width:50%;display: block;float:left; }
    .logo-mobile img { max-width:90%; }
    .header { padding: 7px 3px; }
    .header nav ul li { /*width: 24%; display:inline-block;padding:0;text-align: center;vertical-align: top;margin-top: 62px;*/ }
    .logo-wrapper { display:none !important; }
    .header nav a{ font-size: 13px; }
    .header nav ul { margin-top: 17px; }
}

@media (max-width:768px){
    main { background-size: cover; background-position: center -137px; height: calc(100vh - 0px);}
    .audiojs { display:none; }
    .header nav a{ font-size: 12px; }
    .sub-menu a { font-size: 11px !important; }

    .logo-mobile {
        margin-left: 0;
        left: 0;
        width: 70%;
        display: block;
        float: left;
        position: absolute;
    }
    .nav-row {
        float: left;
        width: 50%;
        margin-left: 50%;
    }

    .header nav ul li {
        display: block;
        padding: 10px;
        text-align: left;
        background-color: #201084;
    }

    #menu-collapse{
        position:absolute;
        width:100%;
        top: 42px;
        border:0;
        padding-left: 0;
        padding-right: 0;
    }

    button.navbar-toggle{
        position: absolute;
        right: -10px;
        top: 11px;
        z-index: 22;
    }


    .header nav ul li ul {
        display: block;
        position: relative;
        border-top: 2px solid #ea85ff;
        width: 90%;
        margin-left: 10%;
        text-align: right;
    }
}

@media (max-width:414px){
    .header nav a{ font-size: 12px; }
}