/* Table of Contents
––––––––––––––––––––––––––––––––––––––––––––––––––
- Header
- Options
- Section Listings
- Section Listings - Paged List CSS overrides
- Loading Icon
*/


/* Breakpoints
––––––––––––––––––––––––––––––––––––––––––––––––––
0-374		2 columns
375-639		6 columns
640-1023	12 columns
1024-1439	12 columns
1440+		12 columns

*/

@media (min-width: 375px) {}
@media (min-width: 640px) {}
@media (min-width: 800px) {}
@media (min-width: 1024px) {}
@media (min-width: 1440px) {}

@media (max-width: 374px) {}
@media (max-width: 639px) {}
@media (max-width: 799px) {}
@media (max-width: 1023px) {}
@media (max-width: 1439px) {}

/* Wordpress Admin Bar Height-Change Breakpoints
––––––––––––––––––––––––––––––––––––––––––––––––––
0-782		46px tall
783-...		32px tall

*/

/* Header
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.section__speaker-letter-archive__title {
	text-align: center;
}
.section__speaker-letter-archive__title .container {
	padding-top: 3rem;
	padding-bottom: 0rem;
}
.section__speaker-letter-archive__title .speaker-letter-archive__title {
	padding-bottom: 3rem;
	border-bottom: 1px solid #E5E5E5;
}

@media (min-width: 640px) {
	.section__speaker-letter-archive__title .container {
		padding-top: 5rem;
	}
}

@media (min-width: 1024px) {
	.section__speaker-letter-archive__title .container {
		padding-top: 7rem;
	}
}


/* Options
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.section__speaker-letter-archive__options {}
.section__speaker-letter-archive__options .container {
	padding-bottom: 0;
}
.speaker-letter-archive__options {}
#speaker-letter-archive__letter-selection__wrapper {
	margin: auto;
}
#speaker-letter-archive__letter-selection {}
.section__speaker-letter-archive__options .post-date-archive__options .bubble-selector {
	margin-top: 20px;
}

@media (min-width: 800px) {
	.speaker-letter-archive__options {
		display: flex;
	}
	#speaker-letter-archive__letter-selection__wrapper {
		padding-top: 20px;
		width: 75px;
		margin: initial;
		margin-right: 25px;
	}
	.speaker-letter-archive__options .bubble-selector {
		width: calc(100% - 100px);
		margin-top: 0;
	}
}


/* Section Listings
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.section__speaker-letter-archive__listings {}
.speaker-letter-archive__listings {}
.speaker-letter-archive__listings__section__speakers {
	list-style-type: none;
	position: relative;
}
.speaker-letter-archive__listings__section__speakers .speaker-letter-archive__listings__section__speaker__image-wrap {
	display: none;
	max-height: 100%;
	overflow: hidden;
}
.speaker-letter-archive__listings__section__speakers-wrap {}
.speaker-letter-archive__listings__section__speaker {
	display: table;
	margin: 1rem 0;
}
.speaker-letter-archive__listings__section__speaker .simple-listing-block {
	display: table-cell;
}
.speaker-letter-archive__listings__section__speaker__image-wrap img {
	display: block;
}
.speaker-letter-archive__listings__section__speaker__image-wrap {
	max-width: 170px;
	position: absolute;
	left: 0;
	-webkit-transition: all .1s linear;
	-moz-transition: all .1s linear;
	-o-transition: all .1s linear;
	transition: all .1s linear;
}
.speaker-letter-archive__listings__section__speaker__image-wrap[href]:hover, .speaker-letter-archive__listings__section__speaker__image-wrap.hover {
	box-shadow: 0 0 10px rgba(0,0,0,1);
}


@media (max-width: 639px) {
	.speaker-letter-archive__listings {
		width: calc(100% - 32px);
		margin-left: 30px;
	}
}
@media (min-width: 640px) {
	.speaker-letter-archive__listings__section__speaker {
		margin: 2rem 0;
	}
	.speaker-letter-archive__listings__section__speakers {
		padding-left: 3rem;
	}
}
@media (min-width: 1024px) {
	.speaker-letter-archive__listings__section__speakers {
		padding-left: calc(3rem + 170px);
	}
	.speaker-letter-archive__listings__section__speakers.has-portrait-image {
		min-height: 220px;
	}
	.speaker-letter-archive__listings__section__speakers.has-portrait-image .speaker-letter-archive__listings__section__speaker__image-wrap {
		display: block;
	}
}
/* Loading Icon
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.loading-icon {
	display: block;
	width: 100px;
	height: 100px;
	margin: 25px auto;
}