#page.about #wrapper {position:relative; margin-bottom:100px; min-height:100vh;}
#page.about #hero {display:grid; grid-template-columns:300px 1fr; margin:0 auto; max-width:calc(300px + 15px + 20px + var(--width-container-medium)); padding:var(--global-offset-from-page-header) 10px 0; grid-column-gap:15px;}
#page.about #hero main .paragraph {background-color:#FFF; margin-bottom:15px; padding:15px; border-radius:5px; box-shadow:0 1px 2px rgba(0,0,0,0.08);}
#page.about #hero main .paragraph:last-of-type {margin-bottom:0px;}
#page.about #hero main .paragraph p {font-size:16px; line-height:26px; color:#333;}
#page.about #hero main .paragraph li {font-size:16px; line-height:26px; color:#333;}
#page.about #hero main .paragraph-title {margin-bottom:15px; padding-bottom:5px; border-bottom:1px solid rgba(0, 0, 0, 0.05); font-size:20px; font-weight:400; color:var(--color-purple-primary);}
#page.about #hero main .paragraph .note {font-size:14px; color:#333;}

#about-navmenu {position:sticky; top:calc(var(--height-page-header) + var(--global-offset-from-page-header)); background-color:#FFF; overflow:hidden; border-radius:5px; box-shadow:0 1px 2px rgba(0,0,0,0.08);}
#about-navmenu .links {display:flex; flex-flow:column; padding:4px 0;}
#about-navmenu .links a {padding:15px; font-size:16px; color:#555;}
#about-navmenu .links a:hover {background-color:rgba(0,0,0,0.1); background-color:#F7EFFE; color:#333;}
#about-navmenu .links a.active {background-color:#F7EFFE; font-weight:500; color:var(--color-purple-primary);}

#page.about #page-footer {padding-right:10px; padding-left:10px;}
#page.about #page-footer .container {max-width:calc(300px + 15px + var(--width-container-medium));}


/* ---  M E D I A   Q U E R I E S  --- */
@media (min-width:1921px) {/* Rules for 1440p Desktops and Smart TVs*/}

@media (max-width:1920px) {/* Rules for full HD Desktops */}

@media (max-width:1199px) {/* Rules for laptops, small desktop screens, and smaller viewports */}

@media (max-width:991px) {/* Rules for tablets and smaller viewports */
	#page.about #hero {display:flex; flex-flow:column;}
	#page.about #hero aside {display:none;}}

@media (max-width:767px) {/* Rules for smartphones only */
	#page.about #hero {padding:5px 0;}
	#page.about #hero main .paragraph {padding:10px; border-radius:0px;}}
/* ---  M E D I A  Q U E R I E S  --- */