@charset "utf-8";
/* CSS Document */
		/* Base styles for mobile (320px - 480px) */
		body {
		  font-family: ‘Roboto’, sans-serif;			
		  font-size: 14px;
		  padding: 0px;
		  line-height: 1.5;		
		}
		  #TheTitle {
			font-size:1.33em;
			margin-bottom: 0px;  
		  }		
		}

		/* Small tablets and larger mobile devices (481px - 768px) */
		@media (min-width: 481px) {
		  body {
			font-size: 15px;
			padding: 20px;
		  }
		  #TheTitle {
			font-size:1.6em;
			margin-bottom: 0px;  
		  }	
		}

		/* Tablets and small laptops (769px - 1024px) */
		@media (min-width: 769px) {
		  body {
			font-size: 16px;
			padding: 24px;
			margin: 0 auto;
		  }
		}

		/* Large desktops and high-resolution screens (1025px and up) */
		@media (min-width: 1025px) {
		  body {
			font-size: 18px;
			padding: 32px;
		  }
		}
		/* Extra-large screens (1440px and up) */
		@media (min-width: 1440px) {
		  body {
			font-size: 20px;
			padding: 40px;
		  }
		}		
		
		
	   header {
		  position: sticky;
		  top: 0;
		  padding-top: 12px;
		  background: #555;
		  color: #f1f1f1;
		}
		.master {
			display: grid;
			grid-template-columns: 1fr auto 1fr;
		}
		.left  { justify-self: start; }
		.mid   { 
			display:flex;
			align-items: center;
			justify-self: center;
			min-width: 280px;
		
		}
		.right { justify-self: end; }
		ul{
			list-style: none;
			background: #22438C;
		}
		ul li ul.dropdown  li {
			display : block;
			width: auto;
		}
		ul li {
			display:inline-block;
			position:relative;
		}
		ul li a {
			display : block;
			padding : 12px 12px;
			color : white;
			text-decoration: none;
			text-align: left;
			font-size : 18px;
		}
		ul li ul.dropdown {
			font-size: 12px;
			width:100%;
			background-color: #22438C;
			position: absolute;
			z-index: 999;
			display:none;
		}
		ul li a:hover{
			background:#112C66;
		}
		ul li:hover ul.dropdown{
			display: inline-block;
		}
		div.card {
		  padding:20px;
		  width: 250px;
		  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
		}