* {
    box-sizing: border-box;
}

/* Header/logo Title */
.header {
    padding: 10px;
    text-align: center;
    background: #55AAAA;
    color: Yellow; }

.company {
    background: #55AAAA;
    padding: 2px;
    border: 0px solid white;
    color: White;
    text-shadow: 2px 3px 2px #333333;
    text-align: center; }

.Aspacing { letter-spacing: 4px; font-weight: bold; }
.Ispacing { letter-spacing: 3px; font-weight: normal; }


/* ------ This section help stack top menu ------ */
/* Style the top navigation bar */
.navbar {
    display: flex;
    background-color: #55AAAA;
}

/* Style the navigation bar links */
.navbar a {
    color: white;
    padding: 8px 16px; /* Vertical, Horizontal */
    text-decoration: none;
    text-align: center; /* Align when stacked, left center right */
}

/* Change color on hover */
.navbar a:hover {
    background-color: Teal;
    color: Gold; /* Wheat */
}
/* ------------------------------------------ */

/* Column container */
.row {  
    display: flex;
    flex-wrap: wrap;
} 


/* Container for flexboxes
.row {
    display: -webkit-flex;
    display: flex;
}
*/

/* Create three equal columns that sits next to each other */
.column {
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    padding: 10px;
/*	background-color: teal; */ /* Visual Aid */
}

/* Gray background - picture frame */
.addgray {
	background-color: #A9A9A9;
}

a:hover {
	color: Linen;
	background-color: #888888; }

/* ====== Dropdown Menu Bar BEGIN====== */
/* Dropdown menu bar formats begin */
ul.nav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #000000; /* Nav bar main BG color */
    display: flex; /* added to stack */
}

li.nav {
    float: left;
}

li a, .dropbtn {
    display: inline-block;
    color: white; /* main nav bar text color */
    text-align: center; /* center */
    padding: 8px 16px;
    text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
    background-color: Teal;
}

li.dropdown {
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #4682B4;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    color: white; /* drop down list text color */
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {background-color: #005050; }

.dropdown:hover .dropdown-content {
    display: block;
}
/* ====== Dropdown Menu Bar END ====== */

/* Flex Wrap */
.flex-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
/*    background-color: Teal; */
}

.flex-container > div {
/*  background-color: #F1F1F1; */
    width: 175px;
    margin: 35px;
    text-align: center;
/*  line-height: 75px; */
/*  font-size: 30px; */
}
/* End Flex Wrap */


/* Footer Style */
.footer {
    padding: 5px;
    text-align: center;
    background: #333333;
}

/* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 700px) {
    .row, .navbar {   
        flex-direction: column;
    }
}

/* Hide content on narrow screen */
@media only screen and (max-width: 700px) {
    #hidecontent {
        display: none;
    }
}