@charset "utf-8";
/* CSS Document */

@font-face {
	font-family: 'Oxygen-Light';
	src:url(../fonts/Oxygen-Light.ttf);
}
@font-face {
	font-family: 'Spiff-Regular';
	src: url(../fonts/Spiff-Regular.otf);
	src: url(../fonts/Spiff-Regular.eot);
	src: url(../fonts/Spiff-Regular.woff) format('woff'), 
    url(../fonts/Spiff-Regular.ttf)  format('truetype'), 
	url(../fonts/Spiff-Regular.svg);
}
/*for older browsers*/
header, section, footer, aside, nav, main, article, figure, p {
    display: block; 
}
body, h1, h2, h3, h4, div, ul, li, p, header, main, img, section {
	margin: 0;
	padding:0;
}

html {
  height: 100%;/*for bottom of page footer*/
  box-sizing: border-box;/*for bottom of page footer*/
  overflow-y: scroll;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-tap-highlight-color: transparent;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
/*end of for bottom of page footer*/
body {
	background-color:rgb(177, 196, 216);
	font-family: 'Oxygen-Light', sans-serif;
	font-size:1.4em;
    color: rgb(0, 20, 49);
	/*For bottom of the page footer*/
	position: relative;
    margin: 0;
    padding-bottom: 2rem;
    min-height: 100%;
	/*end of for bottom of page footer*/
}
a {
	text-decoration:none;
	outline:none;
	color:inherit;
	font-weight:bolder;
}
a:visited, a:hover, a:active, a:focus {
	text-decoration:none;
}
button:active {
	outline:none;
}
a:hover {
	color: rgb(0,0,153);
}
p {
	padding:0px 10px 0px;
}
.dash {
	font-family: 'Oranienbaum', serif;
}
h1 {
	font-family: 'Oranienbaum', serif;
	font-weight:lighter;
	letter-spacing: .025em;
	word-spacing: 0.15em;
	font-size:4.2em;
	line-height:1em;
	padding-bottom:0.1em;
	text-align: center;
	color: rgb(177, 196, 216);
	text-shadow: 0.5px 0.5px 0.5px #0000CC;
}
.h1-space {
	letter-spacing:0.05em;
}
.fade {
	-webkit-animation-name: fade; 
    -webkit-animation-duration: 6s; 
	-webkit-animation-delay:2s;
    animation-name: fade;
    animation-duration: 6s;
    animation-delay: 2s;
    /*iteration*/
    -webkit-animation-iteration-count: 1; /* Safari 4.0 - 8.0 */
    animation: fade 1s;
    animation-iteration-count: 1;
}
@-webkit-keyframes fade {
    to {color:rgb(177, 196, 216);}
    from {color:rgb(255, 255, 255);}
}
@keyframes fade {
    to {color:rgb(177, 196, 216);}
    from {color:rgb(255, 255, 255);}
}
h2 {
	font-family: 'Oranienbaum', serif;
	font-weight:lighter;
	letter-spacing: .06em;
	word-spacing: 0.05em;
	color: rgba(0, 28, 69, 0.8);
	font-size:1.2em;
	padding-bottom:0.4em;
	padding-top:1em;
	font-weight:lighter;
	text-align: center;
}

.power {
	font-family:'Spiff-Regular', cursive;
	font-size:2.2em;
	line-height:1.2em;
	text-align:center;
	padding-top:0.5em;
	-ms-transform: rotate(345deg);
    -moz-transform: rotate(345deg);
    -webkit-transform: rotate(345deg);
    -o-transform: rotate(345deg);
}

.right {
	text-align:right;
	padding-right:16px;
}
#wrapper {
	display:flex;
	display: -webkit-flex;
	flex-flow: row wrap;
	-webkit-flex-flow: row wrap; 
	-webkit-justify-content: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	padding: 0px 18px;
}

header {
	background-color:rgb(253,253,253);
	 padding:40px 0px 20px;
	 width: 100%;/*need for IE*/
	 margin-top:20px;
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	
    -webkit-flex-direction: column;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-align-items: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	
	-webkit-justify-content: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;

}
header div {
	width:100%;/*need for IE*/
	/*------------------------------------------------------------------------------------------------*/
	/*display: -webkit-box; 
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;*/
	/*NB: DO NOT INCLUDE THE ABOVE FLEX STATEMENT OR IE WILL NOT DISPLAY HEADER IMG CORRECTLY IN PHONES*/
	/*Use only in media queries for larger screens to center the image*/
	/*-------------------------------------------------------------------------------------------------*/
	
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-align-items: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	
	-webkit-justify-content: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}
header img {
	width:100%;
}
main {
	padding: 0px 10px;
	margin-bottom:20px; /*because footer has been taken out of the flow*/
	max-width:1200px;
	width: 100%;/*this is to keep the main from expanding out in the IE phone*/
    background-color:rgb(253,253,253);
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	
    -webkit-flex-direction: row;
	-ms-flex-direction: row;
	flex-direction: row;
	flex-flow: row wrap;
	-webkit-flex-flow: row wrap; 
	
	-webkit-justify-content: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}
/*------------section-------------*/

section {
	max-width:900px;
	padding:4px 4px 0px;
	margin: 6px;
	border-radius: 10px;
	-webkit-align-items: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	
	-webkit-justify-content: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	
	 -webkit-flex-direction: row;/*am trying this for IE10 still not working*/
	-ms-flex-direction: row;
	flex-direction: row;
	flex-flow: row nowrap;
	-webkit-flex-flow: row nowrap; 
	
}
section img {
	min-width: 500px;
	max-width:800px;
	width:100%;
	border-radius: 10px;
	padding: 1px 1px 1px;
	/*padding: 4px;*/
	/*border:3px solid rgb(177, 196, 216);*/
	/*border: 3px solid #CC0000;*/
}
.border-section {
	border-radius: 10px;
	border:3px solid rgb(177, 196, 216);
}
.section-wide {
	width:100%;
	max-width:1500px;
}
.section-flex {
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
 
	-webkit-justify-content: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	
  
}

/*-------------specs------------------------*/
.spec-section {
	width:100%;/*I need this for IE to work*/
	border-radius: 10px;
	border:3px solid rgb(177, 196, 216);
}
.spec{
	width:100%;
	padding-bottom:3px;
	padding-top:8px;
}
.spec-container {
	/*must keep this to keep it as the default row*/
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	margin:0;
	width: 100%;
	padding:0;
   
}

.spec-cell {
  float:left;/*for IE9*/
  width: 50%; 
  padding: 0.8em 0.6em;
  background-color:rgb(177, 196, 216);
  border:2px solid rgb(255,255,255);
  margin:0;
  font-size:0.8em;
}


/*---------------video---------------*/
.my-video{
	padding-top:20px;
	padding-bottom:20px;
	
}
.video-wrap {
    margin:auto;
	max-width: 800px;
	padding: 4px;
	border-radius: 10px;
	border:3px solid rgb(177, 196, 216);
}
.video-container {
	width:100%;
	position:relative;
	padding-bottom:56.25%;
	padding-top: 0px;
	height:0;
	overflow:hidden;
	border-radius: 10px;
}
.video-container iframe {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}
#player {
}
/*---------------------------------------------------------------------*/
footer {
	background-color:rgb(177, 196, 216);
	font-size: .75em;
	text-align:center;
  /*for bottom of the page footer*/
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	padding: 1rem;
	/*end for bottom of the page footer*/
}
footer a {
	font-weight:normal;
}
/*--------------------------------------------------------------------*/

@media screen and (min-width: 1200px) {
	
    main {
	    max-width:1600px;
		padding: 0px 80px;
    }
	header {
		max-width:1600px;
		padding:60px 0px 20px;
	}
	header div {
		/*NB: Do not use this for smaller sizes will distort in IE*/
		/*Need for centering img in larger screens*/
	display: -webkit-box; 
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	}
	header img {
		max-width:1200px;
	}
	section img {
	min-width:580px;/*for TV browser - this works up to 125% (the default size) but not bigger*/
	max-width: 800px;
}
}
@media screen and (max-width: 900px) {
	body {
		font-size:1.3em;
	}
	#wrapper {
		padding:0px 14px;
	}
	 main {
		 padding:0px 6px;
	 }
	section img {
	min-width: 340px;
    }
		header img {
		max-width:800px;
	}
}

@media screen and (max-width: 720px) {
	
	body {
		font-size:1.2em;
	}
	#wrapper {
		padding: 0px 10px;
	}
		header img {
		max-width:700px;
	}
	 main {
		 padding:0px 2px;
	 }
	section {
    -webkit-flex-direction: row;
	-ms-flex-direction: row;
	flex-direction: row;
	flex-flow: row wrap;
	-webkit-flex-flow: row wrap; 
	}
	section img {
	min-width: 300px;
	}
	
	.more {
		font-size:2em;
		line-height:1.2em;
	}
	header{
		 margin-top:6px;
		 border-top-left-radius:0px;
	     border-top-right-radius:0px;
	}
}
@media screen and (max-width: 500px) {
	body {
		font-size:1em;
	}
	p {
	padding:0px 4px 0px;
    }
		header img {
		max-width:480px;
	}
	section {
		margin:2px;
	}
	section img {
	min-width: 200px;
	}
	footer {
		padding: 1rem 0.5rem;
	}
}
@media screen and (max-width: 240px) {
	body {
		font-size:0.8em;
	}
	h1 {
		font-size:2em;
	}
		header img {
		max-width:200px;
	}
	section img {
	min-width: 100px;
	}

	#wrapper {
		padding: 0px 4px;
	}
}