@font-face {
  font-family: 'Montserrat-Bold';
  src: url('fonts/Montserrat-Bold.woff2') format('woff2'), url('fonts/Montserrat-Bold.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Montserrat-Light';
  src: url('fonts/Montserrat-Light.woff2') format('woff2'), url('fonts/Montserrat-Light.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Montserrat-Medium';
  src: url('fonts/Montserrat-Medium.woff2') format('woff2'), url('fonts/Montserrat-Medium.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Montserrat-Regular';
  src: url('fonts/Montserrat-Regular.woff2') format('woff2'), url('fonts/Montserrat-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Montserrat-SemiBold';
  src: url('fonts/Montserrat-SemiBold.woff2') format('woff2'), url('fonts/Montserrat-SemiBold.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}


* {
  margin: 0;
  padding: 0;
}

:root {
  --padding: 1.5rem;
  --color-black: #000;
  --color-white: #fff;
  --color-grey: #464646;
  --color-light-grey: #efefef;
  --color-light: #f3f1f5;
  --color-alternate: #ff00d8;
  --color-light-bg: #e3e4ed;
  --color-hover-bg: #b9b9b9;

  --color-red:         #ef6323;
  --color-orange:      #de935f;
  --color-yellow:      #f0c674;
  --color-green:       #a7bd68;
  --color-blue:        #0965a6;
  --color-light-blue:  #9dc1db;
  --color-purple:      #512d6d;
  --color-dark-purple: #142530;

  --color-text: var(--color-black);
  --color-text-grey: var(--color-grey);
  --color-background: var(--color-white);
}

body{
  margin: 0;
  padding: 0;
}


html,
input,
textarea,
.button {
  font-family: 'Montserrat-Regular';
}
footer .light,
.copyright,
.text p,
.text-light p {
  font-family: 'Montserrat-Light';
}

h1, h2, h3, h4, h5, h6,
footer .subhead,
.navbar-button,
nav ul:not(.dropdown-content) > li >a {
  font-family: 'Montserrat-SemiBold';
}

strong,
.head{
  font-family: 'Montserrat-Medium';
}

footer .subhead,
.navbar-button{
  color: var(--color-red);
}

.text-light h1,
.text-light h2,
.text-light h3,
.text-light h4,
.text-light h5,
.text-light h6,
.text-light p,
.navbar-button:hover{
  color: var(--color-light);
}

a,
.text,
.head,
.byline,
h1, h2, h3, h4, h5, h6 {
  color: var(--color-blue);
}
a:hover{
  color: var(--color-alternate);
}

nav ul:not(.dropdown-content) > li >a {
  font-size: 1.2rem;
  color: var(--color-light-grey);
}

.dark-button{
  color: var(--color-light);
}

.head{
  font-size: 2.5em;
  line-height: 60px;
}
footer{
  background-color: var(--color-dark-purple);
}

footer,
footer h2,
.footer-list a,
.footer-contact a{
  color:var(--color-white);
}

.copyright,
.copyright a,
.footer-list a:hover,
.footer-contact a:hover{
    color: var(--color-light-blue);
}

h1 {
  font-size: 2.5em;
  line-height: 110%;
}
h2 {
  font-size: 2.1em;
  line-height: 110%;
}
h3 {
  font-size: 1.8em;
  line-height: 110%;
}
h4 {
  font-size: 1.4em;
  line-height: 110%;
}
h5 {
  font-size: 1.2em;
  line-height: 110%;
}
h6 {
  font-size: 1em;
  line-height: 110%;
}


.video,
.img {
  position: relative;
  display: block;
  --w: 1;
  --h: 1;
  padding-bottom: calc(100% / var(--w) * var(--h));
  background: var(--color-black);
}
.img img,
.video iframe {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
}
.img[data-contain] img {
  object-fit: contain;
}
.img-caption,
.video-caption {
  padding-top: .75rem;
  line-height: 1.5em;
}

img{
  width: 100%;
}