// .scss files will get core functions and variables automatically from build script


.filter-section {
	margin: 0 0 2rem 0;
	background-color: $offwhite;
}

.search-filter { 
	display: flex;
	align-items: flex-end;
	justify-content: flex-start;
	flex-wrap: nowrap;
	
	padding: 1rem 0 0 0;

	label {
		margin-right: 1rem;
		
		span {
			margin-right: 1rem;
		}
	}
	
	@media (min-width: 768px){
		padding: 1rem;
		align-items: center;
		justify-content: center;
	}
}



#image-header {
	position: relative;
	text-align: center;
	background-image: url('on-the-road.jpg');
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	width: 100%;
	padding: 1rem 0;
}

#image-header-title {
	position: relative;
	z-index: 100;
}


#image-header h1 {
	font-family: "Tungsten", Impact, sans-serif;
	font-size: 80px;
	color: white;
}
#image-header h2 {
	font-family: "Raleway", Helvetica, Arial, sans-serif;
	font-size: 30px;
	font-weight: bold;
	color: $gold;
	margin: 0;
	padding: 0;
}

@media (min-width: 768px){
	#image-header {
		position: relative;
		
		&::after {
			display: block;
			content: '';
			padding-top: 26.74%;
		}
	}
	
	#image-header-title {
		position: absolute;
		top: 50%;
		z-index: 100;
		-webkit-transform: translateY(-50%);
		-moz-transform: translateY(-50%);
		transform: translateY(-50%);
		width: 100%;
	}
}

@media (max-width: 767px){
	#image-header h1 { font-size: 48px; }
	#image-header h2 { font-size: 24px; }
}


			
			

.chart.travel-schedule {
	font-family: $body-font;
	border-top: 0;
	
	time {
		font-weight: bold;
		white-space: nowrap;
	}
	
	tr { 
		background: white; border-top: 0 none;	
		&:nth-child(even){ background: $zebra-stripe; }	
	}
	
	tbody>tr	>td:nth-child(1){ background: none; white-space: normal; }
	
	@media (min-width: 992px){
		tbody>tr	>td:nth-child(1){ white-space: nowrap; }
	}
	
	@media (max-width: 768px){
		time { font-weight: normal; }
		tr { padding-top: 1rem; padding-bottom: 1rem; }
		td { padding: 0 0.5rem; }
	}
}