/* ------- Menu ------*/
header.masthead {width:100%; margin: 0 auto 0 auto; background-color:#000000;}
header.masthead:before {content: ""; display: table; }
header.masthead:after {content: ""; display: table; clear: both;}


/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens */


/* End Menu*/

body {font-family: 'Source Sans Pro', sans-serif; background-color:#ffffff; margin: 0; padding: 0; font-weight:400;}
/*a:link {color:#000000; text-decoration:none;} 
a:visited {color:#000000; text-decoration:none;} 
a:hover {color:#009aff; text-decoration:none;} 
a:active {color:#009aff; text-decoration:none;}*/
h1 {font-family: 'Source Sans Pro', sans-serif; font-size: 34px; text-align: left; font-weight:normal; line-height:46px; color:#323232;}
p.graph {font-family: 'Source Sans Pro', sans-serif; font-size: 20px; text-align: left; font-weight:normal; line-height:36px;  color:#000000;}
p.caption {font-family: 'Source Sans Pro', sans-serif; font-size: 14px; text-align: left; font-weight:normal; line-height:20px;  color:#323232;}
h2 {font-family: 'Source Sans Pro', sans-serif; font-size: 50px; text-align: center; font-weight:normal;  color:#ffffff;}
h3 {font-family: 'Source Sans Pro', sans-serif; font-size: 18px; text-align: left; font-weight:normal;  color:#545454;}

h4 {font-family: 'Source Sans Pro', sans-serif; font-size: 36px; text-align: left; font-weight:normal; line-height:30px; color:#323232; margin:0px;}
h5 {font-family: 'Source Sans Pro', sans-serif; font-size: 20px; text-align: left; font-weight:normal; line-height:30px; color:#323232; margin:0px;}
p {font-family: 'Source Sans Pro', sans-serif; font-size: 17px; text-align: left; font-weight:normal; line-height:25px;  color:#323232;}
p.main {font-family: 'Source Sans Pro', sans-serif; font-size: 28px; text-align: left; font-weight:normal; line-height:32px;  color:#ffffff;}
p.smain {font-family: 'Source Sans Pro', sans-serif; font-size: 18px; text-align: left; font-weight:normal;  color:#ffffff;}

p.graph2 {font-family: 'Source Sans Pro', sans-serif; font-size:34px; text-align: left; font-weight:normal; color:#4a4a4a; line-height:44px; letter-spacing:0.6px;}
.box {float:left; width:55%; text-align:left; margin:1% 22% 0 23%; border-bottom:#95989a; border-bottom-width:1px; border-bottom-style:solid;}
p.storygraph {font-family: 'Source Sans Pro', sans-serif; font-size: 14px; font-weight: normal; text-align: left; line-height:20px; color: #545454;}
p.resources {font-family: 'Source Sans Pro', sans-serif; font-size: 16px; text-align: left; font-weight: normal;  color:#545454;}
p.caption {font-family: 'Source Sans Pro', sans-serif; font-size: 12px; font-weight: normal; text-align: left; line-height:16px; color: #545454;}
hr {display: block; margin: 7% 0; border-width: 1px; border-color:#989898;}
img {display: block; max-width: 100%; height: auto;}
.banner { background-image: url("https://chandra.harvard.edu/stellarev/images/banner.png"); /* The image used */
  background-color: #000000; /* Used if the image is unavailable */
  height: 800px; /* You must set a specified height */
	width:100%;
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Resize the background image to cover the entire container */
}
.resource {float:left; padding:50px 15px 15px 15px;}
img.resource {display: block; max-width: 100%; height: auto;}
#footer1 {padding:30px 10px 50px 50px; margin: 0 auto auto auto; background-color: #000000; border-top:solid; border-top-width:1px; border-top-color:#313131;}
.footer1_box {font-family: 'Source Sans Pro', sans-serif; width: 21% height: 50px; font-size:10px; background-color: #000000; color:#ffffff; display: inline-block; padding:5px; vertical-align: bottom; text-align:left; margin-top:20px; margin-right:4%;}
.social {height:50px; float:left; margin-left:10px;}
.embed-container {position: relative;  padding-bottom: 56.25%; margin-bottom:10%; height: 0; overflow: hidden; max-width: 100%;} 
.embed-container iframe, .embed-container object, .embed-container embed { 
position: absolute;  top: 0;  left: 0;  width: 100%;  height: 100%;  }
video {width:100%; max-width:650px; height:auto;}


@media only screen and (min-width: 991px) 
  and (max-width: 1366px) { 
h1 { font-size:90%;}
h2 { font-size:90%;}
h3 { font-size:90%;}
h4 { font-size:90%;}
h5 { font-size:90%;}
p { font-size:90%; margin-top:5%;}
p.graph { font-size:90%;}
p.graph2 {font-size:90%; line-height:23px; letter-spacing:0.2px;}
p.resources { font-size:90%;}
.panel {max-width: 50%; height: auto;}
p.storygraph { font-size:80%;}
p.smain { font-size:90%; line-height:90%;}
p.main { font-size:90%; line-height:90%;}
}
.sourcesanspro_regular
{
font-family: 'Source Sans Pro', sans-serif; color:#ffffff; margin: 0; padding: 0; font-weight:400;	
}
.sourcesanspro_bold
{
font-family: 'Source Sans Pro', sans-serif; color:#ffffff; margin: 0; padding: 0; font-weight:700;	
}

a.purpletag:link {color:#b620e0; text-decoration:none;} 
a.purpletag:visited {color:#b620e0; text-decoration:none;} 
a.purpletag:hover {color:#b620e0; text-decoration:none;} 
a.purpletag:active {color:#b620e0; text-decoration:none;}

a.whitetag:link {color:#ffffff; text-decoration:none;} 
a.whitetag:visited {color:#ffffff; text-decoration:none;} 
a.whitetag:hover {color:#ffffff; text-decoration:none;} 
a.whitetag:active {color:#ffffff; text-decoration:none;}

.gallerytitle
{font-family: 'Source Sans Pro', sans-serif;
	font-size:13px;
	font-weight:700;
	color:#000000;
	text-align:center;
}
.gallerydesc
{
	font-family: 'Source Sans Pro', sans-serif;
	font-size:13px;
	font-weight:400;
	color:#000000;
	text-align:center;
}
a.gallery:link {color:#b620e0; text-decoration:none;}


img.gallery {
    border: solid 5px transparent;
}
img.gallery:hover {
    border-color: #b620e0;
}
.posterdesc
{
	font-family: 'Source Sans Pro', sans-serif;
	font-size:13px;
	font-weight:400;
	color:#ffffff;
	text-align:left;
}

a.teacherguides:visited {color:#ffffff; text-decoration:none;}
a.teacherguides:link {color:#ffffff; text-decoration:none;}
a.teacherguides:hover {color:#ffffff; text-decoration:none;}
a.teacherguides:active {color:#ffffff; text-decoration:none;}

#myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: red;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
}

#myBtn:hover {
  background-color: #555;
}

.bolding
{
	
	font-weight:700;

}


	/* for desktops */
@media only screen and (min-width: 1367px) { 
body {
    background-color: lightblue;
  }
}

/* for laptops */
@media only screen and (min-width: 991px) and (max-width: 1366px) {
	body {
    background-color: yellow;
  }
} 

/* for large tablets */
@media only screen and (min-width: 769px) and (max-width: 990px) {
	body {
    background-color: mediumpurple;
  }

} 

/* for smaller tablets */
@media only screen and (min-width: 481px) and (max-width: 768px) { 
	body {
    background-color: goldenrod;
  }
} 

/* for cellphones */
@media only screen and (max-width: 480px) { 
body {
    background-color: azure;
  }


}