* {box-sizing: border-box;}

body {
  margin : 0;	
  font-family: "Lucida Sans", Verdana, Arial, Helvetica, sans-serif;
}

.quoteBox { margin-left:70px; margin-right:70px; padding:10px; border:5px solid #cc0000; font-size:16px; color:#000000; text-align:center; border-radius: 25px 0px;}

.imgCBorder {border:5px solid #cc0000; border-radius: 25px 0px;}

.pNarrow {
	max-width: 400px;
}

.logoItalic {
	font-style: italic;
}

.logoBold {
	font-weight: bold
}

#logoImg{
	vertical-align: middle; 
	padding-left: 25px;	
	height: 50px;
	width: 55ps;
}

#burgerBtn {
	background-color: #052962; 
	border: none; 
	float: left; 
	margin-top: 13px; 
	margin-left: 20px;
}

#burgerImg {
	cursor: pointer;
	width: 30px;
	height: 30px;
}

/*grid : mobile first design*/
.wrapper {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: repeat(5, auto);
	background-color: #ffffff;
}

/*top row, left col, bottom row, right col*/
 .header {
	text-align: center; /*used a span for the logo*/
   	background-color: #052962;
	color: #ffffff;
	font-size: 2em;
	line-height: 1.6;
	grid-area: 1 / 1 / 2/ -1;
}

 #navbar {
 	background-color: #333;
	grid-area: 2 / 1 / -1 / 2;
	z-index: -1;	
}

.content {
    grid-area: 2 / 1 / 3 / -1;
/*ADJUST PADDING AS SCREEN SIZE GROWS*/	
	padding: 25px;
}

.flxContainer {
	display: flex;
	flex-wrap: wrap;
}

.flxDiv {
	flex: 1 1 auto;
	padding-right: 40px;
}

.alignCenter {
	text-align: center;
}

.alignLeft {
	text-align: left;
}


.flxDivHR {
	width:250px;
	height:5px;
	border:none;
	border-radius: 25px;
}

.flxDivHRThick {
	margin-left: 0; /*left align made easy*/
	height: 10px;
	width:250px;
	border:none;
	border-radius: 25px;
}


.bkgndBeige{
	background-color:#edb540; 
}

.bkgndBlue{
	background-color:#52c3f2; 
}

.bkgndOrange{
	background-color:#ff7f0f; 
}

.bkgndRed{
	background-color:#ff4436; 
}

.bkgndWhite{
	background-color:#ffffff; 
}

.flxDivButtonLink:link, .flxDivButtonLink:visited {
	border-style: solid;
	border-width: 3px;
	border-radius: 25px;	
    padding: 10px 30px;
	color: #000000;
	text-align: center;
	text-decoration: none;
	display: inline-block;
}
	
.flxDivButtonLink:hover, .flxDivButtonLink:active {
	color: white;	
}

.flxDivButtonLinkRed:link, .flxDivButtonLinkRed:visited {
	border-color: #f44336;
}

.flxDivButtonLinkRed:hover, .flxDivButtonLinkRed:active {
	background-color: #f44336;
}

.flxDivButtonLinkOrange:link, .flxDivButtonLinkOrange:visited {
	border-color: #ff7f0f;
}

.flxDivButtonLinkOrange:hover, .flxDivButtonLinkOrange:active {
	background-color: #ff7f0f;
}

.flxDivButtonLinkBeige:link, .flxDivButtonLinkBeige:visited {
	border-color: #edb540;
}

.flxDivButtonLinkBeige:hover, .flxDivButtonLinkBeige:active {
	background-color: #edb540;
}


.flxDivButtonLinkBlue:link, .flxDivButtonLinkBlue:visited {
	border-color: #52c3f2;
}

.flxDivButtonLinkBlue:hover, .flxDivButtonLinkBlue:active {
	background-color: #52c3f2;
}


.sidebarL {
    grid-area: 3 / 1 / 4 / -1;
	display: none;
	text-align: center;
}

.sidebarLCaptionText {
	font-size: 2em;
	line-height: 1.3;
}

.sidebarR {
    grid-area: 3 / 1 / 4 / -1;
	text-align: center;
}

.sidebarRImg {
	max-width:100%; 
	margin-top: 50px;
}

.sidebarRCaptionText {
	font-size: 1.2em;
	line-height: 1.3;
	max-width: 400px;
	margin-left: auto;
	margin-right: auto;
}

.footer {
    grid-area: -2 / 1 / -1 / -1;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	background-color: #032d46;
}

.footerDiv {
	flex: 1 1 auto;
	color: #ffffff;
	max-width : 450px;	
	/*padding-right: 20px;*/
	padding-left: 20px;
}

.footerDiv a {
	text-decoration: none;
	color: #ffffff;
}

.footerDiv a:hover {
	color: #fde934;
}

.footerTbl {
 width: 450px;
}

.footerTbl, td {
padding-right: 10px;	
}
	  
/*navigation bar*/  
ul.topnav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

ul.topnav li {
  /*float: left;*/
}

ul.topnav li a, ul.topnav li .dropbtn {
  display: block;
  color: white;
  text-align: center;
  padding: 10px 16px;
  text-decoration: none;
}

ul.topnav li a:hover, .dropdown:hover .dropbtn {
  background-color: red;
}

.act {
  background-color: red;
}

.dropdown {
  display: block;
}

ul.topnav li .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;
}

ul.topnav li .dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

ul.topnav li .dropdown-content a:hover {background-color: #f1f1f1;}

ul.topnav .dropdown:hover .dropdown-content {
  display: block;
}
/*MEDIA QUERY*/
@media screen and (min-width: 600px) {

/*foat the menu*/
ul.topnav li.right {
	float: right;
}

ul.topnav li 
 {float: left;}
 /*display as a inline-block to not get a line break */
 ul.topnav li a, 
 ul.topnav li .dropbtn, 
 ul.topnav li.dropdown 
 {display: inline-block;}

#burgerBtn {
	margin-top: 20px; 
}

#logoImg{
	padding-left: 25px;	
	height: 70px;
	width: 77ps;
}
 
/*top row, left col, bottom row, right col*/ 
.header {
	font-size: 3em;
	grid-area: 1 / 1 / 2 / -1;
	padding: 10px;
}
 
#navbar {
	grid-area: 2 / 1 / 3 / -1;
	z-index: 0;
}

.content {
    grid-area: 3 / 1 / 4 / -3;
}
/*
.sidebarL {
    grid-area: 3 / 1 / 4 / 2;
	display: block;
}
*/
.sidebarR {
    grid-area: 3 / -3 / 4 / -1;    
}

.footer {
    grid-area: -2 / 1 / -1 / -1;
}

.flxContainer {
	flex-wrap: wrap;
}
  
}/*end media query at 600px*/

@media only screen and (min-width: 1260px) {

/*top row, left col, bottom row, right col*/ 

.header {
	grid-area: 1 / 1 / 2 / -1;
	padding: 20px;
}
 
#navbar {
	grid-area: 2 / 1 / 3 / -1;
}

.content {
    grid-area: 3 / 2 / 4 / -3;
}

.sidebarL {
    grid-area: 3 / 1 / 4 / 2;
	display: block;
}

.sidebarR {
    grid-area: 3 / -3 / 4 / -1;    
}

.footer {
    grid-area: -2 / 1 / -1 / -1;
}

	
}