.hero {
    /* Sizing */
    /*width: 100vw;*/
    height: 100vh;
    
    /* Flexbox stuff */
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* Text styles */
    text-align: center;
    color: white; /* ADD THIS LINE */
    
    /* Background styles */
    background-image: linear-gradient(rgba(0, 0, 0, 0.5),rgba(0, 0, 0, 0.5)), url('https://mycitycourier.com/toronto-hero2.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;

    /* Needed to position the navbar */
    position: relative;
}
.hero h1 {
    /* Text styles */
    font: 3em arial, sans-serif;
    font-weight: 900;
    font-stretch: expanded;
    /*font-size: 3em;*/
    color: white;
    background-color: transparent;
    border: none;
    
    /* Margins */
    margin-top: 0;
    margin-bottom: 0.5em;
}

.hero h2 {
    /* Text styles */
    font-size: 1em;
    color: white;
    background-color: transparent;
    border: none;
 }
.hero .btn {
    /* Positioning and sizing */
    display: block;
    width: 150px;
        
    /* Padding and margins */
    padding: 1em;
    margin-top: 50px;
    margin-left: auto;
    margin-right: auto;
    
    /* Text styles */
    color: white; /* CHANGE THIS LINE */
    text-decoration: none;
    font-size: 1.0em;
    
    /* Border styles */
    border: 3px solid white; /* CHANGE THIS LINE */
    border-radius: 20px;

    /* Background styles */
    background-color: rgba(147, 112, 219, 0.8);
}
.search {
	/*min-width: 600px;
	max-width: 700px;*/
	overflow-x:auto;
	justify-content: center;
	align-items: center;
	margin-left: auto;
	margin-right: auto;
	/*text-align: center;*/

}
/*Track homepage */
.search h2{
	 font: 1em bold arial, sans-serif;
	 font-weight: 900;
	 font-stretch: expanded;
    color: black;
    background-color: transparent;
    border: none;
}
/* Position the navbar container inside the image */
.container {
  position: absolute;
  /*margin: 20px;*/
  width: 100vw;
  /*opacity: 0.0;*/
  z-index: 1;
}
.topnav {
  overflow: hidden;
  background-color: #333;
  opacity: 0.7;

  /*z-index: 2;*/
}

.topnav a {
  float: left;
  display: block;
  color: #F2F2F2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #DDDDDD;
  color: black;
}

.topnav a.active {
  background-color: #4CAF50;
  color: white;
}

.topnav .icon {
  display: none;
}

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}
/* The navbar */

/*
.topnav {
  overflow: hidden;
  background-color: #333;
  opacity: 0.5;
  position: fixed;
  z-index: 1;
}

/* Navbar links */
/*
.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}*/
/*
.topnav a:hover {
  background-color: #ddd;
  color: black;
}*/