@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local(''),
    url('../font/open-sans-v28-latin-regular.woff2') format('woff2'),
    url('../font/open-sans-v28-latin-regular.woff') format('woff')
}

:root {
  --main-color: #003380;
  --border-color: #5599ff
}

html,body {
  height: 100%
}

.mr-grid {
  display: flex;
  flex-direction: column;
  min-height: 100vh
}

main {
  flex: 1;
  padding-top: 80px
}

footer {
  flex: 0 !important
}

body,h1,h2,h3 {
  font-family: 'Open Sans', sans-serif !important
}

header {
  background: var(--main-bg-color)
}

section {
  min-height: calc(100vh - 80px);
  padding-top: 80px
}

section:first-of-type {
  padding-top: 0
}

section:last-of-type {
  min-height: calc(100vh - 104px)
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 2
}

.scrollToTop {
  position: fixed;
  bottom: 50px;
  right: 40px;
  display: none;
  background: var(--main-color);
  padding: 1em
}

a.scrollToTop {
  color: var(--main-bg-color);
  text-decoration: none
}

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

footer h3 {
  font-size: 1rem
}

footer ul {
  list-style-type: none
}

@media only screen and (min-width: 36rem) {}

@media only screen and (min-width: 48rem) {
  main {
    width: 80%;
    margin: 0 auto;
    max-width: 1440px
  }

  .nav li {
    border-right: none;
    display: inline-block;
    list-style: outside none none
  }

  .nav li:after {
    content: '';
    position: absolute;
    background-color: var(--main-color);
    width: 2px;
    height: 50%;
    bottom: 14px;
    right: 0
  }

  .nav li:last-child:after {
    background-color: transparent
  }

  .nav li a {
    -webkit-transition: all 0.35s ease;
    transition: all 0.35s ease;
    padding: var(--main-padding) calc(var(--main-padding)*2);
    position: relative;
    text-decoration: none;
    display: inline-block
  }

  .nav li a:hover {
    background-color: transparent;
    color: var(--main-color)
  }

  .nav li a:before,
  .nav li a:after {
    height: 3px;
    position: absolute;
    content: '';
    -webkit-transition: all 0.35s ease;
    transition: all 0.35s ease;
    background-color: var(--border-color);
    width: 0
  }

  .nav li a:before {
    top: 0;
    left: 0
  }

  .nav li a:after {
    bottom: 0;
    right: 0
  }

  .nav li a:hover:before,  .nav li a:hover:after {
    width: 100%
  }
}

@media only screen and (min-width: 62rem) {}

@media only screen and (min-width: 75rem) {}