/*! HTML5 Boilerplate v5.2.0 | MIT License | https://html5boilerplate.com/ */

/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html {
    color: #222;
    font-size: 1em;
    line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   Browser Upgrade Prompt
   ========================================================================== */

.browserupgrade {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}











/* ==========================================================================
   Custom styles
   ========================================================================== */

/* NORMALIZE SIZING */
button, div, input, select, textarea {
	box-sizing: border-box;
}

/* DEBUG SCREENSIZES */
#mueller-indicators {
  display: none !important;
  visibility: hidden !important;
}

/* UNIVERSAL ELEMENTS */

body {
	/* #280e83 */
	background-color: rgba(0,0,204,1);
	background: #0000cc; /* Old Browsers */
	background: -webkit-linear-gradient(top,#0000cc,#000077); /*Safari 5.1-6*/
	background: -o-linear-gradient(top,#0000cc,#000077); /*Opera 11.1-12*/
	background: -moz-linear-gradient(top,#0000cc,#000077); /*Fx 3.6-15*/
	background: linear-gradient(to bottom, #0000cc, #000077); /*Standard*/
	color: #fff;
}

.box {
	display:block;
	background:#EFEFEF;
	color: #333;
	padding: 0.5em 1em;
	margin-bottom: 0.5em;
	-webkit-border-radius:2px;
	-moz-border-radius:2px;
	-ms-border-radius:2px;
	-o-border-radius:2px;
	border-radius:2px;
	overflow:hidden;
	*zoom:1
}

.reverse {
	background-color: #E9C885;
}

footer {
	text-align: center;
	font-size: 10px;
	padding: 20px; 
}

footer a {
	color: #fff;
}

h1 {
	margin: 0 0 -5px 0;
	padding: 0;
	color: rgba(104,104,104,1);
}

h2 {
	margin: 0;
	padding: 0;
	color: rgba(0,0,204,1);
}

h1, h2, h3, .h1 {
	font-family: 'Slabo 27px', serif;
}

/* SPECIFIC ELEMENTS */

#definitions div {
	margin-top: .65em;
	font-size: 1.2em; 
	color: #666;
}

#definitionsB {
	margin-top: .75em;
}

#definitionsB div {
	margin-top: .65em;
	font-size: 1.25em; 
	color: #666;
}

center.hilite {
	font-weight: bold;
	color: rgba(0,0,204,1);
	font-size: 1.5em;
	margin-top: .4em;
	font-family: 'Slabo 27px', serif;
}

div.form {
	margin-bottom: 1em;
}

div.formRight {
	border-bottom: 1px solid #333;
}

div.header {
	width: 100%;
	height: 300px;
	margin: 0 0 -50px 0;
	padding: 0;
	background-color: pink;
	background-image: url("../img/IMG_1348.JPG");
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-ms-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-position: bottom center;
	border-bottom: 1px solid #fff;
}

div.header img { 
	margin-top: 20px; 
	height: 205px;
	opacity: .7;
}

div.h1 {
	font-weight: bold;
	font-size: 1.45em;
	text-align: center;
	background-color: #222;
	color: lightblue;
}

div.nav {
	background-color: #222;
	color: #fff;
	text-align: center;
}

div.nav a {
	color: #FCCD5D;
	text-decoration: none;
}

div.ul {
	background-color: #999;
	color: #fff;
}

h3 {
	margin: 0;
	color: rgba(0,0,204,1);
}

h3.u {
	margin-bottom: 5px;
	padding-bottom: 3px;
	border-bottom: 1px dotted #999;
}

i.fa {
	color: rgba(0,0,204,1);
}

img.h1, img.h1b {
	float: left;
	margin-right: .5em;
	height: 70px;
}

input.submit {
	font-size: 1.8em;
	font-weight: bold;
	color: darkgreen;
	padding: 1.2em 0;
}

.reverse i.fa {
	/* color: #9F9FFF; */
}

i.fa-four {
	font-size: 2.25em;
	float: left;
	margin: 4px 2px 0 -8px;
}


#photos img {
	width: calc(50% - 10px);
	margin: 10px 10px 0 0;
	padding: 0;
}

#photos img:nth-child(2n){
	margin-right: 0;
}








/* ==========================================================================
   Display specific tweaks
   DEFAULT: 981px - 1249px
   ========================================================================== */

/* HIRES DESKTOP */
@media screen and (min-width: 1801px) and (max-width: 6000px){	
	#definitions div { font-size: 1em; }
	#definitionsB div { font-size: 1.11em; }
	div.header { height: 600px; }
	div.header center { margin-left: 1250px; }
	div.header img { margin-top: 60px; height: 420px; }
	div.logo img { height: 293px; margin: 20px 0; }
	div.nav { font-size: 1.5em; }
	img.h1, img.h1b { height: 90px; }
	img.h1 { visibility: collapse; display: none; }
	.padTop { margin-top: .5em; }
}

/* LARGE DESKTOP */
@media screen and (min-width: 1250px) and (max-width: 1800px){
	#definitionsB div { font-size: 1.3em; }
	div.header { height: 450px; }
	div.header center { margin-left: 890px; }
	div.header img { margin-top: 55px; height: 285px; }
	div.logo img { height: 350px; margin: 20px 0; }
	div.nav { font-size: 1.5em; }
	img.h1, img.h1b { height: 90px; }
	.padTop { margin-top: .5em; }
}

/* DEFAULT */
@media screen and (min-width: 981px) and (max-width: 1249px){
	div.header center { margin-left: 720px; }
	div.logo img { height: 270px; margin: 20px 0; }
	div.nav { font-size: 1.5em; }
	img.h1 { visibility: collapse; display: none; }
	.padTop { margin-top: .5em; }
}

/* TABLET PORTRAIT */
@media screen and (min-width: 768px) and (max-width: 980px){
	#definitions div { font-size: 1.55em; }
	#definitionsB div { font-size: 1.44em; }
	center.hilite { font-size: 1.2em; }
	div.header center { margin-left: 495px; }
	div.logo img { width: 100%; margin: 3.45em 0 3.5em 0; }
	img.h1 { visibility: collapse; display: none; }
	.padTop { margin-top: .5em; }
	#photos img { width: 100%; margin: 10px 0; }
}

/* HANDHELD LANDSCAPE */
@media screen and (min-width: 480px) and (max-width: 767px){
	#definitionsB { margin-top: 0; }
	center.hilite { font-size: 1.2em; margin: 1em 0; }
	div.header { height: 170px; }
	div.header center { margin-left: 335px; }
	div.header img { margin-top: 10px; height: 100px; }
	div.h1 { margin-bottom: .25em; }
	div.logo { visibility: collapse; display: none; }
	i.fa-four { margin: 2px 0 0 -5px; }
	img.h1 { float: right; height: 90px; margin: 0 0 0 1em; }
	img.h1b { height: 55px; }
	#photos img { width: 100%; margin: 10px 0; }
}

/* HANDHELD PORTRAIT */
@media screen and (min-width: 0px) and (max-width: 479px){
	#definitionsB { margin-top: 0; }
	div.h1 { margin-bottom: .25em; }
	div.logo img { width: 100%; }
	i.fa-four { font-size: 1em; margin: 0; float: none; }
	img.h1, img.h1b { visibility: collapse; display: none; }
	#photos img { width: 100%; margin: 10px 0; }
}