/* Colors:
 375d81 body and nav-container  (primary blue)
 587a9b medium light blue
 88a3bd lighter light blue - highlight containers  - links hover
 E4ECF3 very light blue - for dropdown text conatiners
 22476c	medium dark blue - footer, links
 0d2f51	darker dark blue
 fffcfe content container
 565656 dark text
 e4e4e4 hr and borders
 004a8c rgba(00,74,140,1)- highlight containers (inner shadows)
 00c0f3 bright blue text (also for h3, h4)  - inline links
 d0a010 gold highlight
 00c0f3 blue highlight
 03a9f4 bright blue  (forum links hover)

Fonts:
 "Josefin Sans" - all headers ( 100, 300, 400, 600 )
 "Tangerine" - cursive script ( 400, 700 )
 'Marck Script' - LP header text ( 100, 400 )
 'Teco' - Main Nav links (very narrow) ( 300 )
 'Roboto' - text (300)
*/

/* border: 1px solid #000000; */
/***** RESPONSIVE BASE *******/

 html {font-size: 62.5%; /* 1rem = 10px */
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   font-smoothing: antialiased;
 }

 /* Firefox specific rule to reduce heavy weight */
@-moz-document url-prefix() {
  body {
    font-weight: lighter !important;
  }
}
 body { margin: 0; padding: 0; /* Fill entire viewport */
	background-color: #375d81; color: #565656; text-decoration: none; text-align: center; }

/****** Resets *******/
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

video { /* Does not work with mediaelment player. */
  width: 100% !important;
  height: auto !important;
}
/****** mediaelment player *******/
.mejs-overlay-loading { display: none; } /* hide loading-animation gif in mediaelment player when dragging playbar.*/
/* Remove big button */
.mejs-overlay-button {display: none;}
/* Remove dotted line around audio when played. */
:focus { outline: 0; }
img, a img { -ms-interpolation-mode: bicubic;
    max-width: 100%; height: auto; border: none; outline: none; }
hr { width: 90%; border:none; border-top: 1px solid #e4e4e4; margin-bottom: 20px;
}


/****** FONTS *******/
/* josefin/josefin-sans-regular - HEADERS */
@font-face {
  font-family: 'Josefin Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/josefin/josefin-sans-v9-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Josefin Sans'), local('JosefinSans'),
       url('../fonts/josefin/josefin-sans-v9-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/josefin/josefin-sans-v9-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/josefin/josefin-sans-v9-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/josefin/josefin-sans-v9-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/josefin/josefin-sans-v9-latin-regular.svg#JosefinSans') format('svg'); /* Legacy iOS */
}
/* tangerine-700 - SCRIPT */
@font-face {
  font-family: 'Tangerine';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/tangerine/tangerine-v7-latin-700.eot'); /* IE9 Compat Modes */
  src: local('Tangerine Bold'), local('Tangerine-Bold'),
       url('../fonts/tangerine/tangerine-v7-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/tangerine/tangerine-v7-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/tangerine/tangerine-v7-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../fonts/tangerine/tangerine-v7-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/tangerine/tangerine-v7-latin-700.svg#Tangerine') format('svg'); /* Legacy iOS */
}
/* roboto-300 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/roboto-v18-latin-300.eot'); /* IE9 Compat Modes */
  src: local('Roboto Light'), local('Roboto-Light'),
       url('../fonts/roboto-v18-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-v18-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-v18-latin-300.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-v18-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-v18-latin-300.svg#Roboto') format('svg'); /* Legacy iOS */
}

/* roboto-300italic - latin */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 300;
  src: url('../fonts/roboto-v18-latin-300italic.eot'); /* IE9 Compat Modes */
  src: local('Roboto Light Italic'), local('Roboto-LightItalic'),
       url('../fonts/roboto-v18-latin-300italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-v18-latin-300italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-v18-latin-300italic.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-v18-latin-300italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-v18-latin-300italic.svg#Roboto') format('svg'); /* Legacy iOS */
}

/* roboto-regular - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/roboto-v18-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Roboto'), local('Roboto-Regular'),
       url('../fonts/roboto-v18-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-v18-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-v18-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-v18-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-v18-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
}

/* roboto-italic - latin */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/roboto-v18-latin-italic.eot'); /* IE9 Compat Modes */
  src: local('Roboto Italic'), local('Roboto-Italic'),
       url('../fonts/roboto-v18-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-v18-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-v18-latin-italic.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-v18-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-v18-latin-italic.svg#Roboto') format('svg'); /* Legacy iOS */
}

/* roboto-500 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/roboto-v18-latin-500.eot'); /* IE9 Compat Modes */
  src: local('Roboto Medium'), local('Roboto-Medium'),
       url('../fonts/roboto-v18-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-v18-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-v18-latin-500.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-v18-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-v18-latin-500.svg#Roboto') format('svg'); /* Legacy iOS */
}

/* roboto-500italic - latin */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 500;
  src: url('../fonts/roboto-v18-latin-500italic.eot'); /* IE9 Compat Modes */
  src: local('Roboto Medium Italic'), local('Roboto-MediumItalic'),
       url('../fonts/roboto-v18-latin-500italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-v18-latin-500italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-v18-latin-500italic.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-v18-latin-500italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-v18-latin-500italic.svg#Roboto') format('svg'); /* Legacy iOS */
}

/* roboto-700 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/roboto-v18-latin-700.eot'); /* IE9 Compat Modes */
  src: local('Roboto Bold'), local('Roboto-Bold'),
       url('../fonts/roboto-v18-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-v18-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-v18-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-v18-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-v18-latin-700.svg#Roboto') format('svg'); /* Legacy iOS */
}

/* roboto-700italic - latin */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 700;
  src: url('../fonts/roboto-v18-latin-700italic.eot'); /* IE9 Compat Modes */
  src: local('Roboto Bold Italic'), local('Roboto-BoldItalic'),
       url('../fonts/roboto-v18-latin-700italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-v18-latin-700italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-v18-latin-700italic.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-v18-latin-700italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-v18-latin-700italic.svg#Roboto') format('svg'); /* Legacy iOS */
}

H1, H2, H3, H4, H5 { font-family: "Josefin Sans", sans-serif; font-weight: 400; letter-spacing: 0.1em; color: #343434; text-shadow: none; }
H1 { font-size: 28px; font-size: 2.8rem; line-height: 1.42; text-align: center; margin: 20px 40px; }
H2 { font-size: 26px; font-size: 2.6rem; line-height: 1.4; text-align: center; margin: 20px 40px; }
H3 { font-size: 23px; font-size: 2.3rem; line-height: 1.12; text-align: left; margin-top: 40px; margin-left: 40px; color: #00c0f3; }
H4 { font-size: 20px; font-size: 2.0rem; line-height: 1.3; text-align: left; margin-top: 30px; margin-left: 60px; margin-bottom: 0px; color: #00c0f3; }
H5 { font-size: 18px; font-size: 1.8rem; line-height: 1.3; text-align: left; margin: 10px 60px 20px 60px; color: #00c0f3; }
/* tangerine-700 - SCRIPT */
.tangerine-36, .tangerine-30, .tangerine-24 { font-family: "Tangerine", cursive, serif; font-weight: 700; margin: 0px; text-align: center; }
.tangerine-36 { font-size: 36px; font-size: 3.6rem; line-height: 1.0; }
.tangerine-30 { font-size: 30px; font-size: 3.0rem; line-height: 1.2; }
.tangerine-24 { font-size: 24px; font-size: 2.4rem; line-height: 1.4; }
p { font-family: Roboto, "Century Gothic", Arial, Helvetica, sans-serif; font-weight: 300; font-size: 15px; font-size: 1.5rem; line-height: 1.56; letter-spacing: 0.09em; text-align: left; margin: 10px 60px 20px 60px; color: #565656; }
.leftindent { text-align: left; margin-left: 8%; margin-right: 8%; }
.leftindentmore { text-align: left; margin-left: 10%; margin-right: 8%; }
.note { font-size: 14px; font-size: 1.4rem; line-height: 1.5; letter-spacing: 0.1em; text-align: center; }
.noteleft { font-size: 14px; font-size: 1.4rem; line-height: 1.5; letter-spacing: 0.1em; text-align: left; margin-right: 10%; margin-left: 10%; }
.noteleft2 { font-size: 13px; font-size: 1.3rem; letter-spacing: 0.1em; text-align: left; margin-right: 10px; margin-left: 10px; text-shadow: none; }
.noteleftmore { font-size: 14px; font-size: 1.4rem; line-height: 1.5; letter-spacing: 0.1em; text-align: left; margin-right: 10%; margin-left: 12%; }
.note-mini { font-size: 12px; font-size: 1.2rem; line-height: 1.5; letter-spacing: 0.1em; text-align: center;}
.pic { font-size: 13px; font-size: 1.3rem; text-align: center; letter-spacing: 0.1em; margin-right: 0%; margin-left: 0%;}
.thirteen { font-size: 13px; font-size: 1.3rem; }
.twelve { font-size: 12px; font-size: 1.2rem; }
.eleven { font-size: 11px; font-size: 1.1rem; }
.copyright { font-size: 12px; font-size: 1.2rem; line-height: 1.5; text-align: center;}
.center { text-align: center; margin-left: 0; margin-right: 0;}
.left { text-align: left; margin-left: 5%; margin-right: 5%; }
.bold { font-weight: 500; }
.italic { font-style: italic; }
.red { color: #f00000; }
.orange { color: #ff7e00; }
.gold { color: #d0a010; }
.blue { color: #00c0f3; }
.blue-shadow { color: #00c0f3; text-shadow: 1px 1px 1px rgba(0, 0, 0, 1); }
.supperscript, .superscript { font-size: 10px; font-size: 1.0rem; font-weight: 400; line-height: 1.0; vertical-align: super; }
.subscript { font-size: 10px; font-size: 1.0rem; vertical-align: sub; }
.subscript-h1 { font-size: 10px; font-size: 2.0rem; vertical-align: sub; }
.subscript-h3 { font-size: 10px; font-size: 1.8rem; vertical-align: sub; }
.twenty { font-size: 20px; font-size: 2.0rem; }
.colorbar { background-image: url(../Images/color-bar-2.jpg); height: 2px; font-size: 0px; overflow:hidden; background-position: center 0; margin: 20px 10%; }

/* Use for vertical space. */
.v-margin { width: 100%; min-height: 40px; }

 /* Inline Link colors for white background. */
a:link {color: #587a9b; font-weight: 500; text-decoration: none; }
a:visited {color: #587a9b; text-decoration: none; }
a:hover, a:focus {color: #88a3bd; text-decoration: none; }
a:active {color: #22476c; text-decoration: none; }
.container-links-400 { margin: 30px auto; padding: 26px 2px; max-width: 500px; min-width: 280px; height: auto; background-color: #fffcfe;
	-webkit-box-shadow: inset 0px 0px 10px 2px rgba(00,74,140,1);
-moz-box-shadow: inset 0px 0px 10px 2px rgba(00,74,140,1);
box-shadow: inset 0px 0px 10px 2px rgba(00,74,140,1);
border-radius: 3px 3px 3px 3px;
-moz-border-radius: 3px 3px 3px 3px;
-webkit-border-radius: 3px 3px 3px 3px;
	border: none;
font-family: "Josefin Sans", sans-serif; letter-spacing: 0.1em; color: #343434;
font-size: 16px; font-size: 1.6rem; text-decoration: none; text-align: center; line-height: 1.4; }
/* Clearfix */
.clearfix:after { content: "."; display: block; height: 0; visibility: hidden; clear: both; }
/* for mac IE */
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */


  /* *******LISTS******* */

  /* Use ul list class to not interefere with mega menu for now - or fix it. */
  ul.lp-list { margin-left: 0; padding-left: 20px; }
  ul.lp-list li { font-family: Roboto, "Century Gothic", Arial, Helvetica, sans-serif; font-weight: 300; font-size: 15px; font-size: 1.5rem; line-height: 1.52; letter-spacing: 0.09em; text-align: left; margin: 10px 0; color: #565656;
  list-style: disc outside;
  padding-left: 0px; }

  /* *******CENTERED CONTAINERS******* */

.container-center-500, .container-center-600, .container-center-700, .container-center-800, .container-center-960{
	-webkit-box-shadow: inset 0px 0px 10px 2px rgba(00,74,140,1);
-moz-box-shadow: inset 0px 0px 10px 2px rgba(00,74,140,1);
box-shadow: inset 0px 0px 10px 2px rgba(00,74,140,1);
border-radius: 3px 3px 3px 3px;
-moz-border-radius: 3px 3px 3px 3px;
-webkit-border-radius: 3px 3px 3px 3px;
	padding: 10px;
	height: auto;
	margin: 20px auto;
	text-align: center;
  }
.container-center-500 { max-width: 500px; width: 100%; }
.container-center-600 { max-width: 600px; width: 100%; }
.container-center-700 { max-width: 700px; width: 100%; }
.container-center-800 { max-width: 800px; width: 100%; }
.container-center-960 { max-width: 960px; width: 100%; }
/* content-container-hidden used on home page animation */
.content-container, .content-container-under-nav, .content-container-hidden, .banner-container {
position: relative; margin: 20px auto; width: 90%; height: auto; background-color: #fffcfe; border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.75); -webkit-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.75); -moz-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.75);
} /* Make width 80% above 1280px. Using max-width screws up targets in FF.*/
/* Full width sections. Basic page. */
.content-container { padding: 20px 5% 20px 5%; /* Reduce left-right % in media (Make no less than 20px to match 20px margin of containers.) */
}
/* Content-container under 60px Nav bar. */
.content-container-under-nav {
	margin: 60px auto 20px auto;
	padding: 20px 5% 20px 5%; /* Reduce left-right % in media (Make no less than 20px to match 20px margin of containers.) */
}

/* Target Links in a page when needing the target to apear below the 60px nav bar */
/* Example <a id="target_name" class="target-margin"></a> */
.target-margin {
	padding-top: 70px;
}

  /* Full width section. Use to nest columns when more than one row is needed, or if using floats */
  .content-container-inline { /* Use with clearfix if using floats or flex containers. */
  	position: relative;
  	width: 100%;
  	padding-top: 0px;
}

/* Content Flex containers */
.content-container-flex {
	margin: auto; max-width: 1000px; width: 85%;
	  -js-display: flex;		/* Use flexability.js for IE 8,9 */
  display: -moz-flex;     	/* Older FF (div width is required or box colapses.) */
  display: -webkit-flex;    /* NEW - Chrome */
  display: -webkit-box;     /* Safari */
  display: -ms-flex;      	/* IE 10 */
  display: -o-flex;      	/* Old Opera */
  display: -ms-flexbox;		/* TWEENER - IE 10 */
  display: flex;            /* Spec - Opera 12.1, Firefox 20+ IE 11 */
  -webkit-box-orient: horizontal;
   -webkit-box-direction: normal;
  -webkit-flex-flow: row no-wrap; /* Safari 6.1+ */
       -o-flex-flow: row no-wrap;
      -ms-flex-flow: row no-wrap;
          flex-flow: row no-wrap;
  -webkit-justify-content: flex-start;
     -moz-justify-content: flex-start;
      		-ms-flex-pack: flex-start;
       -o-justify-content: flex-start;
         -webkit-box-pack: flex-start;
          justify-content: flex-start;
}
.flex-item {
/* Flex item shorthand: flex-grow | flex-shrink | flex-basis */
	width: 100%;
-webkit-box-flex: 0;
    -webkit-flex: 0 1 auto;
        -ms-flex: 0 1 auto;
            flex: 0 1 auto;
}
	/* Scale Margins */
.flex-item p, .flex-item h5, .flex-item .note { text-align: left; margin-left: 20px; margin-right: 20px; }
.flex-item ul.lp-list li { margin-left: 5px; margin-right: 5px; }
.flex-item h3 { margin-left: 10px; margin-right: 10px; }
.flex-item h4 { margin-left: 20px; margin-right: 10px; }
}

/* Two and three Columns - Nest in content-container-inline */
/* This is for small screens */

  /* This for MIN-WIDTH media, not MAX. */
  .content-container-50 {
  	display: block; /* For larger screens, change to 48% / 32%, and inline-block in MIN-WIDTH media. */
  	width: 100%;
  	padding: 10px; /* So full-size images/content does not colide. */
  }

  /* Currenty only used on lunar perigee page */
  .content-container-30 { /* Change to 50% and display block at 900px. */
	display: inline-block; vertical-align: top;
	/*IE6-7 Hack*/
  		zoom: 1;
  		*display: inline;
	width: 32%;
	}

  /* *******BANNERS******* */
  .banner-container { /* Styling defined above */
 	width: 100%; margin-top: 40px;
  }
  .column-50-banners {
	display: inline-block; vertical-align: top; /* Change to block in media. */
	/*IE6-7 Hack*/
  		zoom: 1;
  		*display: inline;
	width: 48%; height: auto; /* Change to 100% in media. */
	margin: 20px 0; /* Reduce margin height in media. */
  }
  /* For One banner*/
  .banner-container-one {
 width: 100%; height: auto; padding: 0 0 20px 0;
  }
  .banner {
	width: 100%; height: auto; /* Change to 100% in media. */
	margin: 20px auto; /* Reduce margin height in media. */
  }
	/* More to transfer from home css */

/* INLINE BLOCK CONTAINERS  */
.inline-block-right-400 { max-width: 400px; min-width: 400px; width: 100%; height: auto; display: inline-block;
/*IE6-7 Hack*/
  		zoom: 1;
  		*display: inline;
}

/* IMAGE CONTAINERS  */
.container-pic-float-left-100 { width: 100px; height: auto; float: left; padding-left: 5%; padding-right: 2px; padding-top: 5px; padding-bottom: 5px; text-align: center; }
.container-pic-float-left-100-top-pad { width: 100px; height: auto; float: left; margin: 8px 4px 12px 5%; text-align: center; }

.container-pic-float-right-200, .container-pic-float-right-250, .container-pic-float-right-300, .container-pic-float-right-350, .container-pic-float-right-400, .container-pic-float-right-450, .container-pic-float-right-500, .container-pic-float-right-600 { width: 100%; height: auto; float: right; margin: 5px 20px 10px 20px; }

.container-pic-float-right-200 { max-width: 200px; min-width: 200px; }
.container-pic-float-right-250 { max-width: 250px; min-width: 250px; }
.container-pic-float-right-300 { max-width: 300px; min-width: 300px; }
.container-pic-float-right-350 { max-width: 350px; min-width: 350px; }
.container-pic-float-right-400 { max-width: 400px; min-width: 400px; }
.container-pic-float-right-450 { max-width: 450px; min-width: 450px; }
.container-pic-float-right-500 { max-width: 500px; min-width: 500px; }
.container-pic-float-right-600 { max-width: 600px; min-width: 400px; }

.container-pic-float-left-200, .container-pic-float-left-250, .container-pic-float-left-300, .container-pic-float-left-350, .container-pic-float-left-400, .container-pic-float-left-450, .container-pic-float-left-500, .container-pic-float-left-600  { width: 100%; height: auto; float: left; margin: 5px 20px 10px 20px; }

.container-pic-float-left-200 { max-width: 200px; min-width: 200px; }
.container-pic-float-left-250 { max-width: 250px; min-width: 250px; }
.container-pic-float-left-300 { max-width: 300px; min-width: 300px; }
.container-pic-float-left-350 { max-width: 350px; min-width: 350px; }
.container-pic-float-left-400 { max-width: 400px; min-width: 400px; }
.container-pic-float-left-450 { max-width: 450px; min-width: 450px; }
.container-pic-float-left-500 { max-width: 500px; min-width: 500px; }
.container-pic-float-left-600 { max-width: 600px; min-width: 500px; }

/* Scale down and reduce y-offset at 900. */
.astro-glyphs { position: relative; top: -20px; max-width: 48px; width: 100%; height: auto; float:left; margin-right: 10px; }
/* NEWS CONTAINERS  */
.container-news-float-right-300 { max-width: 300px; min-width: 300px; width: 100%; height: auto; float: right; margin-left: 20px; padding: 0px 12px 5px 12px;
-webkit-box-shadow: inset 0px 0px 5px 2px rgba(00,74,140,1);
	-moz-box-shadow: inset 0px 0px 5px 2px rgba(00,74,140,1);
	box-shadow: inset 0px 0px 5px 2px rgba(00,74,140,1);
	border-radius: 3px 3px 3px 3px;
	-moz-border-radius: 3px 3px 3px 3px;
	-webkit-border-radius: 3px 3px 3px 3px;
	border: none;}
.container-news-float-right-300 p { margin: 10px 0; font-size: 12px; font-size: 1.2rem}

/* Add to image class to scale 2 images side by side
If using this, neeed to do something in media queries before they get too small. */
.scale-2-images img {
	display: inline-block;
	/*IE6-7 Hack*/
	zoom: 1;
	*display: inline;
	width: 48%; min-width: 200px; }

/* For astro charts and side text */
.container-chart-float-right-500 { min-width: 500px; width: 100%; max-width: 50%; height: auto; float: right; margin: 0 20px 0 0; padding: 0 5px 0 0; }
.chart-text-left { margin-left: 10px; }
.container-chart-float-left-500 { min-width: 500px; width: 100%; max-width: 50%; height: auto; float: left; margin: 0 20px 0 0; padding: 0 0 0 5px; }

/* For side by side pics. Flex wrap at 768px in media*/
.container-2-pics-flex {
  -js-display: flex;		/* Use flexability.js for IE 8,9 */
  display: -moz-flex;     	/* Older FF (width also required or colapse) */
  display: -webkit-flex;    /* NEW - Chrome */
  display: -webkit-box;     /* Safari */
  display: -ms-flex;      	/* IE 10 */
  display: -o-flex;      	/* Old Opera */
  display: flex;            /* Spec - Opera 12.1, Firefox 20+ IE 11 */
  -webkit-flex-flow: row no-wrap;
      -ms-flex-flow: row no-wrap;
          flex-flow: row no-wrap;
     -moz-flex-flow: row no-wrap;
       -o-flex-flow: row no-wrap;
  -webkit-justify-content: center;
     -moz-justify-content: center;
      		-ms-flex-pack: center;
       -o-justify-content: center;
         -webkit-box-pack: center;
          justify-content: center;
  max-width: 960px; width: 100%; min-width: 240px; height: auto; margin: auto; }

/* Use in container-N-pics-flex */
.container-pic { flex: 0 1 auto; max-width: 500px; width: 100%; height: auto; margin: 20px 10px;}

/* Bioharmonics Container */
  .container-inline-harmonics {
	background-color: #fffcfe;
	-webkit-box-shadow: inset 0px 0px 10px 2px rgba(00,74,140,1);
-moz-box-shadow: inset 0px 0px 10px 2px rgba(00,74,140,1);
box-shadow: inset 0px 0px 10px 2px rgba(00,74,140,1);
border-radius: 3px 3px 3px 3px;
-moz-border-radius: 3px 3px 3px 3px;
-webkit-border-radius: 3px 3px 3px 3px;
	border: none;
	max-width: 760px; min-width: 200px; height: auto; min-height: 160px; margin: 40px auto 20px auto; padding-top: 10px;
	}
	.container-inline-harmonics	p, note { color: #565656; margin-left: 20px; margin-right: 20px; text-align: left;}
	.pic-harmonic-planet { float: left; max-width: 125px; width: 100%; height: auto; margin: 15px 20px 20px 20px; }

/* Subscription-Email block */
.container-800-back {
    max-width: 80%; min-width: 200px; width: 100%; height: auto; margin: 40px auto 8px auto; padding: 20px;
    -webkit-box-shadow: inset 0px 0px 10px 2px rgba(00,74,140,1);
	-moz-box-shadow: inset 0px 0px 10px 2px rgba(00,74,140,1);
	box-shadow: inset 0px 0px 10px 2px rgba(00,74,140,1);
	border-radius: 3px 3px 3px 3px;
	-moz-border-radius: 3px 3px 3px 3px;
	-webkit-border-radius: 3px 3px 3px 3px;
	border: none; }

.container-subscription-text {
	display: inline-block;
		/*IE6-7 Hack*/
  		zoom: 1;
  		*display: inline;
	vertical-align: top;
	width:48%; height: auto; }
.container-subscription-button { margin: auto; }

.container-email-text {
	display: inline-block;
		/*IE6-7 Hack*/
  		zoom: 1;
  		*display: inline;
	vertical-align: top;
	width: 48%; height: auto; border-left:1px solid #777; }
.container-email-button { margin: auto; }

.container-subscription-text p, .container-email-text p { font-size: 13px; font-size: 1.3rem; line-height: 1.4; margin: 0px 20px 20px 10px;  }

.container-500 {max-width: 500px; width: 95%;  height: auto; margin: auto; }

/* *******FOOTER******* Used just on Home page for now */

.footer-container {
position: relative; margin: 0 auto; width: 100%; height: auto; background-color: #22476c; /* Darker Blue */
padding: 10px 20px 20px 20px; /* Not working right ???????? */
}
.footer-container h2, .footer-container h3, .footer-container h4, .footer-container p, .footer-container .note { color: #fffcfe; font-weight: 100;} /* Requires josefin 100 and 300 css. Switch to 300 for samll screens. CSS is added in home page css. */

.footer-container a:link {color: #88a3bd; font-weight: 500;}
.footer-container a:visited {color: #88a3bd;}
.footer-container a:hover, a:focus {color: #587a9b;}

/* Footer Social Media */
.social-media-center { margin: 10px auto; max-width: 530px; height: auto;  border: 1px solid transparent; }
/* .social-media-right { float: right; width: 450px; height: auto; } */
.social-media-txt { display: inline-block; margin: 10px 0; max-width: 240px; min-width: 240px; height: auto; font-family: Roboto, "Century Gothic", Arial, Helvetica, sans-serif; color: #fffcfe; font-weight: 300; font-size: 12px; font-size: 1.2rem; line-height: 1.4; letter-spacing: 0.1em; text-align: center; }
.social-media-icons { display: inline-block;  width: 280px; height: auto; }

ul.share-buttons{
  list-style: none;
  padding: 0;
}
ul.share-buttons li{
  display: inline; margin: 0 2px;
}

/* ****************EXTRAS******************* */

/* Button GLOBAL */

.Button, .Button-small, .Button-small-off { /* bottom border */
        -moz-box-shadow: 0px 1px 0px 0px #587a9b; /* medium light blue */
        -webkit-box-shadow: 0px 1px 0px 0px #587a9b;
        box-shadow: 0px 1px 0px 0px #587a9b;

        background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #bab1ba));
        background:-moz-linear-gradient(top, #ededed 5%, #bab1ba 100%);
        background:-webkit-linear-gradient(top, #ededed 5%, #bab1ba 100%);
        background:-o-linear-gradient(top, #ededed 5%, #bab1ba 100%);
        background:-ms-linear-gradient(top, #ededed 5%, #bab1ba 100%);
        background:linear-gradient(to bottom, #ededed 5%, #bab1ba 100%);
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#bab1ba',GradientType=0);

        background-color:#ededed;
        -moz-border-radius:6px;
        -webkit-border-radius:6px;
        border-radius:6px;
        border:1px solid #88a3bd; /* lighter light blue */
        display:inline-block; /* For side-by-side buttons. They will wrap by themselves due to fixed-width being defined by content. */
        /*IE6-7 Hack*/
  			zoom: 1;
  			*display: inline;
        color:#305e94 !important;  /* blue  */
        font-family: Roboto, "Century Gothic", Arial, Helvetica, sans-serif;
        font-size: 14px; font-size:1.4rem;
        line-height: 1.0;   /* added */
        font-weight:bold;
        padding:6px 24px;    /* button size */
        margin-bottom: 6px;
        text-decoration:none;
        text-shadow:0px 1px 0px #e1e2ed;
    }

.Button-small a:link { color:#305e94 !important; display: inline; }
.Button-small a:visited { color:#305e94 !important; }
.Button a:link { color:#305e94 !important; display: inline; }
.Button a:visited { color:#305e94 !important; }

    .Button-small, .Button-small-off { padding:2px 14px; }  /* button size */
    .Button-small-off { color: #0d2f51 !important; }  /* off color dark dark blue */
	.Button:hover, .Button-small:hover, .Button:focus, .Button-small:focus, Button-small-off  {

        background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #bab1ba), color-stop(1, #ededed));
        background:-moz-linear-gradient(top, #bab1ba 5%, #ededed 100%);
        background:-webkit-linear-gradient(top, #bab1ba 5%, #ededed 100%);
        background:-o-linear-gradient(top, #bab1ba 5%, #ededed 100%);
        background:-ms-linear-gradient(top, #bab1ba 5%, #ededed 100%);
        background:linear-gradient(to bottom, #bab1ba 5%, #ededed 100%);
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#bab1ba', endColorstr='#ededed',GradientType=0);

        background-color:#bab1ba;
    }
    .Button:active, .Button-small:active {
        position:relative;
        top:1px;
    }

   .dim { opacity: 0.3; } /* Add dim class to button-small class, if desired. */
/* *******MEDIA QUERIES******* */


/* ----------------1600 MIN ( Content Container for 1600 & 1680 )----------------
 		@media screen and (min-width: 1600px) {
  .content-container {
	width: 70%;	/* At 1600px 80% = 1280px
  }
      .banner-container {
 	width: 98%;
  }
}

/* ----------------1920 MIN ( Content Container)----------------
 		@media screen and (min-width: 1920px) {
  .content-container {
	width: 66%;	/* At 1920px 66% = 1280px
  }
}*/

/* ----------------1480 MIN ( Content Container)----------------*/
 		@media screen and (min-width: 1480px) {
 		.content-container {
	max-width: 1350px;	/* Images start wrapping */
  }
 }

/* ----------------1280----------------*/
		@media screen and (max-width: 1280px) {
 /* Wrap Banners and increase child column widths. */
  .banner-container {
	margin-top: 40px;
	padding: 20px 0; /* Add padding above and below banners. */
  }
  .column-50-banners {
 	display: block; width: 100%; /* Full width. */
 	margin: 20px 0; /* Margin only works between banners due to margin colapse. */
  }
}

/* ----------------1150 MIN ( min-width query for text margins )----------------*/
 		@media screen and (min-width: 1150px) {

	/* Create two columns for screens above 1150px. */
  .content-container-50 {
	display: inline-block; vertical-align: top;
	/*IE6-7 Hack*/
  		zoom: 1;
  		*display: inline;
	width: 48%;
  }
  .content-container-50 p {
	margin-left: 40px; /* 60px is normal */
  }
  .content-container-50 p.leftindent {
	margin-left: 60px; /* 8% is normal */
  }
  .content-container-50 p.pic, .content-container-50 p.noteleft{
	margin-left: 0; /* For pic & note text. */
  }
}

/* ----------------1150 MAX----------------*/
 		@media screen and (max-width: 1150px) {
   /* Reduce padding in full width containers. */
  .content-container, .content-container-under-nav {
	padding: 10px 20px 10px 20px; /* No less than 20px for sides. */
	}
}

/* ----------------960----------------*/
		@media screen and (max-width: 960px) {
/* Subscription-Email block */
	.container-800-back { max-width: 95%; }
	.container-subscription-text { display: block; width: 100%; }
	.container-email-text { display: block; width: 100%; margin-top: 20px; border-left: 0; }

	/* 600px images, remove floats and center */
  	.container-pic-float-right-600, .container-pic-float-left-600 { float: none; margin: auto; padding: 0; max-width: 500px; min-width: 200px; }
}

/* ----------------900----------------*/
		@media screen and (max-width: 900px) {
/* Scale Margins */
  	p, ul.lp-list li, h5, .note { text-align: left; margin-left: 20px; margin-right: 20px; }
  	h3 { margin-left: 10px; margin-right: 10px; }
  	h4 { margin-left: 20px; margin-right: 10px; }
  	.leftindent, .noteleft {margin-left: 34px; margin-right: 20px; }

  	.astro-glyphs { top: -5px; max-width: 30px; margin-right: 10px;}

/* 500px images, remove floats and center */
	.container-pic-float-left-500, .container-pic-float-right-500, .container-chart-float-right-500, .container-chart-float-left-500 { float: none; margin: auto; padding: 0; min-width: 200px; }

  .content-container-30 {
  	display: block; /* Change to 90% at 640px. */
  	width: 50%; margin: auto; }

   .content-container-flex {
	width: 95%; } /* Was 85%. */
}

		/* 860 */
		@media screen and (max-width: 860px) {
/* 450px images, remove floats and center */
  .container-pic-float-left-450, .container-pic-float-right-450 { float: none; margin: auto; padding: 0; min-width: 200px; }
}
		/* iPads */
		@media screen and (max-width: 768px) {
/* Scale Text */
  	p, ul.lp-list li { font-size: 14px; font-size: 1.4rem; } /*********** this was 1.3 - check for EGM pages */
  	h1 { font-size: 24px; font-size: 2.4rem; }
  	h2 { font-size: 20px; font-size: 2.0rem; }
  	h3 { font-size: 18px; font-size: 1.8rem; }
	h4 { font-size: 16px; font-size: 1.6rem;}
	h5 { font-size: 16px; font-size: 1.6rem;}

/* For side by side pics. */
.container-2-pics-flex {
  -webkit-flex-flow: row wrap;
      -ms-flex-flow: row wrap;
          flex-flow: row wrap;
     -moz-flex-flow: row wrap;
       -o-flex-flow: row wrap; }

          .content-container-flex {
-webkit-box-orient: horizontal;
   -webkit-box-direction: normal;
  -webkit-flex-flow: row wrap; /* Safari 6.1+ */
       -o-flex-flow: row wrap;
      -ms-flex-flow: row wrap;
          flex-flow: row wrap; }
}
		/* iPhone Plus Landscape */
		@media screen and (max-width: 736px) {
/* 400px images, remove floats and center */
  .container-pic-float-left-400, .container-pic-float-right-400 { float: none; margin: auto; padding: 0; min-width: 200px; }
  .footer-container h2 { font-size: 18px; font-size: 1.8rem; }
  .footer-container p, .footer-container note { font-size: 12px; font-size: 1.2rem; }
}

		@media screen and (max-width: 640px) {
/* 350px-300px images, remove floats and center */
  .container-pic-float-right-350, .container-pic-float-left-350, .container-pic-float-left-300, .container-pic-float-right-300, .container-news-float-right-300 { float: none; margin: auto; padding: 0; min-width: 200px; }
  h1 { margin: 10px 20px auto 20px; font-weight: 400;}
  h2 { margin: 20px 20px; }

  .container-news-float-right-300 { padding: 6px 12px; }
  .content-container-30 {
  	display: block; /* For larger screens, change to 48% / 32%, and inline-block in MIN-WIDTH media. */
  	width: 90%; margin: auto; }
}
/* ----------------568----------------*/
		/* At iPhone 5 Landscape */
		@media screen and (max-width: 568px) {
/* Reduce margin for left-aligned indented text */
.leftindent, .leftindentmore, .noteleft, .noteleftmore {margin: 10px 10% 20px 10%;}

/* 250px-200px images, remove floats and center */
	.container-pic-float-left-200, .container-pic-float-right-200, .container-pic-float-left-250, .container-pic-float-right-250 { float: none; margin: auto; padding: 0; min-width: 200px; }
/* Decrease front size and margins. */
	h1 { margin: 10px; font-size: 22px; font-size: 2.2rem; }
	h2 { margin: 10px; font-size: 18px; font-size: 1.8rem; }
	h3 { margin-left: 10px; }
	h4, h5 { margin-left: 10px; }
	p, ul.lp-list li { margin-left: 10px; margin-right: 10px; font-size: 12px; font-size: 1.2rem; }
  .footer-container h2 { font-size: 16px;  font-size: 1.6rem; font-weight: 300; /* Increase weight from 100 */ }
  .footer-container p, .footer-container note { font-size: 10px; font-size: 1.0rem; }
  .pic, .note, .noteleft, .copyright { font-size: 10px; font-size: 1.0rem; }
}

/*	iPhone-4 320 x 480
	iPhone-5 320 x 568
	iPhone-6 375 x 667
	iPhone-6 Plus 414 x 736
	Gallaxy Droid 360 x 640 */
#id { }