/* low resolution, 480px and below, targeted to smartphones */
@media only screen and (max-width: 480px)
{
    h1 {font-family: Arial, Helvetica, sans-serif; font-weight: bold; font-size: 175%; color: rgb(32,56,100);}
    h1 a {font-family: Arial, Helvetica, sans-serif; text-decoration: none; font-weight: bold; font-size: 100%; color: rgb(32,56,100);}
    h2 {font-family: Arial, Helvetica, sans-serif; font-weight: bold; font-size: 130%; color: rgb(32,56,100);}
    h2 a {font-size: large; text-decoration: none; color: rgb(32,56,100);}
    p {font-family: Arial, Helvetica, sans-serif; font-size: 100%; color: rgb(0,0,0); line-height: 150%;}
    li {text-align: left; font-size: 100%; font-family: Arial, Helvetica, sans-serif; line-height: 120%;}
    body { background: rgb(242,242,242);}
    #master {background: rgb(255,255,255); width: 95%; margin: 0 auto; border: 1px solid rgb(0,0,0);}
    header {height: 120px; padding: 2px;}
    nav {max-width: 100%; background-color: rgb(130,130,130); display: flex; flex: 1; flex-wrap: wrap; text-align: left;}
    nav ul {list-style-type: none; font-size: 105%; font-family: Arial, Helvetica, sans-serif;}
    nav ul ul {list-style-type: none; font-size: 80%; padding: 0; font-family: Arial, Helvetica, sans-serif;}
    nav li a {list-style-type: none; text-decoration: none; line-height: 120%; color: rgb(255,255,255);}
    .intro{border-top: 1px solid rgb(0,0,0); padding: 10px; margin: 0 auto;}
    .content{max-width: 100%; margin: 0 auto; display: flex; flex: 1; flex-wrap: wrap; padding: 10px; text-align: center;}
    img {max-width: 100%;}
    footer nav {margin-bottom: 0; border-top: 1px solid rgb(0,0,0);}
}
/* medium resolution, 481px to 1023px, targeted to tablets */
@media only screen and (min-width: 481px)
{
    h1 {font-family: Arial, Helvetica, sans-serif; font-weight: bold; font-size: 175%; color: rgb(32,56,100);}
    h1 a {font-family: Arial, Helvetica, sans-serif; text-decoration: none; font-weight: bold; font-size: 100%; color: rgb(32,56,100);}
    h2 {font-family: Arial, Helvetica, sans-serif; font-weight: bold; font-size: 130%; color: rgb(32,56,100);}
    h2 a {font-size: large; text-decoration: none; color: rgb(32,56,100);}
    p {text-align: left; font-family: Arial, Helvetica, sans-serif; font-size: 100%; color: rgb(0,0,0); line-height: 150%;}
    li {text-align: left; font-size: 100%; font-family: Arial, Helvetica, sans-serif; line-height: 120%;}
    body {background: rgb(242,242,242);}
    #master {background: rgb(255,255,255); width: 95%; margin: 0 auto; border: 1px solid rgb(0,0,0);}
    header {height: 120px; padding: 2px;}
    nav {max-width: 100%; background-color: rgb(130,130,130); display: flex; flex: 1; flex-wrap: wrap; text-align: left;}
    nav ul {list-style-type: none; font-size: 105%; font-family: Arial, Helvetica, sans-serif;}
    nav ul ul {list-style-type: none; font-size: 80%; padding: 0; font-family: Arial, Helvetica, sans-serif;}
    nav li a {list-style-type: none; text-decoration: none; line-height: 120%; color: rgb(255,255,255);}
    .intro{border-top: 1px solid rgb(0,0,0); padding: 10px; margin: 0 auto;}
    .content{max-width: 100%; margin: 0 auto; display: flex; flex: 1; flex-wrap: wrap; padding: 10px; text-align: center;}
    img {max-width: 100%;}
    footer nav {margin-bottom: 0; border-top: 1px solid rgb(0,0,0);}
}

/* high resolution, 1024px and more, targeted to laptops and desktops */
@media only screen and (min-width: 1024px)
{
    h1 {font-family: Arial, Helvetica, sans-serif; font-weight: bold; font-size: 175%; color: rgb(32,56,100);}
    h1 a {font-family: Arial, Helvetica, sans-serif; text-decoration: none; font-weight: bold; font-size: 100%; color: rgb(32,56,100);}
    h2 {font-family: Arial, Helvetica, sans-serif; font-weight: bold; font-size: 130%; color: rgb(32,56,100);}
    h2 a {font-size: large; text-decoration: none; color: rgb(32,56,100);}
    p {font-family: Arial, Helvetica, sans-serif; font-size: 100%; color: rgb(0,0,0); line-height: 150%;}
    li {text-align: left; font-size: 100%; font-family: Arial, Helvetica, sans-serif; line-height: 120%;}
    body {background: rgb(242,242,242);}
    #master {background: rgb(255,255,255); width: 1000px; margin: 0 auto; border: 1px solid rgb(0,0,0);}
    header {height: 120px; padding: 2px;}
    nav {max-width: 100%; height: 100px; background-color: rgb(130,130,130); display: flex; flex: 1; flex-wrap: nowrap; text-align: left;}
    nav ul {list-style-type: none; font-size: 105%; font-family: Arial, Helvetica, sans-serif;}
    nav ul ul {list-style-type: none; font-size: 80%; padding: 0; font-family: Arial, Helvetica, sans-serif;}
    nav li a {list-style-type: none; text-decoration: none; line-height: 120%; color: rgb(255,255,255);}
    .intro{margin: 0 auto; border-top: 1px solid rgb(0,0,0); padding: 10px;}
    .content{max-width: 100%; margin: 0 auto; display: flex; flex: 1; flex-wrap: nowrap; padding: 10px; text-align: center;}
    footer nav {margin-bottom: 0; border-top: 1px solid rgb(0,0,0);}
}