body,h1,h2,h3,p,div,a{
	padding: 0;
	margin: 0;
	font-family: font-family: 'Sofia';
	font-family: 'EB Garamond';
	font-size: 18px;
}
.section_nav{
	background:#525252;
}
.container{
	display: flex;
	width:80%;
	margin: 0 auto;
 	flex-direction: row;
	align-items: center;
 }
 .cont{
	width:80%;
	margin: 0 auto;
 }
 /*set of flex, this will control what in side layout box-content*/
 .layout_l{
 	flex:30%;
 	padding: 25px;
 	text-align: left;
 	background:#525252;
 	width:120px;
}
 .layout_r{
 	flex:70%;
 	padding: 15px;
 	text-align: right;
 }
 .layout_r a, .layout_r a:visited{
 	text-align: center; 
 	padding: 15px;
 	text-decoration: none;
 	color:#fff;
 }
 .layout_r a:hover{
 	color:#0099ff;
 	background: #ddd;
 }
 .layout_small_link{
 	display: none;
 }
 #icon_box{
 	display: none;
 }
 .logo{
 	width:80%;
 }

 
/*
template flex properties are here
.flex-container {
  display: flex;
  justify-content: center;
}
.flex-container {
  display: flex;
  height: 200px;
  align-items: center;
}
.flex-container {
  display: flex;
  height: 200px;
  align-items: flex-start;
}
.flex-container {
  display: flex;
  height: 200px;
  align-items: flex-end;
}

.flex-container {
  display: flex;
  height: 300px;
  justify-content: center;
  align-items: center;
}
*/



:root {
    --primary: #48a74c;
    --secondary: #525252;
    --tertiary: #ACD7EC;
    --quarternary: #beb5b4;
    --body-bg: #fff;
    --body-color: #000;
    --true-black: #000;
    --true-white: #fff;
    --off-white: #fcfcff;
    --off-black: #262626;
    --gray: #6c757d;
    --gray-light: #e2e2e2;
    --gray-dark: #333;
    --blue: #007bff;
    --purple: #5533ff;
    --red: #dc3545;
    --orange: #fd7e14;
    --yellow: #ffc107;
    --green: #28a745;
    --gray-100: #f8f9fa;
    --gray-200: #e9ecef;
    --gray-300: #dee2e6;
    --gray-400: #ced4da;
    --gray-500: #adb5bd;
    --gray-600: #6c757d;
    --gray-700: #495057;
    --gray-800: #343a40;
    --gray-900: #212529;
    --link-color: #48a74c;
    --font-sans-serif:
        'EB Garamond', serif;
    --body-font-size: 1rem;
    --body-font-weight: 400;
    --body-line-height: 1.375;
}

.container--open-house {
    justify-content: center;
}

.color-box {
    padding: 1em 1.1em 0.76em;
    background-color: var(--quarternary);
    border-radius: 2.5px;
    border: 1px solid var(--secondary);
    line-height: var(--body-line-height);
    background-image: linear-gradient(180deg, rgb(255 255 255 / 77%), transparent);
    box-shadow: inset 0px -30px 40px -35px var(--secondary);
    display: flex;
    flex-direction: column;
}

.container--open-house h2 {
    font-size: 1.8em;
    margin-bottom: 0.2em;
    line-height: var(--body-line-height);
}

.container--open-house h3 {
    font-size: 1.4em;
    margin-bottom: 0.2em;
    line-height: var(--body-line-height);
}

.container--open-house img {
    width: 100%;
    margin-bottom: 1em;
}

.container--open-house ul {
    padding-left: 1.1em;
    margin-bottom: 0;
}

.image-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1em;
    width: 100%;
}

.content-box {
    display: inline-block;
    margin: 0 auto;
    float: none;
}

.container--visit {
    padding: 2em 0 1em;
}

h1 {
    font-size: 2.125em;
}

h2 {
    font-size: 1.8em;
}

h1,
h2 {
    color: var(--primary);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-bottom: 0.2em;
    line-height: var(--body-line-height);
}