@import url('https://fonts.googleapis.com/css?family=Oswald');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400&family=PT+Sans:wght@400;700&display=swap');


body {
	margin: 0px;
	font-family: 'Oswald', sans-serif;
    background-color: #797a84;
    font-family: Helvetica, sans-serif;
    font-size: 16px;
    font-family: 'Arial', sans-serif;
    font-family: Helvetica, sans-serif;
    font-size: 16px;
    font-weight: bold;
    font-family: Inter, Arial, Helvetica, sans-serif;
}

.leaflet-container {
    font-family: Inter, Arial, Helvetica, sans-serif;
}

.leaflet-container h2 {
    font-family: Inter, Arial, Helvetica, sans-serif;
}

.leaflet-container a {
    color: black;
}

.leaflet-container a:hover {
    color: black;
}

#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); }
}

.leaflet-left {
    /*left: 45px;*/
}

div.popup {
	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: 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;
}

/***************************** Nav Bar CSS ****************************/
/*********************Color scheme of Navbar and hamburger**************/
.navBackground {
    /*Cine Turquoise: #229ad6;*/
    background-color: #8cbae4 ;

}

.CollapseBackground{
    /*background-image: url('../images/Full_page_headline_arrow_turquoise.png');*/
    /*background-size: 100% 100%;*/
}


button.navbar-toggle {
    /*Actually Hamburger CSS style in normal circumstances (without hover, collapse nor focus)*/
    background-color: black;
    border-color: white;
}

.navbar-inverse .navbar-toggle:hover,
.navbar-inverse .navbar-toggle:focus {
    /*Still CSS for the hamburger (focus and Hover)*/
    /*We are using nav-bar inverse*/
    /*Normally when you hove the background becomes less black*/
    /*We need to change that to a Cine color - arctic blue*/
    background-color: #8cbae4;
}

/*Now we need the nav bar to be transparent and remove annoying border*/
.navbar.navbar-inverse {
    /*All Navbar has an inverse background so on button hamburger the remainder of nav bar don't show'*/
    background-color: transparent;
    border: none;
}

/*Another annoying border to remove*/
.navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form {
    border: none;
}

.navbar-nav > li > a {
    /*The Actual Background of the opened navbar on collapse is CIne Turquoise*/
    /*Cine Turquoise*/
	/*Cool effect we can make them as arrows (future work)*/
    /*border-radius: 30px;*/
    background-color: #8cbae4;
}

.navbar-inverse .navbar-nav > li > a {
    /*Default Bootstrap is ugly gray*/
    color: white;
}

ul.nav a:hover {
    /*On hover on the anchor elements themselves the background is Cine Arctic Blue*/
    background-color: #229ad6 !important;
}

/*Centering the nav-bar  and its children always in its container*/
.navbar .navbar-nav {
    display: inline-block;
    /*float: none;*/
    vertical-align: top;
}

.navbar .navbar-collapse {
    text-align: center;
}

/*Why not centering the hamburger also in Collapsible mode*/
.navbar-header {
    /*CSS Rule repeated down consider removing*/
    text-align: center;
}

.navbar-toggle {
    float: none;
    /*margin-right:0;*/
}

.navbar-nav>li {
    float: none;
    /*transform: translate(-49px, 45px);*/
}



/*********************Make Navbar always collapsible i.e Hamburger btn always shows**************/

/*******The following what actually collapse navbar to hamburger always******/
.navbar-toggle {
    display: block;
}

.navbar-collapse.collapse {
    display: none !important;
}

.navbar-collapse.collapse.in {
    display: block !important;
}

/******END of code that actually collapse nav bar always******/

.btn-info {
    color: #fff;
    background-color: #00a99d;
    border-color: #229ad6;
    
}

.btn-info a {
    color: #fff;
}
    
.btn-sm {
    background-color: #ffffff;
    border-color: #ffffff;
}

.btn-bottum {
    background-color: #ffffff;
    border-color: #ffffff;
}

.leaflet-popup-content-wrapper {
    margin: auto;
    text-align: center;
}

footer {
    width: 100%;
    /* vertical-align: bottom; */
    position: fixed;
    bottom: 0;
}

.jumbotron {
        background-color: transparent;
}

.vertical-center {
  min-height: 100%;  /* Fallback for browsers do NOT support vh unit */
  padding: 0;
  margin: 0;

  display: flex;
  align-items: center;
}

/* The side navigation menu */
.sidenav {
    /*height: 100%;*/
    width: 0; /* 0 width - change this with JavaScript */
    position: fixed; /* Stay in place */
    z-index: 1002; /* Stay on top */
    top: 0; /* Stay at the top */
    left: 0;
    background-color: #111; /* Black*/
/*     background-color: #8cbae4; */
    overflow-x: hidden; /* Disable horizontal scroll */
    padding-top: 40px; /* Place content 60px from the top */
    transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}

/* The navigation menu links */
.sidenav a {
    padding: 8px 8px 8px 0px;
    text-decoration: none;
    /*font-size: 25px;*/
    /*color: #818181;*/
    color: #ffffff;
    display: block;
    transition: 0.3s;
    text-align: center;
    
    font-family: Inter, Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: 700;
    font-style: normal;
    line-height: 1.5em;
    letter-spacing: normal;
    text-transform: none;
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
    background-color: darkgrey;
}

/* Position and style the close button (top right corner) */
.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 0px;
    font-size: 36px;
    margin-left: 50px;
    color: white;
    padding: 0;
}

.sidenav a.closebtn:hover {
    color: white;
    background-color: darkgrey;
}

/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
    transition: margin-left .5s;
    padding: 20px;
}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
    .sidenav {padding-top: 15px;}
    .sidenav a {font-size: 18px;}
}

.navbar-toggle {
    z-index: 1001;
    position: fixed; /* Stay in place */
    top: 0; /* Stay at the top */
    left: 15px;
}

.remaining-content span {
    display:none;
}


.vcenter {
    display: inline-block;
    vertical-align: middle;
    float: none;
}