/* sets the map height explicitly to define the size of the div element that contains it. */
 #map {
  height: 100%;
}

/* makes the page fill the window */
html {
  height: 100%;
  margin: 0;
  padding: 0;
}

/* #preloader{
  background-color: #ffffff url(https://my.spline.design/stylizedmetro-8faeb5bc676dd7a0a0217aa4c5971e8a/) no-repeat center center;
	color: #000000;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	height: 100%;
  width: 100%;
  position: fixed;
  z-index: 100;
} */

/* makes the map fill the window */
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

[class$=api-load-alpha-banner] {
  display: none;
}

/* use font from project folder */
@font-face {
  font-family: Winkle-Bold;
  src: url(Winkle-Bold.ttf);
}

nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 18px;
  padding-left: 3%;
  padding-right: 200px;
  /* backdrop-filter: blur(4px); */
  /* -webkit-backdrop-filter: blur(4px); */
  /* border: 1px solid rgba(0, 0, 0, 0.5); */
  position: fixed;
  z-index: 1;  
  background-color: transparent;
  width: 100%;
}

nav #logo{
  align-items: center;
  margin-right: 30%;
}

/* #infoButton{
  font-family: Winkle-Bold;
  color: #065390;
  font-size: 40px; */
    /* border-color: white; */
    /* text-decoration: none;
    transition-duration: 0.4s;
    z-index: 2;  
    background-color: transparent;
    width: 5%;
}

#infoButton:hover {
  background-color: transparent; 
  color: #c22e3a;
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
  cursor: pointer;
} */

#label {
  text-align: center;
  width: 200px;
  height: 60px;
}

#savebtn{
  background-color: #045195;
  cursor: pointer;
  text-align: center;
  color: white;
  border: none;
  padding: 5px;
  border-radius: 7px;
}

#savebtn:hover{
  background-color: white;
  color: #c22e3a;
}

.sidebar {
  height: 100%;
  width: 0;
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  background-color: white;
  overflow-x: hidden;
  padding-top: 60px;
  display: block;  
  -webkit-user-select: none;
  user-select: none;
  transition: width 0.3s, height 0.3s, background-color 0.3s, rotate 0.3s ; 
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);;
}

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.sidebar p {
  padding: 20px;
  text-decoration: none;
  font-size: 16px;
  color: #045195;
  display: block;
        transition: all 0.75s cubic-bezier(.71,0,.33,1.56) 0ms;
}

/* 
.sidebar p:hover {
  color: #f1f1f1;
} */

.openbtn {
  font-family: Winkle-Bold;
  font-size: 40px;
  cursor: pointer;
  color: #045195;
  padding: 10px 15px;
  border: none;
}

.sidebar .closebtn {
  background: none;
  border: none;
  position: absolute;
  font-family: Winkle-Bold;
  text-decoration: none;
  top: 0;
  right: 25px;
  font-size: 30;
  margin-left: 50px;
  padding-top: 25px;
  color: #c22e3a;
  cursor: pointer;
}

.openbtn:hover {
  /* text-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19); */
  cursor: pointer;
}

#main {
  transition: margin-left .5s;
  padding: 16px;
}

.my-info-window{
  z-index: 9999;
}

/* 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) {
  .sidebar {padding-top: 15px;}
  .sidebar a {font-size: 18px;}
}

.sidebar #instagram{
  font-family: Winkle-Bold;
  font-size: 20px;
  cursor: pointer;
  color: #c22e3a;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  margin-left: 20px;
  padding: 10px 15px;
  border: none;
}

.sidebar #letterboxd{
  font-family: Winkle-Bold;
  font-size: 20px;
  cursor: pointer;
  color: #c22e3a;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  margin-left: 20px;
  margin-top: 20px;
  padding: 10px 15px;
  border: none;
}

.sidebar #film{
  font-family: Winkle-Bold;
  font-size: 20px;
  cursor: pointer;
  color: #c22e3a;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  margin-left: 20px;
  margin-bottom: 20px;
  margin-top: 60px;
  padding: 10px 15px;
  border: none;
}

#webgl_iframe{
  margin-top: 10%;
  margin-left: 20%;
  margin-bottom: 10%;
}