/* - - - - - - - - Variables - - - - - - - - */
:root {
	--ltBlue: #0076c0;
}

/* - - - - - - - - Main Content - - - - - - - - */
hr {
	margin: 1em 0;
	border-style: double;
	border-width: 4px 0 0 0;
	border-color:  var(--ltBlue);
}

.clearIt {
	clear: both;
}

.lookBox {
	border: 2px solid var(--ltBlue);
	padding: 10px;
	max-width: 235px;
	margin-top: 1.5em;
	margin-bottom: 1.5em;
}

@media only screen and (min-width: 801px) {
	.lookBox {
		float: right;
		margin-left: 20px;
	}
}

/* - - - - - - - - FlexBox Columns - - - - - - - - */
#colFlex {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.colFlex-childHalf {
	flex: 0 1 49%;
    min-width: 250px;
}

/* - - - - - - - - Grid - - - - - - - - */
.grid4x2 {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
	grid-column-gap: 10px;
	grid-row-gap:10px;
}

/* - - - - - - - - Responsive Video - - - - - - - - */

.video-responsive{
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
}
.video-responsive iframe{
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}

.vidErrorMsg {
	display: none;
	padding: 20px;
	background-color: #eee;
	vertical-align: middle;
	text-align: center;
}