html, body {
			padding: 0;
			margin: 0;
			width: 100vw;
			font-family: 'Rubik', sans-serif;
			font-size: 18px;
			background-color: grey;
			overflow: hidden;
			letter-spacing: 1px;
			color:  white;

}
.result-wrap {
			padding-top: 50px;
			padding-right: 10vw;
			padding-left: 10vw;
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			align-content: center;
			width: 80vw;
			
			text-align: center;
			position: absolute;
			top:  0;
			z-index: 1000;
			margin-bottom: 100px;
		}
		
		span {
			width: 100%;
		}
		h1 {
			color:  white;
		}
		.back-img {
			width: 100%;
			height: 40vh;

			background: #0f0c29;  /* fallback for old browsers */
			background: -webkit-linear-gradient(to right, #24243e, #302b63, #0f0c29);  /* Chrome 10-25, Safari 5.1-6 */
			background: linear-gradient(to right, #24243e, #302b63, #0f0c29); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
			background-image: url('./pattern-bg.png');
			background-size: cover;
		}
		.search-line {
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-content: center;
			width: auto;
			height: 50px;
			text-align: center;
			padding-left: 50px;
			padding-right: 50px;
		}
		.search-line input {
			width:  80%;
			padding: 10px;
			border-radius: 10px 0px 0px 10px;
			font-family: 'Rubik', sans-serif;
			font-size: 1rem;
			border-width: 0px;
			background-color: rgba(255,255,255,0.1);
			border:  1px solid rgba(255,255,255,0.5);
			/*border-right:  1px solid rgba(255,255,255,0.2);*/
			border-bottom:  1px solid rgba(255,255,255,0.2);
			backdrop-filter: blur(5px);
		}
		.search-line input::placeholder {
			color:  white;
		}
		.search-line input:focus {
			color:  white;
		}

		.search-line button {
			width: 50px;
			height: 50px;
			padding: 10px;
			color: white;
			/*background-color: black;*/
			border: none;
			border-radius: 0px 10px 10px 0px;
			background-color: rgba(255,255,255,0.5);
			border:  1px solid rgba(255,255,255,0.5);
			border-right:  1px solid rgba(255,255,255,0.2);
			border-bottom:  1px solid rgba(255,255,255,0.2);
			backdrop-filter: blur(5px);

		}

		.search-line button:hover {
			background-color: rgba(255,255,255,0.8);
			cursor: pointer;
		}
		textarea:focus, input:focus{
    		outline: none;
		}

		.search-results {
			margin-top:  50px;
			width: auto;
			display: flex;
			flex-direction: row;
			/*justify-content: center;
			align-content: center;*/
			height: auto;
			min-height:  100px;
			background-color: rgba(255,255,255,0.1);
			border-radius: 10px;
			border-width: 0px;
			backdrop-filter: blur(5px);
			box-shadow: 0 25px 45px rgba(0,0,0,0.1);
			border:  1px solid rgba(255,255,255,0.5);
			border-right:  1px solid rgba(255,255,255,0.2);
			border-bottom:  1px solid rgba(255,255,255,0.2);

		}
		.row-1 {
			display: flex;
			flex-direction: row;
			width: 50%;

		}
		.box {
			/*height: 100%;*/
			width: 50%;
			border: red 2px;
			color: white;
			text-align: left;
			margin: 10px;
		}

		.box h5 {
			font-weight: 700;
			color: white;
			font-size: 0.5rem;
		}

		.box span{
			color: white;
			font-size: 1rem;
			/*color: #0f0c29;*/
		}

		#mapid {
			height:  60vh;
			width: 100vw;
		}
	

		@media only screen and (max-width: 850px) {
			html, body {
				overflow: scroll;
			}
			.back-img {
				height: 50vh;
			}
		    .search-results {
				flex-direction: column;
			}
			.result-wrap {
			
		}
			.row-1 {
				width: 100%;
			}
			.box {
				width:  50%;
				text-align: center;

			}
		}
		@media only screen and (max-width: 550px) {
			.back-img {
				height:80vh;
			}
		    .search-results {
			flex-direction: column;
			}

			.row-1 {
				flex-direction: column;
				width: 100%;
			}
			.box {
				width:  100%;
				text-align: center;

			}
		}