JSFiddle

by Troy Pilewski

HTML

<!DOCTYPE html>
<html>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Gugi|Lato|Raleway|Roboto|Roboto+Condensed">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css">
<style>
    body {
        /* font-family: 'Gugi', cursive; */
        font-family: 'Roboto', sans-serif;
        /* font-family: 'Roboto Condensed', sans-serif; */
        /* font-family: 'Lato', sans-serif; */
        /* font-family: 'Raleway', sans-serif; */
        /* font-family: palatino, helvetica, sans-serif; */
        /* font-family: "Segoe UI", Arial, sans-serif; */
        background: #C6CCD0!important;
    }
    
    .w3-content {
        max-width: 1200px;
    }
    
    #banner {
        background-color: #022a3a;
    }
    
    ul.breadcrumb {
        padding: 2.5px 4px;
        list-style: none;
        background-color: transparent;
        display: inline-block;
        line-height: 0.85;
    }
    
    ul.breadcrumb li {
        display: inline;
        font-size: 10px;
    }
    
    ul.breadcrumb li+li::before {
        padding: 4px;
        color: #fffef9;
        /* content: "/\00a0"; */
        content: ">";
    }
    
    ul.breadcrumb li a {
        color: #fffef9;
        text-decoration: none;
    }
    
    ul.breadcrumb li a:hover {
        color: #e8b00f;
        font-weight: 900;
        text-decoration: underline;
    }
    
    ul.social {
        padding: 5px 8px;
        list-style: none;
        background-color: transparent;
    }
    
    ul.social li {
        color: #fffef9;
        display: inline;
        font-size: 16px;
    }
    
    ul.social li+li::before {
        padding: 4px;
        color: #fffef9;
        /* content: "/\00a0"; */
    }
    
    ul.social li a {
        color: #fffef9;
        text-decoration:...