.button {
  --background: var(--button-background);
  --border-color: var(--button-border-color);
  --color: var(--button-color-primary);
  --button-active: var(--button-selected-background);
  --background-hover: var(--button-background-hover);
  background-color: var(--background);
  border-color: var(--border-color);
  border-radius: var(--button-radius);
  color: var(--color);
  text-align: center;
  transition-property: background-color, color;
  transition: ease var(--transitions);
  white-space: normal
}

.button:hover,
.button.loading {
  background-color: var(--background-hover);
  border-color: var(--border-color);
  color: var(--color)
}

.button:hover:before,
.button.loading:before {
  background-color: var(--background-hover)
}

.button:active,
.button.active {
  --background: var(--button-active)
}

.button.button--secondary {
  border-radius: 50%;
  height: 2.5rem;
  width: 2.5rem
}

.button.button--secondary:hover {
  box-shadow: 0 0 0 var(--button-radius) var(--button-border-primary)
}

.button-plain {
  --background: transparent;
  --color: var(--primary);
  border: none;
  text-decoration: underline
}

.button-plain:hover {
  --background: transparent !important;
  background-color: transparent
}

.button-ghost {
  --background: transparent;
  --border-color: var(--primary);
  --color: var(--primary)
}

.button-ghost:hover {
  --color: var(--white)
}

.top-section {
  background-position: center right;
  background-size: 100%
}

@media (max-width: 767px) {
  .top-section {
    background-position: center top;
    padding-block-start: 8rem
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  .top-section {
    background-position-x: 190px
  }
}

@media (min-width: 1200px) {
  .top-section {
    background-size: 60%
  }
}

.top-section p {
  color: var(--heading-color)
}

.top-section__content {
  padding-block: clamp(3rem, 20vw, 6rem)
}

footer {
  background-color: var(--footer-background)
}

:root {
  --button-radius: 0.3rem;
  --max-container: 1140px
}

:root {
  --body-font-family: "Open Sans", sans-serif;
  --body-font-size: 1rem;
  --header-font-family: "Roboto Slab", serif
}

html {
  font-size: 18px
}

body {
  font-size: var(--body-font-size);
  font-family: var(--body-font-family);
  color: var(--body-color-default)
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--heading-color, inherit);
  font-family: var(--header-font-family)
}

section+section h1,
section+section h2,
section+section h3,
section+section h4,
section+section h5,
section+section h6 {
  color: var(--heading-color-2)
}

.text--font-body {
  font-family: var(--body-font-family)
}

.text--font-header {
  font-family: var(--header-font-family)
}

h1,
h2 {
  line-height: 1
}

p,
.line-height-base {
  line-height: 1.4
}

.line-height-md {
  line-height: 1
}

.line-height-sm {
  line-height: 0.75
}

a:not([class*=button]),
.link {
  --link-border-radius: 0.3rem;
  --link-outline-thickness: 3px;
  color: var(--link-color);
  outline-offset: 0.25ch;
  transition: var(--transitions) linear;
  transition-property: background, border-radius, outline, text-decoration;
  outline: var(--link-outline-thickness) transparent dashed;
  text-underline-offset: 0.25ch;
  text-decoration: underline
}

a:not([class*=button])::after,
.link::after {
  content: unset
}

a:not([class*=button]):hover,
a:not([class*=button]).hover,
a:not([class*=button]):focus,
a:not([class*=button]):active,
a:not([class*=button]).focus,
a:not([class*=button]).active,
.link:hover,
.link.hover,
.link:focus,
.link:active,
.link.focus,
.link.active {
  background: unset;
  border-radius: var(--link-border-radius);
  outline: var(--link-outline-thickness) currentColor solid;
  text-decoration: none
}

a:not([class*=button]):hover,
.link:hover {
  outline: var(--link-outline-thickness) dashed
}

a:not([class*=button]):visited,
.link:visited {
  color: var(--link-alternate)
}

.logo-wrapper img {
  max-width: 70%;
}

.headshot img{
	border-radius:70%;
	display:inline-flex;
	overflow:hidden;
	position:relative;
}
.profile-block {
	
	width: 13vw;
	text-align: center;
}

.max-container{margin-left:auto;margin-right:auto;max-width:var(--max-container);width:100%}

.py-4{padding-top:2rem!important;padding-bottom:2rem!important}

.px-3{padding-left:1rem!important;padding-right:1rem!important}

.block-container{display:flex;flex-wrap:wrap}

.border-b{border-bottom:1px solid!important}

.blocktest{width:75%;}
.blocktest2{width:25%
		
}

.mb-20{
	text-align: center;
}

.image--round-large{border-radius:50%;display:inline-flex;max-width:200px;max-height:200px;overflow:hidden;position:relative;width:100%;height:100%}