/* v6 */

/* Navigation */

nav {
    position: absolute;
    top: 60px;
    right: 50px;
    color: #ffffff;
    font-weight: 400;
    z-index: 5000;
    letter-spacing: 0.5px;
    display: flex;
}

nav a {
    color: #ffffff;
    font-weight: 400;
    text-decoration: none;
    font-size: 15px;
    padding: 5px;
}

nav p + p, nav p {
    margin: 0;
    padding: 0px 0px 15px 15px;
}

nav a:hover, nav a.currentpage {
    opacity: 0.5;
    color: #ffffff;
}

.dropdown {
  display: block;
}

.dropdown-content {
  display: none;
}

.dropdown:hover .dropdown-content, dropdown-content:hover {
  display: block;
}


/* Bottom buttons */

#fakebox {
    display: none;
    position: fixed;
    bottom: 60px;
    right: 60px;
    z-index: 100;
}

.leaflet-fake {
    z-index: 10000 !important;
}

.leaflet-fake:first-child {margin: 0 0 10px 0;}

.leaflet-fake a {
	border: 2px solid rgba(255,255,255,0.2);	
    background: #f1b141;
	border-radius: 2px;
    width: 30px;
	height: 30px;
    line-height: 30px;
    margin: 0;
    display: block;
    box-sizing: border-box;
}

.leaflet-fake img {
    width: 18px;
    margin: 4px;
}

.leaflet-fake:last-child {display: none;}

.leaflet-fake:last-child img {
    width: 14px;
    margin: 8px 8px;
}

/* Nav overlay */

.overlay {  
    height: 100%;
    width: 0;
    position: fixed; /* Stay in place */
    z-index: 2000; /* Sit on top */
    right: 0;
    top: 0;
    background: #F09819;
    background: -webkit-linear-gradient(rgba(237, 105, 4, 0.9), rgba(243, 210, 93, 1));
    background: -o-linear-gradient(rgba(237, 105, 4, 0.9), rgba(243, 210, 93, 1));
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(237, 105, 4, 0.9)), to(rgba(243, 210, 93, 1)));
    background: linear-gradient(rgba(237, 105, 4, 0.9), rgba(243, 210, 93, 1)); 
    overflow-x: hidden;
    transition: 0.1s;
}

.overlay-content {
  position: relative;
  top: 50%; 
    transform: translatey(-50%);
  width: 100%; 
  text-align: center; 
  margin: 00px; 
}

.overlay a {
    padding: 0 0 30px 0;
    text-transform: uppercase;
    font-weight: 500;
    text-decoration: none;
    font-size: 32px;
    color: white;
    display: block;
    letter-spacing: 1.5px;
}

.overlay .closebtn {
    width: 32px;
    height: 32px;
    padding: 5px;
    margin: 30px auto;
    transform: rotate(45deg);
}

/* Hover only on desktop */

@media only screen and (min-width: 764px) {

a:hover {opacity: 0.5;}
    
.leaflet-fake a:hover, button:hover {
    background-color: #ef8f25;
    opacity: 1;
    }
    
.leaflet-control-container a {opacity: 1;}
    
}

/* Button tap 

a:active {opacity: 0.5;}
    
.leaflet-fake a:active, button:active {
    background-color: #ef8f25;
    opacity: 1;
}

*/

/* Small screens */

@media only screen and (max-width: 600px) {
    
nav {
    display: none;
}

#fakebox {
    right: 50%;
    transform: translate(50%, 0)
}

.leaflet-fake {
    float: left;
}
    
.leaflet-fake a {
    width: 40px;
    height: 40px;
    line-height: 40px;
}

.leaflet-fake:first-child {margin: 0 15px 0 0;}
    
.leaflet-fake:last-child {display: block;}

.leaflet-fake:last-child img {
    width: 16px;
    margin: 10px;
}
    
.leaflet-fake img {
    width: 24px;
    margin: 6px;
}
    
.leaflet-fake a:active, button:active {
    background-color: #ef8f25;
    opacity: 1;
    }
       
}

/* utilty stuff */

.orangegrad {
    background: #F09819;
    background: linear-gradient(#ed6904, #f3d25d); 
}

.greengrad {
    background: #4aa848;
    background: linear-gradient(to top,  #4aa848, #2b7438 ); 
}

.browngrad {
    background: #d28513;
    background: linear-gradient(to top,  #d28513, #7f4014); 
}

.bluegrad {
    background: #00205c;
    background: linear-gradient(to top, #0071ce -90px, #00205c );
}