/* 

	TABLE OF CONTENTS:
	(ctrl+f to jump there) 
	
	Globals
		Global Styles
		Navigation Panel
		User Account Panel
	
	Headers & Footers
		Header Content
		Filter Panel
		Footer Content
	
	Article Cards
		Article Card Treatments
		Article Card Thumbnail
		Article Card Text
	
	Info Panel
	
	Audio Player
	
	Playlist Panel
	
	UI Components
		Forms and Inputs
		Feedback Modal
	
	Page-Specific Styles
		Station and Category Pages
		Playlists Page
		Narrator Application Pages
		Account Settings Page
	
	Media Queries (Responsive Definitions)
	Odds and Ends

*/


/*

  ________.__        ___.          .__          
 /  _____/|  |   ____\_ |__ _____  |  |   ______
/   \  ___|  |  /  _ \| __ \\__  \ |  |  /  ___/
\    \_\  \  |_(  <_> ) \_\ \/ __ \|  |__\___ \ 
 \______  /____/\____/|___  (____  /____/____  >
        \/                \/     \/          \/ 

*/

/* Global Styles */

body{
	padding-top: 3.48rem;
	background-color: #f0f0f0 !important;
	font-family: 'Lato', sans-serif;
}

.c{
	text-align:center;
}

.centered{
	margin: 0px auto;
}

.l{
	float: left;
}

.r{
	float:right;
}

.devLink{
	color: #ff00ff !important;
	font-weight: 500;
	display: block;
}


#mainContent{
	width: 100%;
	overflow-x: hidden;
	transition: width 0.5s cubic-bezier(.23,1,.32,1);
}

/* Navigation Panel */

#gyst-header{
	background-color: #2D3691;
}

#mobileLogoIcon{
	height: 20px; 
	margin-right: 10px;
	display: none;
}

#logoText{
	font-weight: 900; 
	font-size: 0.9rem; 
	color: #fff;
	opacity: 1;
	transition: opacity 0.5s cubic-bezier(.23,1,.32,1);
	margin-right: 8px;
	padding: 9px 0;
}

#logoText:hover{
	text-decoration: none;
	opacity: 0.9;
}

.nav-link{
	font-size: 0.95rem;
	margin-left: 0.5rem;
	position: relative;
	top: -1px;
}

#headerMobileAccountLink, #headerMobileSignOut{
	display: none;
}

.navbar-chevron{
	background-image: url('../img/chevron.png');
	width: 18px;
	height: 18px;
	background-size: 100%;	
}

.headerSignIn{
	border: 2px solid #fff; 
	background-color: #2d3691; 
	color: #fff; 
	border-radius: 2rem; 
	padding: 0.3rem 1rem; 
	text-transform: uppercase; 
	letter-spacing: 2px; 
	font-size: 0.75rem; 
	font-weight: 900; 
	cursor: pointer;
	transition: all 0.5s cubic-bezier(.23,1,.32,1);
}

.headerSignIn:hover{
	background-color: #fff;
	border-color: rgba(255,255,255,0.5);
	color: #2d3691;
	text-decoration: none;
}

.btn-login{
	color: #fff;
	background-color: transparent;
	border-color: #fff;
	border-width: 2px;
	border-radius: 8px;
	font-weight: bold;
}

.btn-login:hover,.btn-login-sm:hover,.btn-login-xs:hover{
	color: #2D3691;
	background-color: #fff;
	border-color: #2D3691;
}

.btn-login-sm,.btn-login-xs{
	color: #fff;
	background-color: transparent;
	border-color: #fff;
	border-width: 2px;
	border-radius: 8px;
	font-weight: bold;
	width: 100%;
}

#userAccount{
	float: right;
	border: 2px solid #8187BE;
	width: 36px;height: 36px;
	background-color: #2d3691;
	border-radius: 20px;
	overflow: hidden;
	cursor: pointer;
}

#userAccount:hover{
	border-color: #fff !important;
}

#userAccount img{
	width: 100%;
}

#accountAlert{
	position: fixed;
	right: 37px;
	top: 30px;
	width: 18px;
	height: 18px;
	border-radius: 1rem;
	border: #fff 2px solid;
	color: #fff;
	background-image: url('../img/exclamation.png');
	background-color: #DF5050;
	background-repeat: no-repeat;
	background-size: 77%;
	background-position: center center;
}

/* User Account Panel */

#accountPanel{
	height: 100%;
	z-index: 9999;
	overflow: hidden;
	font-weight: 500;
	text-align: center;
	font-size: 0.8rem;
	position: fixed;
	top: 0;
	right: 0;
	background-color: #fff;
	width: 0rem;
	/*box-shadow: rgba(0, 0, 0, 0.5) 0px 10px 0px 3840px;*/
	transition: width 0.5s cubic-bezier(.23,1,.32,1);
	white-space: nowrap;
	overflow-y: scroll;
	-webkit-overflow-scrolling: touch;
}

#accountPanelShroud{
	background-color: transparent;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 9999;
	pointer-events: none;
	transition: background-color 0.5s cubic-bezier(.23,1,.32,1);
}

#accountPanelCloser{
	width: 1.75rem;
	height: 1.75rem;
	position: absolute;
	top: 1rem;
	right: 1.2rem;
	background: url('../img/purpleX.png') no-repeat;
	background-size: 100%;
	cursor: pointer;
}

#accountPanelAvatar{
	display: block;
	margin: 1rem auto;
	width: 6rem;
	height: 6rem;
	border: 2px solid #fff;
	background-color: #2D3691;
	background-position: center center;
	background-image: url('../img/face.png');
	background-repeat: no-repeat;
	background-size: 2rem;
	border-radius: 3.5rem;
	border: 6px solid #6066AE;
	overflow: hidden;
	cursor: pointer;
	transition: opacity 0.2s ease-in;
	transition: border 0.2s ease-in;
}

#accountPanelAvatar:hover{
	background-image: url('../img/whiteGear.png');
	border: 6px solid #2d3691;
	transition: border 0.2s ease-in;
}

#accountPanelAvatar img{
	width: 100%;
}

#userAccountImg:hover{
	opacity: 0.3;
}

#accountPanel h2{
	font-size: 1rem;
	color: #686868;
	width: 90%;
	margin: 0 auto;
	border-bottom: 1px solid rgba(0,0,0,0.1);
	padding-bottom: 1rem;
}

.accountButton{
	display: block;
	width: 90%;
	margin: 0 auto;
	color: #212529;
	padding: 1rem;
	cursor: pointer;
	text-align: left;
	border-bottom: 1px solid rgba(0,0,0,0.1);
	overflow: hidden;
	transition: background-color 0.5s cubic-bezier(.23,1,.32,1);
}

.accountButton:hover{
	background-color: #FDFDFF;
	text-decoration: none;
	color: #2d3691;
	font-weight: 600;
}

.activeAccountButton{
	opacity: 1;
	font-weight: 700;
	color: #2d3691;
}

.accountButton img{
	width: 19px;
	height: 19px;
	display: inline;
	margin-right: 1rem;
	opacity: 0.75;
}

#narrationNotification{
	color: #fff;
	float: right;
	height: 1.3rem;
	background-color: #DF5050;
	border: 2px solid #fff;
	border-radius: 1rem;
	padding: 0 0.33rem 0 0.3rem;
	position:absolute;
	left: 13.9rem;
	font-weight: 800 !important;
	font-size: 0.75rem;
}



/*

  ___ ___                     .___               ____    ___________            __                
 /   |   \   ____ _____     __| _/___________   /  _ \   \_   _____/___   _____/  |_  ___________ 
/    ~    \_/ __ \\__  \   / __ |/ __ \_  __ \  >  _ </\  |    __)/  _ \ /  _ \   __\/ __ \_  __ \
\    Y    /\  ___/ / __ \_/ /_/ \  ___/|  | \/ /  <_\ \/  |     \(  <_> |  <_> )  | \  ___/|  | \/
 \___|_  /  \___  >____  /\____ |\___  >__|    \_____\ \  \___  / \____/ \____/|__|  \___  >__|   
       \/       \/     \/      \/    \/               \/      \/                         \/       

*/

/* Header Content */

.gridButton, #filterToggler{
	height: 100%;
	width: 25%;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 1.3rem;
	cursor: pointer;
	background-position: right center;
	float: right;
	opacity: 0.5;
}

.gridButton:hover, #filterToggler:hover{
	opacity: 1.0;
}

.gridButton:hover::after{
	text-align: center;
	width: 3.8rem;
	font-size: 0.6rem;
	padding: 0.2rem 0.5rem;
	background-color: #252525;
	color: #fff;
	border-radius: 6px;
	position: relative;
	float: right;
	top: calc(100% + 5px);
	left: 1.3rem;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 600;
}

#bigGrid{
	background-image: url('../img/purpleGrid2.png');
}
#bigGrid:hover::after{
	content: 'COMFY';
}

#compactGrid{
	background-image: url('../img/purpleGrid1.png');
}
#compactGrid:hover::after{
	content: 'COMPACT';
}

#listGrid{
	background-image: url('../img/purpleList.png');
}
#listGrid:hover::after{
	content: 'LIST';
	
}
#filterToggler{
	background-image: url('../img/purpleFilter.png');
}
#filterToggler:hover::after{
	content: 'FILTERS';
}

#createNew{
	background-image: url('../img/purpleCreate.png');
}
#createNew:hover::after{
	content: 'NEW ARTICLE';
}

.activeGrid{
	opacity: 1;
}

#stage{
	padding-top: 1rem;
}

#stage h1{
	font-size: 1.5rem;
	margin: 0;
	color: #52515A;
	white-space: nowrap;
	text-overflow: ellipsis;
}

#stage #subNavHeader{
	margin-bottom: 1rem;
}

#stage .subNav{
	font-weight: 400;
	color: #2d3691;
	padding-left: 1.5rem;
	margin-right: 1.5rem;
	background-position: left center;
	background-repeat: no-repeat;
	background-size: 1rem;
	margin-top: 0.5rem;
	opacity: 0.45;
}

#stage .subNav:hover{
	opacity: 1;
	text-decoration: none;
}

#stage .activeSubNav{
	font-weight: 600;
	opacity: 1;
}

#subNavAssigned{
	background-image: url('../img/purpleClipboard.png');
}

#subNavInProgress{
	background-image: url('../img/purpleClock.png');
}

#subNavCompleted{
	background-image: url('../img/purpleCheck.png');
}

#subNavAdminNew{
	background-image: url('../img/purpleInbox.png');
}

#subNavAdminPending{
	background-image: url('../img/purpleClock.png');
}


#subNavArchive{
	background-image: url('../img/purpleArchive.png');
}

.adminSubHeader{
	margin: 0 0 0 0;
}

.adminSubHeader img{
	float: left; width: 2rem; margin: 0 1rem 1rem 0; opacity: 0.66;
}

.adminSubHeader h2{
	font-weight: 300; color: #aaa; font-size: 1.6rem;
}


/* Filter Panel (Toggle) */


.dropdownContainer:hover::after{
	content: '';
	position: absolute;
	top: 0px;
	right: 9%;
	width: 13%;
	height: 44px;
    background: no-repeat url('../img/downgray.png');
    background-size: 12px;
    background-position: center center;
    pointer-events: none;
}

.ellipsis::after{
	content: '...';
	position: absolute;
	top: 0;
	right: 6%;
	width: 13%;
	height: 44px;
	padding-left: 2px;
	background-color: #f0f0f0;
	color: #8187BE;
	display: flex;
	align-items: center;
	pointer-events: none;
}

.ellipsis:hover::after{
	content: '...';
	position: absolute;
	top: 0;
	right: 6%;
	width: 13%;
	height: 44px;
	padding-left: 2px;
	background-color: #fafafa;
	color: #8187BE;
	display: flex;
	align-items: center;
}

.ellipsis:hover::after:hover{
	background-color: none !important;
}

#filters{
	height: 0px;
	overflow: hidden;
}

.filterDropdown{
	-webkit-appearance: none;
	-moz-appearance: none;
	cursor: pointer;
	width: 100%;
	background-color: #f0f0f0;
	border: 1px;
	border-radius: 0;
	color: #2d3691;
	font-size: 0.85rem;
	font-weight: 700;
	text-indent: 2rem;
	text-overflow: ellipsis;
	background-size: 1rem;
	background-position: left 0.5rem center;
	background-repeat: no-repeat;
	padding: 0.75rem 0;
	opacity: 0.5;
}

@-moz-document url-prefix() {
    select{
       text-indent: 0.9rem !important;/*Fix for firefox weirdness*/ 
    }
	select:-moz-focusring {
		color: transparent;
		text-shadow: 0 0 0 #000;
	}
}

option{
	width: 20%;
}

.filterDropdown:focus{
	background-color: #f0f0f0;
	outline: none !important;
	opacity: 1;
}

#categoryFilter{
	background-image: url('../img/purpleTag.png');
}
#durationFilter{
	background-image: url('../img/purpleClock.png');
}
#sourceFilter{
	background-image: url('../img/purpleSource.png');
}
#authorFilter{
	background-image: url('../img/purplePencil.png');
}
#narratorFilter{
	background-image: url('../img/purpleMic.png');
}

#searchFilter{
	background-color: #f0f0f0;
	color: #8187BE;
	border-radius: 0;
	width: 100%;
	display: flex;
	border: none;
	-webkit-appearance: none;
	font-size: 0.85rem;
	font-weight: 700;
	background-size: 1rem;
	background-position: left 0.5rem center;
	background-repeat: no-repeat;
	background-image: url('../img/purpleSearch.png');
	white-space: nowrap !important;
	text-overflow: ellipsis;
	overflow: hidden;
	float:right;
	text-align: left;
	text-indent: 2rem;
	transition: width 0.5s cubic-bezier(.23,1,.32,1);
	padding-top: 0.75rem;
	padding-bottom: 0.75rem;
}

.headerSearch{
	background-color: #fafafa !important;
	padding-top: 0.45rem !important;
	padding-bottom: 0.45rem !important;
}

#searchFilter:hover{
	background-color: #fafafa;
}

#searchFilter:focus{
	width: calc(2.5*100%);
	outline: 2px solid #8187BE !important;
	text-align: left;
	text-indent: 2rem;
	background-color: #fafafa;
}

#searchFilter::-webkit-input-placeholder {
	color: #ccc !important;
}
 
#searchFilter::-moz-placeholder {  /* Firefox 19+ */
	color: #ccc !important; 
}
 
#searchFilter:-ms-input-placeholder {  
	color: #ccc !important; 
}

.filterDropdown:hover, #searchFilter:hover{
	background-color: #fafafa;
	opacity: 1;
}

/* Footer Content */

footer{
	clear: both;
	font-size: 14px;
	margin-bottom: 200px;
	border-top: 1px solid rgba(0,0,0,0.2);
	border-bottom: 1px solid rgba(0,0,0,0.2); 
	padding-top: 20px;
	padding-bottom: 20px;
}

footer h3{
	font-weight: 300;
}

footer a{
	color: #2d3691;
	font-weight: 500;
	transition: all 0.5s ease-in-out;
}

footer a:hover{
	text-decoration: none;
	color: #414ec9;
}

.footerMark{
	text-align: right;
	font-size: 12px;
	color: #888;
}

.footerMark img{
	display:inline-block; 
	width: 5rem;
}



/*

   _____          __  .__       .__           _________                  .___      
  /  _  \________/  |_|__| ____ |  |   ____   \_   ___ \_____ _______  __| _/______
 /  /_\  \_  __ \   __\  |/ ___\|  | _/ __ \  /    \  \/\__  \\_  __ \/ __ |/  ___/
/    |    \  | \/|  | |  \  \___|  |_\  ___/  \     \____/ __ \|  | \/ /_/ |\___ \ 
\____|__  /__|   |__| |__|\___  >____/\___  >  \______  (____  /__|  \____ /____  >
        \/                    \/          \/          \/     \/           \/    \/ 

*/

/* Article Cards UI */

#articleCards{
	margin-top: 1rem;
}

.articleCard{
	width: 100%;
	border: 2px solid transparent;
	padding: 0.5rem;
	font-size: 0.7rem;
	margin-bottom: 2rem;
	background-repeat: no-repeat;
	background-color: #fff;
	background-image: none;
	background-size: 1.5rem;
	background-position: right 0.9rem bottom 1.55rem;
}

.articleCard:hover{
	border-color: #ddd;
}

.promotedCard{
	width: 100%;
	border: 2px solid #ddd;
	padding: 0.5rem;
	font-size: 0.7rem;
	margin-bottom: 2rem;
	background-repeat: no-repeat;
	background-color: #fff;
	background-image: none;
	background-size: 1.5rem;
	background-position: right 0.9rem bottom 1.55rem;
	height: calc(100% - 2rem);
	color: #2d3691;
	text-align: center;
}

.promotedCard:hover{
	border-color: #ddd;
}


.infoOverlay{
	position: absolute;
	bottom: 3.45rem;
	right: 1.85rem;
	background-color: #fff;
	padding-left: 8px;
}

.infoButton{
	width: 30px;
	height: 30px;
	cursor: pointer;
	background: 24px no-repeat url('../img/infoIcon.png');
	background-position: left top;
	background-size: 29px;
	display: inline-block;
	margin-left: 1.75rem;
}

.thumbDown{
	width: 30px;
	height: 30px;
	cursor: pointer;
	background-color: black;
	background: no-repeat url('../img/thumbsdown.png');
	background-position: left top;
	background-size: 29px;
	display: inline-block;
}


.liked{
	background-image: url('../img/liked.png');
}

.disliked{
	background-image: url('../img/disliked.png');
}

#loadMore{
	width: 100%;
	padding: 2rem 0;
	background-color: #f0f0f0;
	display: inline-block;
	font-size: 1.9rem;
	color: rgba(0,0,0,0.2);
	font-weight: 700;
	cursor: pointer;
	border: 2px transparent solid;
	transition: all 0.5s cubic-bezier(.23,1,.32,1);
	margin-bottom: 80px;
	border: 2px solid #ddd;
	text-transform: uppercase;
	letter-spacing: 4px;
	font-weight: 900;
}

#loadMore span{
	color: #2d3691;
}

#loadMore:hover{
	color: #212529;
	border-color: #212529;
	background-color: #eaeaea;
	box-shadow: 0 0 34px 0px rgba(0,0,0,0.4);
}

#searchSpinner{
	width: 100%;
	height: 25rem;
	background: url('../img/spinner.gif') no-repeat;
	background-position: center center;
	background-size: 5rem;
}

/* Article Card Treatments*/

.nowPlaying{
	border-color: #2D3691;
}
.nowPlaying:hover{
	border-color: #2D3691 !important;
}

.attention{
	border-color: #DF5050;
	background-image: none !important;
}
.attention:hover{
	border-color: #DF5050 !important;
}

.noActions{
	border-color: #999 !important;
}


/* Article Card Thumbnail and Control UI */

.thumbnailContainer{
	width: 100%;
	background-color: #f7f7fb;
	position: relative;
	overflow: hidden;
}

.thumbnailContainer img{
	width: 100%;
	transform: scale(1);
	transition: all 1s ease-in-out;
}

.zoomed{
	transform: scale(1.2) !important;
}

.thumbnailTimestamp{
	position: absolute;
	bottom: 0;
	right: 0;
	background: #000;
	color: #fff;
	padding: 2px 7px;
	font-weight: 500;
	z-index: 3;
}

.thumbnailControls{
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 2;
	background-color: rgba(0,0,0,0.5);
	display: flex;
}

.appControls{
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 2;
	background-color: rgba(45,54,145,0.85);
	display: flex;
}

.playLink, .queueLink{
	width: 50%;
	height: 100%;
	color: #fff !important;
	font-size: 1rem;
	font-weight: 500;
	cursor: pointer;
	transition: background-color 0.3s cubic-bezier(.23,1,.32,1);
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.playLink img, .queueLink img{
	width: 1.5rem;
	margin-bottom: 0.5rem;
}

.playLink:hover, .queueLink:hover{
	background-color: rgba(0,0,0,0.5);
	text-decoration: none;
	font-weight: bold;
}

.adminLink{
	width: 100%;
	height: 100%;
	color: #fff !important;
	font-size: 1rem;
	font-weight: 500;
	cursor: pointer;
	transition: background-color 0.3s cubic-bezier(.23,1,.32,1);
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.adminLink img{
	width: 1.5rem;
	margin-bottom: 0.5rem;
}

.adminLink:hover{
	background-color: rgba(0,0,0,0.5);
	text-decoration: none;
	font-weight: bold;
}

.thumbnailNowPlaying{
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 1;
	background-color: rgba(45,54,145,0.75);
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	white-space: nowrap;
}

.thumbnailArchived{
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 2;
	background-color: rgba(0,0,0,0.75);
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	white-space: nowrap;
}

.thumbnailRejected{
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 2;
	background-color: rgba(0,0,0,0.75);
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	white-space: nowrap;
}

.thumbnailAlert{
	width: 100%;
	position: absolute;
	z-index: 1;
	background-color: rgba(223,80,80,0.8);
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	height: 100%;
}

.thumbnailNowPlaying img, .thumbnailAlert img, .thumbnailArchived img, .thumbnailRejected img{
	width: 10%;
	margin-right: 0.8rem;
}

.thumbnailNowPlaying p, .thumbnailArchived p, .thumbnailRejected p{
	color: #fff;
	font-size:1.5rem;
	margin-left: 1rem;
}

.thumbnailAlert p{
	color: #fff;
	font-size:0.9rem;
	margin-left: 1rem;
}

/* Article Card Text */

.articleCard p{
	margin: 0px;
}

.articleTitle{
	font-weight: 600;
	font-size: 0.8rem;
	overflow: hidden;
	position: absolute;
	line-height: 1rem;
	max-height: 2rem;
	min-height: 2rem;
	display: flex;
	align-items: flex-start;
	width: calc(100% - 3.1rem);
	margin-top: 0.5rem;
	padding-right: 1rem;
	cursor: pointer;
}

.articleTitle:hover{
	max-height: 4rem;
	color: #2d3691;
	background-color: #fff;
}

.articleTitle:before {
  content: '...';
  color: rgba(0,0,0,0.3);
  position: absolute;
  right: 0;
  bottom: 0;
}

.articleTitle:after {
  content: '';
  position: absolute;
  right: 0;
  width: 1em;
  height: 1em;
  margin-top: 0.2em;
  background-color: #fff;
}

.shortTitle{
	align-items: center !important;
}

.shortTitle::after{
	content: '';
	width: 1rem;
	height: 1rem;
	background-color: #fff;
	position: absolute;
	bottom: 1px;
	right: 1px;
}

.articleCard hr{
	margin: 3rem 0px 0.5rem 0;
}

.articleCard .articleSource, .articleCard .articleAuthor, .articleCard .articleNarrator, .articleCard .articleCategories{
	color: #444;
	display: block;
	white-space: nowrap;
	overflow:hidden;
	text-overflow: ellipsis;
	padding: 0.15rem 0 0.15rem 1.35rem;
	background-size: 0.9rem;
	background-repeat: no-repeat;
	background-position: left center;
}

.articleCategories a{
	color: #444;
}

.articleCard a:hover, .articleCategories a:hover{
	color: #2D3691;
}

.articleSource{
	background-image: url('../img/purpleSource.png');
}
.articleAuthor{
	background-image: url('../img/purplePencil.png');
}
.articleNarrator{
	background-image: url('../img/purpleMic.png');
}
.articleCategories{
	background-image: url('../img/purpleTag.png');
}

.articleDescription, .originalURL, .gystFeedback, .stationFeedback{
	display: none;
}


/*

.___        _____        __________                      .__   
|   | _____/ ____\____   \______   \_____    ____   ____ |  |  
|   |/    \   __\/  _ \   |     ___/\__  \  /    \_/ __ \|  |  
|   |   |  \  | (  <_> )  |    |     / __ \|   |  \  ___/|  |__
|___|___|  /__|  \____/   |____|    (____  /___|  /\___  >____/
         \/                              \/     \/     \/      

*/

/* Info Panel */

#infoPanel{
	width: 0;
	height: 273px;
	position:absolute;
	right: 0;
	z-index: 4;
	background-color: #252525;
	box-shadow: rgb(20, 20, 20) 0px 0px 30px 10px inset;
	color: #fff;
	overflow: hidden;
	margin: 0;
	overflow: hidden;
	transition: width 0.5s cubic-bezier(.23,1,.32,1), height 0.5s cubic-bezier(.23,1,.32,1);
}

#infoBox{
	padding: 1.5rem 1.5rem 0 1.5rem;
	font-weight: 200;
	height: 100%;
	overflow: scroll;
	font-size: 0.9rem;
}

#infoTitle{
	font-size: 1.3rem;
	font-weight: 400;
	width: 84%;	
}

#infoMeta{
	display: flex;
	align-items: center;
}

#infoDescription{
	width: 84%;
	color: #ababab;
	margin-top: 0.4rem;
	font-weight: 300;
}

.infoFooter{
	color: #fff;
	font-weight: 600;
	font-size: 0.75rem;
	margin-top: 0.1rem;
}

#infoTime{
	border-right: 1px solid #ccc;
	padding-right: 0.6rem;
	margin-right: 0.6rem;
	font-weight: 800;
}

#infoSource{
	font-weight: 600;
	color: #555CA6;
	text-transform: uppercase;
	margin-right: 0.9rem;
	transition: all 0.5s cubic-bezier(.23,1,.32,1);
}

#infoSourceAdmin{
	font-weight: 600;
	color: #555CA6;
	text-transform: uppercase;
	background-image: url('../img/newTab.png');
	background-repeat: none;
	background-size: 1rem;
	background-position: left center;
	background-repeat: no-repeat;
	padding-left: 1.5rem;
	transition: all 0.5s cubic-bezier(.23,1,.32,1);
	display: block;
	margin: 0.5rem 0;
}

#closeInfoPanel{
	position: absolute;
	top: 1.5rem;
	right: 1.5rem;
	height: 3rem;
	width: 3rem;
	background-size: 1.75rem;
	border-radius: 1.5rem;
	cursor: pointer;
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: center center;
	background-image: url('../img/closeIcon.png');
	transition: background-color 0.5s cubic-bezier(.23,1,.32,1);
}

#closeInfoPanel:hover{
	background-color: #2d3691;
}

#infoSource:hover{
	text-decoration: none;
	color: #8187BE;
}

#infoNarrator, #infoAuthor, #infoCategories a{
	color: #8187BE;
	font-size: 0.8rem;
	font-weight: 300;
	margin-left: 0.25rem;
}

#infoNarrator:hover, #infoAuthor:hover, #infoCategories a:hover{
	color: #fff;
}

#infoCategories{
	padding-bottom: 3rem;
}

#infoPanelImgContainer{
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
}

#infoPanelImg{
	height: 100%;
	box-shadow: 0px 0px 21px 6px #141414;
}

#infoThumbUp{
	background-image: url('../img/thumbsup-white.png');
	margin-right: 1rem;
	opacity: 0.5;
	transition: all 0.3s ease-in;
	width: 2rem;
	height: 2rem;
	margin: 0;
	background-repeat: no-repeat;
	background-position: center center;
	display: inline-block;
	background-size: 1rem;
	cursor: pointer;
	border-radius: 1rem;
}

#infoThumbUp:hover{
	background-color: #2d3691;
	opacity: 1;
}

#infoThumbDown{
	background-image: url('../img/thumbsdown-white.png');
	margin-right: 1rem;
	opacity: 0.5;
	transition: all 0.3s ease-in;
	width: 2rem;
	height: 2rem;
	margin-right: 1rem;
	background-repeat: no-repeat;
	background-position: center center;
	display: inline-block;
	background-size: 1rem;
	cursor: pointer;
	border-radius: 1rem;
}

#infoThumbDown:hover{
	background-color: #DF5050;
	opacity: 1;
}

.activeLike{
	background-color: #2d3691;
	opacity: 1 !important;
}

.activeDislike{
	background-color: #DF5050;
	opacity: 1 !important;
}

#gystFeedbackHeader, #stationFeedbackHeader{
	font-weight: 600;
	color: #666;
	text-transform: uppercase;
	margin-right: 0.9rem;
	font-size: 0.8rem;
	margin-top: 1rem;
	display: none;
}

#gystFeedbackText, #stationFeedbackText{
	color: #f0f0f0;
	display: none;
}

#actionContainer{
	opacity: 0;
	pointer-events: none;
	transition: all 0.5s cubic-bezier(.23,1,.32,1);
}

#stationFeedbackCTA, #gystFeedbackCTA{
	font-weight: 600;
	color: #666;
	text-transform: uppercase;
	margin-right: 0.9rem;
	font-size: 0.8rem;
	margin-top: 1rem;
}

#feedbackConfirmation{
	font-size: 0.7rem;
	margin-left: 1rem;	
}

#infoPanelNewNarrator{
	display: none;
}

#adminAction, #infoPanelNewNarrator{
	margin-right: 0.75rem;
}




/*

   _____            .___.__         __________.__                             
  /  _  \  __ __  __| _/|__| ____   \______   \  | _____  ___.__. ___________ 
 /  /_\  \|  |  \/ __ | |  |/  _ \   |     ___/  | \__  \<   |  |/ __ \_  __ \
/    |    \  |  / /_/ | |  (  <_> )  |    |   |  |__/ __ \\___  \  ___/|  | \/
\____|__  /____/\____ | |__|\____/   |____|   |____(____  / ____|\___  >__|   
        \/           \/                                 \/\/         \/       

*/

/* Audio Player Style */

.player{
  position: fixed;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 0px;
  z-index: 9999;
  color: #fff;
  transition: height 0.5s cubic-bezier(.23,1,.32,1);
  border-top: 3px solid #2d3691;
}

.toggleContainer{
	width: 100%;
	text-align: right;
	position: absolute;
	right: 4.3rem;
	top: -2rem;
	width: 8rem;
	cursor: pointer;
	margin: 0 !important;
}

#playerToggleLink{
	display: block;
	width: 8rem;
	height:2rem;
	font-size: 0.75rem;
	display: flex;
	align-items: center;
	text-transform: uppercase;
	font-weight: 600;
	background-color: #141414;
	border-bottom: 2px solid #141414;
	border-top: 2px solid #2d3691;
	border-left: 2px solid #2d3691;
	border-right: 2px solid #2d3691;
	color: #858585;
}

#playerToggleLink:hover{
	color: #fff;
}

#playingDot{
	display: inline-block;
	height: 0.75rem;
	width: 0.75rem;
	background-color: #2d3691;
	border: 1px solid #fff;
	border-radius: 1rem;
	margin: 0 0.5rem;
}

#pausedDot{
	display: inline-block;
	height: 0.75rem;
	width: 0.75rem;
	background-color: #141414;
	border: 1px solid #858585;
	border-radius: 1rem;
	margin: 0 0.5rem;
}

#playerToggleLink:hover{
	opacity: 1.0;
}

#playerToggleLink img{
	width: 18px;
	opacity: 0.7;
	transition: opacity 0.3s ease-in-out;
}

#playerToggleLink img:hover{
	opacity: 1.0;
}

#mobilePlayerInfoLink{
	width: 2rem;
	height: 2rem;
	background-position: 5px 3px;
	background-size: 1.2rem;
	background-repeat: no-repeat;
	background-image: url('../img/infoIcon.png');
	background-color: #2d3691;
	position:absolute;
	top: 0;
	left: 8rem;
	border-bottom: 3px solid #2d3691;
	border-top: 3px solid #2d3691;
}

.playerDark{
	background-color: #141414;
}

#playerThumb{
	width: 100%;
	min-width: 171px;
}

#playerControls{
	width: 100%;
	height: 90px;
}

.playerButton{
	width: 20%;
	display:block;
	margin: 0;
	float: left;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0.55;
	transition: opacity 0.3s ease-in-out;
	cursor: pointer;
	height: 55px;
}

.playerButton:hover{
	opacity: 1.0;
}

.disabledFunction{
	opacity: 0.2;
	pointer-events: none;
}

.playerButton img{
	width: 30%;
	max-width: 31px;
}

.playerTime, .playerTotalTime{
	float: left;
	width: 10%;
	text-align:center;
	font-size: 0.6rem;
	font-weight: 500;
	padding-top: 3px;
}

#sliderContainer {
    width: 80%;
    float: left;
}

.slider {
    -webkit-appearance: none;
    width: 100%;
    height: 20px;
    border-radius: 6px;
    background: #313131;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
}

.slider:hover {
    opacity: 1;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #434CA7;
    cursor: pointer;
}

.slider::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #434CA7;
    cursor: pointer;
}

#playerDescription{
	height: 90px;
	padding: 0.66rem 1.5rem;
}

#playerTitle{
	white-space: nowrap;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	display:block !important;
	width: calc(100% - 1.5rem) !important;
}

#playerDetails{
	font-size: 0.7rem;
	line-height: 1.2rem;
	overflow: hidden;
	height: 38px;
}

#detailsColumn1{
	width: 30%;
	min-width: 150px;
	float: left;
}

#detailsColumn2{
	float: left;
}

#playerSource, #playerAuthor, #playerCategories, #playerNarrator{
	display: block;
	width: 100%;
	white-space: nowrap;
	text-overflow: ellipsis;
	padding-left: 1rem;
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 0.8rem;
	margin-bottom: 0.1rem;
}

#playerSource{
	background-image: url('../img/whiteSource.png');
}
#playerAuthor{
	background-image: url('../img/whitePencil.png');
}
#playerNarrator{
	background-image: url('../img/whiteMic.png');
}

#playerCategories{
	background-image: url('../img/whiteTag.png');
}

#playerDetails img{
	float: right;
	width: 22px;
	opacity: 0.3;
	cursor: pointer;
	margin-right: 18px;
	padding-top: 9px;
}

#playerDetails a{
	color: #aaa;
}

#playerDetails a:hover{
	color: #fff;
	text-decoration: none;
	font-weight: 500;
	transition: color 0.3s ease-in-out;
}

.playerDetail{
	font-weight: bold;
	margin-right: 5px;
}

.playerThumbs{
	position: absolute;
	top: 0.5rem;
	right: 1rem;
	height: 100%;
	width: 2.5rem;
}

.playerThumbs a{
	width: 2.1rem;
	height: 38%;
	float: right;
	margin: 0;
	background-repeat: no-repeat;
	background-position: center center;
	display: inline-block;
	background-size: 1rem;
	background-image: url('../img/thumbsup-white.png');
	opacity: 0.5;
	transition: all 0.3s ease-in;
	cursor: pointer;
	border-radius: 2rem;
}

.playerThumbs a:hover{
	opacity: 1;
	background-color: #2d3691;
}

#playerThumbDown{
	background-image: url('../img/thumbsdown-white.png');
}

#playerThumbDown:hover{
	background-color: #DF5050;
}

#notPlayingMessage{
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #141414;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	font-weight: 700;
	font-size: 1rem;
	color: #858585;
}


/*

__________.__                .__  .__          __    __________                      .__   
\______   \  | _____  ___.__.|  | |__| _______/  |_  \______   \_____    ____   ____ |  |  
 |     ___/  | \__  \<   |  ||  | |  |/  ___/\   __\  |     ___/\__  \  /    \_/ __ \|  |  
 |    |   |  |__/ __ \\___  ||  |_|  |\___ \  |  |    |    |     / __ \|   |  \  ___/|  |__
 |____|   |____(____  / ____||____/__/____  > |__|    |____|    (____  /___|  /\___  >____/
                    \/\/                  \/                         \/     \/     \/      

*/

/* Playlist Panel UI */

#playlistToggle{
	width: 18px;
	padding-top: 1px;
	margin: 0px 15px 0px 3px;
	cursor: pointer;
	opacity: 0.5;
	transition: all 0.5s cubic-bezier(.23,1,.32,1);
}

.playlistOn{
	opacity: 1 !important;
}

#playlistToggle:hover{
	opacity: 1;
}

#playlistContainer{
	width: 0;
	background-color: #fff;
	height: calc(100% - 56px);
	position: fixed;
	top: 56px;
	left: 0;
	z-index: 5;
	transition: width 0.5s cubic-bezier(.23,1,.32,1);
	border-right: 1px solid rgba(0,0,0,0.25);
}

#playlistContainer a{
	color: #8187BE;
}

#playlistTitle{
	overflow: hidden;
	padding: 0;
	border-bottom: 2px solid rgba(0,0,0,0.1);
}

#countContainer{
	font-size: 0.7rem;
	color: #8187BE;
	font-weight: 500;
	white-space: nowrap;
}

#playlistName{
	font-size: 0.9rem;
	line-height: 1.2rem;
	font-weight: 600;
	color: #686868;
	white-space: nowrap;
}

#playlistTitleBackButton{
	background-size: 1.1rem;
	background-position: center right 1.5rem;
	background-image: url('../img/playlistBack.png');
	cursor: pointer;
	background-repeat: no-repeat;
	margin-left: -16px;
}

#playlistTitleBackButton:hover{
	background-color: #f7f7fb;
}

#playlistTitleHeader{
	padding: 0.9rem 1.6rem;
}

#playlistTitleText{
	font-size: 0.9rem;
	line-height: 1.2rem;
	font-weight: 600;
	color: #686868;
	white-space: nowrap;
}

#playlistArticles{
	height: calc(100% - 56px);
	overflow: scroll;
	-webkit-overflow-scrolling: touch;
	transition: height 0.5s cubic-bezier(.23,1,.32,1);
	padding: 0 0 1rem 0;
}

.playlistArticle{
	border-bottom: 1px solid rgba(0,0,0,0.1);
	padding: 0.5rem 0;
	min-height: 68px;
}

.playlistArticle:hover{
	background-color: #f7f7fb;
}

.playlist-nowPlaying .playlistItemTitle, .playlist-nowPlaying .playlistItemSource, .playlist-nowPlaying .playlistItemTime{
	color: #2d3691 !important;
}

.playlist-nowPlaying .playlistItemTitle{
	font-weight: 600;
}

.playlistPlay{
	padding: 0.5rem;
	cursor: -webkit-grab;
	cursor: grab;
}

.playlistPlay:hover{
	opacity: 0.8;
}

.playlistItemIcon{
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
}

.playlistItemIcon img{
	width: 85%;
	opacity: 0.75;
}

.playlistArticleText{
	display:flex;
	align-items: center;
	padding-left: 0;
}

.playlistItemTitle{
	font-size: 0.8rem;
	line-height: 1rem;
	color: #686868;
	overflow: hidden;
	margin-bottom: 0.2rem;
	cursor: default;
	min-width: 249.16px;
}

.playlistItemTime{
	font-size: 0.7rem;
	font-weight: 800;
	color: #8187BE;
	border-right: 1px solid rgba(0,0,0,0.3);
	padding-right: 0.4rem;
	float: left;
}

.playlistItemSource{
	font-size: 0.7rem;
	font-weight: 800;
	color: #2d3691;
	font-weight: 500;
	float: left;
	margin-left: 0.4rem;
}

.playlistItemSource:hover{
	font-weight: 600;
}

.playlistRemoveItemLink{
	opacity: 0;
	color: #df5050 !important;
	text-decoration: none;
	font-weight: 600;
	font-size: 0.7rem;
	float: left;
	margin-left: 1rem;
	transition: all 0.5s cubic-bezier(.23,1,.32,1);
}

.playlistReorder{
	height: calc(100% + 1rem);
	width: 50px;
	position: absolute;
	bottom: -0.5rem;right: 0;
	background: #6168AD no-repeat center center url('../img/whiteBars.png');background-size: 50%;
	opacity: 0;
	cursor: grab;
	transition: all 0.5s cubic-bezier(.23,1,.32,1);
}

.playlistReorder:hover{
	background-color: #3F4793;
}

.newPlaylist{
	height: 60px;
	width: 50px;
	position: absolute;
	top: 0;right: 0;
	background: #fff no-repeat center center url('../img/newPlaylist.png');background-size: 50%;
	opacity: 0;
	cursor: pointer;
}

.newPlaylist:hover{
	background-color: #141414;
}

#emptyPlaylistWarning{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #fff;
	color: #858585;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	overflow: hidden;
	white-space: nowrap;
}

#playlistBottomSpacer{
	text-align: center;
	font-size: 0.75rem;
	color: rgba(0,0,0,0.2);
	font-weight: 700;
	padding-bottom: 155px;
}

#playlistBottomSpacer hr{
	margin: 0 0 1.5rem 0;
}

.draggingItem{
}

.ghostItem{
	background-color: #f0f0f0;
}

#scrollerBox{
	position: absolute;
	background-color: #fff;
	height: 3.18rem;
	width: 100%;
	display: none;
	justify-content: center;
	align-items: center;
	top: 0;
	left: 0;
	background-color: #1E2461;
	border-bottom: 3px solid #2d3691;
	cursor: pointer;
}

/*

 ____ ___.___  _________                                                    __          
|    |   \   | \_   ___ \  ____   _____ ______   ____   ____   ____   _____/  |_  ______
|    |   /   | /    \  \/ /  _ \ /     \\____ \ /  _ \ /    \_/ __ \ /    \   __\/  ___/
|    |  /|   | \     \___(  <_> )  Y Y  \  |_> >  <_> )   |  \  ___/|   |  \  |  \___ \ 
|______/ |___|  \______  /\____/|__|_|  /   __/ \____/|___|  /\___  >___|  /__| /____  >
                       \/             \/|__|               \/     \/     \/          \/ 

*/

/* UI Components */

/* Forms and Inputs */

form{
	padding-bottom: 1rem;
}

.formHeader{
	font-size: 1rem;
	padding: 0.4rem 0 1rem 0;
	color: rgba(0,0,0,0.5);
}

.formText{
	width: 100%;
	padding: 0.5rem;
	background-color: #fafafa;
	border: 2px solid #ddd;
	font-size: 0.8rem;
}

.formText:focus{
	outline: none;
	border-color: #2d3691;
}

.formTextArea{
	width: 100%;
	height: 15rem;
}

#stationFeedback, #gystFeedback{
	height: 3rem;
}

.formSubmitter{
	background-color: #2d3691;
	color: #fff !important;
	border: 2px solid transparent;
	padding: 0.2rem 2rem;
	letter-spacing: 1px;
	font-weight: 700;
	border-radius: 2rem;
	margin-top: 2rem;
	cursor: pointer;
	transition: all 0.5s cubic-bezier(.23,1,.32,1);
}

.formSubmitter:hover{
	background-color: #fff;
	color: #2d3691 !important;
	border-color: #2d3691;
	text-decoration: none;
}

.formSubmitter:focus{
	outline: none;
}

.applicationRadio{
	padding: 0.25rem 1rem;
	background-color: #f0f0f0;
	color: #686868;
	border: 2px solid #CCC;
	font-size: 0.7rem;
	border-radius: 2rem;
	margin: 0 0.6rem 0 0;
	cursor: pointer;
	transition: all 0.5s ease-in-out;
	font-weight: 700;
}

.applicationRadio:hover{
	background-color: #f0f0f0;
	color: #2d3691;
	border-color: #2d3691;
}

.applicationSpacer{
	height: 100px;
}

.applicationFullPage{
	padding: 5rem 0;
}

input[type=radio], input[type=file], .adminCheckbox{
	display:none;
}

input[type="radio"]:checked+label, .adminCheckbox:checked+label{ 
	font-weight: bold; 
	background-color: #2d3691;
	color: #fff;
	border-color: #2d3691;
}

.adminCheckbox+label{
	margin: 0.5rem 0;
}

/* Feedback Modal */

#feedbackModal{
	background-color: #fafafa;
	border-top: 1px solid rgba(0,0,0,0.2);
	border-bottom: 1px solid rgba(0,0,0,0.2);
	padding: 1.7rem;
	border-left: 1px solid #ccc;
}

#feedbackModal h2{
	font-weight: 600; 
	font-size: 1rem; 
	color: #2d3691;
}

#feedbackModal .star{
	width: 2rem; 
	margin: 0px;
	cursor: pointer;
	display: inline-block;
	transition: all 0.9s cubic-bezier(.23,1,.32,1);
}

.star:hover{
	transform: rotate(75deg);
}

.emojiFace{
	width: 1.5rem;
	margin-left: 1rem;
	display: none;
	transition: opacity 0.5s cubic-bezier(.23,1,.32,1);
}

#feedbackPopupText{
	position: absolute;
	width: 100%; 
	height: 0;
	opacity: 0; 
	transition: height 0.9s cubic-bezier(.23,1,.32,1);
	font-size: 0.8rem;
	margin-top: 0.66rem;
}

#exitLinks a{
	border-radius: 5px;
	background-color: #df5050;
	border: 2px solid transparent;
	color: #fff; 
	font-weight: 400; 
	font-size: 0.75rem; 
	text-transform: uppercase;
	padding: 0.25rem;
	margin: 0.5rem;
	cursor: pointer;
}

#exitLinks a:hover{
	text-decoration: none;
	border-color: #2d3691;
	color: #2d3691;
	background-color: #fff;
}

#feedbackPopupSubmit{
	display: none;
	margin-top:0.5rem !important;
	width: 100%;
	text-align: center;
	color: #fff;
	background-color: #df5050;
	letter-spacing: 2px;
	border-radius: 4px;
	padding: 0.5rem;
	transition: opacity 0.5s cubic-bezier(.23,1,.32,1);
}

#feedbackPopupSubmit:hover{
	text-decoration: none;
	opacity: 0.8;
}

#feedbackLeft{
	padding-right: 0;
	margin-bottom: 2rem;
}

#feedbackRight{
	padding-left: 0;
	margin-bottom: 2rem;
}

#feedbackExitContainer{
	background-color: #fafafa; 
	border-top: 1px solid rgba(0,0,0,0.2); 
	border-bottom: 1px solid rgba(0,0,0,0.2); 
	height: 100%; 
	min-height: 4rem; 
	display: flex; 
	align-items: center; 
	justify-content: center;
	border-right: 1px solid #ccc;
}

#feedbackThanks{
	display: none;
}

.announcementLight{
	border: 1px solid #ccc; padding: 0.5rem; margin-bottom: 2rem; background-color: #fafafa;
}

.announcementDark{
	border: 1px solid #ccc; padding: 0.5rem; margin-bottom: 2rem; background-color: #6066AE; color: #fff; font-weight: 500;
}

.alertBox{
	border: 1px solid #df5050; padding: 0.5rem; margin-bottom: 2rem; background-color: #fafafa; color: #df5050;	
}

.confirmationBox{
	border: 1px solid #88DF50; padding: 0.5rem; margin-bottom: 2rem; background-color: #fafafa; color: #22be40;	
}

.announcementLight img, .announcementDark img, .alertBox img, .confirmationBox img{
	display: inline-block; height: 1rem; position: relative; top: -2px; margin-right: 0.33rem; margin-left: 0.5rem;
}

.announcementLight a, .alertBox a, .confirmationBox a{
	margin-left: 0.5rem;
	color: #aaa;
}

.announcementDark a{
	color: #fff;
	text-decoration: underline;
	margin-left: 0.5rem;
}

.bigBox1Icon, .bigBox2Icon{
	padding-right: 0; margin-right: 0;
}

.bigBox1, .bigBox2{
	margin-left: 0; padding-left: 0;
}

.bigBoxIconContainer{
	padding: 0.5rem; margin-bottom: 2rem; background-color: #6066AE; height: calc(100% - 2rem);  display: flex; align-items: center; justify-content: center;
}

.bigBox1Icon img{
	width: 66%;
}

.bigBox2Icon img{
	width: 33%;
}

.bigBox1 div, .bigBox2 div{
	padding: 0.5rem; margin-bottom: 2rem; background-color: #fafafa;
}



/*

__________                                   _________                    .__  _____.__        
\______   \_____     ____   ____            /   _____/_____   ____   ____ |__|/ ____\__| ____  
 |     ___/\__  \   / ___\_/ __ \   ______  \_____  \\____ \_/ __ \_/ ___\|  \   __\|  |/ ___\ 
 |    |     / __ \_/ /_/  >  ___/  /_____/  /        \  |_> >  ___/\  \___|  ||  |  |  \  \___ 
 |____|    (____  /\___  / \___  >         /_______  /   __/ \___  >\___  >__||__|  |__|\___  >
                \//_____/      \/                  \/|__|        \/     \/                  \/ 

*/

/* Specific Station and Category Pages */

#stationBanner{
	overflow: hidden;
	height: 15rem;
}

#stationBanner img{
	width: 100%;
}

#categoryBanner{
	overflow: hidden;
	height: 15rem;
	background-color: #1E2461; box-shadow: inset 0 0 50px 0px #111; display:flex; align-items: center; justify-content: center;
}

.stationInfo img{
	width: 3.4rem;
	margin-right: 1rem;
	display: inline;
	float: left;
}

.stationInfo h1{
	font-weight: 300;
}

.stationInfo span{
	font-weight: 700;
	font-size: 0.8rem;
}

.stationHeader{
	width: 100%;
	height: 10rem;
	overflow: hidden;
	text-align: center;
}

stationHeader img{
	min-height: 100%;
}

.stationListBanner{
	width: 100%;
}

.stationListIcon{
	width: 7rem;
	position: relative;
	border: 5px solid #fff;
	top: -4rem;
	margin-bottom: -3rem;
}

.categoryCard, .stationCard{
	width: 100%;
	border: 2px solid transparent;
	padding: 0.5rem 0.5rem 1.5rem 0.5rem;
	margin-bottom: 2rem;
	background-color: #fff;
	text-align: center;
	display: block;
	color: #212529;
	border: 2px solid #fff;
	font-weight: 300;
	transition: all 0.5s cubic-bezier(.23,1,.32,1);
}

.categoryCard:hover, .stationCard:hover{
	text-decoration: none;
	color: #2d3681;
	border: 2px solid #2d3691;
}

.categoryCard h2, .stationCard h2{
	font-weight: 300;
}

.categoryCard hr, .stationCard hr{
	width: 30%;border-color: #aaa;margin: 1.25rem auto 1.5rem auto;
}

.categoryCard span, .stationCard span{
	font-weight: 700;
	margin-right: 5px;	
}

.articleCount{
	padding: 0.5rem 2rem;
	border: 2px solid #ddd;
	border-radius: 2rem;
	font-weight: bold;
	font-size: 1rem;
	color: #ccc;
}

.categoryHeader{
	width: 100%;
	height: 5rem;
	background-color: #ddd;
	margin-bottom: 2.5rem;
}

.categoryIcon{
	width: 4rem;
	border-radius: 4rem;
	padding: 0.75rem;
	position: relative;
	top: 2.9rem;
	margin: 0px auto;
	border: 5px solid #fff;
}

.categoryIcon img{
	width: 100%;
	opacity: 0.8;
}

.categoryBanner{
	padding: 2rem 0; 
	background:linear-gradient(to right, #2d3691, #12153A); 
	text-align: center;
}

.categoryBanner h1{
	text-transform: uppercase; 
	letter-spacing: 3px; 
	font-weight: 300; 
	color: #fff;
}

.categoryBadge{
	width: 8rem;
	height: 8rem;
	border-radius: 8rem;
	padding: 0.75rem;
	border: 8px solid #fff;
	align-items: center;
	justify-content: center;
	display: inline-flex;
}

.categoryBadge img{
	width: 80% !important;
}

#categoryHealth, #categoryShopping, #categoryMusic{
	background-color: #df5050;
}
#categoryHealth .categoryIcon, #categoryShopping .categoryIcon, #categoryMusic .categoryIcon{
	background-color: #df5050;
}


#categoryArt, #categoryFood{
	background-color: #E9853F;
}
#categoryArt .categoryIcon, #categoryFood .categoryIcon{
	background-color: #E9853F;
}


#categoryBusiness, #categoryHistory{
	background-color: #FFD64C;
}
#categoryBusiness .categoryIcon, #categoryHistory .categoryIcon{
	background-color: #FFD64C;
}


#categoryScience, #categoryEnvironment{
	background-color: #88DF50;
}
#categoryScience .categoryIcon, #categoryEnvironment .categoryIcon{
	background-color: #88DF50;
}


#categoryTravel, #categoryEducation{
	background-color: #5089DF;
}
#categoryTravel .categoryIcon, #categoryEducation .categoryIcon{
	background-color: #5089DF;
}


#categoryLifestyle, #categorySports{
	background-color: #50D0DF;
}
#categoryLifestyle .categoryIcon, #categorySports .categoryIcon{
	background-color: #50D0DF;
}


#categoryPolitics, #categoryTechnology{
	background-color: #2d3691;
}
#categoryPolitics .categoryIcon, #categoryTechnology .categoryIcon{
	background-color: #2d3691;
}


/* Narrators List Page and Narrator Profile page */

.narratorListIcon{
	width: 6rem;
	border: 4px solid #2d3691;
	border-radius: 3rem;
	margin: 1rem 0;
}

.narratorCard{
}

.narratorBanner{
	padding: 2rem 0;
}

.narratorProfileAvatar{
	display: flex; 
	align-items: center; 
	justify-content: center;
}

.narratorAvatar{
	width: 150px; 
	height: 150px; 
	border: 7px solid #2d3691; 
	border-radius: 15rem; 
	overflow: hidden;
}

.narratorAvatar img{
	width: 150px;
}

.narratorProfileText h1{
	font-weight: 200; 
	font-size: 1.8rem; 
	margin: 15px 0 5px 0;
}

.narratorProfileText h2{
	font-weight: 700; 
	font-size: 1rem;
}

.narratorProfileText p{
	font-size: 0.85rem;
}

.statTrophy{
	text-align: center; 
	padding: 0.5rem;
	display: inline-block;
	font-size: 0.75rem;
}

.statTrophy img{
	display: inline-block;
	width: 1rem;
	margin-right: 0.5rem;
}

#narratorStage{
	border-top: 1px solid rgba(0,0,0,0.2); 
	border-bottom: 1px solid rgba(0,0,0,0.2); 
	padding: 1rem 0; 
	margin-bottom: 1rem;
}

#narratorStage h1{
	font-size: 20px; 
	font-weight: 300; 
	margin: 0 0 0 2rem;
}

#narratorStage img{
	width: 24px; 
	margin: 0; 
	padding: 0;
}


/* Playlists Page */

.playlistCardTitle{
	margin-top: 30px;
}

/* Account Settings Page */

.settingsContainer{
	height: 100%;
}

.settingsContainer h2{
	font-size: 0.8rem;
	font-weight: 700;
	text-transform: uppercase;
	margin: 2rem 0 0.5rem 0;
}

#saveSettings{
	padding: 0.25rem 1rem; 
	font-size: 0.9rem; 
	border: 2px solid #2d3691; 
	border-radius: 2rem; 
	color: #2d3691; 
	font-weight: 700; 
	float: right;
	transition: all 0.5s cubic-bezier(.23,1,.32,1);
}

#saveSettings:hover{
	background-color: #2d3691;
	color: #fff;
	cursor: pointer;
}

#resetUserPw{
	padding: 0.5rem 1rem 0.5rem 2.4rem; 
	font-size: 0.9rem; 
	border: 2px solid #ccc; 
	border-radius: 8px; 
	position: relative;
	top: 1rem;
	background-image: url('../img/purpleLock.png'); 
	background-repeat: no-repeat; background-position: left 0.75rem center; 
	background-size: 1rem; 
	cursor: pointer;
	transition: all 0.5s cubic-bezier(.23,1,.32,1);
}

#resetUserPw:hover{
	border: 2px solid #2d3691;
	background-color: #fff;
}

#passwordWarning{
	color: #df5050;
	float: right;
	margin-top: 0.3rem;
	font-size: 0.8rem;
}

.specialAccountSettings{
	background-color: #e7e7e7;
}

.specialAccountSettings h2{
	color: #2d3691;
}

.specialAccountSettings textArea{
	height: 10.75rem;
}

#settingsAvatar{
	margin: 1rem auto;
	width: 9rem;
	height: 9rem;
	border: 2px solid #fff;
	background-color: #2D3691;
	background-position: center center;
	background-image: url('../img/face.png');
	background-repeat: no-repeat;
	background-size: 2rem;
	border-radius: 5rem;
	border: 6px solid #8187BE;
	overflow: hidden;
	cursor: pointer;
	transition: opacity 0.2s ease-in;
	transition: border 0.2s ease-in;
}

#settingsAvatar:hover{
	background-image: url('../img/camera.png');
	border: 6px solid #2d3691;
}

#settingsAvatar img{
	width: 100%;
}

#settingsAvatar img:hover{
	opacity: 0.3;
}


/* Narrator Application Pages */

.narratorAppSteps{
	opacity: 0.7;
	color: #2d3691;
	padding: 0.5rem 1rem 0.5rem 2.25rem;
	background-size: 1rem;
	background-position: left 0.5rem center;
	background-repeat: no-repeat;
	pointer-events: none;
}

.appFormBreak{
	display: none;
}

.narratorAppSteps:hover{
	text-decoration: none;
	color: #2d3691;
}

.disabledStep{
	opacity: 0.5;
	color: #686868;
	pointer-events: none;
}

.activeStep{
	font-weight: 700;
	opacity: 1;
}

#step1{
	background-image: url('../img/purpleFeedback.png');
}

#step2{
	background-image: url('../img/purpleEnvelope.png');
}

#step3{
	background-image: url('../img/purpleClipboard.png');
}

#step4{
	background-image: url('../img/purpleMic.png');
}

#step5{
	background-image: url('../img/purpleClock.png');
}

#step6{
	background-image: url('../img/purpleCheckCircle.png');
}

.completedStep{
	background-image: url('../img/purpleCheck.png') !important;
	font-weight: 500;
	color: #2d3691;
	opacity: 1;
}

.narratorAppIntro{
	text-align: center;
	padding: 3rem 0;
}

.narratorAppIntro p{
	margin-bottom: 2rem;
}

#narratorApplication{
	color: #212529;
	font-weight: 300;
	font-size: 0.95rem;
}

#narratorApplication a{
	color: #2d3691;
	font-weight: 500;
}

#narratorApplication a:hover{
	font-weight: 700;
}

#narratorApplication h3{
	font-size: 0.9rem;
	margin: 2rem 0 0.5rem 0;
	font-weight: 600;
}

#waitIcon{
	width: 85px; margin: 1.5rem 0;
}

#narratorApplication .inlineHeader{
	display: inline-block; margin-right: 1rem;
}

#narratorApplication .tightHeader{
	margin: 0 0 0.5rem 0;
}

#narratorApplication .formLabel{
	width: 200px;
}

#narratorApplication h2{
	font-weight: 300;
	text-transform: capitalize;
	color: #212529;
}

.auditionFile{
	margin-left: 2rem; padding: 2rem; background-image: url('../img/auditionFile.png'); background-position: left center; background-size: 1.5rem; background-repeat: no-repeat; display: none;
}

.auditionBox{
	padding: 1.5rem;
}

.leftBox{
	border-right: 2px solid #555;
}

#fileProgressContainer{
	height: 1rem; background-color: #f0f0f0; width: 50%; border: 2px solid #2d3691; overflow:hidden; display: none;
}

#fileProgress{
	color: #fff; height: 1rem; background-color: #2d3691; width: 50%; text-align: right; padding: 0; font-weight: 700; font-size: 10px;
}

#narratorApplication hr{
	margin: 1rem 0;
}

/*

   _____             .___.__         ________                      .__               
  /     \   ____   __| _/|__|____    \_____  \  __ __   ___________|__| ____   ______
 /  \ /  \_/ __ \ / __ | |  \__  \    /  / \  \|  |  \_/ __ \_  __ \  |/ __ \ /  ___/
/    Y    \  ___// /_/ | |  |/ __ \_ /   \_/.  \  |  /\  ___/|  | \/  \  ___/ \___ \ 
\____|__  /\___  >____ | |__(____  / \_____\ \_/____/  \___  >__|  |__|\___  >____  >
        \/     \/     \/         \/         \__>           \/              \/     \/ 

*/

/* Media Queries */

@media (max-width: 575px) {
	
	.footerMark{
		text-align: left;
	}
	
	footer div{
		margin: 1rem 0;
	}
	
	.embeddedContainer{
		height: 170px;
	}

	.welcome{
		background-size: auto;
		background-position: center bottom;
	}
	.socialLinks a{
		float: left;
		margin-right: 0.3rem;
	}
	#scrollerBox{
		display: flex;		
	}
	#searchFilter:focus{
		width: 100%;
		outline: 2px solid #2d3691 !important;
		background-color: #fafafa !important;
	}
	#infoPanelImg{
		display:none !important;
	}
	#listGrid, #compactGrid, #bigGrid{
		display: none;
	}
	#stationBanner{
		height: 6.5rem !important;
	}
	.stationHeader{
		height: 7rem !important;
	}
	.narrate-requirements{
		text-align: center;
	}
	.narrate-requirements h2{
		margin: 0.75rem 0;
	}
	.narrate-requirements img{
		max-width: 65px;
	}
}

@media (max-width: 767px) {
	
	#feedbackLeft{
		padding-right: 15px;
		margin-bottom: 0;
	}
	
	#feedbackRight{
		border-top: none;
		padding-left: 15px;
	}
	
	#feedbackModal{
		border-left: 1px solid #ccc;
		border-right: 1px solid #ccc;
	}
	
	#feedbackExitContainer{
		border-top: none;
		border-left: 1px solid #ccc;
		border-right: 1px solid #ccc;
	}
	
	#feedbackExitContainer img{
		max-width: 2rem;
		margin: 1rem 0;
		display: inline-block;
	}
	
	#feedbackThanks{
		display: block;
		margin-left: 1rem;
	}
	
	.headerSignIn{
		display: none;
	}
	
	#mobileLogoIcon{
		display: inline-block;
	}
	
	#userAccount, #accountAlert{
		display: none;
	}
	
	.nav-item{
		background-size: 1.2rem;
		background-position: left 2px center;
		background-repeat: no-repeat;
		border-bottom: 1px solid rgba(0,0,0,0);
		text-indent: 1rem;
		height: 3rem;
		display: flex;
		align-items: center;
		font-size: 1rem;
		border-top: 1px solid rgba(0,0,0,0.25);
		height: 3.5rem;
		padding-left: 1rem;
	}
	
	.navbar-nav{
		margin-top: 10px;
		padding-bottom: 0;
	}
	
	.nav-link{
		width: 100%;
	}
	
	#headerStations{
		background-image: url('../img/whiteSource.png');
	}
	
	#headerPlaylists{
		background-image: url('../img/playlist.png');
	}
	
	#headerCategories{
		background-image: url('../img/whiteTag.png');
	}
	
	#headerNarrators{
		background-image: url('../img/whiteMic.png');
	}
	
	#headerMobileAccountLink{
		display: block;
		background-image: url('../img/face.png');
		cursor: pointer;
		height: 3.5rem;
		display: flex;
		align-items: center;
	}
	
	#headerMobileSignOut{
		display: block;
		background-image: url('../img/whiteSignOut.png');
		cursor: pointer;
		height: 3.5rem;
		display: flex;
		align-items: center;
	}
	
	.navbar-toggler{
		cursor: pointer;
	}
	
	.navbar-toggler:active{
		background-color: rgba(0,0,0,0.5);
	}
	
	#stage .subNav{
		display: block;
		margin-right: 0;
	}
}

@media (min-width: 576px) and (max-width: 767px) {
	.thumbnailContainer{
		height: 123.85px;
	}
	.welcome{
		background-size: auto;
		background-position: center bottom;
	}
	#scrollerBox{
		display: flex;		
	}
	.ellipsis::after, .ellipsis:hover::after{
		display: none;
	}
	#stationBanner{
		height: 9rem !important;
	}
	.stationHeader{
		height: 10rem !important;
	}
}

@media (max-width: 991px){
	.appFormBreak{
		display: inline-block;
	}
}

@media (min-width: 768px) and (max-width: 991px) {
	.thumbnailContainer{
		height: 174.5px;
	}
	.welcome{
		background-size: 100%;
	}
	.ellipsis::after, .ellipsis:hover::after{
		display: none;
	}
	#stationBanner{
		height: 12rem !important;
	}
	.stationHeader{
		height: 6rem !important;
	}
}

@media (min-width: 992px) and (max-width: 1199px) {
	.thumbnailContainer{
		height: 152px;
	}
	.stationHeader{
		height: 8rem !important;
	}
}

@media (min-width: 1200px) {
	
	
	.thumbnailContainer{
		height: 132.3px;
	}
}


/* Odds and Ends */

#newArticle h2{
	font-size: 0.8rem;
	font-weight: 700;
	text-transform: uppercase;
	margin: 2rem 0 0.5rem 0;
}

#contributorTable{
	width: 95%; display: block;  margin: 0px auto; background-color: #fafafa; padding: 0rem;
}

#contributorTable td{
	padding: 0.5rem;
}

#contribTableHeader{
	font-weight: bold; border-bottom: 1px solid;
}

#signInContainer{
	z-index: 999999; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); position: fixed; top: 0; left: 0; display: flex; align-items: center; justify-content: center;
}

#signInModal{
	width: 80%;
	background-color: #fff;
	text-align: center;
	padding: 2rem 0;
	max-width: 545px;
}

#signInModal span a{
	color: #2d3691;
}

#signInModal h3{
	margin-bottom: 1rem;
}

#ssoOptions{
	max-width: 400px;
	margin: 0px auto;
}

#facebookSSO{
	padding: 0.5rem; width: 50%; display: inline-block; float: left; font-size: 11px; margin-bottom: 1rem; border-right: 1px solid rgba(0,0,0,0.1); color: #3B5998 !important; letter-spacing: 1px;
}

#googleSSO{
	padding: 0.5rem; width: 50%; display: inline-block; float: left; font-size: 11px; margin-bottom: 1rem;  color: #DB4437 !important; letter-spacing: 1px;
}

#googleSSO:hover, #facebookSSO:hover{
	font-weight: bold;
}

#googleSSO img, #facebookSSO img{
	width: 1.5rem; margin-bottom: 0.5rem;
}

#modalSignInForm{
	clear: both; width: 80%; margin: 0px auto;
}

#signInModal h4{
	color: #ccc; font-size: 1rem !important; font-weight: bold;
}

.modalInput{
	display: block; margin: 1rem auto; width: 80%; font-size: 1rem; padding: 0.5rem; border: 2px solid #ddd;
}

.modalSignInButton{
	display: block; width: 80%; padding: 1rem 0; color: #fff !important; background-color: #2d3691; text-transform: uppercase; margin: 0px auto; font-size: 13px; letter-spacing: 1px; margin-bottom: 1rem;
}

#signInModal span{
	font-size: 0.8rem;
}