@import url('https://fonts.googleapis.com/css?family=Oswald');

body {
	margin: 0px;
	font-family: 'Oswald', sans-serif;
    font-size:16px;
}

#mapid { 
	height: 100vh;
	padding: 0px;
}

#spinner{
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: 1011;
	width: 9vw;
	height: 9vw;
	margin: -0.5vw 0 0 -0.5vw;
	border: 1vw solid #f3f3f3;	/* Light grey */
	border-radius: 50%;
	border-top: 1vw solid teal;
	border-bottom: 1vw solid teal;
	-webkit-animation: spin 2s linear infinite;
	animation: spin 2s linear infinite;	
}

#spinner-parent{
	position: absolute;
	left: 0%;
	top: 0%;
	z-index: 1010;
	width: 100vw;
	height: 100vh;
	/*
	background-color:#f3f3f3;
	opacity:0.4;
	*/
	background-color: rgba(0,0,0, 0.7); 
}

/*
.overlay {  
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1; 
    left: 0;
    top: 0;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0, 0.7); 
    overflow-x: hidden; 
    transition: 0.5s; 
}
*/

.overlay {  
    height: 0%;
    width: 100%;
    position: fixed;
    z-index: 1001; 
    left: 0;
    top: 0;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0, 0.7); 
    overflow-y: auto;
    transition: 0.5s; 
}

#searchfield {
	background: rgba(0, 0, 0, 0);
	border: 0px;
	color: rgb(255, 255, 255);
	font-size: 5vw;
	font-weight: 300;
	margin-top: -51px;
	margin: 0px auto;
	outline: none;
	padding-left: 30px;
	padding-right: 30px;
	position: absolute;
	text-align: center;
	top: 40%;
	width: 100%;
}

/* Position the content inside the overlay */
.overlay-content {
	background: rgba(0, 0, 0, 0);
	border: 0px;
	color: rgb(255, 255, 255);
	font-size: 2vw;
	font-weight: 300;
	margin-top: -51px;
	margin: 0px auto;
	outline: none;
	padding-left: 30px;
	padding-right: 30px;
	position: absolute;
	text-align: center;
	top: 55%;
	width: 100%;
	/*overflow-y: auto;*/
}

/* The navigation links inside the overlay */
.overlay a {
    font-size: 20px;
    /*color: #818181;*/
    /*display: block;*/ /* Display block instead of inline */
    transition: 0.3s; /* Transition effects on hover (color) */
}

/* When you mouse over the navigation links, change their color */
.overlay a:hover, .overlay a:focus {
    color: #f1f1f1;
}

/* Position the close button (top right corner) */
.overlay .closebtn {
    position: absolute;
    top: 10px;
    right: 45px;
    font-size: 150px;
}

/* When the height of the screen is less than 450 pixels, change the font-size of the links and position the close button again, so they don't overlap */
@media screen and (max-height: 450px) {
    .overlay a {font-size: 20px}
    .overlay .closebtn {
        font-size: 80px;
        top: 15px;
        right: 35px;
    }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

div.popup {
	right: 0px;
	border: 3px solid;
	height: 100vh;
	position: fixed;
	width: 45%;
	top: 50px;
	z-index:1002;
	background: white;
}

div.popupnonav {
	right: 0px;
	border: 3px solid;
	height: 100vh;
	position: fixed;
	width: 45%;
	top: 0px;
	z-index:1002;
	background: white;
}

iframe.popup {
	height: 100vh;
	border: 0px none;
	width: 100%;
	margin-bottom: 0px;
	margin-left: 0px;
}

a.popup {
	outline: none;
	position: fixed;
	/*border: 3px solid;*/
	right: 45%;
	top: 50px;
	background: transparent;
	padding: 1%;
}

a.popupnonav {
	outline: none;
	position: fixed;
	border: 3px solid;
	right: 45%;
	top: 0px;
	background: white;
	padding: 1%;
}

 @media screen and (orientation:portrait) { 
	div.popup {
		width: 95%;
	}

	div.popup div {
		height:80vh;
        width:100%
	}
	
	a.popup {
		right: 95%;
	}
}
 @media screen and (orientation:landscape) { 
	div.popup {
		width: 45%;
	}
	
	div.popup div {
		height:90vh;
        width:100%
	}

	a.popup {
		right: 45%;
	}
}

.modal-dialog{
position: absolute;
left: 50%;
margin-left: -312px;
height: 500px;
top: 50%;
margin-top: -250px;
} 

div.container-fluid {
	padding-left: 0px;
	padding-right: 0px;
}

.navbar-inverse {
    background-color: #0c8d8c;
    border-color: #0c8d8c;
	text-transform: uppercase;
}

.navbar {
    border-radius: 0px;
}

.navbar-inverse .navbar-nav>li>a {
    color: white;
}

.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus {
  color: #ffffff;
  background-color: #4c868e;
}

 /*.navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover,
  .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:focus {
    color: #ffffff;
    background-color: #4c868e;
  }*/
  
 .navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus {
  color: #ffffff;
  background-color: #00261d;;
}

.navbar-collapse {
    padding-left: 0;
}