@font-face {
			font-family: "TrixiePro-Heavy";
			src: url("9209.otf") format("truetype");
		}
		body,html{
			padding:0;
			margin:0;
			width: 100%;
			height:100%;
		}
		

		.mapcenter{
			width: 85px;
			height: 85px;
			overflow: auto;
			margin: auto;
			position: absolute;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
			z-index: 1000 !important;
		}

		.maptitle{
			position: absolute;
			bottom: 40px;;
			left: 0;
			right:0;
			width:100%;
			z-index: 100 !important;
			color:#000;
			text-align:center;
			font-size:24px;
			display:none !important;
		}
		.maptitle span{
			font-family: "TrixiePro-Heavy" !important;
			background: rgba(255,255,255,0.7);
			padding-left:10px;
			padding-right:10px;
			padding-bottom:5px;
			display:none !important;
		}
		.aboutmap{
			text-decoration: none;
		}
		#bar {
		    position: absolute;
		    width: 100%;
		    height: 24px;
		    left: 0;
		    bottom: 0;
		    background-color: rgba(26,26,26,0.9);
		    margin: 0 auto;
		    z-index: 10000;
		    display: flex;
            justify-content: space-between;
            align-items: center;
		}
		
		#bar a {
		    text-decoration: none;
		    color: #fff;
		}
		
		#bar span.donate a {
		    font-weight: 800;
		    letter-spacing: 1px;
		    color: #ff0;
		}
		
		#bar span.donate {
		    text-align: center;
		}
		
		#bar span.copyright {
		    letter-spacing: 1px;
		    padding-left: 10px;
		}
		
		#bar span {
		    flex: 1;
		    color: #fff;
		    font-size: 14px;
		}
		
		.leaflet-control-attribution {
		    display: none;
		}
	
		
		.timeslider {
		    position: absolute;
            bottom: 24px;
            width: 100%;
            z-index: 1000;
            background-color: rgba(26,26,26,0.7);
            cursor: default;
		}
		
		input.range {
          -webkit-appearance: none;
          bottom: -10px;
          position: relative;
          width: 100%;
          margin: 0;
          padding: 0;
          border: 0;
          background: transparent;
        }
        
        input.range:focus {
          outline: 0;
        }
        input.range::-moz-focus-outer {
          border: 0;
        }
        input.range::-webkit-slider-thumb {
          box-shadow: 1px 1px 1px black, 0px 0px 1px black;
          border: 0;
          height: 20px;
          width: 20px;
          border-radius: 50%;
          background: white;
          cursor: pointer;
          -webkit-appearance: none;
          margin-top: -7.5px;
        }
         
        input.range::-moz-range-thumb {
          box-shadow: 1px 1px 1px black, 0px 0px 1px black;
          border: 0;
          height: 20px;
          width: 20px;
          border-radius: 50%;
          background: white;
          cursor: pointer;
        }
        input.range::-ms-thumb {
          box-shadow: 1px 1px 1px black, 0px 0px 1px black;
          border: 0;
          height: 20px;
          width: 20px;
          border-radius: 50%;
          background: white;
          cursor: pointer;
          height: 5px;
        }
        input.range::-webkit-slider-runnable-track {
          width: 100%;
          height: 5px;
          cursor: pointer;
          box-shadow: 1px 1px 1px rgba(0, 0, 0, 0), 0px 0px 1px rgba(13, 13, 13, 0);
          background: indigo;
          border-radius: 20px;
          border: 0;
        }
         
        input.range::-moz-range-track {
          width: 100%;
          height: 5px;
          cursor: pointer;
          box-shadow: 1px 1px 1px rgba(0, 0, 0, 0), 0px 0px 1px rgba(13, 13, 13, 0);
          background: indigo;
          border-radius: 20px;
          border: 0;
        }
         
        input.range::-ms-track {
          width: 100%;
          height: 5px;
          cursor: pointer;
          background: transparent;
          border-color: transparent;
          color: transparent;
        }
        input.range::-ms-fill-lower,
        input.range::-ms-fill-upper {
          background: indigo;
          border: 0;
          border-radius: 40px;
          box-shadow: 1px 1px 1px rgba(0, 0, 0, 0), 0px 0px 1px rgba(13, 13, 13, 0);
        }
        .range__tick {
          fill: #a0a0a0;
        }
        .range__tick:first-child {
          -webkit-transform: translateX(2px);
          -moz-transform: translateX(2px);
          -ms-transform: translateX(2px);
          -o-transform: translateX(2px);
          transform: translateX(2px);
        }
        .range__tick:last-child {
          -webkit-transform: translateX(-3px);
          -moz-transform: translateX(-3px);
          -ms-transform: translateX(-3px);
          -o-transform: translateX(-3px);
          transform: translateX(-3px);
        }
        .range__field {
          border: 0;
        }
        
        svg.labels {
            fill: #fff;
        }
        
        .button-container {
        position: absolute;
        z-index: 1000;
        border: 2px solid rgba(0,0,0,0.2);
        border-radius: 32px;
        }
        
        .button-container .collapse-button {
            width: 32px;
            background-color: #f4f4f4;
            height: 32px;
            border: none;
            border-radius: 32px;
            cursor: pointer;
        }
        
        .button-container .collapse-button .button-icon:before {
            font-family: "FontAwesome";
            font-size: 24px;
        }
        
        .easy-button-container {
            visibility: hidden;
        }
        
		
		@media screen and (max-width:678px) {
		    #bar span.divider {
		        display: none;
		    }
		    #bar span.copyright {
		        font-size: 12px;
		    }
		    .leaflet-container {
            line-height: 1.2 !important;
        }
		}
		
		@media screen and (max-width:420px) {
		    #bar span.copyright {
		        display: none;
		    }
		    #bar span {
		        font-size: 14px;
		    }

		}
		
		@media (orientation: landscape) {
    		#map1{
    		width: 50%;
    		height: 100%;
    		background: #bfbfbf;
    		float:left;
    		}
    		
    		.line{
			height: 100%;
			width: 1px;
			left:50%;
			background:#000;
			position: absolute;
			z-index:1000;
		    }
    
    		#map2{
    		width: 50%;
    		height: 100%;
    		background: #bfbfbf;
    		float:left;
    		}
    		
        	.button-container {
            bottom: 50%;
            right: 50%;
            transform: translate(50%,50%);
            }
            
            .button-container.collapsed {
            bottom: 50%;
            right: 0%;
            transform: translateY(50%);
            }
            
            .button-container .collapse-button .button-icon:before {
            content: "\f101";
            }
            
            .button-container.collapsed .collapse-button .button-icon:before {
            content: "\f100";
            }
            
		}
		
		@media (orientation: portrait) {
		    #map1{
    		width: 100%;
    		height: 50%;
    		background: #bfbfbf;
    		float:left;
    		}
    		
    		.line{
			width: 100%;
			height: 1px;
			top:50%;
			background:#000;
			position: absolute;
			z-index:1000;
		    }
    
    		#map2{
    		width: 100%;
    		height: 50%;
    		background: #bfbfbf;
    		float:left;
    		}
    		
    		.button-container {
            bottom: 50%;
            right: 50%;
            transform: translate(50%,50%);
            }
            
            .button-container.collapsed {
            bottom: 24px;
            right: 50%;
            transform: translateX(50%);
            }
            
            .button-container .collapse-button .button-icon:before {
            content: "\f103";
            }
            
            .button-container.collapsed .collapse-button .button-icon:before {
            content: "\f102";
            }
		}