h1 {text-align: center; font-size: 30px; line-height: 1.8; color: black; font-family: "Noteworthy"; background-color: #87cefa;}

h2 {text-align: center; padding: 15px; font-size: 20px; line-height: 1.8; background-color: #87cefa; color: black; font-family: "Noteworthy";}

.titles {font-size: 20px; padding: 15px; background-color: rgb(147,156,180); font-family: "Noteworthy"; color: black; text-align: center;}

.container-fluid {background-color: white; font-family: "Noteworthy"; }

.navbar-collapse {background-color: rgb(86,121,183); color: black}

.row {display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; padding: 0 4px; font-size: 20px; font-family: "Noteworthy"; color: black; text-align: center;}

.column {width: 25%; padding: 15px; height: 100%; background-color: white;}

.top-image {margin-bottom: 5px; margin-top: 5px}

.clearfix { clear: both;}

.footer {background-color: rgb(86,121,183); text-align: center; font-size: 20px; font-family: "Noteworthy"; color: black; /*width: 100%; bottom: 0; left: 0; height: 100px; position: absolute;*/}

.center {display: block; margin-left: auto; margin-right: auto; width: 50%;}

ul {margin: 0; padding: 0; background-color: white; text-align: center;}

.navbar-nav {font-size: 20px; font-family: "Noteworthy"; background-color: rgb(86,121,183); color: black; position: -webkit-sticky; position: sticky; top: 0; padding: 30px;}

a:link {color: black}

a:visited {color: black;}

/*a:hover {background-color: #098bdc; color: black;}*/

a:active {background-color: #043e62; color: black;}

ul {font-family: "Noteworthy"; text-align: center; margin: 0; padding: 0; display:inline; font-size: 20px; color: white;}
ul li{display:inline; text-align: center;}

p {font-family: "Noteworthy"; text-align: center; padding: 15px; font-size: 20px; line-height: 1.8; background-color: white; color: black;}

/* Create four equal columns that sits next to each other 
.column {-ms-flex: 33%; flex: 33%; max-width: 33%; padding: 0 4px;}
.column img {margin-top: 8px; vertical-align: middle;}*/

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {.column {-ms-flex: 50%; flex: 50%; max-width: 50%;}}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {.column {-ms-flex: 100%; flex: 100%; max-width: 100%;}}

.fa {padding: 20px; font-size: 30px; width: 30px; text-align: center; text-decoration: none; margin: 5px 2px;}

.fa:hover {opacity: 0.7;}


 /* Dropdown Button */
.dropbtn {
    background-color: #3498DB;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;}

/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
    background-color: #2980B9;}

/* 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: #f1f1f1;
    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: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;}

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

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}