/* Master Style Sheet for TMCCONSULTING.CA web pages
Layout #1 - screen width > 1001px
	2 column - normal menu
Layout #2 - screens <= 1000px > 541px
	1 column - normal menu
Layout #3 - screens <= 540px
	1 column - hamburger menu
*/
body
 {
  margin:0;
  font-family:Calibri, sans-serif;
  font-size: 100%;
 }
div.block100
 { width:98%; margin:0 1%; }
div.block50
 { width:48%; margin:0 1%; }
div.bio
 {width:100%;}
div.bio img
 { float:right; margin:5px; }
div.bottom-main
 { margin-top:3%; display:flex; flex-wrap:wrap; justify-content:center;
  background-color:white; padding-bottom:1em;}
div.bottom-main2 {
  margin-top:3%;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  padding-bottom:1em;
  background-color:#FCFCFF;
  text-align:center;
  }
div.bottom-main2  h1 {
  width:100%;
  text-align:center;
 }
a.box-link { text-decoration:none; }
div.boxlink {
  border:1px solid #007cc344;
  border-radius:20px;
  padding:10px;
  height:8em;
  width:16em;
  margin:0.5em;
 }
div.boxlink a
 {text-decoration:none;}
div.boxlink h2 {
  font-size:x-large;
  color:black;
 }
div.boxlink p {
  font-size:x-large;
  color:black;
 }
div.boxlink:hover {
  border-color:black;
 }
div.boxlink2 {
  padding:10px;
  height:22em;
  width:22em;
  border:none;
  margin:1.5em;
 }
div.boxlink2 h2 {
  font-size:x-large;
  color:black;
  margin-top:0;
  margin-bottom:0.4em
 }
div.boxlink2 p {
  font-size:large;
  line-height:1.5;
  color:#808080;
 }
div.boxlink3 {
  padding:10px;
  height:22em;
  width:22em;
  border:none;
  margin:1.5em;
  display:flex;
  flex-direction:column;
  justify-content:center;
 }
div.boxlink3 h2 {
  font-size:x-large;
  color:black;
  margin-top:0;
  margin-bottom:0.4em
 }
div.boxlink3 p {
  font-size:large;
  line-height:1.5;
  color:#808080;
 }
div.boxlink3 img {
  margin:auto;
  height:300px;
  width:225px;
 }
img.box-icon {
 width:5em;
 height:5em;
 }
div.byline
 { width:25em; flex-grow:6; color:white;
  background-color:#007cc3; font-size:2vh; z-index:9;
  display:flex; align-content:center; justify-content:center; }
div.byline p
 { margin:0px; padding:0px; }
div.canvas
 { align-content:center; justify-content:center; display:flex; flex-direction:row; flex-wrap:wrap; width:100%; height:100%; }
div.canvas h1
 { font-size: 3em; color:#007cc3; margin:10px 0 5px 0; padding:0; }
div.canvas h2
 { font-size: 1.875em; color:#007cc3; margin:10px 0 5px 0; padding:0; }
div.canvas li
 { font-size: 1.2em; }
li > li
 { font-size : initial;}
div.canvas p
 { font-size: 1.2em; }
div.contact
 { padding-right:5vw; color:white; background-color:#007cc3; font-size:2vh;
  z-index:9; display:flex; align-content:center; justify-content:center; }
div.contact a:active
 { text-decoration:none; color:white; background-color:#007cc3; }
div.contact a:link
 { text-decoration:none; color:white; background-color:#007cc3; }
div.contact a:visited
 { color:white; background-color:#007cc3; }
div.contact a:hover
 { text-decoration:none; color: #007cc3; background-color:white; }
div.contact p
 { margin:0; padding:0; padding-left:1em; }
div.footer
 { position:fixed; background-color:#007cc3; width:100%; bottom:0px; left:0;
  margin:0 auto; display:flex; flex-direction:row; flex-wrap:wrap;
  justify-content:center; align-content:center; height:4vh;}
div.footer-right
 { margin:0 auto; display:flex; flex-direction:row; flex-wrap:wrap;
  justify-content:flex-end; }
div.hamburger
 { display:none; }
div.header
 { position:fixed; width:100%; height:4vh; padding:0.5vh;
  margin:0; color:white; background-color:#007cc3; font-size:2vh; z-index:9; }
div.header a:active
 { color:white; background-color:#007cc3; }
div.header a:link
 { text-decoration:none; color:white; background-color:#007cc3; }
div.header a:visited
 { color:white; background-color:#007cc3; }
div.header a:hover
 { color: #007cc3; background-color:#dddddd; }
div.header-left
 { float:left; }
div.logo-image
 { float:left; }
div.logo-division
 { float:left; margin-top:1.4vh;}
div.header-right
 { display:flex; align-content:center; justify-content:center;margin-top:3px; }
div.header-right p
 { margin:0; padding:0; height:30px; }
div.main
 { position:fixed; top:5vh; width:102%; height:91vh; margin:0; padding:0 10vw 0 0;
  overflow-y:auto;
  font-family:Calibri, sans-serif;
  /* All elements have a default z-index of 0 so elements set to a higher number will render on top */
  z-index:0;
 }
div.menu
 { float: right; margin:0; padding:0; position:relative; right: 90px; margin-top:0.5vh; }
div.menu ul
 {
  list-style-type:none;
  display:inline;
  margin:0;
  padding:0;
 }
div.menu ul ul
 {
  margin:0;
  display:none;
  position:relative;
 }
div.menu li
 {
  font-size:2vh;
  font-weight:normal;
 }
div.menu ul li:hover > ul
 {
  display:block;
 }
div.menu ul:after
 {
  content:"";
  clear:both;
  display:block;
 }
div.menu ul li
 {
  margin:0;
  display:inline;
  float:left;
  width:8em;
 }
div.menu ul li ul li {
  margin:0;
  width: 8em;
}
div.menu ul:after
 {
  display:block;
 }
div.menu ul li a
 {
  width: 12em;
  padding:0.1em 0.5em;
  margin:0;
 }
div.menu ul li ul li a
 {
  width: 12em;
  padding:0.1em 0.5em;
  margin:0;
  float: left;
 }
div.page
 { font-family:Calibri, sans-serif; width:100%; height:100%; margin:0; z-index:0; }
div.screen
 { position:fixed; padding-top:60px; width:100%; height:auto; }
div.sheet
 { display:block; }
div.sheet
 { display:flex; flex-wrap:wrap; background-color:white; padding:1em; border-radius:20px;
  font-family:Calibri, sans-serif; width:90%}
div.sheet a:active
 { font-weight:bold; text-decoration:underline; color: #007cc3; background-color:white; }
div.sheet a:hover
 { font-weight:bold; text-decoration:none; color:white; background-color:#007cc3; }
div.sheet a:link
 { font-weight:bold; text-decoration:underline; color: #007cc3; background-color:white; }
div.sheet a:visited
 { font-weight:bold; text-decoration:underline; color: #770077; background-color:white; }
div.sheet p, ul, ol, li, td
 { margin:0px 0px 5px 0px; }
div.small-sheet
 { display:flex; flex-wrap:wrap; width:50%; background-color:white; padding:1em; border-radius:20px; font-family:Calibri, sans-serif; }
div.hero-sheet
 { display:flex; flex-wrap:wrap; width:75%; background-color:rgba(255,255,255,0);
  padding:1em; font-family:Calibri, sans-serif; align-content:center;
  justify-content:center; }
div.hero-sheet H1
 { color:white; font-size:10vw; text-align:center; }
div.top-main
 { position:relative; height:inherit; padding:0 5%; background-color:rgba(0,0,0,0); }
p.byline
 { font-size:1em; }
p.div-byline
 { font-size:1em; }
 @media screen and (max-width: 1000px) {
/* revert to 1-col CSS for smaller screens <1000px wide */
 div.block50
  { width:98%; }
 div.small-sheet
  { width:100%; }
  }
 @media screen and (max-width: 540px) {
/* revert to hamburger menu CSS for screens <540px wide */
 div.hamburger {
   display:block;
   color:white;
   background-color:#007cc3;
   text-align:left;
   margin-left:9em;
   width:1em;
   padding:2px;
  }
 div.menu
  { display:none; }
 div.main
  { height:75vh; }
 }