* {box-sizing: border-box;}
html, body {
  height: 100%;
  margin: 0;
}
html {scroll-behavior: smooth;}
body {
	display: flex;
	flex-direction: column;
	min-height: 100%;
}

/*** Color and Fonts ***/
header div {background:#0F2155!important;}
body{background: white;}
section{background: white;}
footer{background: gray;}
h1,h2,h3,h4,h5,h6 {font-family: "Lato", sans-serif}
header, footer, p, li, blockquote, input, select, label, form, button {font-family: "Montserrat", sans-serif}
header {color: white!important;background:#0F2155!important;}
footer {color: white;}

/*** Nav Bar ***/
header {
	display: flex;
	position: fixed;
	width: 100%;
}
header > div {
	height: 50px;
}

header > div:nth-child(1) {
	flex: 0;
	display: flex;
	align-items: center;
}
header img {height: 40px;}

header > div:nth-child(2) {
	flex: 1;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	padding: 0 0 0 10px;
	
}
header > div:nth-child(2) div {
	flex: 0;
	white-space: nowrap;
	padding: 0 10px;
	
}
header > div div:hover {
	cursor: pointer;
}
header > div div:active {
	color: #0F2155!important;background:#ccc!important;
}
header div div {
	flex: 1 ;
}

section {
	max-width: 780px;
	margin: 50px auto auto auto;
	display: flex;
	flex-direction: column;
}

article img, 
article video {
	max-width: 95%;
	display: flex;
	margin-right: auto;
	margin-left: auto;
	
}
.goryDetails {
	display:none;
}
p, h1, h2, h3, h4 {
	padding: 0 10px;
}
h1 {font-size: 1.5em;}
h2 {font-size: 1.4em;
	width: 100%;
	background: #0F2155;
	color: white;
}
h3 {
	font-size: 1.2em;
	margin-top: 2em;
}
h3.bordered {
	border-top: 1px black solid;
}

h4 {font-size: 1.2em;}

a, a:visited{color: blue;}

.stem {
	font-weight: bold;
	font-style: italic;
}
.small {
	font-size:.8em;
}
.vSmall {
	font-size:9pt;
}
.centered {
	display: flex;
	justify-content: center;
	width: 100%;
}
.fauxLink {
	text-decoration: underline;
	color: blue;
}
.fauxLink:hover {
	cursor: pointer;
}
form {
	display: flex;
	margin-left: auto;
	margin-right: auto;
	max-width: 520px;
}
.hide {
	display: none;
}
.formHeading {
	font-size: 1.2em;
	background: #c4dbfb;	
}
form {
	flex-direction: column;
	margin-top: 1em;
}
label:hover {
	cursor: pointer;
}

button {
	width: 100px;
	height: 30px;
	border-radius: 5px;
}
button:hover {
	cursor: pointer;
	background: #dde9fb;
}

.workPhone {
	display: none;
}
form > div {
	display: flex;
	flex-wrap: wrap;
	margin: 2px 10px;
}
form >div > div:nth-child(1) {
	display: flex;
	align-items: center;
	min-width: 220px;
	flex: 1;
}
form >div > div:nth-child(2) {
	align-self: center;
	flex: 1;
	min-width: 250px;
}
form > div input, 
form > div textarea,
form > div select {
	width: 100%;
}

/* Two-line First Cell in Contact Us Table */
form > div > div:nth-child(1) > div {
	width: 250px;
	display: flex;
	flex-direction: column;
}
form > div > div:nth-child(1) > div > div:nth-child(1) {
	margin-bottom: -2px;
}
form > div > div:nth-child(1) > div > div:nth-child(2) {
	font-size: 9pt;
	margin-top: -2px;
}

footer {
	display: flex;
	flex-direction: row;
	justify-content: center;
	font-size: 8pt;
	padding: 5px;
	width: 100%;
}



/**** Begin Special Styles for Mobile ****/
/**** Styles for Mobile Rotated Landscape ****/
@media (hover: hover) {
	header ul li:hover {cursor: pointer;}
    header ul li:active {color:#0F2155!important;background:#ccc!important;}
}
@media (hover: none) {
    header ul li:active {color:#0F2155!important;background:#ccc!important;}
}

@media only screen and (max-height : 500px) {

}

/**** Styles for Mobile Rotated Portrait ****/
@media (max-width : 500px) {
/* Radio Button Styling for Mobile */
	/* The container */
	.container {
	  display: block;
	  position: relative;
	  padding-left: 35px;
	  cursor: pointer;
	  -webkit-user-select: none;
	  -moz-user-select: none;
	  -ms-user-select: none;
	  user-select: none;
	}

	/* Hide the browser's default radio button */
	.container input {
	  position: absolute;
	  opacity: 0;
	  cursor: pointer;
	}

	/* Create a custom radio button */
	.checkmark {
	  position: absolute;
	  top: 0;
	  left: 0;
	  height: 25px;
	  width: 25px;
	  background-color: #eee;
	  border-radius: 50%;
	  background   : url('images/rbBack.jpg') no-repeat 0 0; 
	}

	/* When the radio button is checked, add a blue background */
	.container input:checked ~ .checkmark {
	  background   : url('images/rbBackChecked.jpg') no-repeat 0 0; 
	}

	/* Create the indicator (the dot/circle - hidden when not checked) */
	.checkmark:after {
	  content: "";
	  position: absolute;
	  display: none;
	}

	/* Show the indicator (dot/circle) when checked */
	.container input:checked ~ .checkmark:after {
	  display: block;
	}
}
@media  (max-width : 500px) {
/* Input[type=text] Styling */
select, input[type=text], input[type=tel], input[type=email], textarea {
  font-size: 1.25em;
}
}