/* WIUX
 * general.css - General styles
 */

a
{
	font-weight: bold;
	transition: opacity 0.2s;
}

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

a:hover
{
	opacity: 0.7;
}

article.no-results
{
	padding: 0 10px;
	text-align: center;
}

.artists{
    font-size:1rem;
    text-align:right;
    
}

.artists p {
    max-width:50%;
    padding-left:50%;
    
}


body
{
	background-color: #FFFFFF;
	color: #000000;
	font-family: Aileron, Arial, sans-serif;
}

.archive .banner,
.single .banner
{
	box-sizing: border-box;
	margin: auto;
	padding-bottom: 25%;
	position: relative;
	width: 100%;
}

.archive .banner .image,
.single .banner .image
{
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	height: 100%;
	position: absolute;
	width: 100%;
}

.archive-body,
.more-posts-body
{
	display: grid;
	grid-gap: 50px;
	grid-template-columns: repeat(3, 1fr);
	margin: auto;
	max-width: 1200px;
}

.archive-body article .categories,
.collage-body article .categories,
.latest-posts-body article .categories,
.more-posts-body article .categories
{
	color: #FFFFFF;
	font-size: 0.8rem;
	left: 0;
	line-height: 1;
	padding: 10px;
	position: absolute;
	text-transform: uppercase;
	top: 0;
}

.archive-body article .categories a,
.collage-body article .categories a,
.latest-posts-body article .categories a,
.more-posts-body article .categories a
{
	color: #FFFFFF;
}

.archive-body article .details,
.collage-body article .details,
.featured article .details,
.more-posts-body article .details,
.podcasts-body article .details,
.pressreleases-body article .details,
.station-body article .details
{
	font-size: 0.8rem;
	margin: 10px 0;
	text-transform: uppercase;
}

.archive-body article .featured-image,
.more-posts-body article .featured-image
{
	box-sizing: border-box;
	padding-bottom: 56.25%;
	position: relative;
	width: 100%;
}

.archive-body article .featured-image .image,
.latest-posts-body article .featured-image .image,
.more-posts-body article .featured-image .image
{
	height: 100%;
	position: absolute;
	width: 100%;
}

.archive-body article .featured-image .image a,
.collage-body article .featured-image .image a,
.featured article .featured-image a,
.latest-posts-body article .featured-image .image a,
.more-posts-body article .featured-image .image a,
.single .banner .image a
{
	display: block;
	height: 100%;
	width: 100%;
}

.archive-body article .featured-image .image-review,
.latest-posts-body article .featured-image .image-review,
.more-posts-body article .featured-image .image-review
{
	height: 77.7778%;
	margin: 6.25% 28.125%;
	width: 43.75%;
}

.archive-body article .title,
.collage-body article .title,
.featured article .title,
.more-posts-body article .title
{
	margin: 0;
}

.archive-header .title,
.content-body .title,
.content-header .title,
.featured .title a,
.more-posts-header .title,
.podcast-header .title,
.podcasts-header .title,
.pressreleases-header .title,
.sidebar .title,
.station-header .title,
.videos-header .title
{
	font-weight: 800;
}

.archive-header .title,
.content-body .title,
.content-header .title,
.featured .title,
.podcast-header .title,
.podcasts-header .title,
.pressreleases-header .title,
.station-header .title,
.videos-header .title
{
	font-size: 3rem;
	line-height: 1.3;
}

.artwork-image:hover > .overlay {
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
	left: 0;
	background-color:#000000;
	opacity: 0.5;
	z-index: 50;
	display: block;
}

.collage
{
	background-color: #F0F0F0;
}

.collage-body
{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(4, 1fr);
	height: 75vw; /* width multiplied by 75% */
	margin: auto;
	max-height: 900px;
	max-width: 1200px;
	width: 100%; /* use % here because vw will overflow on browsers with built-in vertical scrollbars */
	background: black;
}

.collage-body article
{
	background-color: #000000;
	color: #FFFFFF;
	position: relative;
	margin: 1px;
}

.collage-body article:hover {
    margin: -2px;
    transition: margin 0.5s;
}

.collage-body article a
{
	color: #FFFFFF;
}

.collage-body article:hover .featured-image .image
{
	opacity: 1;
}

.collage-body article:hover .info
{
	opacity: 0;
	z-index: -1;
}

.collage-body article:nth-of-type(1)
{
	grid-column: 1 / span 2;
	grid-row: 1 / span 2;
}

.collage-body article:nth-of-type(6)
{
	grid-column: 2 / span 2;
	grid-row: 3 / span 2;
}

.collage-body article .featured-image
{
	height: 100%;
	width: 100%;
}

.collage-body article .featured-image .image
{
	opacity: 0.5;
	transition: opacity 0.2s;
}

.collage-body article .info
{
	bottom: 0;
	box-sizing: border-box;
	padding: 25px;
	position: absolute;
	transition: opacity 0.2s;
	width: 100%;
}

.content-body,
.podcast-body,
.pressreleases-body,
.station-body
{
	margin: auto;
	max-width: 1200px;
	padding: 50px 10px;
}

.content-body iframe
{
	max-width: 100%;
}

.content-comments
{
	background-color: #F0F0F0;
	line-height: 1.4;
	padding: 50px 10px;
}

.content-comments ul
{
	list-style-type: none;
	padding-left: 0;
}

.content-comments .comment img
{
	border-radius: 50%;
	float: left;
	height: 40px;
	width: 40px;
}

.content-comments #submit
{
	border: none;
	color: #FFFFFF;
	font-size: 0.8rem;
	line-height: 0.8rem;
	padding: 15px;
	text-transform: uppercase;
	transition: opacity 0.2s;
}

.content-comments #submit:hover
{
	cursor: pointer;
	opacity: 0.7;
}

.content-comments .comment .children
{
	padding-left: 60px;
}

.content-comments .comment-author
{
	line-height: 40px;
	min-height: 40px;
}

.content-comments .comment-form-comment label
{
	display: none;
}

.content-comments .comment-form-comment textarea
{
	padding: 10px;
}

.content-comments .comment-info
{
	display: inline-block;
	line-height: 1.4;
	padding-left: 10px;
}

.content-comments .comment-meta
{
	font-size: 0.8rem;
	text-transform: uppercase;
}

.content-comments .comments
{
	background-color: #F8F8F8;
	margin: auto;
	max-width: 720px;
	padding: 30px;
}

.content-comments .reply
{
	border-bottom: solid 5px #F0F0F0;
	margin-bottom: 10px;
	padding-bottom: 10px;
}

.content-header
{
	background-color: #F0F0F0;
}

.content-header .featured-image
{
	color: #FFFFFF;
	display: flex;
	height: 56.25vw;
	margin: auto;
	max-height: 675px;
	max-width: 1200px;
	position: relative;
}

.content-header .featured-image a
{
	color: #FFFFFF;
}

.content-share
{
	line-height: 2.5;
}

.featured article .categories
{
	display: none;
}

.featured article .details,
.single article .details
{
	margin-top: 0;
	margin-bottom: 20px;
}

.featured article .featured-image
{
	height: 56.25vw;
	width: 100%;
}

.featured article .info
{
	margin: auto;
	max-width: 1200px;
	padding: 50px 10px;
}

.featured-image
{
	overflow: hidden;
}

.featured-image .image
{
	background-position: center;
	background-size: cover;
	height: 100%;
	width: 100%;
}

.icon
{
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
}

.image-blurdark
{
	filter: blur(15px) brightness(.5);
	transform: scale(1.6)
}

.image-dark
{
	filter: brightness(.5);
}

.latest-posts
{
	background-color: #F0F0F0;
	padding: 50px 10px;
}

.latest-posts-body
{
	margin: auto;
	max-width: 1200px;
}

.latest-posts-body article
{
	background-color: #FFFFFF;
	display: flex;
	flex-direction: row;
	margin-bottom: 50px;
}

.latest-posts-body article:last-child
{
	margin-bottom: 0;
}

.latest-posts-body article .details,
.podcasts-body .details
{
	font-size: 0.8rem;
	text-transform: uppercase;
}

.latest-posts-body article .featured-image
{
	box-sizing: border-box;
	flex-shrink: 0;
	padding-bottom: 28.125%;
	position: relative;
	width: 50%;
}

.latest-posts-body article .info
{
	padding: 50px;
}

.latest-posts-body article .title
{
	font-size: 2rem;
	font-weight: 800;
	line-height: 1.3;
	margin: 0;
	margin-top: 10px;
}

.latest-posts-header
{
	margin-bottom: 50px;
}

.links-socialmedia
{
	line-height: 1;
}

.links-socialmedia a
{
	display: inline-block;
	height: 40px;
	width: 40px;
}

.logo
{
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	display: inline-block;
}

.logo-small
{
	height: 30px;
	margin: 10px;
	width: 100px;
}

.logo-small.logo-cultureshock
{
	width: 150px;
}

.logo-large
{
	height: 60px;
	margin: 15px;
	width: 200px;
}

.more-posts
{
	padding: 50px 10px;
}

.more-posts-header .title,
.sidebar .heading .title
{
	font-size: 2.25rem;
	margin: auto;
	max-width: 1200px;
}

.mask
{
	background-color: rgba(0, 0, 0, 0);
	display: none;
	height: 100%;
	position: fixed;
	width: 100%;
	z-index: 10;
}

.mask.active
{
	background-color: rgba(0, 0, 0, 0.5);
	cursor: pointer;
}

.page .content-body,
.single .content-body,
.station-body
{
	font-size: 1.15rem;
	line-height: 1.6;
}

.page .no-featured-image,
.single .no-featured-image
{
	max-width: 1200px;
	margin: auto;
}

.page .no-featured-image .title,
.podcast-header .title,
.pressreleases-header .title,
.single .no-featured-image .details,
.single .no-featured-image .title,
.station-header .title
{
	margin: auto;
	max-width: 720px;
	padding: 50px 10px;
}

.phonedigits
{
	font-size: 80%;
}

.share
{
	border-radius: 50%;
	cursor: pointer;
	display: inline-block;
	height: 32px;
	width: 32px;
}

.text-invertlight,
.text-invertlight a
{
	color: #FFFFFF;
}

@media screen and (max-width: 1200px)
{
	.content-share .separator
	{
		display: none;
	}

	.content-share .share
	{
		margin-right: 10px;
	}
}

@media screen and (max-width: 900px)
{
	.archive-body,
	.more-posts-body
	{
		grid-gap: 25px;
		grid-template-columns: repeat(2, 1fr);
	}

	.archive-header .title,
	.content-body .title,
	.content-header .title,
	.featured .title,
	.podcasts-header .title,
	.pressreleases-header .title,
	.station-header .title,
	.videos-header .title
	{
		font-size: 1.75rem;
	}

	.collage-body
	{
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(6, 1fr);
		height: 168.75vw; /* width multiplied by 168.75% (27/16) */
		max-height: 2025px;
	}

	.collage-body article:nth-of-type(1)
	{
		grid-column: 1 / span 2;
		grid-row: 1 / span 2;
	}

	.collage-body article:nth-of-type(2),
	.collage-body article:nth-of-type(3),
	.collage-body article:nth-of-type(4),
	.collage-body article:nth-of-type(5)
	{
		font-size: 0.85rem;
	}

	.collage-body article:nth-of-type(6)
	{
		grid-column: 1 / span 2;
		grid-row: 4 / span 2;
	}

	.content-body,
	.featured article .info,
	.latest-posts,
	.more-posts,
	.podcasts-body,
	.pressreleases-body,
	.station-body,
	.videos-body
	{
		padding: 25px 10px;
	}

	.latest-posts-body article
	{
		margin-bottom: 25px;
	}

	.latest-posts-body article .info
	{
		padding: 25px;
	}

	.latest-posts-body article .title,
	.more-posts-body article .title
	{
		font-size: 1.3rem;
	}

	.latest-posts-header
	{
		margin-bottom: 25px;
	}

	.page .no-featured-image .title,
	.pressreleases-header .title,
	.single .no-featured-image .details,
	.single .no-featured-image .title,
	.station-header .title
	{
		padding: 25px 10px;
	}
}

@media screen and (max-width: 600px)
{
	.archive-body,
	.more-posts-body
	{
		grid-template-columns: repeat(1, 1fr);
	}

	.collage-body
	{
		grid-template-columns: repeat(1, 1fr);
		grid-template-rows: repeat(6, 1fr);
		height: 337.5vw; /* width multiplied by 337.5% (54/16) */
		max-height: 4050px;
	}

	.collage-body article
	{
		font-size: 0.8rem;
	}

	.collage-body article:nth-of-type(1)
	{
		grid-column: inherit;
		grid-row: inherit;
	}

	.collage-body article:nth-of-type(6)
	{
		grid-column: inherit;
		grid-row: inherit;
	}

	.latest-posts-body article
	{
		flex-direction: column;
	}

	.latest-posts-body article .featured-image
	{
		padding-bottom: 56.25%;
		width: 100%;
	}
}