html, body {
	height: 100%;
	margin: 0;
	padding: 0;
	/*background-color: #e0ecf5;*/
}
h3{	
	padding: 0;
	margin: 0;
}

h1{
	margin: 0;
	margin-bottom: 5px;
	text-align: center;
}

/*popup window*/
.mapboxgl-popup {
	
	
}
.mapboxgl-popup-close-button {
  display: none;
}
.popup{
/*	cant get popup to scroll wtf*/
	font-size: 16px;
	/*overflow-y:scroll !important;	*/
	/*max-height: 300px;*/
}
.mapboxgl-popup-content {
	padding-left: 10px;
	padding-right: 10px;
	/*max-height: 300px;*/
	/*overflow-y:hidden !important;*/
	font-size: 1em;

}


.mobile{
	/*not sure why these wouldnt work without important*/
	display: none !important;
}

#buttonBox{

	margin-top: 5px;
	display: block;
	text-align:center;
	margin-bottom: 5px;
}

/*iphone 5s - 325*/
/*iphone 6/7/8/X - 450*/
@media (max-width:767px){
	.mobile{
		display: block !important;
	}

	/*things to display for desktop only*/
	.desktop{
		display: none;
	}
	.intro{
		margin-bottom: 10px;
		padding-left: 10px;
		padding-right: 10px;
	}
	.container {
		display: flex;
		flex-direction: column-reverse;
		width: 100%;
		height: 100%;
	}

	#map {
		top: 0;
		bottom: 0;
		flex-basis: 60%;
		height: 60%;
		width: 100%;
		/*flex:2;*/
		/*left: 20%;*/
	}

	#infoBox{
		cursor: pointer; 
		display: block;
		width: auto;
		flex: 0 0 auto;
		height: 40%;
		/*top:70%;*/
		/*flex-basis: 30%;*/
		padding-left:15px;
		padding-right: 15px; 
		padding-top: 15px;
		overflow-y: scroll;
		background-color: #e0ecf5;
	}

	.displayRecs, .displayRecsHeader, .hometext{
		display: inline-block;
		width: 100%;
		/*height: */
		margin-top: 5px;
		margin-bottom: 15px;
	}

	.displayRecs:hover{
		background-color: #b2d0e8;		
	}

/*	.locations{
		padding-left: 10px;
		padding-right: 10px;
		display: block;
	}*/

	.locations:hover{
		background-color: #b2d0e8;
	}

	.locations, .locationsHeader{
		display: block; 
		/*or should it be display block*/
		margin-top: 5px;
		padding-left: 10px;
		padding-right: 10px;
		margin-bottom: 7px;
		
	}
	.locations{
		border-top: 2px solid #cccccc;
		border-bottom: 2px solid #cccccc;
	}
	.review {
		padding-left: 10px;
		padding-right: 10px;
		display: block;
		margin-bottom: 10px;
	}


	#showRecsButton, #showAllLocsButton{
		display: block;
		background-color: #b2d0e8;
		font-size: 14px;
		height: 30px;
		padding-left: 10px;
		padding-right: 10px;
		margin: auto;
		margin-bottom: 0;
	}

}

/*if screen > 992 px*/
@media (min-width:768px){

	h3{
		margin-top: 10px;
	}

	.intro{
		display: block;
		margin-bottom: 20px;
		margin-top: 40px;
		padding-left: 20px;
		padding-right: 10px;
	}
/*	.container {
		display: flex;
		flex-direction: row;
		width:100%;
	}*/
	#map {
		position: absolute;
		display: block;
		top: 0;
		bottom: 0;
		width: 80%;
		left: 20%;
		height: 100vh;
	}

	#infoBox{		
		cursor: pointer; 
		display: block;
		width: 20%;
		height: 100vh;
		padding-top: 15px;
		overflow-y: scroll;
		background-color: #e0ecf5;
	}

	.displayRecs, .displayRecsHeader, .hometext{
		display: inline-block;
		margin-top: 5px;
		padding-left: 10px;
		padding-right: 10px;
		margin-bottom: 5px;
	}

	.displayRecs:hover{
		background-color: #b2d0e8;
	}

	.locations:hover{
		background-color: #b2d0e8;
	}

	.locations, .locationsHeader{
		display: block; 
		/*or should it be display block*/
		margin-top: 5px;
		padding-left: 10px;
		padding-right: 10px;
		margin-bottom: 5px;
		margin-bottom: 7px;
		/*border-bottom: 3px solid white;*/
	}
	.locations{
		border-top: 2px solid #cccccc;
		border-bottom: 2px solid #cccccc;
	}
	.review {
		padding-left: 10px;
		padding-right: 10px;
		display: block;
		margin-bottom: 10px;
	}

	#showRecsButton, #showAllLocsButton{
		display: block;
		background-color: #b2d0e8;
		font-size: 14px;
		height: 30px;
		padding-left: 10px;
		padding-right: 10px;
		margin: auto;
		margin-bottom: 0;
	}

}