body { 
	background-color: white;
	width: 100%;
	font-family: 'Roboto', sans-serif;
	cursor: pointer;
	 overflow-x: hidden; //horizontal
	}

	h1{
	padding-left: 20px;
	color: black;
	font-size: 35pt;
	font-family: 'Exo 2', sans-serif;
	}

	h2{
	font-size: 20pt;
	color: black;
	padding-left: 20px;
	font-weight: bold;
	font-family: 'Exo 2', sans-serif;
	}

	h3{
	padding-left: 20px;
	font-weight: bold;
	color: black;
	font-size: 20pt;
	list-style-type: none;
font-family: 'Roboto', sans-serif;
	}


	h4{
	padding-left: 20px;
	font-weight: bold;
	color: black;
	font-size: 45pt;
	list-style-type: none;
font-family: 'Exo 2', sans-serif;
	}


	p{
	padding-left: 20px;
	padding-right: 20px;
	font-weight: normal;
	font-size: 16pt;
	color: black;
	text-align:left;
	font-family: 'Roboto', sans-serif;
	}

	/*a{*/
	/*color: #0045b5;*/
	/*text-decoration: none;*/
	/*}*/


	a:link{
  	color:black;
	text-decoration: underline;
	}

	a:visited{
    color:black;
  	text-decoration: underline;
	}

	a:hover{
 	color:blue;
  	text-decoration: underline;
	}

	a:focus{
   	color:black;
  	text-decoration: underline;
	}
	
	a:active{
    color:black;
   	text-decoration: underline;
	}


	hr {
    display: block;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    margin-left: auto;
    margin-right: auto;
    border-style: inset;
    border-width: 1px;
  
}

	img.logo{
	width: 100px;
	/*padding-left: 20px;*/
	}

	img.mainphoto{
	width: 100%;
	/*height:  70%;*/
	}

	.video{
	width: 100%;
	}

	img.photo{
/*	padding-left: 20px;	*/
	width: 95%;
	border-color: white;
	/*height:  70%;*/
	}

	.indexphoto{
	width: 100px;
	}

	img.aboutphoto {
	width: 200px;
	}

	img.spacephoto {
	width: 80%;
	}
	

	.header {
	top: 0;
	width: 100%;
	height:  10%;
	padding-left: 50px;
	padding-bottom: 10px;
	background-color: white;
	}	


	.headtext {
	position: sticky;
	 padding-left: 50px;
	top: 0;
	width: 100%;
	height:  10%;
	padding-bottom: 10px;
	padding-left: 50px;
	background-color: white;
	}	

	////////////////////////////

	#wrapper {
 	margin-right: 200px;
	background-color: white;
	}	

	#content {
  	float: left;
  	width: 35%;
	background-color: white;
	}

	#sidebar {
  	float: left;
   	width: 35%;
 	/*margin-left: 20px;*/
	background-color: white;
	}

	#cleared {
  	clear: both;
	}	
	////////////////////////////



	.href{
	cursor: pointer;
	}

	 /* Container holding the image and the text */
	
	.container {
    position: relative;
   	background-color: white;
    text-align: left;
 
	}

	/* Top left text */
	.top-left {
    position: absolute;
   	background-color: white;
    top: 8px;
    left: 16px;
	}

	/* Top right text */
	.top-right {
    position: absolute;
   	background-color: white;
    top: 8px;
    right: 16px;
	}

	/* Bottom right text */
	.bottom-right {
    position: absolute;
	background-color: white;
    bottom: 8px;
    right: 16px;
	}

@media only screen and (max-width: 900px) {
    #wrapper {
 	margin-right: 10px;
 	margin-left: 10px;
	}	

	body { 
	background-color: white;
	width: 90%;
	font-family: 'Roboto', sans-serif;
	cursor: pointer;
	overflow-x: hidden; //horizontal
	}


	#content {
  	float: left;
  	width: 100%;
 	background-color: white;
	}

 	#wrapper {
 	background-color: black;
 	margin-right: 10px;
	}	

	#sidebar {
  	position: left;

  	width: 100%;
 	/*margin-left: 20px;*/
 	background-color: white;
	}

	img.photo{
	/*padding-left: 20px;	*/
	width: 100%;
	/*height:  70%;*/
	}

	
    }

 /* Style the button that is used to open and close the collapsible content */
.collapsible {
    background-color: white; 
      text-decoration: underline;
  color: black;
  cursor: pointer;
/*  padding: 18px;*/
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;

}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .collapsible:hover {
  background-color: white; 
  /*color: blue;*/
  text-decoration: underline;
}

/* Style the collapsible content. Note: hidden by default */
.content {
/* padding: 0 18px;*/
  background-color: white;]
    text-decoration: underline;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
} 

.animated-heading {
   float: left;
  	width: 85%;
}
span#words {
    font-weight: bolder;