h1{
	color: var(--titleText);
	font-size: 2.5rem;
	font-weight: normal;
}
h2 {
	display:inline-block;
	color: var(--headerBG);
}
h3{
	font-size: 1.7rem;
	margin:5px auto;
}
@media screen and (max-width: 1375px) {
	h3 {
		font-size: 2.6vw;
	}
}

hr {background-color:var(--headerBG);height:1px;border:none;}


#banner {
	width: 100%;
	height: 400px;
	overflow:hidden;
	background-color: black;
	position:relative;
	border-bottom: 1px solid var(--mainBorder);
}


/**Home page specific styles**/
#bannerImg {
	width:100%;
	height:auto;
	min-width: 1620px;
	position:absolute;
	bottom:0;
}

.thumbnailSect{
	width: 100%;
	clear:both;
	margin-top: 3.75rem;
}
.row2 {
	padding-top: 1.5rem;
	margin-top: 5.25rem;
}

.thumbnailSect:after {
	content: "";
	clear: both;
	display: table;
	margin-bottom: 56px;
}
.divider {
	margin-top: -4.85rem;
	margin-bottom: 4rem;
}
.gridTitle {
	z-index:2;
	background-color: var(--containerBG);
	padding: 0 16px;
	font-size: 2.5rem;
	margin-top: 0.25rem;
	margin-bottom: 3.5rem;
}
.gridContainer {
	width: 96%;
	margin:auto;
	display:grid;
	grid-template-columns: 1fr 1fr 1fr;
	column-gap: 30px;
	row-gap: 42px;
}
.thumbnailLink {
	text-decoration: none;
	display:block;
}
.hiddenTile {
	transition: opacity 800ms;
	transition-timing-function:ease-in;
	opacity:0.006;
	cursor:inherit;
}
.hiddenTile:hover {
	transition: opacity 3500ms;
	transition-timing-function:ease-in;
	opacity:0.9;
}
.thumbnailSlot {
	position:relative;
	float:left;
	width: 100%;
	overflow:hidden;
	filter: drop-shadow(1px -1px 5px #ddd);
}
.thumbnailSlot:hover {
	filter: drop-shadow(3px -3px 6px #bbb);
}

.thumbnail {
	position:absolute;
	top:0;
	left:0;
	width: 100%;
	height: auto;
	margin:auto;
	filter: drop-shadow(1px -1px 6px darkgray);
}

.thumbnailInfo h3 {
	transition: margin-top 400ms, margin-bottom 400ms;
	display: block;
	position:relative;
	width: 100%;
	height: 25%;
	padding: 0.3rem 0;
	margin:auto;
	margin-top:84.5%;
	margin-bottom: 0;
	background-color: var(--headerBG);
	color: white;
	filter:none;
	z-index:6;
}
.thumbnailInfo p {
	transition: top 400ms, padding-top 400ms;
	font-size: calc(0.4rem + 1.5vw);
	position:absolute;
	display:block;
	background-color: var(--headerBG);
	top:100%;
	left:0;
	right:0;
	bottom:0;
	margin:0;
	padding: 12px;
	padding-top:18%;
	text-align:center;
	color:white;
	z-index:5;
	opacity: 0.9;
}
.static h3 { transition: margin-top 0ms, margin-bottom 0ms; }
@media screen and (min-width: 1024px) {
	.thumbnailInfo p {font-size:2vw;};
}
@media screen and (min-width: 1266px) {
	.thumbnailInfo p {font-size:1.2rem;};
}
@media screen and (min-width: 1375px) {
	.thumbnailInfo p {font-size:1.35rem;};
}

@media (hover: hover) and (pointer: fine) {
	/**Apply hover description only to non touch-screen devices**/
	
	.thumbnailSlot:hover .thumbnailInfo h3 {
		transition: margin-top 400ms, margin-bottom 400ms, opacity 50ms;
		transition-delay: 100ms;
		margin-top: 0;
		margin-bottom:84.5%;
		opacity: 0.9;
		overflow:hidden;
	}
	.thumbnailSlot:hover .static h3 { transition: margin-top 0ms, margin-bottom 0ms; }
	.thumbnailSlot:hover .thumbnailInfo p {
		transition: top 400ms, padding-top 400ms;
		transition-delay: 100ms;
		top:0;
		padding-top: 18%;
	}
	.thumbnailSlot:hover .webappThumbnail p {
		transition-delay: 100ms;
		padding-top: 28%;
	}
	.thumbnailSlot:hover .webappThumbnail h3 {
		transition: margin-top 400ms, margin-bottom 400ms;
		transition-delay: 100ms;
		margin-top: 0;
		margin-bottom:85%;
		opacity: 0.9;
		overflow:hidden;
	}
}
.webappThumbnail h3 {
	transition: margin-top 400ms, margin-bottom 400ms, opacity 50ms;
	display: block;
	position:relative;
	width: 100%;
	height: 25%;
	padding: 0.3rem 0;
	margin:auto;
	margin-top:85%;
	margin-bottom: 0;
	background-color: var(--headerBG);
	color: white;
	filter:none;
	z-index:6;
}
.webappThumbnail p {
	padding-top: 25%;
}

.thumbnailLink:focus {
	border:1px solid #888890;
	opacity: 0.9;
}

.dark h3, .dark p{
	background-color:black;
}


/**Sample Library page specific style**/

.sampleBanner {
	min-width:900px;
	height:auto;
	border: 1px solid var(--grey);
}
.sampleBanner:hover {
	border: 1px solid darkgray;
}

.pluginText {
	padding: 24px 48px;
	max-width: 900px;
	margin: 0 auto 24px auto;
	border-radius:2px;
}
.pluginText h2 {
	color: var(--titleText);
	font-size: 2.5rem;
	font-weight: normal;
	margin: 12px auto 24px auto;
}
.pluginText p{
	text-align: left;
	font-size: 1.3rem;
}
.pluginText a:hover {
	color: var(--linkHover);
}
.pluginText sup {
	font-size:0.6rem;
	text-decoration:none;
}

.pluginTextContainer {
	text-align:center;
}

.plugin1 {background-color:var(--plugin1BG);}
.plugin2 {background-color:var(--plugin2BG);}
.plugin3 {background-color:var(--plugin3BG);}
.plugin4 {background-color:var(--plugin4BG);}
.plugin5 {background-color:var(--plugin5BG);}
.plugin6 {background-color:var(--plugin6BG);}
.plugin7 {background-color:var(--plugin7BG);}
.plugin8 {background-color:var(--plugin8BG);}

.demoGrid {
	width: 100%;
	grid-template-columns: 2fr 1fr;
}
.pluginDemos {
	text-align:center;
	margin-top:24px;
	padding:0;
}
.videoPlayer {
	width: 100%;
	min-width: 900px;
	display:grid;
	margin: 6px auto;
	grid-template-columns: 	2fr 1fr;
	column-gap: 16px;
	row-gap: 42px;
}
#mainVideo {
	margin:auto;
	width: 600px;
	opacity: 0.98;
}
#mainVideo:hover {
	opacity:1;
}
#mainVideo iframe{
	margin:auto;
	width: 600px;
	height: auto;
	min-height: 340px;
}

.videoThumbnails {
	margin: 0 10px 0 0;
	padding: 0;
	border:1px solid #aaa5;
	width: 290px;
	max-height: 339px;
	list-style:none;
	overflow-y:scroll;
	-ms-overflow-style: none;  /* IE and Edge */
	scrollbar-width: none;  /* Firefox */
}
.videoThumbnails::-webkit-scrollbar {
	display:none;
}

.thumbnailLi{
	padding: 2px 3%;
	padding-bottom: 0;
	width: 94%;
	max-height: 162px;
	opacity: 0.95;
}
.thumbnailLi:hover {
	opacity:1;
}
.thumbnailLi img {
	width: 90%;
}
.thumbnailLi iframe {
	display:none;
}
.yt_thumbnail {
	border: 6px solid transparent;
	cursor:pointer;
	border-radius: 2px;
}
.yt_thumbnail:hover {
	border: 6px solid #bbb;
}
.active {
	background-color: #ccc;
}
.activeVideo {
	border: 6px solid #ccc;
}
.audioDemos {
	margin: 56px 2% 96px 4%;
	float:left;
	width: 51%;
	column-gap: 16px;
	row-gap: 22px;
}
.audioTitle {
	text-align: left;
	padding: 36px 0 16px 0;
	font-size: 1rem;
}
audio {width: 75%;transform:scale(1.5);}

.plugin1audio audio::-webkit-media-controls-panel {background-color:var(--plugin1audioBG);}
.plugin2audio audio::-webkit-media-controls-panel {background-color:var(--plugin2audioBG);}
.plugin3audio audio::-webkit-media-controls-panel {background-color:var(--plugin3audioBG);}
.plugin4audio audio::-webkit-media-controls-panel {background-color:var(--plugin4audioBG);}
.plugin5audio audio::-webkit-media-controls-panel {background-color:var(--plugin5audioBG);}
.plugin6audio audio::-webkit-media-controls-panel {background-color:var(--plugin6audioBG);}
.plugin7audio audio::-webkit-media-controls-panel {background-color:var(--plugin7audioBG);}
.plugin8audio audio::-webkit-media-controls-panel {background-color:var(--plugin8audioBG);}

.plugin1audio audio::-webkit-media-controls-play-button {background-color:var(--plugin1PlayButton);}
.plugin2audio audio::-webkit-media-controls-play-button {background-color:var(--plugin2PlayButton);}
.plugin3audio audio::-webkit-media-controls-play-button {background-color:var(--plugin3PlayButton);}
.plugin4audio audio::-webkit-media-controls-play-button {background-color:var(--plugin4PlayButton);}
.plugin5audio audio::-webkit-media-controls-play-button {background-color:var(--plugin5PlayButton);}
.plugin6audio audio::-webkit-media-controls-play-button {background-color:var(--plugin6PlayButton);}
.plugin7audio audio::-webkit-media-controls-play-button {background-color:var(--plugin7PlayButton);}
.plugin8audio audio::-webkit-media-controls-play-button {background-color:var(--plugin8PlayButton);}

audio::-webkit-media-controls-play-button {
	transform:scale(2);
	border-radius: 50%;
	border: 5px solid brown;
	margin-right: 24px;
}
audio::-webkit-media-controls-current-time-display {
	
}
audio::-webkit-media-controls-time-remaining-display {
	margin-right: 6px;
}
audio::-webkit-media-controls-timeline {
	
}
audio::-webkit-media-controls-volume-slider {
	
}
iframe {
	border:none;
}

article{
	margin-bottom: 0;
	width: 100%;
	margin:auto;
}
article:after {
	content: "";
	clear: both;
	display: table;
}

.shopLinks {
	float:right;
	text-align:left;
	margin:auto;
	margin-top:88px;
	margin-right: 1%;
	margin-bottom: 96px;
	width: 285px;
}
.shopLinks h2 {
	padding-left:2px;
}
.shopLinks ul {
	margin:auto;
	text-align:left;
}
.shopLinks ul li{
	font-size:1.3rem;
	padding-bottom: 16px;
}
.shopLinks ul li button {
	text-align: left;
	border: none;
	padding:0;
	background: none;
	display: inline;
	color: inherit;
	text-decoration: underline;
	cursor:pointer;
	font-size:1.3rem;
	padding-bottom: 16px;
}
.shopLinks ul li button:hover {
	color: var(--linkHover);
}

.extLink::after {
    background-image: url('../images/icons/newTab.png');
	background-size:12px 12px;
    display: inline-block;
	margin-left: 4px;
	margin-bottom: 12px;
	width: 12px;
	height:12px;
	content:"";
}
.shopLinks ul li button:hover .extLink::after {
    background-image: url('../images/icons/newTabHover.png');
}

.extLink:hover::after {
    background-image: url('../images/icons/newTabHover.png');
}