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

/* latin-ext */
@font-face {
	font-family: 'Lato';
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url(https://fonts.gstatic.com/s/lato/v23/S6u9w4BMUTPHh7USSwaPGR_p.woff2) format('woff2');
	unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  /* latin */
  @font-face {
	font-family: 'Lato';
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url(https://fonts.gstatic.com/s/lato/v23/S6u9w4BMUTPHh7USSwiPGQ.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }

:root {
	--primary-color: #1c2f45; 
}

.heading {
	color: #444;
}

body {
	background: #414141;
	color: #FFFFFF;
	font-family: tahoma, arial;
    font-family: 'Lato', sans-serif;
	font-size: 16px;
	font-weight: bold;
	line-height: 1.6;
	margin: 0;
	padding: 0;
	text-align: center;
	background-image:url(images/background.gif);
}

ul {
    list-style-type: none;
}

a {
    text-decoration: none;
    color: #333;
}

.index-h1 {
    font-weight: bold;
    line-height: 1.2;
	text-align: center;
	color: red;
    margin: 0;
	padding: 0;
}

h1,
h2 {
    font-weight: 300;
    line-height: 1.2;
    margin: 10px 0;
}

p {
    margin: 10 0;
}


img {
    width: 100%;
}

.navbar {
    background-color: #1c2f45;
    color: #fff;
    height: 70px;
	border: 6px solid #FFFFFF;
}

.navbar .flex {
	justify-content: space-between;
}

/* Showcase */
.showcase {
	height: 400px;
	background-color: var(--primary-color);
	color: #fff;
	position: relative;
}

.showcase h1 {
	font-size: 40px;
}

.showcase p {
	margin: 20px 0;
}

.showcase .grid {
	grid-template-columns: 30% 70%;
	gap: 10px;
}

.navbar ul {
	display: flex;
}

.navbar a {
	color: #fff;
	padding: 5px;
	margin: 0 5px;
}

.navbar a:hover {
	color: #fff;
	font-weight: bolder;
	text-decoration: underline;
}

.new-container {
    max-width: 1100px;
    margin: 0 auto;
    overflow: auto;
    padding: 0 20px;
}

.flex {
    display: flex;	
	justify-content: center;
	align-items: center;
	height: 100%;
}

a:link { 
	color: #FFFFFF;
	font-weight: bold;
	letter-spacing: 2px;
	text-decoration: none;
}
	
a:visited { 
	color: #FFFFFF;
	font-weight: bold;
	letter-spacing: 2px;
	text-decoration: none;	
}
	
a:hover, a:active { 
	color: #FFFFFF;
	font-weight: bold;
	letter-spacing: 2px;
	text-decoration: underline;
}

#content a:link { 
	color: #FFFFFF;
	font-weight: bold;
	text-decoration: underline;
	letter-spacing: 1px;
}

#content a:visited { 
	color: #FFFFFF;
	font-weight: bold;
	text-decoration: underline;
	letter-spacing: 1px;
}
	
#content a:hover, #content a:active { 
	color: #5f7c8d;
	font-weight: bold;
	text-decoration: underline;
	letter-spacing: 1px;
}

#container {
	margin: 0 auto;
	margin-top: 20px;
	text-align: left;
	width: 1000px;
}

#content {
	clear: both;
	margin-top: 15px;
	width: 1000px;
}

#footerbg {
	clear: both;
	margin-bottom: 15px;
	padding-top: 15px;
}

#footer{
	border: 6px solid #FFFFFF;
	clear: both;
	font-size: 13px;
	height: 30px;
	padding-top: 16px;
	text-align: center;
	width: 987px;
	background-color:#1c2f45;
}

#fullline{
	border: 6px solid #FFFFFF;
	float: left;
	margin-right: 12px;
	width: 987px;
	height:auto;
	display:inline;
	overflow:hidden;
}

#left {
	border: 6px solid #FFFFFF;
	float: left;
	margin-right: 12px;
	width: 263px;
	height:auto;
	display:inline;
	overflow:hidden;
}

#nav {
	border: 6px solid #FFFFFF;
	font-size: 13px;
	height: 30px;
	padding-top: 16px;
	text-align: center;
	width: 988px;
	background-color:#1c2f45;
}

#right {
	background: url(images/jhewitt-banner.html) no-repeat 0% 0%;
	border: 6px solid #FFFFFF;
	float: left;
	height: auto;
	min-height: 500px;
	padding-left: 15px;
	padding-right: 15px;
	padding-top: 10px;
	width: 671px;
	background-color:#1c2f45;
	display:inline;
}

.thumbnails ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.thumbnails li {
	float: left;
	list-style: none;
	margin: 0;
	margin-right: 15px;
	padding: 0;
}

.label-index {
	font-size: medium;
	font-weight:bold; 
	color:aqua; 
	margin-left: 0;
}

.label-money {
	color:darksalmon;
}

label {
	font-weight:bold; 
	color: red; 
	margin-left: 5px;
}

.grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
	justify-content: center;
	align-items: center;
	height: 100%;
} 	

.index-grid {
    display: grid;
	gap: 20px;
    grid-auto-flow: row;
    grid-template-columns: 1fr 2fr;
    grid-template-rows: repeat(2, 1fr);
} 	

.heading {
	color: #444;
    font-size: 40px;
    text-align: center;
    padding: 10px;
}

.video-container {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 15px;
	justify-content: center;
	align-items: flex-start;
	padding: 0;
}

.video-container .main-video {
	background: #fff;
	padding: 10px;
}

.video-container .main-video video {
	width: 100%;
}

.video-container .main-video title {
	color: #333;
	font-size: 23px;
	padding-top: 15px;
	padding-bottom: 15px;
}

.video-container .video-list {
	background: #fff;
	height: 663px;
	overflow-y: scroll;
}

.video-container .video-list::-webkit-scrollbar {
	width: 7px;
}

.video-container .video-list::-webkit-scrollbar-track {
	background: #ccc;
	border-radius: 50px;
}

.video-container .video-list::-webkit-scrollbar-thumb {
	background: #666;
}

.video-container .video-list .vid video {
	width: 100px;
}

.video-container .video-list .vid {
	display: flex;
	align-items: center;
	gap: 15px;
	background: #f7f7f7f7;
	margin: 10px;
	padding: 10px;
	border: 1px solid rgba(0,0,0,.1);
	cursor: pointer;
}

.video-container .video-list .vid:hover {
	background: #eee;
}

.video-container .video-list .vid.active {
	background: #2980b9;
}

.video-container .video-list .vid.active .title{
	color: #fff;
}

.video-container .video-list .vid .title{
	color: #333;
	font-size: 17px;
}

@media (max-width:991px) {

	.video-container {
		grid-template-columns: 1.5fr 1fr;
		padding: 10px;
	}
}

@media (max-width:768px) {

	.video-container {
		grid-template-columns: 1fr;
	}
}