#map {
	position:absolute;
	top:0px;
	left:0px;
	width: 100%;
	height: 100%;
	/* z-index:-1; */
	}
 
 .marker-desc{
    width: 250px;
    min-height: 100px;
    text-align: center;
    color: #333;
    font-size: 14px;
  }

  .button-all-map{
    background: #333;
    color: #fff;
    border: 1px solid #333;
    border-radius: 1px;
    padding: 10px 30px;
	margin-top: 10px;
	margin-left: 10px;
    margin-bottom: 20px;
	height: 32px;
  }

  .button-all-map:hover{
    cursor: pointer;
    background: #fff;
    color: #333;
    transition: all 0.5s;
  }
  
   .button-more-map{
    background: #204330;
    color: #fff;
    border: 1px solid #333;
    border-radius: 1px;
    padding: 10px 30px;
	margin-top: 10px;
	margin-left: 10px;
    margin-bottom: 20px;
	height: 32px;
  }

  .button-more-map:hover{
    cursor: pointer;
    background: #fff;
    color: #333;
    transition: all 0.5s;
  }
 
	/* Optional: Makes the sample page fill the window. */
	#slide-panel {
		width:300px;
		max-width:100vw;
		height:100vh;
		padding:0px;
		background:#fff;
	   position: relative;
	   z-index: 999;
		margin-left: -315px;
	}
	#opener {
	  /*  float:right;
	   margin:75vh -80px 0px 0px; */
		-webkit-transform: rotate(-90deg);
	   -moz-transform: rotate(-90deg);
	   -ms-transform: rotate(-90deg);
	   -o-transform: rotate(-90deg);
	   filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
		z-index: 999;
	position: absolute;
	/* left: 0; */
	bottom: 50px;
	right: -80px;
	}



	 /* Always set the map height explicitly to define the size of the div
	 * element that contains the map. */
		html,body {
		  height: 100%;
		  margin: 0;
		  padding: 0;
		background-color: aliceblue;
	}
	::-webkit-input-placeholder { /* Edge */
	  color: red;
	  font-weight: bold;
	  font-size: 1.0em;
	}

	:-ms-input-placeholder { /* Internet Explorer */
	  color: red;
	  font-weight: bold;
	  font-size: 1.0em;
	}

	::placeholder {
	  color: red;
	  font-weight: bold;
	  font-size: 1.0em;
	}

	.viewDiv {
		font-family: Roboto;
		font-size: small;
	}

	.viewDiv {
		font-family: Roboto;
		font-size: small;
	}

		
	.description {
	  height: 150px;
	  width: 100%;	
	  background-color: white;
	  font-family: Roboto;
	  font-size: 10px;
	  font-weight: 300;
	  color: blue;
	}

	.controls {
		margin-top: 10px;
		border: 1px solid ;
		border-radius: 2px 0 0 2px;
		box-sizing: border-box;
		-moz-box-sizing: border-box;
		height: 32px;
		outline: none;
		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
	}

	#infowindow-content .title {
	  font-weight: bold;
	}

	#infowindow-content {
	  display: none;
	}

	#map #infowindow-content {
	  display: inline;
	}

	.pac-card {
	  margin: 10px 10px 0 0;
	  border-radius: 2px 0 0 2px;
	  box-sizing: border-box;
	  -moz-box-sizing: border-box;
	  outline: none;
	  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
	  background-color: #fff;
	  font-family: Roboto;
	}

	#pac-container {
	  padding-bottom: 12px;
	  margin-right: 12px;
	}

	.pac-controls {
	  display: inline-block;
	  padding: 5px 11px;
	}

	.pac-controls label {
	  font-family: Roboto;
	  font-size: 13px;
	  font-weight: 300;
	}

	#pac-input {
	  background-color: #fff;
	  font-family: Roboto;
	  font-size: 13px;
	  font-weight: 300;
	  margin-left: 12px;
	  padding: 0 11px 0 13px;
	  text-overflow: ellipsis;
	  text-align: center;
	  width: 350px;
	  height:32px;
	}

	#pac-input:focus {
	  border-color: #4d90fe;
	}

	#title {
	  color: #fff;
	  background-color: #4d90fe;
	  font-size: 25px;
	  font-weight: 500;
	  padding: 6px 12px;
	}

	#target {
	  width: 345px;
	}
	
	select {
	 margin-top:10px;	
     background-color: #fff;
     font-family: Roboto;
     font-size: 13px;
     font-weight: 300;
     margin-left: 12px;
     text-align: center;
     width: 148px;
     height: 32px;
    }
	
	select.decorated option:hover {
    box-shadow: 0 0 10px 100px #1882A8 inset;
}