@font-face {
  font-family: headings;
  src: url(fonts/Mulish-Bold.ttf);
  font-weight: normal;
}
@font-face {
  font-family: body;
  src: url(fonts/Mulish-Regular.ttf);
  font-weight: normal;
}
@font-face {
  font-family: bodyItalic;
  src: url(fonts/Mulish-Italic.ttf);
  font-weight: italic;
}
  @font-face {
  font-family: bodyBold;
  src: url(fonts/Mulish-Bold.ttf);
  font-weight: bold;
}
  :root {
    --color-dark:#024060;
    --color-light:#3FABB8;
    --color-neutral:#B96941;
    --color-green: #4BA947;
    --color-white:rgb(255, 255, 255);
    --color-grey:#f2f3f2;
    --color-med-grey: #b7b8ba;
    --color-dark-grey:rgb(51, 51, 51);
    --shadow-menu: unset;
    --fontfamily-primary:headings;
    --fontfamily-primary-bold:headings;
    --fontfamily-primary-italics:headings;
    --fontfamily-secondary:body;
    --fontfamily-secondary-italics:bodyItalic;
    --fontfamily-secondary-bold:bodyBold;
    --band-padding: 80px 0;
  }

body{
	font-family: var(--fontfamily-secondary);
	font-size: 16px;
}
h1, h2, h3, h4, h5, h6{
	font-family: var(--fontfamily-primary);
}
h1{
	color: var(--color-dark);
	letter-spacing: 1px;
}
h2{
	display: block;
	text-align: center;
	color: var(--color-dark);
	letter-spacing: 1px;
	position: relative;
	text-transform: uppercase;
	margin-bottom: 40px;
}
h2:after{
	content: '';
    width: 36px;
    height: 3px;
    background: var(--color-dark);
    position: absolute;
    left: calc(50% - 18px);
    bottom: -12px;
}
h3{
	color: var(--color-dark);
	letter-spacing: 1px;
	text-transform: uppercase;
}
h4{
	color: var(--color-dark);
	text-transform: uppercase;
}
h5{
	color: var(--color-dark);
}
h6{
	color: var(--color-dark);
}
p{
  font-size: 18px;
}
.header a{
	color: var(--color-dark);
}
a:hover{
	color: var(--color-light);
	text-decoration: none;
}
a{
	color: var(--color-dark);
}