/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-width : 320px)
and (max-width : 480px) {
/* Styles */
}
 
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}
 
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}
 
/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-width : 768px)
and (max-width : 1024px) {
/* Styles */
}
 
/* iPads (landscape) ----------- */
@media only screen
and (min-width : 768px)
and (max-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
 
/* iPads (portrait) ----------- */
@media only screen
and (min-width : 768px)
and (max-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
 
/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}
 
/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}
 
/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
* {
    box-sizing: border-box;
}
.row::after {
    content: "";
    clear: both;
    display: table;
}
/* For mobile phones: */
[class*="col-"] {
    width: 100%;
}
@media only screen and (min-width: 768px) {
    /* For desktop: */
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
    .col-5pc {width: 5%;}
}
html {
    font-family: “Verdana”, Arial, sans-serif;
}
.header {
    background-color: #9933cc;
    color: #ffffff;
    padding: 15px;
}
.menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.menu li {
    padding: 8px;
    margin-bottom: 7px;
    background-color: #33b5e5;
    color: #ffffff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.menu li:hover {
    background-color: #0099cc;
}

.left, .right {
  float:left;
  width:33.3%; /*The width is 20%, by default*/
}

.main {
  float:left;
  width:33.3%; /*The width is 60%, by default*/
}

/*Use a media query to add a breakpoint at 750px:*/
@media (max-width:750px) {
  .left, .main, .right {
    width:100%; /*The width is 100%, when the viewport is 750px or smaller*/
  }
}

section {color:#000080;}

<!--  for drop down menu -->
 /* Dropdown Button */
.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
    color: teal;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
    background-color: #3e8e41;
} 
<!-- top navbar -->
 /* Add a black background color to the top navigation */
.topnav {
    background-color: #333;
    overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}

/* Change the color of links on hover */
.topnav a:hover {
    background-color: #ddd;
    color: black;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
    display: none;
} 

body,p,th,td,a,h1,h2,h3,h4,ul,ol,dl,li,dt,dd,form {font-family:helvetica,arial,sans-serif}
body    {background-image:url(images/wallpaper.jpg)}
h2      {text-align:center;color:#000080}
h3      {text-align:center;color:#C71585}
h4      {text-align:center;color:#000080}

td  {padding-left:4px;padding-right:4px}
th  {padding-left:4px;padding-right:4px} 

dd  {color:#C71585}
dt  {color:#000080}
.f85c   {font-size:smaller; color:#000080; text-align:center}

.Surname {
visibility: hidden;
}


button  {background-color:#ffffcc;color:blue;font: bold 12px arial;}

.nav    {border-style:solid;border-width:thin} 
.navy    {border-style:solid;border-width:thin;font-size:0.625em;color:#000080;text-align:center;background:#ffffcc} 
.navc   {border-style:solid;border-width:thin;font-size:0.5em;color:#000080;text-align:center;background:white} 
div.nav table {border-style:solid;border-width:thin;width:100%;} 
div.nav th {border-style:solid;border-width:thin;font-size:0.625em;color:#000080;text-align:center;background:#ffffcc} 
div.nav td {border-style:solid;border-width:thin;font-size:0.625em;color:#000080;text-align:center;background:#ffffcc} 

div.navi table {border-style:double;border-width:medium;width:100%;border-collapse:collapse;border-color:gray} 
div.navi th {border-style:solid;border-width:thin;font-size:0.625em;color:#000080;text-align:center;background:#ffffcc;border-color:gray} 
div.navi td {border-style:solid;border-width:thin;font-size:0.625em;color:#000080;text-align:center;background:#ffffcc;border-color:gray} 

div.church table {border-style:double;border-width:medium;width:100%;border-color:gray; border-collapse:collapse} 
div.church th {border-style:solid;border-width:thin;font-size:0.625em;color:#C71585;background:#ffffcc;border-color:gray} 
div.church td {border-style:solid;border-width:thin;font-size:0.625em;color:#000080;background:#ffffcc;border-color:gray} 

div.memb table {border-style:double;border-width:medium;width:100%;border-collapse:collapse;border-color:gray} 
div.memb th {border-style:solid;border-width:thin;font-size:0.625em;color:#C71585;text-align:center;background:#ffffcc;border-color:gray;} 
div.memb td {border-style:solid;border-width:thin;font-size:0.625em;color:#000080;text-align:center;background:#ffffcc;border-color:gray;} 


.index {border-style:double;border-width:medium; border-color:gray; border-collapse:collapse} 
.index td {border-style:solid;border-width:thin; color:#C71585; border-color:gray;font-size:0.7em;background:#ffffcc;} 
.index th {border-style:solid;border-width:thin; color:#C71585; border-color:gray;font-size:0.7em;background:#ffffee;} 

div.int table {border-style:double;border-width:medium;width:100%; border-collapse:collapse;border-color:gray;} 
div.int th {border-style:solid;border-width:thin;font-size:0.625em;background:#ffffcc;border-color:gray;} 
div.int td {border-style:solid;border-width:thin;font-size:0.625em;background:#ffffcc;border-color:gray;} 


.m80 {margin-left:10%;margin-right:10%}  
.m70 {margin-left:15%;margin-right:15%}  

em      {color:red}

.c4     {color:#C71585} 
.c5     {color:#000080}
.cr     {color:red}
.cg     {color:green}
span.cr {color:red}
span.c5 {color:#000080}

.br     {background:red}
.by     {background:#ffffcc}
.f10    {font-size:0.625em}  
.f10c   {font-size:0.625em; text-align:center}
.f105c  {font-size:0.625em; color:#000080; text-align:center}
.f104l  {font-size:0.625em; color:#C71585; text-align:left}
.f104c  {font-size:0.625em; color:#C71585; text-align:center}
.f104r  {font-size:0.625em; color:#C71585; text-align:right}

.f114   {font-size:0.7em; color:#C71585} 
.f11c   {font-size:0.7em; text-align:center}
.f11csw {font-size:0.7em; text-align:center; width:100%;background-color:#ffffcc}
.f114l  {font-size:0.7em; color:#C71585; text-align:left}
.f115l  {font-size:0.7em; color:#000080; text-align:left}
.f114r  {font-size:0.7em; color:#C71585; text-align:right}
.f114c  {font-size:0.7em; color:#C71585; text-align:center}
.f16c   {font-size:1em; text-align:center}
.f205l  {font-size:1.25em; color:#000080; text-align:left}
.f205r  {font-size:1.25em; color:#000080; text-align:right}
.f205c  {font-size:1.25em; color:#000080; text-align:center}
.f84c   {font-size:0.5em; color:#C71585; text-align:center}
.f84l   {font-size:0.5em; color:#C71585; text-align:left}
.f85l   {font-size:0.5em; color:#000080; text-align:left}
.f85c   {font-size:0.5em; color:#000080; text-align:center}
.f85r   {font-size:0.5em; color:#000080; text-align:right}

.l      {font-size:larger}
.s      {font-size:smaller}  

.lista  {list-style-type:lower-alpha}
.listi  {list-style-type:lower-roman}

.tc     {text-align:center}
.tr     {text-align:right}
.tl     {text-align:left}  
.tl4    {text-align:left;color:#C71585}  
.tr4    {text-align:right;color:#C71585}  
.tl5    {text-align:left;color:#000080}  
.tc4    {text-align:center; color:#C71585}  
.tc5    {text-align:center; color:#000080}            
.tr5    {text-align:right; color:#000080}
   
.mem    {width:60%; margin-left:20%; background:#000080; color:white;}
.mem1   {background:#000080; color:white;}
.so	  {width:100%; font-size:smaller; background:#C71585; color:white;}
.black  {width:60%; margin-left:20%; background:black; color:white;}



.n      {border-style:none}
a:link  {text-decoration:none;color:blue}
a:visited {text-decoration:none;color:blue}
a:hover {color:#C71585}


body {font-family:Trebuchet MS;text-align:center;}

.m93 {width:100%;color:#884D18;position:fixed;top:85%;background-color:white;}
div.m93 td {background-color:#eadfab;font-size:smaller;}
div.m93 th {font-weight:normal;} 
div.m93 table {width:100%;}
p {font-size:smaller;text-align:center;}
.lft {text-align:left;}
.cntr {text-align:center;}
.rght {text-align:right;}
 
.backg {background:#fff29b;}

.w {color:white}
a:link  {text-decoration:none;color:#316b94;}
a:visited {text-decoration:none;color:#316b94;}
a:hover {color:blue}

div.m91 td {background-color:#fff0c6;font-size:smaller;}
.m91 {margin-left:4%;margin-right:4%;color:#C51814;}

.tab {width:100%}
div.subtab table {width:100%;border-width:thin;border-color:#316b94;border-style:solid;border-collapse:collapse;}
div.subtab td {border-width:thin;border-color:#884D18;border-style:solid;}
div.m92 td {background-color:#fff0c6;font-size:smaller;} 

.m92 {width:100%;color:#C51814;}
.itbrown {font-style:italic;color:#884D18;}
.itbbrown {font-weight:bold;color:#884D18;}
.it8brown {font-size:0.75em;color:#884D18;}

.m92td {color:#884D18;}
div.m92 table {width:100%;}

.w80 {margin-left:10%;margin-right:10%}
div.w80 table {margin-left:auto;margin-right:auto}
span.nobr { white-space: nowrap; }