body, html {
  /*height: 100%;*/
  /*margin: 0;*/
  background-color: whitesmoke;
  font-family: Arial, Helvetica, sans-serif;
}

.header {
  padding: 60px;
  text-align: center;
  background: darkgray;
  color: white;
  font-size: 30px;
  background: linear-gradient(to bottom, #ff5050 -10%, #003366 100%);
}

.section {
	margin: 50px;
	/*padding: 20px;*/
	text-align: left;
	background: white;
	display: none;
	padding: 20px 20px;
	width: 95%;
	float: left;
}

.homepage_content {
  padding: 0 18px;
  background-color: #F8F8F8;
  margin-left: 5px;
  width: 90%;
  height: 90%;
  float: left;
}

.homepage_img {
	width:15%;
	height:15%;
	float:left;
	padding: 20px;
}

 /* Style the button that is used to open and close the collapsible content */
.collapsible {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  margin: 5px;
}

/* 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: #ccc;
}

/* Style the collapsible content. Note: hidden by default */
.content {
  padding: 0 18px;
  background-color: #F8F8F8;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  margin-left: 5px;
}

.collapsible:after {
  content: '\02795'; /* Unicode character for "plus" sign (+) */
  font-size: 13px;
  color: white;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2796"; /* Unicode character for "minus" sign (-) */
}

.text_container {
	margin: 5px;
	padding: 5px;
	background: whitesmoke;
	
}

/* Style tab links */
.tablink {
  background-color: #555;
  color: white;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  font-size: 17px;
  width: 25%;
}

.tablink:hover {
  background-color: #777;
}

/* Style the tab content (and add height:100% for full page content) */
.tabcontent {
  color: white;
  display: none;
  padding: 100px 20px;
  height: 100%;
}

body, html {
  background-color: whitesmoke;
  font-family: Arial, Helvetica, sans-serif;
}

.header {
  padding: 60px;
  text-align: center;
  background: darkgray;
  color: white;
  font-size: 30px;
  background: linear-gradient(to bottom, #ff5050 -10%, #003366 100%);
}

.section {
	margin: 30px;
	padding: 20px;
	text-align: left;
	background: white;
}

 /* Style the button that is used to open and close the collapsible content */
.collapsible {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  margin: 5px;
}

/* 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: #ccc;
}

/* Style the collapsible content. Note: hidden by default */
.content {
  padding: 0 18px;
  background-color: #F8F8F8;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  margin-left: 5px;
}

.collapsible:after {
  content: '\02795'; /* Unicode character for "plus" sign (+) */
  font-size: 13px;
  color: white;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2796"; /* Unicode character for "minus" sign (-) */
}

.text_container {
	margin: 5px;
	padding: 5px;
	background: whitesmoke;
	
}

.navbar {
  width: 100%;
  background-color: #555;
  overflow: auto;
  /*position: fixed;*/
  margin-right: 10px;
}

/* Add responsiveness - will automatically display the navbar vertically instead of horizontally on screens less than 500 pixels */
@media screen and (max-width: 500px) {
  .navbar a {
    float: none;
    display: block;
  }
}

.btn {
  background-color: #555;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

.btn:hover{
	background-color: #000;
}

.btn:after{
	background-color: #000;
}