/* Mobile Layout: Max 480px. */

@media only screen and (max-width: 480px) {

			#desktop {
				display: none;
			}
			#tablet {
				display: none;
			}
			#mobile {
				display: block;
			}

			body {
				background-color: white;
			}

			h3 {
				font-family: Arial, sans-serif;
				font-weight: lighter;
				font-size: 14px;
				text-align: center;
			}

			.containerMobile {
				width: 260px;
				background-color: white;
			}

			.map {
				background-color: white;
			}

			g:hover{
				opacity: 0.8;
			}

			div.tooltipMobile {	
			    position: absolute;			
			    text-align: center;							
			    padding: 5px;				
			    font: 14px sans-serif;		
			    background: rgba(0, 174, 239, 0.4);
			    border: 0px;		
			    border-radius: 6px;	
			    width:100%		
			    pointer-events: none;
			}

			svg.legend{
				font-size: 10px;
				font-family: Arial, sans-serif;
				margin-top: 5px;
				position: absolute;
			}

			text.legend{
				color: #4f6572;
			}

			.captionMobile{
				font-size: 11px;
				font-family: Arial, sans-serif;
				color: #989898;
				margin-top: 5px;
				margin-left: 3px;
				margin-right: 3px;
			}
			.dekMobile{
				font-size: 11px;
				font-family: Arial, sans-serif;
				text-align: center;
				font-weight: lighter;
			}
}

/* Tablet Layout: 481px to a max of 768px. */
	
@media screen and (min-width: 481px) and (max-width: 768px) {

			#desktop {
				display: none;
			}
			#tablet {
				display: block;
			}
			#mobile {
				display: none;
			}

			body {
				background-color: white;
			}
			
			h3 {
				font-family: Arial, sans-serif;
				font-size: 18px;
				font-weight: lighter;
				text-align: center;
				border-bottom: 1px dotted #1a1a1a;
				padding-bottom: 10px;
				padding-top: 10px;
				display: inline-block;
				width: 30%;
				margin: auto;
				
			}
			
			div.tooltipTablet {	
			    position: absolute;			
			    text-align: center;							
			    padding: 5px;				
			    font: 14px sans-serif;		
			    background: rgba(221, 241, 254, 0.7);
			    border: 10px;		
			    border-radius: 10px;			
			    width:200px;
			    pointer-events: none;
			}

			h1 {
				font-family: Arial, sans-serif;
				font-size: 24px;
				font-weight: lighter;
				text-align: center;
			}

			.containerTablet {
				width: 570px;
				background-color: white;
			}

			.map {
				background-color: white;
			}

			g:hover{
				opacity: 0.8;
			}

			svg.legend{
				font-size: 12px;
				font-family: Arial, sans-serif;
				color: #4f6572;
				margin-top: 5px;
				position: absolute;
			}

			text.legend{
				color: #4f6572;
			}

			.caption{
				font-size: 12px;
				font-family: Arial, sans-serif;
				color: #989898;
				margin-top: 5px;
				margin-left: 3px;
				margin-right: 3px;
			}
			.dek{
				font-size: 16px;
				font-family: Arial, sans-serif;
				text-align: center;
				font-weight: lighter;
			}
}

/* Desktop Layout: 769px and up. */

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

			#desktop {
				display: block;
			}
			#tablet {
				display: none;
			}
			#mobile {
				display: none;
			}

			body {
				background-color: white;
			}
			
			h3 {
				font-family: Arial, sans-serif;
				font-size: 18px;
				font-weight: lighter;
				text-align: center;
				border-bottom: 1px dotted #1a1a1a;
				padding-bottom: 10px;
				padding-top: 10px;
				display: inline-block;
				width: 30%;
				margin: auto;
				
			}
			
			div.tooltip {	
			    position: absolute;			
			    text-align: center;							
			    padding: 5px;				
			    font: 14px sans-serif;		
			    background: rgba(221, 241, 254, 0.7);
			    border: 10px;		
			    border-radius: 10px;			
			    width:200px;
			    pointer-events: none;
			}
			
			h1 {
				font-family: Arial, sans-serif;
				font-size: 24px;
				font-weight: lighter;
				text-align: center;
			}
			

			.container {
				width: 905px;
				background-color: white;
			}

			.map {
				background-color: white;
			}
			
			
			
			g:hover{
				opacity: 0.8;
			}

			
			svg.legend{
				font-size: 12px;
				font-family: Arial, sans-serif;
				color: #4f6572;
				margin-top: 5px;
				position: absolute;
			}
			

			text.legend{
				color: #4f6572;
			}
			
			
			.caption{
				font-size: 12px;
				font-family: Arial, sans-serif;
				color: #989898;
				margin-top: 5px;
				margin-left: 3px;
				margin-right: 3px;
			}
			.dek{
				font-size: 16px;
				font-family: Arial, sans-serif;
				text-align: center;
				font-weight: lighter;
			}
			
			
}