body{
font-family: 'Cormorant Garamond', serif;
margin: 0;
background-image: url("/images/background.png");
background-repeat: repeat;
background-position: top left;
}

main{width: 1240px;
min-height: 400px;
color: #000;
margin: 0 auto;
padding: 10px;
}

footer {max-width:1240px;background-color: #000; color: lightgrey; display: -webkit-flex;display: flex;-webkit-flex-direction: row;flex-direction: row; margin: 0 auto;padding: 10px;flex-wrap: wrap;justify-content: space-between;align-items: center;}
footer ul {list-style-type: none;margin-left: -15px;}
span { font-weight: 800; }

nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+11,000000+11,000000+14,000000+51,000000+100&0+0,0+1,0.65+26,0.65+26 */
background: -moz-linear-gradient(left,  rgba(0,0,0,0) 0%, rgba(0,0,0,0) 1%, rgba(0,0,0,0.26) 11%, rgba(0,0,0,0.34) 14%, rgba(0,0,0,0.65) 26%, rgba(0,0,0,0.65) 51%, rgba(0,0,0,0.65) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 1%,rgba(0,0,0,0.26) 11%,rgba(0,0,0,0.34) 14%,rgba(0,0,0,0.65) 26%,rgba(0,0,0,0.65) 51%,rgba(0,0,0,0.65) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 1%,rgba(0,0,0,0.26) 11%,rgba(0,0,0,0.34) 14%,rgba(0,0,0,0.65) 26%,rgba(0,0,0,0.65) 51%,rgba(0,0,0,0.65) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=1 ); /* IE6-9 */;
display: flex;
justify-content: flex-end;
border-bottom: 2px solid grey;
border-top: 2px solid grey;
}

nav li {
    flex-direction: row-reverse;
}

nav li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

nav li a:hover {
    background-color: #666;
}

img{
	width:100%;
	height: auto;
}


h1, h2{
	font-size: 2em;
	font-weight: 800;
	color: #5492A4;
}

h3{
	font-size: 2em;
	font-weight: 800;
	color: lightblue;
	text-align: middle;
}

h3::first-letter { 
    font-size: 120%;
    color: #5492A4;
}
 
p{
	font-size: 1.6em;
}

ul {
	font-size: 1.6em;
	font-weight: 500;
}

hr {
	border-top: dotted #ADD8E6 2px;
	max-width: 100px;
	margin: 0 auto;
}

figcaption{font-size: .9em; text-align: right; font-style: italic;}

.mainPageVideoHolder{
border: 20px #999 solid;
max-width: 640px;
height: 360px;
margin: 0 auto; 
}

.jumbotronMain{
 width: 100%;
 margin: 0 auto;
}

.titleHeader{
background-color:/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#1e5799+0,7db9e8+100&1+0,1+62,0.7+68,0+100;Blue+to+Transparent+Sharp */
background: -moz-linear-gradient(top,  rgba(30,87,153,1) 0%, rgba(89,148,202,1) 62%, rgba(95,154,207,0.7) 68%, rgba(125,185,232,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(30,87,153,1) 0%,rgba(89,148,202,1) 62%,rgba(95,154,207,0.7) 68%,rgba(125,185,232,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(30,87,153,1) 0%,rgba(89,148,202,1) 62%,rgba(95,154,207,0.7) 68%,rgba(125,185,232,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#007db9e8',GradientType=0 ); /* IE6-9 */ ;
}

.titleHeader h1{
line-height: 110px;
background-color: hsla(194, 80%, 91%, 0.43);
position: absolute;
top: 17%;
left: 4%;
font-size: 6em;
max-width: 86%;
color: #000;
text-align: center;
padding: 20px;
}


@media screen and (max-width: 480px) {
    .titleHeader h1 {display: none;}
    nav ul {flex-direction: column;}
}