/* used to style video pages embedded in the site */

@import url("//use.typekit.net/erf8zpd.css");

:root {
	--body-font: "Freight-Sans-Pro", "Helvetica Neue",  Helvetica, Arial, sans-serif;
	--heading-font: "freight-big-pro", "Big Caslon",  Palatino, Georgia, serif;
	--body-background-color: #fff;
	--body-color: #000;
	--currentCaption-background-color: rgba(0, 0, 0, .8);
	--currentTranscript-background-color: #3b84d1;
	--currentCaption-text-color: #fff;
	--currentTranscript-text-color: #fff;
}

	body {
		background-color: var(--body-background-color);
		color: var(--body-color);
		margin: 0;
		display: flex;
		font-family: var(--body-font);
	}
	
	h1 {
		font-size: 1.4em;
		margin-block-start: 0;
		margin-block-end: .2em;
	}
	
	h2 {
		font-size: 1.2em	
	}
	
	iframe {
		border: none;
		/* height: 50vh; */
	}
	
	#stream {
		width: 100%;
		display: flex;
		height: 66vh;
		margin-bottom: 2%
	}
	
	#video {
		position:absolute;top:0;left:0;width:100%;height:100%;
	}
	
	#deadsimple {
		/* padding: 0 2%; */
		width: 25%;
		height: 100vh
	}

	
	#videoContent {
		display: flex;
  		flex-wrap: wrap;
  		max-width: 900px;
  		margin: 0 auto;
  		height: 60vh
	}
	
	#otherContent {
/* 		max-width: 1280px; */
/*   		margin: 0 auto; */
  		height: 38vh;
  		width: 100%
	}
	
	footer {
		width: 80%;
		margin: 0 10%;
		position: absolute;
		bottom: 0;
		height: 5vh;
		padding-bottom: .2%
	}
	
	footer img {
		height: 80%;
		margin-right: 2%
	}
	
	
/*captions and transcript*/

/* tab contents now overflow and scroll */
/* height is a bit of a hack, ideally we can use grid to get the front page elements all nicely aligned*/

#transcript, #concepts, #slides, #speakers {
height: 30vw;
overflow: auto;
position: relative;
clear: both;
width: 66%;
width: 100%;
line-height: 1.4;
}

label span {
	margin-left: .5em
}
	

#toolbar {
	clear: both;
	padding: 1em 0 .5em 0 
}

.transcript-block {
	height: 30vh
}

/* these display the caption elements*/
#captions {
    z-index: 21474836487;
    height: auto;
    overflow: hidden;
    width: 100%;
    font-size: 1.4em;
    position: absolute;
    margin: 0 auto;
    pointer-events: none;
    font-size: calc(16px + 4 * ((100vw - 320px) / 680));
    height: 3em;
    bottom: 12%;
    left: 0;
}

@media all and (display-mode: fullscreen) {
	#captions {
		font-size: 3em
	}
}

#captions span {
position: absolute;
opacity: 0;

}

#captions span.currentCaption {
	background-color: var(--currentCaption-background-color);
	color: var(--currentCaption-text-color);
	display: block;
	padding: .5em;
	width: 100%;
	text-align: center;
	border-radius:.2em;
	z-index: 2147483647;
	animation-fill-mode: both;
	opacity: 1
}


/*these highlight the current items in the content tabs*/

span.currentTranscript {
	color: var(--currentTranscript-text-color);
	transition: color 1s, background-color 1s;
	border-radius:.2em;
	background-color: var(--currentTranscript-background-color);
	padding: .2em;
	margin: -.2em
}


/* tabs */

.video-content-tabs {
	position: relative
}

.video-content-tabs .tools input+label, .video-content-tabs .tools as  {
	display: inline-block;
	background-repeat: no-repeat;
	background-position: 50%;
	width: 1.5em;
	height: 2.5em;
	border: 0 none;
	background-color: transparent;	
}

.video-content-tabs .tools input#captionToggle+label {
	background-image: url('images/closed-captions.svg') !important;
	background-size: 70%;
}


.video-content-tabs .tools input#captionToggle:checked+label {
	background-image: url('images/closed-captions-on.svg') !important;
}

.video-content-tabs .tools input#scrollToggle+label {
	background-image: url('images/scroll-to.svg') !important;
	background-size: 70%;
	background-position: 50%;
}

.video-content-tabs .tools input:checked + label {
	background-repeat: no-repeat;
	background-position: 50%;
	width: 1.5em;
	height: 2.5em;
	border: 0 none;
	background-color: transparent;	

}


.video-content-tabs .tools input#fullScreenToggle+label {
	background-image: url('images/fullscreen.svg') !important;
	background-size: 50%;
}

.video-content-tabs .tools input#scrollToggle:checked+label {
	background-image: url('images/scroll-to-on.svg') !important;

}

.video-content-tabs .tools input#fullScreenToggle:checked+label {
	background-image: url('images/fullscreen-on.svg') !important;
	background-repeat: no-repeat;


}

.video-content-tabs .tools label span {
	display: none;
}

.video-content-tabs input,
.video-content-tabs label {
	display: none
}

	.video-content-content>div {
		display: none;
		padding: 20px 25px 5px;
	}

	.video-content-tabs {
		padding-top: 2rem;
	}

	.video-content-tabs input {
		display: none;
	}

	.video-content-tabs label {
		display: inline-block;
		padding: 15px 25px;
		font-weight: 600;
		text-align: center;
		border-left: 1px solid #666;
		border-right: 1px solid #666;
		border-top: 1px solid #666;
		border-top-left-radius: 3px;
		border-top-right-radius: 3px;
	}

	.video-content-tabs .tools {
		display: flex;
		float: right;
		padding-top: 1rem;
	}

	.video-content-tabs label:hover {
		color: var(--site-text-color);
		cursor: pointer;
	}

	.video-content-tabs input:checked+label {
		background: #7BB2EC;
	}

	#tab1:checked~.video-content-content #transcript,
	#tab2:checked~.video-content-content #keypoints,
	#tab3:checked~.video-content-content #slides,
	#tab4:checked~.video-content-content #speakers,
	#tab5:checked~.video-content-content #comments {
		display: block;
		height: 100%;
	}
	
.video-content-tabs label, .video-content-tabs a:link {
	/*labels for content associated with the video*/
	display: inline-block;
	padding: 10px 25px;
	font-weight: 600;
	text-align: center;
	border: none;
	border-radius: 0;
	font-size: .8em;
	-webkit-user-select: none;	/* Chrome all / Safari all */
	-moz-user-select: none;	 /* Firefox all */
	-ms-user-select: none;		/* IE 10+ */
	user-select: none;
	}

.video-content-tabs .tools {
	/* positions captions toggle button*/
	position: absolute;
	top: 0;
	right: 0;
	padding-bottom: .1em
}

.tools label {
	padding: 20px;
	margin-top: -0.5em;
}

.video-content-tabs .tools .label-text {
	/*need a more accessible way of doing this*/
	display: none;
	position: absolute;
	bottom: 0;
	right: 0;
	background: #fff;
	opacity: 0
}

.video-content-tabs .tools a {
	padding: 0;
	margin-top: -0.5em;
	width: 40px;
	height: 40px
}

.tools a img {

}

/* 
.tools a, .tools label {
	outline: solid lime
}
 */


/* these style the CC and autoscroll buttons */

.video-content-tabs .tools label[for="captionToggle"] {
	display: inline-block;
	background-image: url('cc.svg');
	background-repeat: no-repeat;
	background-size: 50%;
	width: 1.5em;
	height: 2.5em
}

.video-content-tabs .tools input:checked + label[for="captionToggle"] {
	background-image: url('cc-on.svg');
	background-color: transparent;	background-repeat: no-repeat;
	background-size: 50%;
	width: 1.5em;
	height: 2.5em
}

.video-content-tabs .tools label[for="scrollToggle"] {
	display: inline-block;
	background-image: url('https://coderemote20.com/wp-content/themes/buddyboss-theme-child/assets/images/scroll.svg') !important;
	background-repeat: no-repeat;
	background-size: 50%;
	width: 1.5em;
	height: 2.5em
}

.video-content-tabs .tools input:checked + label[for="scrollToggle"] {
	background-image: url('https://coderemote20.com/wp-content/themes/buddyboss-theme-child/assets/images/scroll-on.svg') !important;
	background-color: transparent;	background-repeat: no-repeat;
	background-size: 50%;
	width: 1.5em;
	height: 2.5em
}

.video-content-tabs .tools > a {
	display: inline-block
} 

.video-content-content {
	height: 29vh 
}

.video-content-content > section {
    display: none;
    /* padding: 25px 30px 5px; */
}

.transcript-only .video-content-content > section {
	display: block;
}

#transcript, #concepts, #slides, #speakers, #keypoints {
	height:100%;
}


/* 
.video-content-tabs {
	display: none
}
 */
 
 /*slides*/
 
 /* these style the slide texts*/

.slidetext-block .currentSlideText {
	background-color: #fff;
	color: var(--site-text-color-reversed);
	border-radius: .2em;
	pointer-events: auto;
	opacity: 1;
}

.currentSlideText h1, .currentSlideText h2, .currentSlideText h3, .currentSlideText h4, .currentSlideText h5, .currentSlideText q, .currentSlideText blockquote {
color: inherit
}

.video-content-content .currentSlideText blockquote, .video-content-content .currentSlideText q {
color: inherit
} 

.slidetext-block {
/* 	width: 100vw */
}

.slidetext-block > section {
	display: block;
	position: absolute;
	top: 5%;
	left: 10%;
	width: 80%;
	height: auto;
	margin: auto;
	pointer-events: none;
	opacity: 0;
	padding: .5em;
	transition: opacity: 1s;
}

#slides > p.widener {
	opacity: 0;
}

@media screen and (max-width: 799px) {

	body {
		display: block
	}

	#toolbar  {
		position: fixed;
		top: 0;
		left: 0
	}

	#transcript {
		display: none;
	}
	
	.transcript-only #transcript {
		display: block;
		margin: 0 auto;
		width: 90% 
	}
	
	#videoContent, #otherContent {
		height: auto
	}
	
	#videoContent {
		margin-top: 5vh
	}
	
	.transcript-only #videoContent {
		margin-top: 0;
	}
	
		#stream, #chat {
		width: 100%;
		display: block; 
		float: none;
		padding: 0;
	}
	
	#stream {
		height: 56vh;
		margin-bottom: 5%
	}
	
	#video {
    position: static;
    top: 0;
    left: 0;
    width: 100vw;
    height: 56vw;
}

	#chat {
		height: 39vh

	}	
	
    #captions {
        width: 100%;
/*         bottom: -3.5em; */
        padding: .2em
    }
	
	#captions span {
		bottom: 50%
	}
	
	#deadsimple {
		width: 100%;
	}
	
	.video-content-content {
		display: none
	}
	
	.transcript-only .video-content-content {
		display: none
	}
	
section	.video-content-tabs > * , section .video-content-tabs label {
		display: none
	}
	
	section .video-content-tabs .tools {
	display: block;
	position: fixed;
	top: 0;
	right: 0;
	padding: 0
	}
	
	.video-content-tabs .tools label {
		padding: 15px
	}
	
	section .video-content-tabs .tools label[for="scrollToggle"]
	 {
		display: none
	}

}

/*transcript only pages use a side by side display of video and transcript*/

.transcript-only {
	margin: 0;
	padding: 0;
}

.transcript-only #videoContent {
	display: grid;
	gap: 1%;
	grid-template-columns: 50% 40%;
	max-width: fit-content
}

transcript-only .video-content-content {
	height: auto;
}

.transcript-only #transcript {
	padding: 1em;
	height: 90vh
}

.transcript-only #stream {
	height: 100vh
}