#skip-link:focus {
  background-color: #000;
  color: #fff;
}

#scroll-to-top{
  background-image: url("/images/up.svg");
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 70%;
}
html, body{
  background-color: var(--bg-primary, #FAFAFA);
}
h1, h2, h3, h4, h5, h6{
  color: var(--Grayscale-Dark-1, #222);
  font-family: Oswald;
  font-style: normal;
  text-decoration: none;
}

@media (min-width: 768px) {
  h1{
    font-size: 64px;
  }

  h2{
    font-size: 48px;
  }
}

hr{
  color: var(--color-grey-5, #FAFAFA);
}

a:visited,
a{
  color: var(--color-primary, #524EE9);
}

p a:not(.btn):hover{ color: var(--color-secondary) }

section.border{
  border-bottom: 1px solid var(--color-grey-4, #BEBEBE);
}

section.inverse{
  background-color: var(--color-primary, #524EE9);
  color: var(--color-white, #FFFFFF);
}
.inverse h1,
.inverse h2,
.inverse h3,
.inverse h4,
.inverse h5,
.inverse h6{
  color: var(--color-white, #FFFFFF);
}
.btn.primary{
    color: var(--color-white);
    border: none;
    background: #0E7288;
    background: linear-gradient(45deg, rgba(14, 114, 136, 1) 0%, rgba(34, 160, 101, 1) 100%);
}

.btn.secondary{
  background: var(--color-white, #FFFFFF);
  color: var(--font-color);
  border: 1px solid var(--font-color, #222);
}

.btn.secondary:hover{
  background: var(--color-white, #FFFFFF);
  color: var(--font-color);
}

.card{
  background-color: var(--color-white, #FFFFFF);
  border: 1px solid var(--color-grey-4, #BEBEBE);
  color: var(--font-color);
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%; /* important if you're using a grid */
}
.card .btn.primary{background: var(--color-primary)}
.card footer{margin-top: auto; text-align: center}
.card footer a.btn{ margin-right: 0px; }

.card h2,
.card h3,
.card h4,
.card h5,
.card h6{
  color: var(--font-color, #222);
}

.card:hover{
  transform: scale(1.05);
}

.card h3 > a{
  text-decoration: none;
  border-bottom: 1px solid var(--color-white);
}

.card:hover h3 > a{
  color: var(--color-secondary);
}

.card h3 > a:hover{
  border-bottom: 1px solid;
}

.container.grid{
  margin-bottom: 1.5em;
}

.list-default a{
  text-decoration: none;
}
.list-default a:not(.btn):hover{
  color: var(--color-secondary);
}
.list-default .text{
  background-color: var(--color-white, #FFF);
}
section.border-bottom{
  border-bottom: 1px solid var(--color-grey-4, #BEBEBE);
}
/*
  Footer
*/
footer#footer{
  background-color: var(--color-white, #FFFFFF);
  border-top: 2px solid var(--color-grey-4, #BEBEBE);
  padding: 24px 0 46px;
}
footer#footer hr{
  margin: 1.75rem 0;
}
footer#footer h2{
  font-size: 1.5rem;
  line-height: 2.1rem;
}

footer#footer h3,
footer#footer h4{
  font-family: var(--font-primary, Verdana), Arial, sans-serif;;
  font-size: 1em;
  line-height: 1em;
  color: var(--color-grey-3, #777777);
  font-weight: 300;
}

footer#footer a{
  display: block;
  color: var(--font-color, #222);
  text-decoration: none;
}

footer#footer #legal{
  display: flex;
  flex-wrap: wrap;
  gap: var(--col-gutter, 2rem);
}

footer#footer .email,
footer#footer .phone {

  background-repeat: no-repeat;
  padding-left: 30px;
  margin-bottom: .8em;
  color: var(--color-primary);
  text-decoration: none;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.4;

  transition:
    color 0.2s ease,
    opacity 0.2s ease,
    transform 0.2s ease;
}

footer#footer .email:hover,
footer#footer .phone:hover {
  color: var(--color-secondary);
  transform: translateX(2px);
}

footer#footer .email{
  background-image: url(/svg/email.svg);
  background-position: left center;
}
footer#footer .phone{
  background-image: url(/svg/phone_call.svg);
  background-position: left center;
}
@media (min-width:992px){
  .list-default article:hover{
    transform: scale(1.01);
  }
}