@import "../../cv.css";
@import "../HTags.css";


div.CustomPage {
	margin: 20px
}

div.Work > *:first-child {
	height: auto;
	margin-bottom: 5px;
}

div.Work > *:last-child {
	background-color: rgb(180,178,178);
	color: white;
	height: auto;
	position: relative
}

div.Work > *:last-child {
	padding-left: calc(30% + 25vw - 150px);
	padding-right: 25px;
	padding-bottom: 20px;
	min-height: 35vh
}


@media screen and (max-width:390px) {
	div.Work > *:last-child {
		padding-left: 15%
	}
}

@media screen and (min-width:769px) {
	div.Work {
		display: flex
	}

		div.Work > *:first-child {
			flex: 5;
			margin-right: 5px;
			height: auto;
			margin-bottom: 0px
		}

		div.Work > *:last-child {
			flex: 3;
		}

		div.Work > *:last-child {
			padding-left: 20px;
			padding-right: 20px;
			min-height: 0px
		}
}


div.Work > div.image {
	background-position: center center;
	background-size: cover
}

p.image-details:empty {
	display: none
}

div.Work > div.text > span {
	display: inline
}

	div.Work > div.text > span:not(:last-of-type)::after {
		content: ', '
	}

	div.Work > div.text > span[itemprop='material']:first-of-type + span[itemprop='material']:last-of-type::before {
		content: ' and '
	}

	div.Work > div.text > span[itemprop='material']:first-of-type:nth-last-of-type(2)::after {
		content: ''
	}

	div.Work > div.text > span[itemprop='material'] + span[itemprop='material'] {
		margin-left: 0px
	}


div.Work > div.text {
	padding-top: 20px
}


[itemprop='copyrightYear'] {
	color: /*#136585*/ white;
	margin-bottom: 20px;
}

[data-end-year]::after {
	content: '-'attr(data-end-year)
}

[itemprop='artform'] {
	margin-bottom: 15px
}

p {
	margin-top: 15px;
	margin-bottom: 15px
}

[itemprop='sameAs'] {
	display: block;
	margin-top: 20px
}

[itemprop='associatedMedia'] + [itemprop='associatedMedia'] {
	margin-top: 8px
}

[itemprop='associatedMedia'] a::after {
	content: ' >';
	white-space: nowrap
}

[itemprop='associatedMedia'] * {
	font-size: 14px;
	font-weight: normal;
	margin-bottom: 0px;
	color: white
}

[itemprop='associatedMedia'] [itemprop='name'] {
	text-transform: uppercase
}

[itemtype$='VideoObject'] [itemprop='description'],
[itemtype$='VideoObject'] time {
	display: none
}

video {
	height: 100%
}


[itemprop='director'] {
	display: none
}
/*[itemprop='director'] [itemprop='name']::before {content:'Directed by '}
[itemprop='director'] *, [itemprop='director'] [itemprop='name']::before {font-size:13px; font-weight:normal}
div.image + div [itemprop='director'] {display:none}*/

audio, video {
	display: block;
	width: 100%;
	background-color: black;
	overflow: hidden
}

[itemtype$='AudioObject'] a img {
	max-height: 35px
}



div.arrows > *:first-child {
	margin-right: 5px;
}

div.arrows > * {
	display: inline-flex;
	border-radius: 50%;
	line-height: 35px;
	width: 35px;
	justify-content: center;
	height: 35px;
	background-color: #DDD;
	color: #8D8D8D;
}

div.arrows > [data-disabled] {
	background-color: #EEE;
	color: #BBB;
	opacity: 0.4;
}

	div.arrows > [data-disabled]:last-child {
		display: none
	}

div.arrows {
	position: absolute;
	bottom: calc(100% + 5px + 10px);
	left: 10px
}



@media screen and (min-width:500px) {
	div.arrows {
		bottom: calc(5px + 10px);
	}
}

@media screen and (min-width:769px) {
	div.arrows {
		margin-top: 30px;
		font-size: 20px;
	}

	div[itemtype$='AudioObject'] + p:empty + div.arrows {
		margin-top: 10px;
	}

	div.arrows {
		position: relative;
		bottom: 0px;
		left: 0px
	}

		div.arrows:not(:last-child) {
			margin-bottom: 20px
		}
}


/* Mark changes landscape 7/11/2017 */
@media screen and (min-width:1000px) {
	div.Work > div.text > * {
		margin-left: calc(25% - 20px);
	}
}


/* Full width audio bar
@media screen and (max-width:414px) {

	div.Work[data-has-audio] > div.text { padding-bottom: 50px; }
	[itemprop='audio'] { position: absolute; bottom: 0px; left: 0px; right: 0px; }
	audio { max-height: 40px; }
}*/



time[itemprop='duration'] {
	display: block;
	font-size: 0px;
	margin-top: 15px;
	margin-bottom: 15px;
}

	time[itemprop='duration']::before {
		display: inline;
		font-size: var(--body-font-size);
		content: attr(data-is)' mins';
	}