/* Misc. */

*, *::before, *::after {
position:relative;
margin:0 auto;                             
border-collapse:collapse;
box-sizing:border-box;
}

/* Structure */


html {
  font-family: Raleway, 'source sans pro', sans-serif;
  font-size: 10px;
  background-color : var(--main-background-color);
  line-height: 1.5;
}

body {
  display: block;
  min-height : 100vh;
  margin : 0;
  line-height : 1.4;
  font-size : 100%;
  text-align: center;
   background-color : var(--main-foreground-color);
   color : var(--main-background-color);
  /* opacity: 0; */
  transition: opacity 500ms 200ms;
}

header {
  min-height:calc(50vh - 20rem);
  color:  var(--main-color);
  background-color: var(--color-3); 
  h: 0;
  /*
  border-style: solid;
  border-color: 1.00; 
  */
}

.hero_row { 
  background-color:  #e7e9ea;
}
main {
  background-color: var(--color-3); 
  /* display:none;
  background-color: #3025df; 
  border-width: 5px;
  border-style: solid;
  border-color: #f66;
   */
}

section {
  text-align:center;
  border-width: 0px;
  border-style: solid;
  border-color: #cc0;
}


ONTAINT CONTAINER

footer {
  width: 100%; 
  min-height:calc(50vh - 20rem);
  color:  var(--bg-color1);
  background-color: var(--color-1);
  padding: 0 3rem;

}


(--page-padding

.section-block {
  width: 100%;
  max-width:1240px;
  padding: 0 5vw;
  text-align:left;
  border-width: 0px;
  border-style: solid;
  border-color: #60c;
}
.footer-block {
  width: 100%;
  max-width:1240px;
  padding: 0 5vw;
  text-align:left;
  border-width: 0px;
  border-style: solid;
  border-color: #60c;
}

/* === ROWS =================================================== */


header{
  width: 100%;
  background-color: var(--color-3); 
}
main {
  width: 100%;
  background-color: var(--color-3); 
}
section {
  width: 100%;
  background-color: var(--color-3); 
}

footer {
  width: 100%;
  background-color: var(--color-3); 
}

/* ===========================================================*/

/*
  position:relative;
  width:100%;
*/


.header-nav-container {
  position:relative;
  width:100%;
  height:62px;
  overflow:visible;
  background-color: var(--bg-color-3); 
}

.header-hero-row {
  width: 100%;
  display: block;
  min-height :20vh;
  background-color: var(--color-2); 
  }

.header-hero-block {
  width: 100%;
  display: block;
  min-height:20vh;
  margin: 0 auto;
  background-color: var(--color-3); 
  }


footer {
  border-color: #f6;
  background-color: var(--bg-color-1); 
}


/*
main.sb1 {
  display:flex;  flex-flow: wrap;
  border: 10px solid red;
  background-color: var(--color-3); 
}


 /* Main content or right column styling */

main.sb1 .main_entree {   
  flex: 1; /* Takes up the remaining space */
  background-color: #fff;
  padding: 20px;
  box-sizing: border-box;
  border: 1px solid black;
}


/* Sidebar or left column styling */

main.sb1  .main_sidebar {   
  width: 25%; /* Adjust percentage or use a fixed width like 250px */
  background-color: var(--color-5); 
  padding: 20px;
  box-sizing: border-box;
  border: 1px solid black;
}


$page_title {
  font-family:Raleway;
  font-size: 4.2rem;
  font-weight:300;
  padding-top: 31rem;
}

h1.page_tite,
$page_title {
  position:relateve
  font-family:Raleway;
  font-size: 4.2rem;
  font-weight:300;
  padding-top: 50px;
}