/* ------------------------- Notes ------------------------- */
/* All portraits on "Team" page are cropped/resized to 4x5 aspect ratio. */
/* Append #view=Fit to end of PDF URL in IFrames in HTML */

/* ------------------------- Colors ------------------------- */
/* Navy 		#000080 	rgb(0, 0, 128) 		*/
/* LightSkyBlue	#87CEFA		rgb(135, 206, 250) 	*/
/* LightGreen   #98FB98AA 						*/

/* ------------------------- Global Styles ------------------------- */
html, *{	box-sizing: border-box;
			-webkit-text-size-adjust:100%;}
			
body {		width: 100%;
			min-width:350px;
			margin: 0px;
			padding: 0px;
			font-family: Arial, Helvetica, sans-serif;
			font-size: 16px;
			line-height:1.75em;
			background-color: white;}

main {		width:75%;
			max-width: 1080px;
			margin: 30px auto 50px;
			padding: 0px;
			background-color:white;}
			
main h1 {	margin: 30px 0px;
			padding:0px;
			text-align:center;
			text-transform:uppercase;
			font-weight:bold;
			font-size: 3em;
			letter-spacing:0.15em;
			line-height:1.25em;}
			
main h2 {	margin: 15px 0px;
			padding:0px;
			text-align:left;
			font-size: 2em;
			font-weight:bold;
			line-height:1.25em;
			color:#000080;}

main h3 {	margin: 15px 0px;
			padding:0px;
			text-align:left;
			font-size: 1.5em;
			font-weight:normal;
			line-height:1.25em;}

main h4 {	margin: 15px 0px;
			padding:0px;
			text-align:left;
			font-size: 1.25em;
			font-weight:normal;
			font-style:italic;
			line-height:1.3em;}

main p {	margin: 15px 0px;
			padding:0px;
			}
			
main ul, ol {list-style-position:outside;
			padding-left:1.25em;}
main li{	padding-bottom:0.5em;}

main a {	color: #000080;}

main hr {	height:1px;
			border-width:0px;
			border-radius: 0px;
			color: #87CEFA;
			background-color: #87CEFA;
			opacity: 100%;
			clear:both}

img.fullwidthimg {	object-fit: contain;}

a.inlinebutton {
			margin:0px;
			padding: 5px 10px;
			border-radius: 30px;
			font-size: 0.95em;
			font-weight: bold;
			text-decoration:none;
			color: #000080;
			background-color:#87CEFA;}
			
.video {	width:100%;
			max-height:300px;
			margin:0px;
			padding:5px;}

p.caption {	margin:0px;
			padding: 10px 0px;
			text-align:center;
			font-size:0.75em;
			line-height:1.25em;
			font-style:italic;
			color:#000000AA;}
			
p.caption a{	color:#000000AA;}

.anchor {	position:relative; 
			top: -10em;
			width:0px; 
			height:0px; 
			margin:0px; 
			padding:0px;}

.backToTop {	display:none;
				/* display: inline-block; */
				position:fixed;
				bottom: 20px;
				right:20px;
				width: 5em;
				height:5em;
				margin: 0px;
				padding: 0.5em;
				border: 0px;
				border-radius:3em;
				text-align: center;
				text-decoration:none;
				font-size:0.75em;
				line-height:1.5em;
				color:white;
				background-color: #000080;}
				
.backToTop a {	margin:0px;
				padding:0px;
				text-decoration:none;}

/* ------------------------- Navigation Menu (Bar at Top of Site) ------------------------- */					
nav {		z-index: 1;
			position:sticky;
			top:0px;
			display:block;
			width:100%;
			margin:0px;
			padding:0px;
			text-align:center;
			color:white;
			background-color:#000080;}

nav ul {	margin:0px;
			padding:0px;
			list-style-type:none;}
			
nav li {	display:inline-block;
			margin:0px;
			padding:0px;
			vertical-align:top;}
			
nav a {		display:inline-block;
			height: auto;
			width:auto;
			margin:0px;
			padding: 0.75em 1em;
			vertical-align:top;
			border:none;
			text-decoration:none;
			color:white;}

nav a:hover {color:#000080;
			background-color:#87CEFA;}
			
nav a img {	height:3.25em;
			margin:0px;
			padding:0px;}

.dropdown-content {
	
			display:none;
			z-index:1;
			position:absolute;
			left:0;
			width:100%;
			margin:0px;
			padding:10px 0px;
			columns: 300px 2;
			column-gap: 0px;
			text-align:left;
			background-color:#000080;}
			
.dropdown-content a {	
			display: block;
			margin:0px;
			padding:0px 30px;}

/* Show the dropdown menu on hover */
nav li:hover .dropdown-content {
			display: block;}
	
/* ------------------------- Header General ------------------------- */					
	
header {	width:100%;
			margin:0px;
			padding:10px 30px;
			text-align:center;
			background-color:#87CEFA;}
			
header h1 {	margin: 0px;
			padding: 0px;
			text-align:center;
			text-transform:uppercase;
			font-weight:bold;
			font-size: 2em;
			letter-spacing:0.15em;
			line-height:1.5em;}
			
header h2 {	margin: 0px;
			padding: 0px;
			font-size: 1.5em;
			line-height:1.5em;}
			
header h3 {	margin: 0px;
			padding: 0px;
			font-size: 1.5em;
			line-height:1.5em;
			text-align:center;}
			
header p {	margin: 0px;
			padding: 0px;
			font-size: 1em;
			line-height:1.5em;}
			
header table {		width: 100%;
					margin:0px;
					padding:0px;
					line-height: 10px;}
					
header table tr {	width: 100%;
					margin:0px;
					padding:0px;
					vertical-align:top;}
					
header table tr td {width: 50%;
					margin:0px;
					padding:0px;}

header .studentsbreak {display:none;}

/* ------------------------- Home Header (With Image Background) ------------------------- */		
.headerhome {width:100%;
			min-height:calc(100vh - 5.25em);
			margin: 0px;
			padding: 100px 30px;
			text-align:center;
			color:white;
			text-shadow: 2px 2px 3px #000000CC;
			background-color:#87CEFA00;
			background-image: linear-gradient(to top, #000000AA, #87CEFA00), url(media/header/flying.jpg);
			background-size: cover;
			background-position: center right;}

.headerhome h1 {
			font-size: 3em;
			letter-spacing:0.15em;
			line-height:1.5em;}
			
.headerhome h2 {
			font-size: 2em;
			line-height:1.5em;}
			
.headerhome h3 {
			font-size: 1.5em;
			line-height:1.5em;
			text-align:center;}

/* ------------------------- Footer ------------------------- */
footer {	width:100%;
			margin:0px;
			padding: 20px;
			text-align:center;
			background-color:#87CEFA}
			
footer h1 {	font-size: 2em;
			line-height:1.25em;}

footer a {	color: #000080;}

footer img {height: 100px;}
			
/* ------------------------- Section ------------------------- */
div.section {				margin: 30px 0px;
							padding: 0px;
							background-color:white;
							text-align:left;}

/* ------------------------- Two-Column ------------------------- */

table.twocolumn {			width:100%;
							margin: 30px 0px;
							padding: 0px;
							vertical-align: top;}
table.twocolumn tr{			vertical-align: top;
							margin:0px;
							padding:0px;}
table.twocolumn td {		width:50%;
							margin: 0px;
							padding: 15px 30px;}
table.twocolumn img {		object-fit: contain;
							width: 100%;
							height: auto;
							max-height:1000px;
							margin:0px;
							padding:0px;}
table.twocolumn iframe {	width: 100%;
							height: calc(75vh);
							min-height:300px;
							max-height:500px;
							border:none;}
table.twocolumn h2 {		text-align:left;
							margin:0px;}

/* ------------------------- Items With Small Side Image ------------------------- */

div.smallleft {				width:100%;
							margin: 30px 0px;
							padding: 0px;}
div.smallleft h2 {			margin-top:0px;}
div.smallleft img {			float:left;
							width:200px;
							height:auto;
							margin:0px;
							padding: 0px 30px 20px 0px;}
div.smallleft img.right {	float: right;
							padding: 0px 0px 20px 30px;}

/* ------------------------- Items With QR Left Image ------------------------- */
							
table.QR {					width:100%;
							margin: 30px 0px;
							padding: 0px;
							border-spacing: 0px 10px;
							vertical-align:top;}

table.QR tr {				margin: 0px;
							padding:0px;
							vertical-align:top;}
							
table.QR td {				width:auto;
							margin:0px;
							padding:10px;}

table img {					width: 150px;}
table h3 {					margin-top: 0px;}

/* ------------------------- Calendar of Future Events ------------------------- */

table.calendar {			width:100%;
							margin: 30px 0px;
							padding: 0px;
							border-spacing: 0px 10px;
							vertical-align:top;}

table.calendar tr {			margin: 0px;
							padding:0px;
							vertical-align:center;
							background-color:white;}
							
table.calendar td {			width:auto;
							margin:0px;
							padding:10px;}
							
table.calendar td:nth-child(1) {
							font-size:1.25em;
							font-weight:bold;
							line-height:1em;
							letter-spacing:0.1em;
							text-transform:uppercase;
							text-align:center;
							color:white;
							background-color: #000080;}

table.calendar .postmeeting {background-color:#87CEFAAA;}

table.calendar .airshow     {background-color:#98FB98AA;}

table.calendar h2 {			margin:0px;
							padding: 0px;
							font-size: 1em;
							line-height: 1.5em;
							text-transform:uppercase;
							color:black;}

table.calendar p {			margin:0px;
							padding:0px;}

/* ------------------------- Image Gallery with Fullscreen Modal ------------------------- */

/* General Image Thumbnail */
img.thumbnail {				width:6em;
							height:6em;
							margin:0px;
							padding: 3px;
							object-fit:cover;}
img.thumbnail:hover {		cursor:pointer;}

/* Gallery Figures (Images with Captions) */					
.gallery {					margin:0px;
							padding:0px;}
.gallery figure {			display:inline-block;
							margin:0px;
							padding:0px;
							line-height:0px;}
.gallery figure figcaption {display:none;
							height:0px;
							margin:0px;
							padding:0px;}
							
/* Gallery Modals (Replace Gallery Figure Content into Modal Content using JavaScript) */					
#FullImageView {			display:none;
							position:fixed;
							top: 0;
							left: 0;
							z-index: 999;
							width:100%;
							height:100%;
							margin:0px;
							padding:0px;
							text-align:center;
							background-color: #000000DD;}
#FullImage {				margin:0px;
							padding: 0px;
							max-width:100%;
							max-height:100%;
							position: absolute;
							top: 50%;
							left: 50%;
							transform: translate(-50%, -50%);
							object-fit:contain;}
#FullCaption {				position:absolute;
							bottom:0px;
							width:100%;
							height:auto;
							margin:0px;
							padding:15px 25px 15px 15px;
							font-size: 1em;
							font-style:normal;
							letter-spacing: 0.1em;
							line-height:1.25em;
							color:white;
							background-color:#000000CC;}
#FullCaption .attribution {	display:block;
							font-size: 0.75em;}
#FullCaption a {			font-style:italic;
							text-decoration:none;
							color:white;}
#CloseButton {				position:absolute;
							top:0px;
							right:20px;
							width:auto;
							height:auto;
							margin:0px;
							padding:15px;
							font-size: 1.5em;
							color:white;
							text-shadow: 0px 0px 3px #000000;
							-webkit-text-stroke-width: 0.2px; /* Sets the outline width */
							-webkit-text-stroke-color: black; /* Sets the outline color */
							cursor:pointer;
							user-select: none;}

/* ------------------------- Fullwidth Image Slideshow ------------------------- */
/* Slideshow container */
.slideshow-container {		width:100%;
							position: relative;
							top:0;
							margin: auto;}

.mySlides {					width:100%;
							height:300px;
							background-color:#000000;}
							
.mySlides img{				width:100%;
							height:100%;
							object-fit:contain;}
							
/* Next & previous buttons */
.prev, .next {				cursor: pointer;
							position: absolute;
							top: 50%;
							width: auto;
							padding: 16px;
							margin-top: -22px;
							color: white;
							font-weight: bold;
							font-size: 18px;
							transition: 0.6s ease;
							border-radius: 0 3px 3px 0;
							user-select: none;}

/* Position the "next button" to the right */
.next {						right: 0;
							border-radius: 3px 0 0 3px;}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {	background-color: rgba(0,0,0,0.8);}

/* Caption text */
.text {						color: #f2f2f2;
							font-size: 15px;
							margin:0px;
							padding: 0px;
							position: absolute;
							bottom: 0px;
							width: 100%;
							text-align: center;
							background-color:#00000075;}

/* Number text (1/3 etc) */
.numbertext {				color: #f2f2f2;
							font-size: 12px;
							padding: 10px;
							position: absolute;
							top: 0;}

/* The dots/bullets/indicators */
.dot {						cursor: pointer;
							height: 10px;
							width: 10px;
							margin: 0px;
							padding:0px;
							background-color: #bbb;
							border-radius: 50%;
							display: inline-block;
							transition: background-color 0.6s ease;}

.active, .dot:hover {		background-color: #717171;}

/* Fading animation */
.fade {						animation-name: fade;
							animation-duration: 1.5s;}

@keyframes fade { from {opacity: .4} to {opacity: 1}}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
.prev, .next,.text {		font-size: 11px}
}

/* ------------------------- Responsive ------------------------- */
@media screen and (max-width: 900px) {
main {					width:100%;
						margin:0px;
						padding:50px;}

.headerhome {			padding: 30px;}

table.twocolumn td {	display:block;
						width:100%;}

.backToTop {			display:inline-block;}

}

@media screen and (max-width: 723px) {
.headerhome {			min-height:calc(100vh - 8.5em);}
}

@media screen and (max-width: 500px) {
			
main {					width:100%;
						margin:0px;
						padding:20px;}

main h1, header h1, .headerhome h1 {	
						font-size: 2em;
						line-height:1.25em;}

main h2, header h2, .headerhome h2 {	
						font-size: 1.5em;}

header .studentsbreak {	display:block;}

				
div.smallleft {			width:100%;
						margin: 30px 0px;
						padding: 10px;}
						
div.smallleft img, div.smallleft img.right {
						width:100%;
						height:auto;
						margin:0px;
						padding:10px 0px;}

table.calendar td {		padding:5px;}

table.QR td {			display:block;}