@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap");
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
caption, article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video,
input[type=color], input[type=date], input[type=datetime],
input[type=datetime-local], input[type=email], input[type=month],
input[type=number], input[type=password], input[type=range],
input[type=search], input[type=tel], input[type=text],
input[type=time], input[type=url], input[type=week],
select, textarea {
  font-family: 'Open Sans'; }

h1, .h1 {
  color: #00334E;
  font-size: 38px;
  font-weight: 700;
  margin-bottom: 40px; }

h2, .h2 {
  color: #00334E;
  font-size: 28px;
  font-weight: 600;
  margin-bottom: 30px; }

h3, .h3 {
  color: #00334E;
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 40px; }

h4, .h4 {
  color: #00334E;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 20px; }

h5, .h5 {
  color: #00334E;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 20px; }

h6, .h6 {
  color: #00334E;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 20px; }

p, .p {
  color: #00334E;
  font-size: 16px;
  margin-bottom: 10px; }

a {
  color: #106B9C;
  text-decoration: none; }
  a:visited, a:active {
    color: #106B9C;
    text-decoration: none; }
  a:hover, a:focus {
    color: #00334E;
    text-decoration: none; }

img {
  max-width: 100%; }

body {
  overflow-x: hidden; }

/*
    // Example mixin:

    @mixin BoxShadow($horizontal, $vertical, $blur, $spread, $color, $inset: false) {

        @if $inset {
            -webkit-box-shadow: inset $horizontal $vertical $blur $spread $color;
            -moz-box-shadow: inset $horizontal $vertical $blur $spread $color;
            box-shadow: inset $horizontal $vertical $blur $spread $color;
        }
        @else {
            -webkit-box-shadow: $horizontal $vertical $blur $spread $color;
            -moz-box-shadow: $horizontal $vertical $blur $spread $color;
            box-shadow: $horizontal $vertical $blur $spread $color;
        }
    }

*/
/*
#ControlBar {
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;   

    ul, li, a, p {
        -moz-box-sizing: content-box;
        -webkit-box-sizing: content-box;
        box-sizing: content-box;   
    }

    #ControlNav > li > a {
        text-decoration: none;
    }

    .subNav.advanced dl {
        width: 610px;
        min-height: 180px;
    }

    .subNav.advanced dl ul li {
        width: 100px;
        min-width: 100px;
    }

    div.actionMenu ul.dnn_mact > li.actionMenuMove > ul li {
        padding: 5px 0 5px 10px; 
        line-height: 10px;  
    }

    span.controlBar_editPageTxt {
        font-family: Arial;
        line-height: 1rem;
        font-size: 14px;
    }

    #ControlEditPageMenu .dnnCheckbox + label {
        font-family: Arial;
        font-size: 14px;
    }
}

*/
.margin-top {
  margin-top: 40px; }

.margin-bottom {
  margin-bottom: 40px; }

.no-margin {
  margin: 0; }

.text-grey {
  color: #707070; }

.grey-background {
  background-color: #F7F7F7; }

#header .upper-header {
  background-color: #E9EFF8;
  height: 40px;
  line-height: 40px;
  text-align: right; }

#header .lower-header {
  background-color: #00334E;
  height: 90px;
  line-height: 90px; }

#header .contact {
  display: inline;
  margin-left: 40px; }
  #header .contact a, #header .contact span {
    font-size: 13px; }
  #header .contact i {
    margin-right: 5px; }
  #header .contact.contact-social i {
    margin-right: 10px; }
    #header .contact.contact-social i.last-icon {
      margin-right: 0; }
  @media only screen and (max-width: 575.5px) {
    #header .contact span {
      display: none; } }

#header .lower-header-container {
  display: flex; }

#header .lower-header-item {
  flex: 0;
  display: flex;
  justify-content: center; }
  #header .lower-header-item.menu-wrapper {
    flex: 1; }

#header .site-logo-wrapper img {
  width: 235px; }
  @media only screen and (max-width: 575.5px) {
    #header .site-logo-wrapper img {
      width: 190px; } }

#header .mobile-toggle {
  color: white;
  font-size: 16px;
  display: none;
  transition: font-size linear 0.2s; }
  #header .mobile-toggle:hover {
    font-size: 18px;
    cursor: pointer; }

#header .menu-container {
  list-style: none;
  display: inline; }
  #header .menu-container .menu-item {
    display: inline;
    margin-right: 60px; }
  #header .menu-container .menu-item-link {
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 600; }

#header .hexagon-inner {
  position: relative; }
  #header .hexagon-inner .fa-search {
    position: absolute;
    color: white;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: color linear 0.3s; }
  #header .hexagon-inner #search-hexagon {
    overflow: visible; }
    #header .hexagon-inner #search-hexagon .hexagon {
      fill: transparent;
      stroke: #FFFFFF;
      stroke-width: 2;
      transition: fill linear 0.3s; }
  #header .hexagon-inner:hover {
    cursor: pointer; }
    #header .hexagon-inner:hover #search-hexagon .hexagon {
      fill: #FFFFFF; }
    #header .hexagon-inner:hover .fa-search {
      color: #00334E; }

@media only screen and (max-width: 991.5px) {
  #header .menu-wrapper {
    justify-content: flex-end;
    padding-right: 40px; }
  #header .mobile-toggle {
    display: inline; }
  #header .menu-container {
    display: block;
    position: fixed;
    top: 0;
    left: 100vw;
    width: 100vw;
    height: 100vh;
    background: #00334E;
    z-index: 100;
    margin: 0;
    text-align: center;
    transition: left linear 0.5s; }
    #header .menu-container.mobile-open {
      left: 0; }
    #header .menu-container .menu-item {
      display: block;
      margin: 0;
      line-height: 60px; } }

#footer {
  position: relative;
  font-family: 'Titillium Web', sans-serif;
  background-color: #00334E;
  color: #FFFFFF;
  padding-top: 50px;
  padding-bottom: 80px; }
  #footer .footer-menu {
    margin-bottom: 70px; }
    #footer .footer-menu .footer-menu-item {
      position: relative;
      margin-right: 30px;
      color: #FFFFFF;
      line-height: 40px;
      top: -10px; }
      #footer .footer-menu .footer-menu-item:after {
        content: '';
        width: 100%;
        border-top: 1px solid #FFFFFF;
        position: absolute;
        bottom: -10px;
        left: 0; }
      #footer .footer-menu .footer-menu-item:hover {
        text-decoration: none; }
  @media screen and (max-width: 576px) {
    #footer .footer-info {
      width: calc(100vw - 30px); } }
  #footer .footer-info .footer-info-item {
    color: #FFFFFF;
    display: block;
    font-size: 12px; }
    @media screen and (min-width: 577px) {
      #footer .footer-info .footer-info-item {
        white-space: nowrap; } }
    #footer .footer-info .footer-info-item.privacy-link {
      margin-bottom: 10px; }
  #footer .footer-contact-menu .footer-contact-header {
    display: block;
    color: #FFFFFF;
    margin-bottom: 10px; }
  #footer .footer-contact-menu .footer-contact-item {
    display: inline-block;
    color: #FFFFFF;
    text-decoration: none;
    position: relative;
    margin-bottom: 25px;
    font-size: 14px; }
    #footer .footer-contact-menu .footer-contact-item:after {
      content: '';
      width: 100%;
      border-top: 1px solid #FFFFFF;
      position: absolute;
      bottom: -10px;
      left: 0; }
    #footer .footer-contact-menu .footer-contact-item i {
      margin-right: 10px; }
  #footer .footer-follow-menu .footer-follow-header {
    display: block;
    color: #FFFFFF;
    margin-bottom: 10px; }
  #footer .footer-follow-menu .footer-follow-icons {
    position: relative;
    display: inline-block; }
    #footer .footer-follow-menu .footer-follow-icons:after {
      content: '';
      width: 100%;
      border-top: 1px solid #FFFFFF;
      position: absolute;
      bottom: -10px;
      left: 0; }
    #footer .footer-follow-menu .footer-follow-icons .footer-follow-icon {
      color: #FFFFFF;
      font-size: 15px;
      margin-right: 10px; }

#bottomMenu {
  padding-top: 60px;
  text-align: center;
  margin: 100px 0; }
  #bottomMenu .bottom-menu-hexagon {
    overflow: visible;
    margin-right: 5px; }
    #bottomMenu .bottom-menu-hexagon .hexagon {
      fill: transparent;
      stroke: #106B9C;
      stroke-width: 2; }
  #bottomMenu .link {
    margin: 0 15px;
    font-size: 16px;
    white-space: nowrap; }
    #bottomMenu .link:hover .bottom-menu-hexagon .hexagon {
      stroke: #00334E; }
  #bottomMenu .link-text {
    font-size: 14px; }

.left-title-container {
  padding-top: 60px;
  padding-bottom: 60px; }
  .left-title-container .left-title {
    position: relative; }
    .left-title-container .left-title:after {
      content: '';
      border-top: #00334E 1px solid;
      width: 100%;
      position: absolute;
      bottom: -30px;
      left: 0; }
      @media only screen and (max-width: 575.5px) {
        .left-title-container .left-title:after {
          bottom: 0; } }

.homepage-hero-banner {
  background-image: url("/Portals/_default/Skins/Cantarus/Images/hero-banner.png");
  background-position: right center;
  background-size: cover;
  height: 650px;
  position: relative; }
  @media only screen and (min-width: 576px) {
    .homepage-hero-banner:before {
      content: '';
      border-left: 1px solid #FFFFFF;
      position: absolute;
      height: 75%;
      top: 12.5%;
      left: 80px; } }
  .homepage-hero-banner #viewMore {
    color: #FFFFFF;
    position: absolute;
    bottom: 5%;
    left: 40px;
    font-size: 14px; }
  .homepage-hero-banner .hero-title-container {
    position: absolute;
    top: 200px;
    left: 40px; }
    @media only screen and (min-width: 576px) {
      .homepage-hero-banner .hero-title-container {
        left: 200px;
        width: 400px; } }
    @media only screen and (min-width: 768px) {
      .homepage-hero-banner .hero-title-container {
        width: 550px; } }
    @media only screen and (min-width: 992px) {
      .homepage-hero-banner .hero-title-container {
        width: 900px; } }
  .homepage-hero-banner .hero-title {
    color: #FFFFFF;
    font-weight: 700;
    font-size: 46px;
    line-height: 66px; }
    @media only screen and (min-width: 768px) {
      .homepage-hero-banner .hero-title {
        font-size: 56px;
        line-height: 76px; } }

.hexagon-links-container {
  width: 1040px;
  height: 500px;
  margin: 0 auto;
  position: relative; }
  .hexagon-links-container .hexagon-link {
    position: absolute; }
    .hexagon-links-container .hexagon-link:nth-child(1) {
      top: 130px; }
    .hexagon-links-container .hexagon-link:nth-child(2) {
      top: 10px;
      left: 200px; }
    .hexagon-links-container .hexagon-link:nth-child(3) {
      top: 250px;
      left: 200px; }
    .hexagon-links-container .hexagon-link:nth-child(4) {
      top: 130px;
      left: 400px; }
    .hexagon-links-container .hexagon-link:nth-child(5) {
      top: 10px;
      left: 600px; }
    .hexagon-links-container .hexagon-link:nth-child(6) {
      top: 250px;
      left: 600px; }
    .hexagon-links-container .hexagon-link:nth-child(7) {
      top: 130px;
      left: 800px; }
    .hexagon-links-container .hexagon-link:hover .link-hexagon .hexagon {
      opacity: 1; }
  .hexagon-links-container .hexagon-wrapper {
    display: inline;
    position: relative; }
  .hexagon-links-container .link-hexagon {
    overflow: visible; }
    .hexagon-links-container .link-hexagon .hexagon {
      fill: transparent;
      stroke: #00334E;
      stroke-width: 5;
      opacity: 0.2;
      transition: opacity linear 0.3s; }
  .hexagon-links-container .hexagon-link-text {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    font-size: 14px;
    color: #707070; }
  @media only screen and (max-width: 1149px) {
    .hexagon-links-container {
      width: 640px;
      height: 720px; }
      .hexagon-links-container .hexagon-link:nth-child(4) {
        top: 370px;
        left: 0; }
      .hexagon-links-container .hexagon-link:nth-child(5) {
        top: 490px;
        left: 200px; }
      .hexagon-links-container .hexagon-link:nth-child(6) {
        top: 130px;
        left: 400px; }
      .hexagon-links-container .hexagon-link:nth-child(7) {
        top: 370px;
        left: 400px; } }
  @media only screen and (max-width: 659px) {
    .hexagon-links-container {
      width: 440px;
      height: 960px; }
      .hexagon-links-container .hexagon-link:nth-child(6) {
        top: 610px;
        left: 0px; }
      .hexagon-links-container .hexagon-link:nth-child(7) {
        top: 730px;
        left: 200px; } }
  @media only screen and (max-width: 459px) {
    .hexagon-links-container {
      width: 240px;
      height: 1610px; }
      .hexagon-links-container .hexagon-link:nth-child(1) {
        top: 0px;
        left: 0px; }
      .hexagon-links-container .hexagon-link:nth-child(2) {
        top: 230px;
        left: 0px; }
      .hexagon-links-container .hexagon-link:nth-child(3) {
        top: 460px;
        left: 0px; }
      .hexagon-links-container .hexagon-link:nth-child(4) {
        top: 690px;
        left: 0px; }
      .hexagon-links-container .hexagon-link:nth-child(5) {
        top: 920px;
        left: 0px; }
      .hexagon-links-container .hexagon-link:nth-child(6) {
        top: 1150px;
        left: 0px; }
      .hexagon-links-container .hexagon-link:nth-child(7) {
        top: 1380px;
        left: 0px; } }

.image-link-wrapper {
  height: 180px;
  background-size: cover;
  background-position: bottom right;
  margin-bottom: 30px;
  position: relative; }
  .image-link-wrapper .link-text {
    font-size: 16px;
    color: #FFFFFF;
    font-weight: 600;
    position: absolute;
    bottom: 15px;
    left: 15px; }
  .image-link-wrapper .link-explore {
    font-size: 12px;
    color: white;
    position: absolute;
    bottom: 15px;
    right: 15px; }

.accouncements-wrapper {
  position: relative;
  margin-bottom: 90px; }
  .accouncements-wrapper:after {
    content: '';
    background-color: #F7F7F7;
    width: 150vw;
    height: calc(100% - 60px);
    position: absolute;
    top: 100px;
    left: -50vw;
    z-index: -1; }

.announcement-image {
  margin-bottom: 25px;
  width: 100%; }

.homepage-tiles {
  padding: 0 15px; }
  .homepage-tiles .homepage-tile {
    text-align: center; }
    .homepage-tiles .homepage-tile .tile-text {
      color: #106B9C;
      display: block;
      text-align: center;
      margin: 30px auto;
      width: 70%;
      font-size: 16px;
      line-height: 22px; }

.address-and-contact {
  width: 50%;
  float: left;
  font-weight: 600; }

.informative-list {
  display: flex;
  flex-direction: column;
  list-style-type: none;
  margin: 0;
  padding: 0;
  height: 100%;
  justify-content: flex-start;
  align-items: stretch; }

.informative-list li {
  flex: 1;
  margin-bottom: 0;
  padding-bottom: 0;
  bottom: 0;
  display: flex;
  flex-flow: column nowrap;
  position: relative; }

.informative-list li span {
  /*margin-top: auto; /* This lets us have the text match the bottom but unmatches the top element*/
  /*margin-bottom: 0;
  padding-bottom: 0;
  bottom: 0;*/
  /*position: absolute;*/
  padding: 0; }

/*display: flex;align-items: center; flex-flow: row wrap;*/
.address-and-contact-container {
  display: flex;
  align-items: stretch; }

.grey-background {
  background-color: #eeeeee; }

.main-contacts {
  list-style-type: none;
  width: 50%;
  float: left; }

.department {
  color: #707070; }

.main-contacts-names {
  color: #106b9c; }

.main-contacts li {
  padding: 2em 0em;
  font-weight: 600;
  font-size: 1em; }

.main-contacts li span:first-child {
  color: #707070; }

.main-contacts li span:last-child {
  color: #106b9c; }

.description {
  color: #00334e;
  font-weight: lighter; }

.hexagon {
  height: 6em;
  width: 6em; }

.sales-contact {
  display: flex;
  flex-flow: row wrap;
  width: 50%;
  margin: 2em 0em; }

.sales-contact-names {
  color: #00334e;
  font-weight: 600; }

.sales-contact-link {
  color: #106b9c;
  font-weight: 700; }

.sales-contacts {
  display: flex;
  flex-flow: row wrap; }