@media only screen and (max-width : 900px){
	.panel{
		width:140px;
	}

	#title{
		width:235px;
		padding:8px;
	}

	#title .content{
		font-size:32px;
	}

	#title .logo img{
		width :42px;
		height:42px;
	}

	#title .info-icon{
		font-size:12px;
	}

	#animation-controls .button{
		width:70px;
		font-size:12px;
	}

	#animation-controls .button.with-arrows{
		width:105px;
	}

	#loading-status, #zoom-level{
		font-size:12px;
	}

	#menu{
		top:109px;
	}

	#menu .section-container{
		max-height:calc( 100vh - 225px );
	}

	#menu .section .header{
		font-size:12px;
	}

	#menu .section .content .button,
	#menu .section .content select{
		font-size:12px;
		width:124px;
	}

	#menu-icon{
		display:block;
		top:75px;
	}

	#popup .content .content-container .section{
		margin-top  :10px;
		margin-left :10px;
		margin-right:10px;
	}

	#popup .content.layers .desktop-layers{ display:none;  }
	#popup .content.layers  .mobile-layers{ display:block; }

	.ol-zoom, .ol-zoom-extent{
		bottom:37px;
	}

	.ol-zoom-extent{
		bottom:94px;
	}

	.ol-control.search-toggle{
		bottom:125px;
	}

	.notification{
		bottom:65px;
		width:417px;
	}
}

@media only screen and (max-width : 600px){
	.hidden-600{ display:none !important; }

	.panel{
		width:135px;
	}

	.ol-zoom, .ol-zoom-extent{
		bottom:10px;
	}

	.ol-zoom-extent{
		bottom:65px;
	}

	.ol-control.search-toggle{
		bottom:95px;
	}

	.ol-touch .ol-control button{
		font-size:16px;
	}

	#animation-frame-timestamp{
		font-size:10px;
	}

	#animation-frame-timestamp .time-chunk{
		padding:1px 4px;
	}

	#animation-controls .button{
		width:58px;
		font-size:10px;
	}

	#animation-controls .button.with-arrows{
		width:90px;
	}

	#animation-frame-slider{
		width:150px;
	}

	#animation-frame-slider .slider-dot{
		margin-left:-4px;
		width :8px;
		height:8px;
	}

	#animation-frame-slider .slider-tick{
		margin-left:0px;
		width:1px;
	}

	#title{
		width:195px;
		padding:6px;
	}

	#title .content{
		font-size:26px;
	}

	#title .logo img{
		width :36px;
		height:36px;
	}

	#title .info-icon{
		display:none;
	}

	#loading-status, #zoom-level{
		top:35px;
		right:40px;
	}

	#loading-spinner img{
		width:48px;
	}

	#menu{
		top:95px;
	}

	#menu .section-container{
		max-height:calc( 100vh - 202px );
	}

	#menu .section .content .toggle-button{
		width:40px;
	}

	#menu-icon{
		top:64px;
		font-size:12px;
	}

	#layers-menu{
		width:calc( 100vw - 78px );
	}

	.datasets{
		top:64px;
	}

	.datasets .section{
		margin-bottom:4px;
	}

	.datasets .section .condensed-button{
		width :8px;
		height:8px;
		padding:4px 8px 8px 4px;
		font-size:12px;
	}

	#popup{
		padding:25px;
	}

	#popup .content .header{
		font-size:20px;
	}

	#popup .content .main-container{
		height:calc( 100% - 110px );
	}

	#popup .content .popup-button{
		font-size:14px;
	}

	#popup .content .main-container .content-container::before{
		height:0px;
	}

	#popup .content.layers .main-container .content-container{
		padding:7px;
	}

	#popup .content.layers .content-container .section{
		margin:3px;
		width:280px !important;
		display:inline-block;
	}

	#popup .content.layers .content-container .section.full{
		width:100% !important;
	}

	#popup .content.layers .content-container .section .layer{
		padding:5px 3px;
	}

	#popup .content.layers .content-container .section .layer .name{
		font-size:14px;
	}

	#popup .content.layers .content-container .section .layer .opacity-input{
		width:20px;
	}

	#popup .content.layers .content-container .section .layer .order-layers{
		margin-left:4px;
		font-size:14px;
		padding:0 5px;
	}

	.notification{
		bottom:63px;
		width:375px;
	}

	#search-bar{
		bottom:63px;
	}

	#mouse-label{
		display:none !important;
	}
}

@media only screen and (max-width : 500px){
	.hidden-400{ display:none !important; }

	#mobile-menu{
		position:fixed;
		display:block;
		bottom:0;
		left:0;
		width:100vw;
		z-index:2;
	}

	#mobile-menu table{
		width:100%;
		height:100%;
		border-collapse:collapse;
	}

	#mobile-menu td{
		background:rgba(0,0,0,0.85);
		border:1px solid rgba(255,255,255, 0.35);
		color:rgba(255,255,255,0.9);
		font-family:'Ropa Sans';
		text-align:center;
		padding:8px 0;
		font-size:14px;
		cursor:pointer;
	}

	#mobile-menu td i,
	#mobile-menu td svg{
		margin-right:3px;
	}

	#mobile-menu td.active{
		background:rgb(14, 113, 202);
	}

	#mobile-menu-view{
		display:none;
		position:fixed;
		top:0;
		left:0;
		width:100vw;
		height:100vh;
		background:linear-gradient( rgba( 14, 113, 202, 0.9 ), rgba(0,0,0,0.9 ) );
		z-index:-1;
	}

	.panel{
		width:120px;
	}

	#animation-interface{
		top:auto;
		right:auto;
		left:10px;
		bottom:37px;
	}

	#animation-frame-slider{
		width:calc(100vw - 115px);
	}

	#animation-frame-timestamp{
		position:fixed;
		font-size:10px;
		top  :10px;
		right:10px;
	}

	#loading-status, #zoom-level{
		font-size:10px;
	}

	#title{
		width:123px;
		padding:5px;
	}

	#title .content{
		font-size:17px;
	}

	#title .logo{
		margin-right:2px;
	}

	#title .logo img{
		width :22px;
		height:22px;
	}

	#title .info-icon{
		font-size:8px;
	}

	#menu{
		top:83px;
	}

	#menu .section-container{
		max-height:calc( 100vh - 228px );
	}

	#menu .section .content .toggle-button{
		margin:0 3px;
	}

	#menu .section .content .button,
	#menu .section .content select{
		width:100px;
	}

	#menu-icon{
		top:52px;
	}

	.datasets{
		top:52px;
		display:none !important;
	}

	#layers-menu{
		bottom:94px;
	}

	.colorbars .tick{
		display:none !important;
	}

	#popup .content .main-container{
		width:calc( 100% -  10px );
	}

	.ol-zoom, .ol-zoom-extent{
		bottom:40px;
	}

	.ol-zoom-extent{
		bottom:124px;
	}

	#popup .content.layers .content-container .section.mobile-only{
		display:inline-block;
	}
}