/* 
  Set body background colour
*/
body{
	background-color: #38414e;
}
/* 
	Give the map a height and width to display it. Center it with auto.
*/
#map {
    width: 100%;
    border: solid;
    margin-left: auto;
    margin-right: auto;
}

.map-icon-label .map-icon {
	font-size: 24px;
	color: #FFFFFF;
	line-height: 48px;
	text-align: center;
	white-space: nowrap;
}

.bus-container{
	margin-top: 10px;
}

.info-row{
  border: 5px solid;
}

.custom-addon{
	background: #fff;
}
.border-right{
	border-right: 0px;
}
/* 
	Custom buttons
*/
.custom-button{
	background: #60c9eb;
	color: #fff;
	width: 100%;
	text-align: center;
	font-size: 16px;
	transition: all .4s ease-in-out;
}
/* 
  Change hover animation.
*/
.custom-button:hover{
	background: #53B1DE;
	border-color: #53B1DE;
	color: #fff;
}

/* 
  Device: Desktops - high res
*/
@media (min-width: 1281px) {
	#map { 
		height: 800px;
	}
}
  
/* 
	Device: Laptops, Desktops
*/
@media (min-width: 1025px) and (max-width: 1280px) {
	#map { 
		height: 800px;
	}
}

/* 
	Device: Ipad - portrait
*/
@media (min-width: 768px) and (max-width: 1024px) {
	#map { 
		height: 600px;
	}
}

/* 
	Device: Ipad - landscape
*/
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
	#map { 
		height: 400px;
	}
}

/* 
	Device: Tablets
*/
@media (min-width: 481px) and (max-width: 767px) {
	#map { 
		height: 400px;
	}
}

/* 
	Device: Mobile
*/
@media (min-width: 320px) and (max-width: 480px) {
	#map { 
		height: 400px;
	}
}