

@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');

/*@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap');*/

:root{
	--fontSize: 0.9em;
	--fontStyle: "sans-serif";
	--rootBG: #edede8;
	--maxWidth: 1024px;
	--contentBG: #edede8;
	--contentFG: #625548;
	--headerBG: #edede8;
	/*--headerFG: #rgb(93, 93, 93);*/
	--headerFG: #ff7d00;
	/*--headerStackBG: #817b70;*/
	--headerStackBG: #e6a454;
	--headerStackFG: #817b70;
	--headerOver: white;
	--titleColor: #e6a454;
	--tileBorderColor: white;
	--tileBG: #ebc049;
	--tileRadius: 0em;
	--tileBorderWidth:8px;
	--tileFG: black;
	--tileTitleColor: white;
	--accentColor: #625548;
	--accentColorLight:#74515fb8;
	--emphasisBG: rgba(100,86,72,0.1);
	--extraBG: transparent;
	--extraBorderColor: #231F20;
	--extraBorderWidth: 2px;
	--extraRadius: 0em;
}

@font-face {
  font-family: scriptin;
  src: url(res/SCRIPTIN.ttf);
}

h1, h2, h3, h4{
	font-family: "Raleway", sans-serif;
	font-weight:normal
}

#header{
	h1.tplTitle{
		text-transform:uppercase;
		text-indent: 15px;
		height: auto;
		color: var(--headerFG);
    line-height: 108px;
    span{
    text-transform: lowercase;
    font-family: scriptin;
    text-align: center;
    display: block;
    font-size: 1.6em;
    font-weight: normal;
    }
		&:after{
			content:"TV Anchor. Journalist. Triple Threat";
			display: block;
			font-size: 17px;
			margin: 5px 0 10px 0;
			/* padding: 0; */
			line-height: normal;
			letter-spacing: normal;
		}
    a{
      font-weight:bold
    }
		a:hover{
			color:unset
		}
	}
	a:hover{
		opacity: 1 !important;!;
		color: var(--headerFG);
	}
	ul.tileLinks {
		font-family: "Raleway", sans-serif;
		text-transform:uppercase;

		li.currentTile a{
			color: var(--headerFG);
			text-decoration:underline
		}
		a{
			opacity:1;
      font-size:17px
		}
		li:has(a.homeLink){
			display:none
		}
	}
	#extras{
		padding: 0;
		width: unset;
		min-height: auto;
    width:331px;
		div.margin{
			margin:0;
			padding:0;
			width: unset;
			min-height: unset;
			p{
				text-align: center;
			}
			.binImgInline{
				height: 30px;
				width:auto;
				margin-block: 5px;
				margin-inline-start: 10px;
				/*filter: drop-shadow(0 2px 2px rgb(255 255 255 / 0.4));*/
			}
		}
	}
	#stack{
		padding-inline-start: 18px;
		justify-content: space-between;
		#extras a, .sw_outStack_navRoot a{
			opacity: 0.8;
			transition:0.2s linear;
			color: white;
			&:hover{
				opacity:1
			}
		}
		.searchFra{
			flex-grow:2;
			justify-items: end;
			.schCmds{
				opacity:0.8;
				transition:0.2s linear;
				&:hover{
					opacity:1;
				}
			}
			input.schInput{
				border-radius:30px;
				width: 130px;
				border: 0;
				height: 25px;
				font-size: 1em;
				box-shadow: none;
			}
			.schPropose{
				width: 112px;
				margin-inline-start:12.5px
			}
		}
		.sw_outStack_navRoot{
			flex-grow:2;
			color: white;
      display:none
		}
	}
}

div.scImgGalTi,
.scImgGalTbr .scImgGalCount,
a.scImgGalBtnPly,
a.scImgGalBtnPse{
	top:5px;
	bottom:unset
}
.scImgGalImgFra{
	padding-bottom:unset;
	padding-top:30px
}

#content{
	display:flex;
	.bkBase_co:has(> .galFra){
		max-width:unset;
		padding: 0;
	}
	.txt_anim_ex{
		width:clamp(200px, 80vw, 100%);
		height:auto;
		margin: auto;
		object-fit: contain;
		iframe{
			width:100%;
			aspect-ratio:16 / 9;
			height:unset
		}
		.tePlayer.teVideoType {
			height: 100%;
			width: auto;
			.tepTranscriptArea{
				width:unset;
			}
		}
	}
	> section{
		flex-grow:2;
	}
	.bkBase.bkPage > .bkBase_ti {
    background: transparent;
    font-size: 1.8em;
    text-transform: lowercase;
    font-weight: bold;
	}
	.galFra {
		/* gap: 5px; */
		justify-content: flex-start;
		display: flex;
		a{
			transition:0.4s;
		}	
		&:hover a{
			opacity:0.7;
		}
		.galPv{
			overflow:hidden;
			flex-grow: 2;
			max-height: clamp(60px, 13vw, 150px);
			aspect-ratio: 4 / 3;
			max-width: 250px;
			img{
				width: 100%;
				object-fit: cover;
				padding: 0;
				height: 100%;
				object-position: top center;
			}
			a:hover{
				opacity:1;
			}
		}
	}
	/*&.Dance .galFra {
		gap: 5px;
		display:grid;
		grid-template-columns: repeat( auto-fit, minmax(10vw, 80px) );
		overflow: hidden;
		grid-auto-rows: 120px 80px 100px;
		&:hover a{
			opacity:0.7;
		}
		.galPv{
			overflow:hidden;
			border: 1px solid lightgrey;
			img{
				width: 100%;
				object-fit: cover;
				height: 100%;
				padding: 0;
			}
					a{
			transition:0.4s;
			justify-content: center;
			overflow: hidden;
			}	
			a:hover{
				opacity:1;
			}
			&.spanLi2{
				grid-column: span 2;
			}
			&.spanCol2{
				grid-row: span 2;
			}
		}
	}*/
	.bkTileSet .tiles {
	    display: flex;
	    justify-content: center;
	    flex-wrap: wrap;
		article.tile{
			width:clamp(150px, 20vw, 200px);
			aspect-ratio:1 / 1;
			transition:0.4s;
			border: 0;
			&:hover{
				box-shadow: none;
				transform:scale(1.1);
			}
			a.tileLink{
				display:flex;
				justify-content: center;
				align-items: center;			
				.tileTitle {
					font-size:2em;
					text-shadow: 0 2px 2px rgb(0 0 0 / 0.4);
					line-height:1em
				}
			}
		}
	}
	.bkBase{
		margin-block:2em 0
	}
	.videoWall{
		h3{
			display:none
		}
		.bkBase_co{
			display: flex;
			flex-wrap:wrap;
			padding: 0;
			flex-direction: row;
	
			.txt_anim_ex {
				width:clamp(250px, 30vw, 400px);
				flex-grow:2;
				border: 1px solid white;
				background:black;
				margin: 0;
				figure{
					margin:0;
					height: 100%;
					.binCap_co {
						height: 100%;
					}
					.tepMainArea{
						width:100%;
						height:100%
					}
					video{
						object-fit:contain;
					}
				}
			}
		}
	}
	.zzzavirer .videoWall .bkBase_co{
		display: flex;
		flex-wrap:wrap;
		padding: 0;
		.txt_anim_ex {
			flex-grow: 2;
			height: clamp(60px, 25vw, 150px);
			/* aspect-ratio: 4 / 3; */
			display: inline-block;
			overflow: hidden;
			min-width: 100px;
			width: revert;
			transition:0.4s linear;
			&:last-of-type{
				flex-grow: 1;
			}
			&:hover{
				box-shadow: 0 0 20px black;
				*{
					object-fit:contain
				}
			}
			*{
				width:100%;
				height:100%;
				object-fit: cover;
			}
			figure{
				margin:0;
				background-color: yellow;
				.tePlayer.teVideoType .tepController{
					padding:0;
					height:unset;
					.tePlayer.teVideoType video{
					}
				}
			}
		}
	}
}

@media (max-width: 500px) {
	#content .galFra {
		columns: 6 80px;
		column-gap: 0;
		display:block;
		.galPv{
			display: block;
			aspect-ratio: auto;
			max-height: unset;
		}
	}
}


