







	/*navigation bar styling, shamelessly stolen from w3schools*/

	.topnav {
  overflow: hidden;
  background-color: #333;
  
}

.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: #ddd;
  color: black;
}

.active {
  background-color: #000000;
  color: white;
}

.topnav .icon {
  display: none;
}




	@font-face
	{
		font-family: dyslexicFont;
		src: url('dyslexie.ttf'),
		url('dyslexie.woff');
	}


	.ui-helper-hidden-accessible { 
	display:none; 
	}
	
	ul.ui-autocomplete {
		list-style: none;
		background-color:black;
		color:white;
		}

	
/* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 50%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
		font-family: dyslexicFont;
      }
	  
	  .buttonBlock{
		  		  margin: auto;
		width: 80vw;
		text-align: center;
	  }
	  
	  #arrivalsBlock{
		  margin: auto;
		width: 80vw;
		text-align: center;
	  }
	  
	  #departuresBlock{
		  margin: auto;
		width: 80vw;
		text-align: center;
	  }
	  
	  #demo {
		  
		margin: auto;
		width: 80vw;
		text-align: center;
	  }
	  .route_div{
		  border-bottom: 1vw solid black;
	  }
	  .departure_div{
		  border-bottom: 1vw solid black;
	  }
	  
	  
	  
	  .arrival_div{
		  border-bottom: 1vw solid black;
	  }
	  
	  
	  #buttonHolder{
		  width: 80vw;
		  		  margin: auto;
				  text-align: center;
		  
	  }
	  
	  	#locButton{
		font-size: 1vw;
		
	}
	  
	  .btn {
		  width:50vw;
		font-family: dyslexicFont;
		color: #ffffff;
		font-size: 2vw;
		background: #000000;
		padding: 1vw 2vw 1vw 2vw;
		text-decoration: none;
	}

	.btn:hover {
		background: #ffffff;
		text-decoration: none;
		color: #000000;
	}
	
	.subButton {
		width:30vw;
		font-family: dyslexicFont;
		color: #ffffff;
		font-size: 1vw;
		background: #000000;
		padding: 1vw 2vw 1vw 2vw;
		text-decoration: none;
	}

	.subButton:hover {
		background: #ffffff;
		text-decoration: none;
		color: #000000;
	}

	.homeImage{
		 display:block;
		margin:auto;
		width:30vw;
	}
	
	p {
		text-align:center;
	}
	
	
	  @media screen and (max-width: 600px) {
 
	.departure_div{
		  
	  }
	  
	  	  #buttonHolder{
		  width: 100vw;
		  
		  
	  }
	  
	  #arrivalsBlock{
		  width: 100vw;

	  }
	  
	  #departuresBlock{
		  width: 100vw;

	  }
	  
	  .buttonBlock{

		width: 100vw;

	  }
	  
	  .btn {
		   width: 100vw;
		font-size: 5vw;
	}

	.subButton {
		width:80vw;
		font-size: 3vw;
	}

	.mainCodeSearch{
		width: 100vw;
	}
	
	.callingCodeSearch{
		width: 100vw;
	}
	
		#locButton{
		font-size: 3vw;
		
	}

	  /*navigation bar styling, shamelessly stolen from w3schools*/
	   .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
	  
	   .topnav.responsive {position: relative;}
	   
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
	  

	  
 
}