nav {
    border-bottom: 1px solid #d8d8d8;
}
nav .brand-logo {
  margin-left: 20px;
}
nav form {
/*  margin-left: 180px;*/
  width: 80%;
  height: 100%;
}

nav .input-field label.active i {
    color: black;
    opacity: .3;
    margin-top: 60%;
}

input[type=search]:not(.browser-default):focus:not([readonly]), textarea.materialize-textarea:focus:not([readonly]) {
    border-bottom: 1px solid grey;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #d8d8d8;
    -webkit-box-shadow: 0 1px 0 0 grey;
    box-shadow: 0 1px 0 0 grey;
}

nav .input-field {
    margin: 0;
    height: 100%;
}

.marker {
    display: block;
    border: none;

    cursor: pointer;
    padding: 0;
	background-size: contain;
	background-repeat: no-repeat;

}

.mapboxgl-marker {
    position: absolute;
    top: -20px;
    left: 24px;
    will-change: transform;
}


#profile-pic-container {
	display: flex;
	justify-content: center;
	align-items: center;
}

#bg-clear {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 165px;
	width: 165px;
	background-color: white;
}

#bg-gradient {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 175px;
	width: 175px;
	background: linear-gradient(to bottom right, #9e147d, #e53649, rgb(255, 246, 71));
}

.slide-container {
/*	margin-top: 175px;*/
}


#name-header {
	background-color: #2d5b81;
	color: white;
	font-family: "Helvetica Neue";
	letter-spacing: 3px;
}
/*map width and height. Jin*/
#map {
	width:100%;
	height:870px; 
	margin: 0 auto;
}


/*.parallax-container{
	height: 600px;
}*/
h1{
	font-size: 60px
}

h3 {
	width: 100%;
	font-size: 200%
}

p {
	font-family: "Helvetica Neue";
}
#fotterDiv{
	text-align: center;
}
form{
	margin-bottom: 60px;
}
.mapRow{
	background-color: black;
	margin-bottom: 0;
}
.displayResultDiv{
	margin-top: 30px;
	margin-bottom: 30px;
}
#h1-title{
	position: relative;
	top: 100px;
}
.titleDiv{
	/*min-width: 545px;*/
	background-image: url("../images/bg.jpg");
	background-size: cover;
	width: 100%;
	height: 100vh;
	background-position: center;
}
#titleContainer{
	width: 60%;
	margin: 0 auto;
	position: relative;
	top: 50%;
	transform: translateY(-70%);
}
#titleContent{
	text-align: center;
}

.input-field{
	margin-top: 0;
}
/*.profile-img{
	margin-top: 25px;
}*/
table{
	margin-bottom: 30px;
	/*background-color: #64ffda;*/
}
th, td{
	border-bottom: 1px solid gray;
}
/*tbody{
	background-color: #00bfa5;
}*/
.textWhite{
	color: white;
}
.textBlack{
	color: black;
}
.subText{
	font-size: 18px;
	margin-top: 5px;
  margin-bottom:20px;
	text-align: center;
  color: grey;
}
#enterUsername{
	padding-top: 20px;
}
.textCenter{
	text-align: center;
}
.profile-pic-row{
	margin-bottom: 0;
}
.h3{
	margin-top: 0;
}

.image-container {
	display: flex;
	flex-wrap: wrap;

}

.inline {
	display: inline;
	padding: 5px;
}
a:hover{
	text-decoration: underline;
}



.page-footer{
	padding-top: 20px;
}
.profileCol{
	background-color: #ffffff;
	height: 870px;
	width: 33.333%;
	border-right: 1px solid #d8d8d8;
}
#mapDiv{
	position: absolute;
	top: 64px;
	left: 33.333%;
	width: 66.666%;
}
.page-footer{
	padding-bottom: 20px;
}

.mapboxgl-popup-content {
    position: relative;
    background: #fff;
    border-radius: 3px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.10);
    pointer-events: auto;
}

.mapboxgl-popup-tip {
    border: 0px;
}

 .mapboxgl-popup {
        max-width: 400px;
        text-align: center;
		justify-content: center;
        font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
        color: gray;
        border-style: groove;
        border-width: 10px;
        border-color: #aa9fb1#bab;
    }
body{
	background-color: black;
}
li{
	padding-bottom: 5px;
}


@media only screen and (max-width: 900px){
	h1{
		font-size: 35px;
	}
}

@media only screen and (max-width: 1024px){
	.profileCol{

		display: none;
	}
	.page-footer{
		display: none;
	}
	nav{
		height: 10vh;
	}
	#mapDiv{
		position: static;
		top: 0;
		width: 100%;
		height: 90vh;
		border-bottom: 1px solid white;
	}
	#map{
		height: 90vh;
		}
	}
}