@charset "utf-8";
/* ~ TOC ~ */
/* ~~ Defaults */
/* ~~~ List, Header and Paragraph */
/* ~~~~ headers and header mimics */
/* ~~~ Links */
/* ~~ Header */
/* ~~~ Navigation */
/* ~~ Content Areas ~~ */
/* ~~~ Sections */
/* ~~~~ Customize Section Elements */
/* ~~~~~ Services section group blocks */
/* ~~~~~~~ decorative top borders for service areas */
/* ~~~~~~ custom text elements in Services section */
/* ~~~~~ Portfolio section*/
/* ~~ Footer */
/* ~~ Misc reusable classes ~~ */
/* ~~~~ in-line styles */
/* ~~~~ floats ~~ */
/* ~~~ HTML 5 tag rendering support */
/* ~ end TOC ~ */

/* ~~ Defaults */
body { font: 10px 'Open Sans', Arial, Helvetica, Verdana, sans-serif; background: Snow; margin: 0 auto; padding: 0; color: Black; }
/* ~~~ List, Header and Paragraph */
ul, ol, dl { margin: 0; padding: 0; } 
h1, h2, h3, h4, h5, h6, p { margin: 0; padding: 0 30px; }
li p { margin: 0; padding: 0; }
/* ~~~~ headers and header mimics */
h1, .p1 { font-size: 2.5em; font-weight: bold; }
h2, .p2 { font-size: 1.8em; font-weight: bold; }
h3, .p3 { font-size: 1.6em; font-weight: bold; }
h4, .p4 { font-size: 1.4em; font-weight: bold; }
h5, .p5 { font-size: 1.1em; font-weight: bold; }
p, li p { font-size: 1.6em; }
p.sm { font-size: 1.3em; }
p.tiny { font-size: 1em; }
/* ~~~ Links */
a img { border: none; margin: 0; padding: 0; }
a:link { color: #000; text-decoration: underline; }
a:visited { color: #000; text-decoration: underline; }
a:hover, a:active, a:focus { text-decoration: none; }
/* ~~ Header */
header { width: 100%; margin: 0 auto; }
/* ~~~ Navigation */
ul.menu { /* horizontal in header with drop down menu */
	list-style-type: none; position: relative; top: 15px; font-family: 'Russo One', sans-serif; font-weight: bold; font-size: 1.5em; margin: 0 0 0 15px;	z-index: 2; }
ul.menu li { float: left; margin: 5px 15px; background: Snow; outline: Silver solid 1px; z-index: 2; }
ul.menu li a, ul.menu li a:visited, .dropbtn { /* keep button look */ padding: 5px 15px; display: block; text-decoration: none; background: Snow; color: Silver; }
.dropbtn {width: 270px; height: 45px;}
ul.menu li a:hover, ul.menu li .dropdown:hover .dropbtn, ul.menu li a:active, ul.menu li a:focus { /* this changes the background and text color for both mouse and keyboard navigators */ background: Silver; color: Snow; }
li.dropdown { display: block; /* extend clickable area into padding */ }
.dropdown-content { display: none; position: absolute; background: Snow; outline: Silver solid 1px;	width: auto; z-index: 1; }
.dropdown-content a { font-family: 'Open Sans', sans-serif; font-weight: 400; font-size: .7em; color: Silver; text-decoration: none; display: block; text-align: left; }
.dropdown-content a:hover {	background: Silver;	color: Snow; }
.dropdown:hover .dropdown-content { display: block; width: inherit; margin-left: 30px; }
ul.menu li p { padding: 0; }
ul.menu li p.logo { font-size: 2em; }
/* ~~ Content Areas ~~ */
.content { /* surrounds content under head and nav, above footer */ margin: 0; padding: 0; }
#welcome { /* home welcome banner - image animation in welcome css */ background: Snow; min-height: 30%; width: 100%; height: 325px; max-height: 50%; overflow:hidden; margin: 0 -30px 15px -30px; /* positioning relative to header & nav */ padding-left: 30px; /* keeps overlaid text boxes from edge */ }
/* ~~~ Sections */
section { /* don't add padding here, but to child divs, otherwise page width will be greater than 100% */ clear: both; background: Snow; min-height: 300px; }
/* ~~~~ Customize Section Elements */
/* ~~~~~ Services section group blocks */
#services.flex-container { /* more responsive alignment */ display: flex; flex-flow: row wrap; align-content: space-around; }	
#services.flex-container > div { /* each service block */ outline: 1px solid Silver; margin: 15px 0 15px 30px; padding: 15px 5px 15px 24px; width: 28%; min-width: 220px; }
#services.flex-container > div.FWDOPS_can {/* introduction to services */ width: 85%; min-width: 220px; outline: none; margin: 0; padding: 0; }
#services.flex-container > div.FWDOPS_can h3 { font-size: 17px; margin: 5px 0; }
/* ~~~~~~~ decorative top borders for service areas */
#services.flex-container > div.administrative {	border-top: 21px solid DarkKhaki; }
#services.flex-container > div.compliance {	border-top: 21px solid SlateBlue; }
#services.flex-container > div.finance { border-top: 21px solid LightGreen; }
#services.flex-container > div.marketing { border-top: 21px solid Teal; }
#services.flex-container > div.organization { border-top: 21px solid Gold; }
#services.flex-container > div.project { border-top: 21px solid IndianRed; }
#services.flex-container > div.research { border-top: 21px solid Plum; }
#services.flex-container > div.personnel { border-top: 21px solid Coral; }
#services.flex-container > div.training { border-top: 21px solid LightSalmon; }
/* ~~~~~~ custom text elements in Services section */
#services h1 { font-family: 'Russo One', sans-serif; margin-top: 15px; }
#services h2 { font-family: 'Russo One', sans-serif; font-weight: normal; font-size: 2em; margin: 0 0 5px -40px; }
#services ul li { width: 100%; margin: 0 0 5px 0; padding: 1px 0; font-weight: 600; }
/* ~~~~~ Portfolio section*/
#portfolio { width: 100%; margin-top: 60px; margin-bottom: 60px; border-top: 21px solid Tomato; }
#history { float: left; min-width: 225px; margin: 15px 15px 15px 30px; width: 34%;	border-top: 16px solid PaleTurquoise; }
#pricing { float: left; min-width: 225px; width: 32%; margin: 15px; border-top: 16px solid BurlyWood; }
#contact {float: left; min-width: 225px; width: 30%; margin: 15px 0 15px 15px; border-top: 16px solid SlateGray; }
#portfolio h1 { padding: 10px 0 5px 30px; }
#portfolio h2, #portfolio p { padding: 10px 5px 5px 15px; }
#portfolio ul li { margin: 0 5px 5px 25px; }
#portfolio ul li p { padding-left: 2px; }
/* ~~ Footer */
footer { background: SlateGray; margin: 0 auto;	padding: 30px; position: relative;/* this gives IE6 hasLayout to properly clear */ clear: both; color: Snow; }
footer ul { list-style: none; /* removes list marker */ }
footer ul li { float: left; display: block; padding: 10px; }
footer ul li::before { content: "|"; /* Alternative bullet content */ padding-right: 10px; color: Snow; }
footer p { font-size: 1.4em; margin-top: -1.1em; padding: 0 0 0 15px; }
footer h5 { padding: 0 10px; }
footer p.tiny { margin: 0; padding: 1px 10px 10px 10px; }
footer a:link, footer a:visited { text-decoration: none; color: Snow; }
footer a:hover, footer a:active, footer a:focus { text-decoration: underline; color: Black; }
/* ~~ Misc reusable classes ~~ */
/* ~~~~ in-line styles */
.boldthis { font-weight: 600; }
.light { font-weight: 400; }	
/* ~~~~ floats ~~ */
.fltrt { /* right float an element - floated element must precede elements that are to appear to its left */ float: right; margin-left: 2px; }
.fltlft { /* left float an element */ float: left; margin-right: 2px; }
.clearfloat { /* this class can be placed on a <br /> or empty block element as the final element following the last floated block (within the parent block) */ clear: both; height: 0; font-size: 1px; line-height: 0px; }

@media screen and (min-width: 960px) {
  #services.flex-container > div, #history, #pricing { width: 410px; }
 }
@media screen and (max-width: 810px) {
  ul.menu li { float: none; }
 }
@media screen and (min-width: 480px) {
  #services.flex-container > div, #history, #pricing { width: 370px; }
}
/* ~~~ HTML 5 tag rendering support */
header, section, footer, aside, article, figure { display: block; margin-right: 0; }
/* END of primary stylesheet */