/* 	GAME OF BANDS STYLESHEET BETA v0.4

	THIS VERSION USES A COMBINATION OF BOOTSTRAP
	AND MY OWN FLEXBOX FRAMEWORK.

	BOOTSTRAP IS USED TO HANDLE ALL THE LARGER
	RESPONSIVENESS REQUIRED OF THE WEBSITE,

	WHILE FLEXBOX HANDLES LAYOUTS ON A SMALLER SCALE,
	SUCH AS THE LAYOUT INSIDE A SINGLE TRACK OBJECT.

	THE STYLESHEET IS DIVIDED INTO TWO SECTIONS:
	STRUCTURAL AND STYLISTIC. FOR THIS REASON,
	SOME ELEMENTS MAY APPEAR IN BOTH SECTIONS.

	STRUCTURAL ELEMENTS CONTAIN ALL FLEX, MARGIN,
	PADDING AND BORDER INFORMATION.

	STYLISTIC ELEMENTS CONTAIN ALL FONT, FONT-SIZE,
	ALIGNMENT AND COLOUR INFORMATION.

*/

/* * { border: 1px solid lightgreen;} */

#content {
    position: fixed;
    bottom: 0;
    top: 0;
    left: 0;
    right: 0;
    overflow: auto;
    overflow: overlay;
    padding-left: calc(100vw - 100%);
}

#audio-player-element.visible ~ #content,
#audio-player-element.visible ~ #audio-visualization {
    bottom: 30px;
    transition: bottom 300ms;
}

#audio-player-element {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    margin: -30px;
    transition: margin 300ms;
}

#audio-player-element.visible {
    margin: 0px;
    transition: margin 300ms;
}

#audio-visualization {
    z-index: -1;
    position: absolute;
    width: 100%;
    height: 200px;
    bottom: 0;
    left: 0;
    right: 0;
}

.debug-border {
    border: 1px solid red;
}

[disabled="disabled"] {
    color: gray !important;;
    pointer-events: none;
}

/* STRUCTURAL CLASSES AS OF BETA .4 */

	/* ABSTRACT CLASSES */

		/* ALL FLEX RELATED CLASSES WILL NEED COMPREHENSIVE BROWSER SYNTAX ADDED TO THEM */

		/* FLEXBOX */

		.roundImageText {
			font-size: .9rem ;
			text-align: center;
		}

		.parent {
			display: flex;
/* 			border: 1px solid yellow; */
		}

        .flex-column, .flex-column-left, .flex-column-center, .flex-column-right {
          display: flex;
          flex-direction: column;
        }

        .flex-row, .flex-row-baseline, .flex-row-center, .flex-row-top, .flex-row-bottom, .flex-row-stretch {
            display: flex;
            flex-direction: row;
        }

        .flex-column, .flex-column-left, .flex-column-center, .flex-column-right {
          display: flex;
          flex-direction: column;
        }

		.flex-row, .flex-row-center {
			display: flex;
			flex-direction: row;
		}

        .flex-row-center {
            align-items: center;
            align-content: center;
        }

        .flex-row-baseline   { align-items: baseline; }
        .flex-row-top        { align-items: flex-start;  align-content: flex-start; }
        .flex-row-center     { align-items: center;      align-content: center; }
        .flex-row-stretch    { align-items: stretch;     align-content: stretch; }
        .flex-row-bottom     { align-items: flex-end;    align-content: flex-end; }
        .flex-column-left    { align-items: flex-start;  align-content: flex-end; }
        .flex-column-center  { align-items: center;      align-content: center; }
        .flex-column-right   { align-items: flex-end;    align-content: flex-end; }


		.child {
/* 			border: 1px solid green; */

			-webkit-box-flex: 1;      /* OLD - iOS 6-, Safari 3.1-6 */
			-moz-box-flex: 1;         /* OLD - Firefox 19- */
			-webkit-flex: 1;          /* Chrome */
			-ms-flex: 1;              /* IE 10 */
			flex: 1;
			flex-grow: 1;
		}

		.childNoGrow {
			flex-grow: 0;
		}

		/* CROSS AXIS */

		.light {
			-webkit-align-items: flex-start;
			align-items: flex-start;
		}

		.zeroG {
			-webkit-align-items: center;
			align-items: center;
		}

		.heavy {
			-webkit-align-items: flex-end;
			align-items: flex-end;
		}

		.push {
			-webkit-justify-content: flex-end;
			justify-content: flex-end;
		}

		.pull {
			-webkit-justify-content: flex-start;
			justify-content: flex-start;
		}

		.tight {
			-webkit-justify-content: space-around;
			justify-content: space-around;
		}

		.sparse {
			-webkit-justify-content: space-between;
			justify-content: space-between;
		}

		.pillar {
			-webkit-justify-content: center;
			justify-content: center;
		}

		/* MAIN AXIS */

		.h2v {
			-webkit-flex-direction: row;
			flex-direction: row;
			-webkit-align-items: flex-end;
			align-items: flex-end;
			-webkit-justify-content: flex-start;
			justify-content: flex-start;
		}

        .flex-none {
            flex: none;
        }

        .grow, .grow-1, .grow-2, .grow-3, .grow-4, .grow-5, .grow-6, .grow-7, .grow-8, .grow-9, .grow-10, .grow-11, .grow-12, .grow-13, .grow-14, .grow-15 {
            flex-basis: auto;
            flex-shrink: 0;
        }

        .stretch, .stretch-1, .stretch-2, .stretch-3, .stretch-4, .stretch-5, .stretch-6, .stretch-7, .stretch-8, .stretch-9, .stretch-10, .stretch-11, .stretch-12, .stretch-13, .stretch-14, .stretch-15 {
            flex-basis: 0px;
            flex-shrink: 0;
            min-height: 0;
            min-width: 0;
        }

        .grow, .grow-1,  .stretch, .stretch-1 { flex-grow: 1; }
        .grow-2, .stretch-2 { flex-grow: 2; }
        .grow-3, .stretch-3 { flex-grow: 3; }
        .grow-4, .stretch-4 { flex-grow: 4; }
        .grow-5, .stretch-5 { flex-grow: 5; }
        .grow-6, .stretch-6 { flex-grow: 6; }
        .grow-7, .stretch-7 { flex-grow: 7; }
        .grow-8, .stretch-8 { flex-grow: 8; }
        .grow-9, .stretch-9 { flex-grow: 9; }
        .grow-10, .stretch-10 { flex-grow: 10; }
        .grow-11, .stretch-11 { flex-grow: 11; }
        .grow-12, .stretch-12 { flex-grow: 12; }
        .grow-13, .stretch-13 { flex-grow: 13; }
        .grow-14, .stretch-14 { flex-grow: 14; }
        .grow-15, .stretch-15 { flex-grow: 15; }

        .justify-self-stretch { justify-self: stretch; }
        .justify-self-center { justify-self: center; }
        .justify-self-start { justify-self: start; }
        .justify-self-end { justify-self: end; }

        .fill-width { width: 100%; }
        .fill-height { height: 100%; }

        .horizontal-spacing-1  > :not(:last-child ) { margin-right:  0.05rem; }
        .horizontal-spacing-1  > :not(:first-child) { margin-left:   0.05rem; }
        .horizontal-spacing-2  > :not(:last-child ) { margin-right:  0.1rem;  }
        .horizontal-spacing-2  > :not(:first-child) { margin-left:   0.1rem;  }
        .horizontal-spacing-3  > :not(:last-child ) { margin-right:  0.15rem; }
        .horizontal-spacing-3  > :not(:first-child) { margin-left:   0.15rem; }
        .horizontal-spacing-4  > :not(:last-child ) { margin-right:  0.2rem;  }
        .horizontal-spacing-4  > :not(:first-child) { margin-left:   0.2rem;  }
        .horizontal-spacing-6  > :not(:last-child ) { margin-right:  0.3rem;  }
        .horizontal-spacing-6  > :not(:first-child) { margin-left:   0.3rem;  }
        .horizontal-spacing-8  > :not(:last-child ) { margin-right:  0.4rem;  }
        .horizontal-spacing-8  > :not(:first-child) { margin-left:   0.4rem;  }
        .horizontal-spacing-12 > :not(:last-child ) { margin-right:  0.6rem;  }
        .horizontal-spacing-12 > :not(:first-child) { margin-left:   0.6rem;  }
        .horizontal-spacing-16 > :not(:last-child ) { margin-right:  0.8rem;  }
        .horizontal-spacing-16 > :not(:first-child) { margin-left:   0.8rem;  }
        .vertical-spacing-1    > :not(:first-child) { margin-top:    0.05rem; }
        .vertical-spacing-1    > :not(:last-child ) { margin-bottom: 0.05rem; }
        .vertical-spacing-2    > :not(:first-child) { margin-top:    0.1rem;  }
        .vertical-spacing-2    > :not(:last-child ) { margin-bottom: 0.1rem;  }
        .vertical-spacing-3    > :not(:first-child) { margin-top:    0.15rem; }
        .vertical-spacing-3    > :not(:last-child ) { margin-bottom: 0.15rem; }
        .vertical-spacing-4    > :not(:first-child) { margin-top:    0.2rem;  }
        .vertical-spacing-4    > :not(:last-child ) { margin-bottom: 0.2rem;  }
        .vertical-spacing-6    > :not(:first-child) { margin-top:    0.3rem;  }
        .vertical-spacing-6    > :not(:last-child ) { margin-bottom: 0.3rem;  }
        .vertical-spacing-8    > :not(:first-child) { margin-top:    0.4rem;  }
        .vertical-spacing-8    > :not(:last-child ) { margin-bottom: 0.4rem;  }
        .vertical-spacing-12   > :not(:first-child) { margin-top:    0.6rem;  }
        .vertical-spacing-12   > :not(:last-child ) { margin-bottom: 0.6rem;  }
        .vertical-spacing-16   > :not(:first-child) { margin-top:    0.8rem;  }
        .vertical-spacing-16   > :not(:last-child ) { margin-bottom: 0.8rem;  }

		.wrap {
			-webkit-flex-wrap: wrap;
			flex-wrap: wrap;
		}

		.centerText {
			text-align: center;
		}

		.rightText {
			text-align: right;
		}

        .scroll {
          overflow: auto;
        }


/* SPECIFIC CLASSES - some of these maybe could be changed to IDs, like #header */

    body {
        font-size: 1.3rem;
    }

    ::-webkit-input-placeholder {
      font-family: Segoe UI;
      font-style: italic;
      color: #ccc;
      padding-left: .5ch;
    }

    :-moz-placeholder {
      font-family: Segoe UI;
      font-style: italic;
      color: #ccc;
      padding-left: .5ch;
    }

    ::-moz-placeholder {
      font-family: Segoe UI;
      font-style: italic;
      color: #ccc;
      padding-left: .5ch;
    }

    :-ms-input-placeholder {
      font-family: Segoe UI;
      font-style: italic;
      color: #ccc;
      padding-left: .5ch;
    }

    .input-clear-button:before {
        font-family: "FontAwesome";
        content: '\f057';
        color: #90EE90;
        cursor: pointer;
    }

    .input-clear-button:hover:before {
        color: white;
    }

    .up-button,
    .next-button,
    .prev-button {
        vertical-align: middle;
        font-size: 2rem;
        line-height: 2.5rem;
        height: 3rem;
    }
    .next-button,
    .prev-button {
        position: absolute;
        top: 0;
    }
    .next-button  {
        right: -2.5rem;
    }
    .prev-button  {
        left: -2.5rem;
    }

    .up-button:before,
    .next-button:before,
    .prev-button:before {
        font-family: "FontAwesome";
        width: 2rem;
        cursor: pointer;
        align-content: center;
        opacity: .4;
    }
    .up-button:hover:before,
    .next-button:hover:before,
    .prev-button:hover:before {
        opacity: 1;
    }
    .next-button:before {
        content: "\f054";
    }
    .prev-button:before {
        content: "\f053";
    }
    .up-button:before {
       content: "\f077";
    }
    .up-button {
        text-align: center;
    }

	/* navbar.php */

		.navbar-xs {
			min-height: 34px;
			height: 24px;
		}

		.navbar-xs .navbar-brand {
			padding: 0px 12px;
			font-size: 16px;
			line-height: 28px;
		}

		.navbar-xs .navbar-nav > li > a {
			padding-top: 0px;
			padding-bottom: 0px;
			line-height: 28px;
		}

		.navbar-xs .navbar-toggle {
			margin: 0 15px 0 0;
		}

		.navbar-xs .sr-only {
			height: 0;
		}

	/* END OF navbar.php */

	/* header.php */

		#header {
			height: 100vh;
		}

		#headerTeamHub {
  		height: 100vh;
		}

		#beta {
			margin: 0 -60px 0 10px;
		}

		#siteSlogan {
			margin-bottom: 100px;
		}

		#sloganText {
			border-radius: 10px;
			padding: 5px 30px 5px 30px;
		}

	/* END OF header.php */



	/* RENDERLIBRARY.PHP */

		#pageTitle {
			margin-bottom: 30px;
		}

		.iconLink {
			white-space: nowrap;
		}

        .iconLink:before {
            /*
          display: flex;
          align-items: center;
          */
        }

		.roundSongListing {
			margin-bottom: 200px;
		}

		.roundButton { /* THIS OR THE NEXT MIGHT BE ABLE TO BE DELETED */
			padding: 5px;
			border-radius: 5px;
		}

		.roundAddPlaylist { /* this needs to become a span */
			margin: 5px 0 5px 5px;
		}

		.roundImage {
			width: 200px;
			height: 200px;
			margin: 10px;
			border: 1px solid white;
			color: white;
		}

		.roundImageText {
			font-size: .8rem ;
			text-align: center;
		}

		.artistsWanted {
			display: block;
			text-align: center;
		}


		.roundPlaylists {
			display: none;
		}

		.lyricsBox {
            text-shadow: 1px 1px 5px black;
			padding-top: 25px;
			clear: both;
            white-space: pre-wrap;
		}



/* STYLISTIC CLASSES AS OF BETA v0.4 - still requires clean up */

	/* index.php */

		body {
			background: url("../images/blurryphones.jpg") no-repeat black;
			background-position: -600px 00;
			background-size: auto 100%;
			background-attachment: fixed;
			font-family: 'Avenir Next', Arial, Helvetica;
			color: lightgrey;
		}

        a {
            cursor: pointer;
        }

		a:hover, a:active, a:visited, a:focus {
			text-decoration: none;
		}

		a:active, a:focus {
			color: inherit;
		}

		a:hover {
			color: white;
		}

		/* END OF index.php */

		/* header.php */

		#siteTitle {
			text-ouline: 1px solid white;
			text-align: center;
			font-family: 'Avenir Next', Arial, Helvetica;
			font-size: 3rem;
			letter-spacing: -3px;
			color: #ddd;
		}

		#siteTitle a {
			color: white;
		}

		#siteTitle a:hover {
			color: white;
		}

		#beta {
			vertical-align: super;
			font-size: .5rem;
			letter-spacing: -2px;
		}

		#siteSlogan {
			text-align: center;
			font-family: 'Avenir Next', Arial, Helvetica;
			font-size: .9rem;
		}

		#sloganText {
			text-align: center;
			background-color: rgba(0,0,0,.5);
		}

		#listen a {
			font-size: 5rem;
			color: black;
			text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 45px #fa0, 0 0 60px #fa0;
			-webkit-transition-duration: all 2s ease-in-out;
			-moz-transition-duration: all 2s ease-in-out;
			-o-transition-duration: all 2s ease-in-out;
			transition: all 2s ease-in-out;
		}


		#listen a:visited, #listen a:active, #listen a:focus {
			text-decoration: none;
		}



		#listen a:hover, #listen a:focus {
			color: white;
		}


		#listen a:focus, #listen a:active {
			display: inline-block;
			transform: rotate(90deg);
		}

	/* END OF header.php */

	/* navbar.php */

		.navbar-gob {
			background-color: rgba(0,0,0,.8);
		}

		.navbar-gob .navbar-collapse {

		}

		.navbar-gob .navbar-brand {
			color: lightblue;
		}
		.navbar-gob .navbar-nav>li>a {
			color: lightblue;
		}

		.navbar-gob li a:hover {
			color: white;
			background-color: inherit;
		}

		.navbar-gob li a:active, .navbar-gob li a:focus {
			background-color: inherit;
		}

		.navbar-gob li .dropdown-menu {
			background-color: rgba(0,0,0,.8);
			color: lightblue;
		}

		.dropdown-menu li a {
			color: lightblue;
		}


	/* END OF navbar.php */

	/* RENDERLIBRARY.PHP */

		.pageTitle {
			font-family: 'Avenir Next Condensed',Arial, Helvetica;
			font-size: 2rem;
			text-align: center;
		}

        table {
           width: 100%; /*must be set (to any value)*/
        }

        .overflow-wrap-hack{
           max-width:1px;
        }

		.roundNumber {
            position: relative;
            user-select: none;
            color: white;
			text-align: center;
			color: #eee;
			font-size: 3.2rem;
            line-height: 2.5rem;
			letter-spacing: -3px;
            margin-bottom: 2rem;
		}

		.roundTheme {
			color: #eee;
			font-size: 2rem;
			text-align: center;
		}

		.roundAddPlaylist {
			text-align: right;
		}

		.roundButton {
			background-color: rgba(0,0,0,.5);
			text-transform: uppercase;
			font-size: .8rem;
		}

		.trackTitle {
			color: #eee;
			font-family: Helvetica !important;
			font-size: 1.7rem;
			text-decoration: none;
            margin-left: 5px;
		}

		.trackListing {
			opacity: 1;
			padding: 0;
			list-style-type: none;
            position: relative;
		}

		.trackListing > li {
            border: 2px solid #243144;
			background-color: #0f1725e3;
			padding: 5px;
			border-radius: 8px;
			overflow: hidden;
            box-shadow: 3px 3px 10px rgba(0, 0, 0, .5);
		}

		.trackListing:not(.trackListingPlaying) > li:hover {
            border-color: #3a4f6d;
		}

		.trackListing > li:hover {
			background-color: rgba(25,25,60,.75);
		}

        .trackListingPlaying > li {
            border: 2px solid #a26903;
        }

        .trackListingPlaying:after {
            content: "";
            position: absolute;
			border-radius: 8px;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            z-index: -1;
            background-image: url(../images/trackplayingbg.gif);
            background-size: 100% 200%;
        }

        .trackListingPlaying.expanded:after {
            background-size: 100% 100% !important;
        }

		.songLibrary {
            margin-left: 5rem;
            margin-right: 5rem;
			margin-bottom: 200px;
		}

        .songLibrary-m {
            margin-left: 0;
            margin-right: 0;
            margin-bottom: 200px;
        }

        .songListFilter {
        }

        .trackTableView.trackWin > .tableViewList,
        .trackTableView.musicWin > .tableViewList,
        .trackTableView.lyricsWin > .tableViewList,
        .trackTableView.vocalsWin > .tableViewList {
            max-height: 31rem;
            overflow-y: auto;
        }
        .trackTableView.musicWin,
        .trackTableView.lyricsWin,
        .trackTableView.vocalsWin {
            width: 70rem;
        }

        .trackTableView.musicWin .tracklist-col-lyricist,
        .trackTableView.musicWin .tracklist-col-lyricistVotes,
        .trackTableView.musicWin .tracklist-col-vocalist,
        .trackTableView.musicWin .tracklist-col-vocalistVotes {
            display: none;
        }
        .trackTableView.lyricsWin .tracklist-col-musician,
        .trackTableView.lyricsWin .tracklist-col-musicianVotes,
        .trackTableView.lyricsWin .tracklist-col-vocalist,
        .trackTableView.lyricsWin .tracklist-col-vocalistVotes {
            display: none;
        }
        .trackTableView.vocalsWin .tracklist-col-lyricist,
        .trackTableView.vocalsWin .tracklist-col-lyricistVotes,
        .trackTableView.vocalsWin .tracklist-col-musician,
        .trackTableView.vocalsWin .tracklist-col-musicianVotes {
            display: none;
        }

        .tableViewList, .tableViewHeaders {
            min-width: 70rem;
        }

        .tableViewList {
            overflow-wrap: break-word;
            overflow: auto;
        }

        .tableViewHeaders {
            display: flex;
            align-content: flex-end;
            align-items: flex-end;
            height: 4rem;
            user-select: none;
        }

        .column-sort-indicator > div:before {
            display: block;
            position: relative;
        }

        .column-sort-indicator > div:before,
        .column-sort-indicator > div:after {
            font-family: "FontAwesome";
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            position: absolute;
            overflow: show;
        }

        .column-sort-indicator:nth-child(even) > div:after {
            content: "\f176";
            margin-left: .5rem;
        }

        .column-sort-indicator:nth-child(even).column-sort-reversed > div:after {
            content: '\f175';
            margin-left: .5rem;
        }

        .column-sort-indicator:nth-child(odd) > div:before {
            content: "\f176";
            margin-left: -.9rem;
        }

        .column-sort-indicator:nth-child(odd).column-sort-reversed > div:before {
            content: '\f175';
            margin-left: -.9rem;
        }


        .tableViewHeaders > div > div {
            display: inline-block;
        }

        .tableViewHeaders > div {
            position: relative;
            text-transform: uppercase;
            font-size: 1.1rem;
            font-weight: bold;
            white-space: nowrap;
            overflow: show;
            padding-left: 0.6rem;
            min-height: 0;
            min-width: 0;
        }

        .tableViewHeaders > div > div {
            cursor: pointer;
        }

        .tableViewHeaders > div > div:hover {
            color: white;
        }

        .tableViewHeaders > div:nth-child(odd) > div {
            bottom: 0px;
            margin-left: -1.8rem;
        }
        .tableViewListRow {
            display: flex;
			background-color: rgba(0,0,0,.5);
            line-height: 2.3rem;
            align-content: stretch;
            align-items: stretch;
        }
        .tableViewListRow > * {
            min-height: 0;
            min-width: 0;
            position: relative;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }
        .tableViewListRow > *.winnerGlow {
            overflow: visible;
        }
        .tableViewListRow > *.winnerGlow:after {
            position: absolute;
            right: -0.8rem;
        }

        .tableViewListRow > .tracklist-col-title,
        .tableViewListRow > .tracklist-col-lyricist,
        .tableViewListRow > .tracklist-col-musician,
        .tableViewListRow > .tracklist-col-vocalist {
            padding-left: .6rem;
        }

        .tableViewListRow:nth-child(odd) {
			background-color: rgba(0,0,0,.4);
        }

        .tracklist-col-round,
        .tracklist-col-trackVotes,
        .tracklist-col-lyricistVotes,
        .tracklist-col-vocalistVotes,
        .tracklist-col-musicianVotes {
            text-align: right;
            padding-right: .4rem;
        }

        .tracklist-col-play,
        .tracklist-col-playlist {
            flex: 0 0 2.2rem;
            text-align: center;
        }

        .tracklist-col-trackVotes,
        .tracklist-col-lyricistVotes,
        .tracklist-col-vocalistVotes,
        .tracklist-col-musicianVotes {
            flex: 0 0 3rem;
        }
        .tracklist-col-lyricist,
        .tracklist-col-musician,
        .tracklist-col-vocalist {
            flex: 1 0 1rem;
        }
        .tracklist-col-round {
            flex: 0 0 4rem;
        }
        .tracklist-col-title {
            flex: 2 0 1rem;
        }

        .tracklist-col-trackVotes,
        .tracklist-col-musicianVotes,
        .tracklist-col-lyricistVotes {
            background-image: linear-gradient(to left, rgba(0, 0, 0, 0.06) 0%,rgba(0, 0, 0, 0) 30%);
        }

        .tracklist-col-musician,
        .tracklist-col-lyricist,
        .tracklist-col-vocalist,
        .tracklist-col-title {
            background-image: linear-gradient(to right, rgba(255,255,255, 0.06) 0%,rgba(255,255,255, 0) 100%);
        }

		/* BUTTONS */

			.addToFavourites {
				color: lightpink;
                text-transform: lowercase;
			}

			.addToPlaylist {
				color: orange;
				cursor: pointer;
			}

			.addToFavourites::before,
			.addToPlaylist::before,
			.displayLyrics::before {
                font-family: "FontAwesome";
                -webkit-font-smoothing: antialiased;
                -moz-osx-font-smoothing: grayscale;
                display: inline-block;
                width: 16px;
                height: 16px;
			}
			.addToPlaylist::before { content: "\f0c9"; }
			.displayLyrics::before { content: "\f0d7"; /*"\f150";*/ }
			.addToFavourites::before { content: "\f0c1"; }

			.displayLyrics {
				color: lightgreen;
                text-transform: lowercase;
				cursor: pointer;
                flex: none;
                display: flex;
                align-items: flex-end;
                line-height: 1rem;
			}

            .banditRow {
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                align-content: center;
            }

			.banditName {
				color: lightgreen;
                margin-right: 15px;
                white-space: nowrap;
                text-shadow: 1px 1px 1px #444;
                flex: none;
			}

            .winnerGlow {
                text-shadow: 1px 1px 1px #444, 0 0 10px rgba(255,255,255,.2);
            }
            .winnerGlow:after {
				font-family: "FontAwesome";
                color: gold;
                margin-left: 0.4rem;
                content: "\f091";
            }

			.trackMusician::before,
			.trackLyricist::before,
			.trackVocalist::before {
				color: white;
				margin-right: 3px;
            }

			.trackMusician::before,
			.trackLyricist::before {
				font-family: "Glyphicons Halflings";
			}

			.trackVocalist::before {
				font-family: "FontAwesome";
            }

			.trackMusician::before { content: "\e002"; }
			.trackLyricist::before { content: "\270f"; }
			.trackVocalist::before { content: "\f130"; }

			.play {
				color: orange;
			}


		/* END BUTTONS */

@media screen and (max-width: 768px) {

	.h2v {
		-webkit-flex-direction: column;
		flex-direction: column;
		-webkit-align-items: flex-start;
		align-items: flex-start;
		-webkit-justify-content: flex-end;
		justify-content: flex-end;
	}

    .roundImage {
        display: none;
    }

    #siteTitle {
	    font-size: auto;
    }

    #siteSlogan {
	    display: none;
    }

    .roundImageText {
		display: none;
	}

}


	/* BANDIT STYLES */

	/* renderBandit.php */

a {
	color: lightblue;
}

.min500 {
	flex-basis: 500px;
}

.center {
	-webkit-align-items: center;
	align-items: center;
}

#banditHeader {
	height: 90vh;
}

.mod {
	color: orange;
}

.noMod {
	color: orange;
}

.banditInfo {
	padding: 0 0 0 200px;
	text-align: left;
}

.banditHeaderName {
	font-size: 3rem;
	font-weight: bold;
	text-align: left;
}

.awards {
	padding: 0 100px 0 100px;
}

.flair {
}

.trophyShelf {
	margin-bottom: 30px;
}

.plaque {
	border-bottom: 2px solid #411;
}

.plaqueBackground {
	display: inline-block;
	background: url('../images/flair/bestTrackPlaqueLarge.png');
	background-size: 100% 100%;
	height: 48px;
	width: 40px;
	margin: 2px;
	line-height: 77px;
	color: black;
	font-size: 9pt;
	font-weight: bold;
	text-align: center;
}

#banditSongs {
	margin: 0;
}

/* renderSong.php */



/* artwork */

#dcs {
	padding: 15px;
	margin: 5px;
	border: 2px solid lightgrey;
	border-radius: 12px;
	overflow: hidden;
	background-color: rgba(0,0,0,.5);
	width: 600px;
	color: white;
}

input#songsearch {
	min-width: 200px;
	max-width: 100%;
    color: black;
}


/* stream quality selectors */


.switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 20px;
  /* background-color: rgba(0, 0, 0, 0.25); */
  background: #797986;
  border-radius: 20px;
  transition: all 0.3s;
}
.switch::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius:50%;
  background-color: white;
  top: 1px;
  left: 1px;
  transition: all 0.3s;
}

.checkbox:checked + .switch::after {
  left : 20px;
}
.checkbox:checked + .switch {
  background-color: #7983ff;
}
.checkbox {
  display : none;
}

.toggle-nav-container {
    padding-top: 0.4rem;
}


div.mobile-h {
    margin-left: 2rem;
}

h2.mobile-h {
    text-align: center;
}

.filter-m {
    /* margin: 0 auto !important; */
    margin: 0 4rem;
}