/**
 * StoryCorps - Twenty Sixteen
 * https://storycorps.org
 *
 * Copyright (c) 2016 StoryCorps
 * Licensed under the GPL-2.0+ license.
 */

/**
 *===== Default Styles =====*
 */
.player {
	overflow: hidden;
	height: 100%;
	max-height: 500px;
	z-index: 0;
	clear: none;

	/*--- Needed for player backdrop ---*/
	transition-property: z-index;
	transition-duration: 0s, 0s;
	transition-timing-function: ease-in-out, ease-out;
	transition-delay: 1s; /*--- Needed for when class is taken off the player class via js ---*/

	/*--- With the removal of the <main> tag, we need to these styles ---*/
	position: relative;
}

.player.portrait {
	max-height: 900px;
}

.player.square {
	max-height: 700px;
}

/*--- Needed for player backdrop ---*/
.player.z-index {
	z-index: 1040;
	transition-delay: 0s; /*--- Needed for when class is initially applied to player class via js ---*/
}

/*--- Needed so embed is not cut off ---*/
.player.embed {
	max-height: none;
}

.player:active,
.player:focus,
.player:focus:active {
	outline: 0;
}

.player button {
	padding: 0;
	display: flex;
	align-items: center;
}

.player button:focus,
.player button:active,
.player button:focus:active,
.player a:focus {
	outline: none;
	box-shadow: none;
}

.player a:hover,
.player a:focus {
	text-decoration: none;
}

.player i {
	color: #fff;
}

/*--- Default hover behavior if overlay exists ---*/
.player.overlay-exists:hover .overlay {
	-webkit-filter: brightness( 105% );
	filter: brightness( 105% );
}

/*--- Control height of inline player. ---*/
.player.inline {
	height: 50px;
}

/**
 *===== NO-PLAY =====*
 */
/*--- Hide the main play button ---*/
.player.no-play .overlay button.main-play-event {
	display: none;
}

/*--- Hide the summary */
.player.no-play .overlay summary {
	display: none;
}

/**
 *===== Featured Image =====*
 */
.player .featured-image {
	transition: opacity 0.2s ease-in-out;
}

/*--- Default aspect ratio for landscape ---*/
.player.landscape .featured-image {
	padding-bottom: 56.25%; /*--- Aspect ratio 16:9 ---*/
}

/*--- Default aspect ratio for portrait ---*/
.player.portrait .featured-image {
	padding-bottom: 150%; /*--- Aspect ratio 2:3 ---*/
}

/*--- Default aspect ratio for square ---*/
.player.square .featured-image {
	padding-bottom: 100%; /*--- Aspect ratio 1:1 ---*/
}

/*--- Default hover behavior ( excludes embed ) ---*/
.player:not( .embed ):hover .featured-image {
	opacity: 0.9;
}

/*--- Sets default image in the event no image is set on player, default image styles. ---*/
.player .source {
	background-image: url("../images/sc-logo.svg");
	background-position: center;
	background-size: contain;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	transition: visibility 0.2s ease-in-out, opacity 0.2s ease-in-out;
}

/*--- Provide different positioning for portrait images. ---*/
.player.portrait .source {
	background-position: center top;
}

/**
 *===== Overlay =====*
 */
.player .overlay {
	background-color: transparent;
	height: 100%;
	width: 100%;
	position: absolute;
	top: 0;
	display: flex;
	align-items: flex-end;
	transition: background 0.4s ease-in-out, left 0.4s ease-in-out, right 0.4s ease-in-out, top 0.4s ease-in-out, bottom 0.4s ease-in-out;
}

/*--- Prevents overlay from still being displayed after transition occurs ---*/
.player.embed .overlay {
	position: fixed;
}

/*--- Transition: Slide Left ---*/
.player .overlay.slide-left {
	left: 0;
}

/*--- Transition: Slide Right ---*/
.player .overlay.slide-right {
	right: 0;
}

/*--- Transition: Slide Top ---*/
.player .overlay.slide-top {
	/*--- Not needed since we need top: 0 in order for the image to be seen ---*/
}

/*--- Transition: Slide Bottom ---*/
.player .overlay.slide-bottom {
	top: auto;
	bottom: 0;
}

.player .overlay .tag {
	display: block;
	font-size: 12px;
	padding: .25em 1em;
	position: absolute;
	letter-spacing: .05em;
	text-transform: uppercase;
	background-color: #e51022;
	color: #fff;
	left: 1rem;
	top: 1rem;
}

.player .main-play-event {
	padding: 0;
	display: flex;
	align-items: center;
	margin-top: auto;
	padding: 0 15px;
	height: 50px;
	width: 55px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.2);
}

.player .overlay .link {
	height: 100%;
	width: 100%;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 1;
}

.player .overlay a {
	color: #fff;
}

/*--- Give span element similar CSS to links within player ---*/
.player .overlay span {
	transition: color 0.15s ease-in-out;
	cursor: pointer;
}

/*--- Give span element similar CSS hover to links within player ---*/
.player .overlay summary a:hover,
.player .overlay summary span:hover {
	color: #e51022;
}

.player .overlay .controls {
	align-items: center;
	display: flex;
	width: 100%;
	justify-content: space-between;
}

.player .overlay summary {
	color: #fff;
	text-transform: uppercase;
	width: 100%;
	padding: 0px 5px;
	text-shadow: #080808 0px 0px 4px;
	font-size: .8em;
	display: flex;
	align-items: center;
	z-index: 2;
	line-height: 1.2;
}

.player .overlay .duration-container {
	display: flex;
	align-items: flex-end;
	margin-top: auto;
}

/*--- Control positioning of duration container on no-play players. ---*/
.player.no-play .duration-container {
  position: absolute;
  bottom: 0;
  right: 0;
}

.player .overlay .duration {
	font-size: 12px;
	background-color: rgba(255, 255, 255, 0.5);
	color: #e51022;
	display: block;
	padding: .25em 1em;
	letter-spacing: .05em;
	text-transform: uppercase;
}

/**
 *===== Player Menu =====*
 */
.player .player-menu {
	display: none;
	justify-content: space-between;
	width: 100%;
	position: absolute;
	top: 0;
	z-index: 10;
}

.player .player-menu a {
	color: #fff;
	font-size: 1.5rem;
	text-decoration: none;
	text-shadow: 1px 1px 2px #232323;
	cursor: pointer;
	transition: font-size .5s ease-in-out;
}

.player .player-menu a:nth-child(2) {
	margin: 0 10px;
}

.player .player-menu a.subscribe-to-podcast:hover i {
	color: #ff674d;
}

.player .player-menu a.listener-survey:hover i {
	color: #ffb511;
}

.player .player-menu a.support-storycorps:hover i {
	color: #dd5061;
}

.player .player-menu .player-menu-links {
	padding: 5px 10px;
}

.player .player-menu figure {
	padding: 10px;
}

.player img.sc-logo {
	height: 60px;
	width: 100px;
	transition: width 0.5s ease-in-out;
}

/**
 *===== Outro =====*
 */
.player .outro {
	visibility: hidden;
	opacity: 0;
	transition-property: visibility, opacity;
	transition-duration: 1s, 1s;
	transition-timing-function: ease-in-out, ease-in-out;
}

/*--- Outro fade-in specific styles ---*/
.player .outro.fade-in {
	visibility: visible;
	opacity: 1;
}

/*--- Outro fade-out specific styles ---*/
.player .outro.fade-out {
	transition-duration: .5s, .5s;
}

.player .outro .image {
	background-position: center;
	background-size: cover;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 10;
}

.player .outro .image i {
	position: absolute;
	top: 20px;
	right: 20px;
	font-size: 2rem;
	cursor: pointer;
	text-shadow: #080808 0px 0px 4px;
}

.player .outro .controls {
	width: 100%;
	max-width: 500px;
	margin: 0 auto;
	display: flex;
	justify-content: space-around;
	align-items: center;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

.player .outro .btn {
	background-color: rgba(0, 0, 0, 0.6);
	display: flex;
	border: none;
	border-radius: 0;
	color: #fff;
	font-size: 16px;
	height: 75px;
	width: 75px;
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
}

.player .outro .btn i {
	font-size: 24px;
}

/**
 *===== Player Details =====*
 */
.player .player-details {
	display: none;
	width: 100%;
	position: absolute;
	bottom: 50px;
	color: #fff;
	text-shadow: 0 0 1px #232323;
}

.player .player-details .player-title {
	align-items: center;
	background: rgba(0,0,0,0.6);
	display: flex;
	font-size: 1.6rem;
	line-height: 1;
	padding: 5px 10px;
	width: 100%;
}

.player .player-details .player-time {
	position: absolute;
	bottom: 0;
	right: 0;
	display: flex;
	justify-content: flex-end;
	font-size: 1.6rem;
	padding-right: 10px;
}

/**
 *===== Control Panel =====*
 */
.player .control-panel {
	display: none;
	width: 100%;
	height: 50px;
	background: rgba(0, 0, 0, 0.2);
	position: absolute;
	bottom: 0;
}

.player.inline .control-panel {
	display: table;
}

.player .control-panel .controls {
	height: 100%;
	width: 95px;
	padding: 0 15px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	background-color: rgba(0, 0, 0, 0.2);
}

.player .control-panel button {
	display: flex;
	align-items: center;
	opacity: 0.7;
	transition: opacity 0.2s ease-in-out;
	background-color: transparent;
}

/*--- Only control hover on control panel buttons for inline players only ---*/
.player.inline .control-panel button:hover,
.player.inline .control-panel button:focus {
	opacity: 1;
}

.player .control-panel button i {
	font-size: 2.9rem;
}

.player .control-panel .progress {
	display: table-cell;
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0 0 0 95px;
	border-radius: 0;
	box-shadow: none;
	background-color: transparent;
}

.player .control-panel .progress progress {
	height: 100%;
	width: 100%;
	cursor: pointer;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-color:#E2DFE9;
	border: 0;
}

.player .control-panel progress[value]::-webkit-progress-bar {
	background-color:#E2DFE9;
	height: 100%;
}

.player .control-panel .progress progress::-moz-progress-bar {
	background-color: rgba(238, 40, 60, 1);
}

.player .control-panel progress[value]::-webkit-progress-value {
	background-color: rgba(238, 40, 60, 1);
}

.player .control-panel .share {
	display: table-cell;
	vertical-align: middle;
	height: 100%;
	width: 95px;
	padding: 0 15px;
	background-color: rgba(0, 0, 0, 0.2);
}

/**
 *===== Embeddable Player =====*
 */
.player.embed .overlay .tag,
.player.embed .overlay .duration {
	display: none;
}

.player.embed .overlay summary {
	font-size: 1.2em;
}

.player.embed .control-panel button i {
	font-size: 2.0em;
}

.player.embed .control-panel .controls {
	position: absolute;
	top: 0;
}

.player.embed .outro .btn {
	font-size: 22px;
	height: 125px;
	width: 125px;
}

.player.embed .outro .btn i {
	font-size: 38px;
}

@media only screen and ( max-width: 500px ) {
  /*--- Control the player overlay as screen width decreases ---*/
  .player.embed .main-play-event {
    height: 40px;
    width: 45px;
    font-size: 1rem;
  }

	.player.embed .overlay summary {
		font-size: 1.5rem;
	}

  /*--- Control the player menu as screen width decreases ---*/
  .player.embed .player-menu a {
    font-size: 1.1rem;
  }

  /*--- Control the player menu as screen width decreases ---*/
  .player.embed img.sc-logo {
    height: 40px;
    width: 60px;
  }

  /*--- Control the player details as screen width decreases ---*/
  .player.embed .player-details {
    bottom: 40px;
  }

  /*--- Control the player details as screen width decreases ---*/
  .player.embed .player-details .player-title {
    font-size: 1.4rem;
  }

  /*--- Control the player details as screen width decreases ---*/
  .player.embed .player-details .player-time {
    font-size: 1.2rem;
  }

  /*--- Control the player control panel as screen width decreases ---*/
  .player.embed .control-panel {
    height: 40px;
  }

  /*--- Control the player control panel as screen width decreases ---*/
  .player.embed .control-panel .controls {
    width: 70px;
  }

  /*--- Control the player control panel as screen width decreases ---*/
  .player.embed .control-panel button i {
    font-size: 1.8rem;
  }

  /*--- Control the outro as screen width decreases ---*/
  .player.embed .outro .controls {
    margin: 0 auto 25px;
    max-width: 300px;
  }

  /*--- Control the outro as screen width decreases ---*/
  .player.embed .outro .btn {
    height: 50px;
    width: 50px;
    font-size: 10px;
  }

  /*--- Control the outro as screen width decreases ---*/
  .player.embed .outro .btn i {
    font-size: 16px;
  }
}

/**
 *===== Player Modal =====*
 */
.modal-dialog {
	top: 100px;
}

.modal-content {
	border-radius: 0;
}

.modal-header {
	background: #dd5061;
	color: #FFF;
	padding: 10px;
	border: none;
}

.modal-body {
	padding: 5px;
}

.modal-body .sc-share-buttons {
	overflow: hidden;
}

.modal-body .sc-share-buttons div {
	padding: 3px;
}

.modal-body .sc-share-buttons div a {
	width: 100%;
	height: 65px;
	border-radius: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.modal-body .sc-share-btn:hover a {
	opacity: .8;
}

.modal-body div.facebook a {
	background-color: #3B5998;
}

.modal-body div.twitter a {
	background-color: #55ACEE;
}

.modal-body div.download a {
	background-color: #58595B;
}

.modal-body div.subscribe a {
	background-color: #7D88B5;
}

.modal-body div.survey a {
	background-color: #5FADB9;
}

.modal-body div.support a {
	background: #ff674d;
}

.modal-body .sc-share-story,
.modal-body .sc-share-embed {
	display: flex;
	justify-content: space-between;
	padding: 6px;
	background-color: #E6E7E8;
}

.modal-body .sc-share-story {
	margin: 5px 3px 8px 3px;
}

.modal-body .sc-share-embed {
	margin: 5px 3px;
}

.modal-body .sc-share-story > div,
.modal-body .sc-share-embed > div {
	padding: 0;
	display: flex;
	justify-content: center;
	align-items: center;
}

.modal-label {
	font-size: 1em;
}

.modal-body button i,
.modal-label i {
	color: #808991;
	margin-right: 5px;
}

.modal-body button:active,
.modal-body button:focus,
.modal-body button:active:focus {
	outline: none;
}

.modal-body input {
	background: #fff;
	width: 100%;
	margin: 0;
	height: 35px;
	/*padding: 0 5px;*/
}

html[data-useragent*='MSIE 10.0'] .player .control-panel .controls {
	background-color: black;
}

html[data-useragent*='MSIE 10.0'] .player .control-panel .controls {
	background-color: black;
	min-height: 40px;
}

html[data-useragent*='MSIE 10.0'] .player .control-panel .controls {
	float: left;
	display: inline-block;
	width: 110px;
}

html[data-useragent*='MSIE 10.0'] .player .control-panel button {
	float: left;
	display: inline-block;
	margin-right: 15px;
	margin-top: 10px;
}