/*MainContentSizing:
Background Image Height: 750px;
Header Height: 20px;
Footer Height: 165px;

*/
html, body{
	height: 100%;
	box-sizing: border-box;
	min-height: 500px;
	min-width: 320px;
	font-family:-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
}
#mainHead{
	text-align: center;
	background-color: #333;
	border-bottom-style: solid;
	border-bottom-color: #FFF;
	border-bottom-width: 3px;
}
#contactOverlayBar{
	background-color: #990000;
}
#contactOverlayBar div.container{
	position: relative;
}
#contactOverlay div{
	background-color: #990000;
	padding: 8px 10px 8px 10px;
	line-height:16px;
	text-align: center;
}
#contactOverlay a{
	color: #FFF;
	height: 16px;
}
#contactOverlay a img{
	display: inline-block;
}
#contactOverlay a:first-of-type{
	border-color: #FFF;
	border-right-width: 1px;
	border-right-style: solid;
	padding-right: 8px;
	vertical-align: middle;
}
.socialIcon{
	padding-left: 8px;
	width: 100px;
	vertical-align: middle;
}
.socialIcon:hover{
	opacity: .9;
}
.socialIcon img{
	width: 16px;
	vertical-align: text-top;
}
#contactOverlay a:hover{
	color: #CCC;
	text-decoration: none;
}
#mainContent{
	width: 100%;
}
#footContain{
	padding-bottom: 10px;
	background-color: #FFF;
}
h1{
	color:#990000;
}
.fourStarType{
	color: #000;
	font-family: Arial;
	font-weight: 900;
}
#footerBar{
	background-color: #333;
	color: #FFF;
	font-weight: bold;
	text-align: center;
}
#footerOwnership{
	font-size: 12px;
}
#footerBottomText{
	margin-top: 5px;
	margin-bottom: 5px;
	text-align: center;
	font-size: 10px;
}
#footerBottomText a{
	color: #000;
}
.devTools{
	display: block;
}
.sizeIndicator{
	position: fixed;
	bottom: 0px;
	left: 0px;
	background-color: red;
	z-index:1040;
}
.sizeIndicator div{
	display: inline-block;
}
#H_SM{
	display: inline-block;
}
#H_MD, #H_LG{
	display: none;
}


/*
*******Width Only Desktop  Layout BREAKPOINT*******
MEDIA QUERY FOR > Medium Width
Set "min-width" equal to bootstrap small breakpoint
*/
@media (min-width: 768px){
	/*Activate these styles when screen width is above x*/
	#headContain{
		position:fixed;
		top: 0px;
		left: 0px;
		z-index: 10;
		width: 100%;
	}
	#contactOverlayBar{
		background-color: none;
	}
	#contactOverlay{
		position: absolute;
		right: 0px;
		border-bottom-left-radius: 15px;
		border-bottom-right-radius: 15px;
		border-top-width: 0px;
	}
	#contactOverlay div{
		border-bottom-left-radius: 15px;
		border-bottom-right-radius: 15px;
	}
	#footerRow{
		height: 100px;
	}
	#footerBottomText{
		margin-top: 0px;
		margin-bottom: 0px;
	}
	.transparentBorder{
		border-style: solid;
		border-color: rgba(204,204,204,.35);
		border-width: 3px;
	}
}

/*
*******Full Desktop Layout BREAKPOINT*******
MEDIA QUERY FOR Medium Height & > Medium Width
Set "min-width" equal to bootstrap small breakpoint
Set "max-height" equal to max background image height + header height + footer height
Set "min-height" equal to minimum viewport size
*/
@media (max-height: 1034.9px) and (min-height: 500px) and (min-width: 768px){
	/*Activate these styles when screen width is above x and screen height is above x*/
	#footContain{
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 1030;
	}
	#H_MD{
		display: inline-block;
	}
	#H_SM, #H_LG{
		display: none;
	}
}

/*
*******Too Tall Desktop Layout BREAKPOINT*******
MEDIA QUERY FOR Large Height & > Medium Width
Set "min-width" equal to bootstrap small breakpoint
Set "min-height" equal to max background image height + header height + footer height
This media query un-fixes the footer from the bottom of the viewport
*/
@media (min-height: 1035px) and (min-width: 768px){
	/*Activate these styles when screen width is above x and screen height is below x*/
	#H_LG{
		display: inline-block;
	}
	#H_SM, #H_MD{
		display: none;
	}
}