/* ST Overlay */


.st-overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 1000000000000!important;
    top: 0;
    left: 0;
    background:rgba(0,0,0,0.7);
    display: flex;
    align-items: center;
    justify-content:center;
    opacity: 1;
    visibility:visible;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;

}

.st-close {
    position: absolute;
    right: 15px;
    top: 15px;
    cursor:pointer;
}

.st-overlay .inner {
    width: 90%;
    max-width: 600px;
    background: #fff;
    padding: 50px;
    position: relative;
}

.st-overlay .inner IMG.st-banner-info {
    max-width: 100%;
    height: auto!important;
}

/* ST Overlay End */

body {
  font-family: interstate, sans-serif;
  font-weight: 400;
  color:var(--st-grey);
  overflow-y: auto;
  background: var(--st-blue-dark);
}

.flyer-btn {
  display: flex;
  background: yellow!important;
  color: black!important;
  transition: all 0.3s ease;
  transform: scale(1);
  text-decoration: none!important;
}

.flyer-btn:hover {
  transform: scale(1.02);
  background: #ffe504!important;
}

.flyer-btn:after {
  display: none!important;
}

body.nav-open {
  overflow: hidden;
}

.lang-link {
  color: var(--st-blue-dark)!important;
}

.bg-blue {
  background: var(--st-blue-dark)!important;
  color:#fff;
}

.logo-link-container {
  border:none!important;
  text-decoration: none!important;
}

.bg-blue h4, .bg-blue p {
  text-align: center!important;
}

.info-teaser.bg-blue {
  min-height: 300px;
  max-width: 75%;
}

.info-teaser.bg-blue p, .info-teaser.bg-blue h4 {
  text-align: center!important;
}

button.nav-toggle {
  text-transform: uppercase!important;
}

.info-teaser.bg-blue p {
  margin-bottom: 0px;
}

#teaser {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px;
}

#teaser p {
    max-width: 750px;
    margin: 3em auto 0em auto!important;
}

h1,h2,h3,h4,h5,h6 {
  font-weight: 800;
  text-transform: uppercase;
}

footer ul li a, footer ul li a::after, footer a, footer a::after, .nav-container .bottom-line ul li a, .nav-container .bottom-line ul li a::after, .logo-link, IMG.logo, .navOverlay, .nav-container, .splitscreen,
.split-item .overlay .inner-overlay, .split-item .overlay, .split-item IMG, .cta-btn a, .tab-item, .tab-content, .tab-item .tab-header .icon, .main-navigation li a ,.main-navigation li a::after, .sub-page #maincontent a, .ref  {
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

footer .mail-link {
  position: relative;
  display: inline-block;
  top: -6.5px!important;
}

header#navHeader {
  z-index: 10;
}

.accordion {
  margin-top: 2em;
  margin-bottom: 2em;
}

.accordion-header, .accordion-button {
  border: none!important;
}

.accordion-button::after {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    margin-left: auto;
    content: "";
    background-image: none!important;
    background-color: var(--st-blue-dark)!important;
    mask-image: url('../img/plus-circle.svg')!important;
    -webkit-mask-image:url('../img/plus-circle.svg')!important;
    mask-size: 1.25em!important;
    -webkit-mask-size: 1.25em!important;
    transition: transform .2s ease-in-out;
}

.accordion-item {

}

.accordion-button:focus {
  z-index: 3;
  border-color: none!important;
  outline: 0;
  box-shadow: none!important;
}

.accordion-button:not(.collapsed) {
  color: #fff!important;
  background-color: var(--st-blue-dark);
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.125);
}

.accordion-button:not(.collapsed)::after {
  background-color: var(--st-blue-light)!important;
}

.accordion-body p {
  margin-bottom: 0px!important;
  padding-bottom: 0px!important;
}

#image .claimline {
  background:var(--st-blue-footer)!important;
}

#image .claimline .inner {
  max-width: 900px!important;
  position: relative;
  margin: 0px auto;
}

#image .claimline h2 {
  font-family: "p22-hopper-edward", sans-serif;
  font-weight: 400;
  font-style: normal;
  color:#fff;
  text-transform: none;
  font-size: 3.5em;
}

.navOverlay {
    z-index: -1;
    background: rgba(0,0,0,0.75);
    top: 0;
    left: -30%;
    opacity:0;
}

.nav-open .navOverlay {
  z-index: 100;
  left:0;
  opacity: 1;
}

.nav-container {
  top: 0;
  left: -125%;
  opacity: 0;
}

.nav-open .nav-container {
  z-index: 102;
  bottom: 0;
  left: 0;
  opacity: 1;
}

:root {
  --st-blue-footer: rgba(7,41,71,1)!important;
  --st-blue-dark: rgba(7,26,47,1)!important;
  --st-blue-light: rgba(42,117,183,1)!important;
  --st-blue-light-hover: rgba(42,117,183,0.6)!important;
  --st-grey: rgba(119,119,119,1)!important;
  --st-border-radius: 15px!important;
  --st-dark-grey: rgba(33,37,41,0.10)!important;
  --st-green-base: #6CBE43!important;
  --st-green-dark: #0c3828!important;
  --st-green: rgba(108,190,160,0.25)!important;
  --st-green-50: rgba(108,190,160,0.75)!important;
  --st-green-footer: #0c3031!important;
}

.bg-dark-blue {
  background:var(--st-blue-dark);
}

.cta, .btn {
  background: var(--st-blue-dark);
  color:var(--st-blue-light);
  border-bottom-right-radius: var(--st-border-radius);
}

.radius-bottom {
  border-bottom-right-radius: var(--st-border-radius);
}

.radius-top {
  border-top-left-radius: var(--st-border-radius);
}

.top-right-radius {
  border-top-right-radius: var(--st-border-radius);
}

.top-left-radius {
  border-top-left-radius: var(--st-border-radius);
}

.bottom-right-radius {
  border-bottom-right-radius: var(--st-border-radius);
}

.bottom-left-radius {
  border-bottom-left-radius: var(--st-border-radius);
}

.logo-link {
    display: inline-block;
    width: 170px;
    overflow: hidden;
}

.btn {
  background: none!important;
  border:none!important;
  box-shadow: none!important
  color:var(--st-blue-light);
}

.btn:hover {
  color:var(--st-blue-light-hover);
}

.btn:focus {
  box-shadow: none!important;
  outline: 0!important;
}

.btn .icon {
  top: -2px;
}

.cta-btn a {
  display: inline-block;
  min-width: 200px;
  background: var(--st-blue-light);
  color:var(--st-blue-footer);
  font-weight: 800;
  text-transform: uppercase;
  text-decoration: none;
}

.button-handle {
  position: absolute;
  bottom: 160px;
  width: 45px;
  height: 45px;
  background: white;
  z-index: 20!important;
}

.ref:hover {
  background: rgba(0,0,0,0.08)!important;
}

.tap-icon {
  bottom: 185px;
  z-index: 40;
  left: 50%;
  margin-left: -20px!important;
}

.button-handle.inact {
  opacity:0.2;
  cursor: auto!important;
}

.button-handle.act.prev {
  left: 0px;
}

.button-handle.act.next {
  right: 0px;
}

.cta-btn a:hover {
  background: var(--st-blue-footer);
  color:var(--st-blue-light);
}

.infotext {
  font-size: 75%!important;
  max-width: 700px;
}

IMG.logo {
  width: 170px;
  height: 59px;
}

header#navHeader {
  box-shadow: 2px 4px 4px 1px var(--st-dark-grey);
}

.fixed_header header#navHeader {
  box-shadow: 2px 4px 4px 1px var(--st-dark-grey);
}

.fixed_header IMG.logo {
  width: 140px;
  height: 48px;
}

.fixed_header .logo-link {
  width: 48px;
}

footer ul li.active a {
  font-weight: 800!important;
}

.tab-container h4 {
  font-size: 1.3em!important;
  border-bottom: 1px solid var(--st-blue-footer);
}

.tab-item .tab-content {
  opacity: 0;
  visibility: hidden;
  height: 0px;
  padding: 0!important;
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.26s ease-out;
}

.tab-item.active .tab-content {
  opacity: 1!important;
  visibility: visible!important;
  height:100%!important;
  transform: scaleY(1);
}

.tab-item .tab-header .icon i {
  color:var(--st-blue-light);
}

.tab-item .tab-header .icon {
  transform: rotate(0deg);
}

.tab-item.active .tab-header .icon {
  transform: rotate(180deg);
}

.tab-item .tab-header:hover {
  cursor: pointer!important;
}

section.content h2, section.content h1 {
  font-size: 3.7em;
  padding-left: 40px;
  position: relative;
  max-width: 480px;
}

section.content h2::before, section.content h1::before {
  height: 115px;
  width: 15px;
  background:var(--st-blue-light);
  content:'';
  position: absolute;
  left: 0;
  top: 15px;
}

#about h2, #workflow h2, #maincontent h2 {
  color:var(--st-blue-dark);
}

#usps h2 {
  color:#fff!important;
}

footer {
  height: 300px;
  color:#fff!important;
  background:var(--st-blue-footer);
  text-align: center!important;
}

footer ul {
  display: inline-block;
  width: auto!important;
  position: relative;
  margin: 0px auto;
  text-align: center!important;
}

footer ul li, .nav-container .bottom-line ul li {
  float: left;
  margin-right: 10px;
}

footer ul li a, footer a {
  position: relative;
  color:var(--st-blue-light);
  text-decoration: none;
  overflow: hidden;
}

.nav-container .bottom-line ul li a {
  color:#fff;
  text-decoration:none;
  overflow: hidden;
  position: relative;
}

footer ul li a::after, footer a::after, .nav-container .bottom-line ul li a::after {
  position: absolute;
  width: 0;
  height: 1px;
  background: var(--st-blue-light);
  bottom: -4px;
  content:'';
  left: 0;
}

.nav-container .bottom-line ul li a::after {
  background: #fff!important;
}

.nav-container .bottom-line ul li a:hover::after {
  width: 100%;
}

footer ul li a:hover, footer a:hover {
  color:var(--st-blue-light-hover);
}

footer ul li a:hover::after, footer a:hover::after {
  width: 100%;
  background: var(--st-blue-light-hover);
}

.nav-container .menu-container {
  width: 70%!important;
  height: calc(75% - 123px)!important;
}

.main-navigation li {
  font-size: 1.5em;
  padding-top: 8px;
  padding-bottom: 8px;
}

.main-navigation li a {
  padding-top: 15px;
  padding-bottom: 15px;
  padding-left: 50px;
  padding-right: 50px;
  display: inline;
  position: relative;
  z-index: 2;
}

.main-navigation li a::after {
  background:var(--st-blue-dark);
  opacity:0.05;
  position: absolute;
  z-index: -1;
  width:0;
  height: 60px;
  left: 0;
  top: 7px;
  content: '';
  border-bottom-right-radius: var(--st-border-radius);
}

.main-navigation li a:hover::after, .main-navigation ul li.active ul li a:hover::after {
  width: 100%!important;
}


.main-navigation li.active a::after {
  width: 100%;
  opacity:1;
}


.main-navigation li a:hover {

}

.main-navigation li.active a {
  color:var(--st-blue-light)!important;
  font-weight: 800;
}

.main-navigation li:first-child {
  padding-top: 0px;
}

.main-navigation li:last-child {
  padding-bottom: 0px;
}

.main-navigation li a {
  text-decoration: none;
  color:var(--st-blue-dark);
}

#image {
  height: 100vh;
  max-height: 100vh;
  background: var(--st-blue-dark)!important;
}

#image .split-item IMG {
  max-height: calc(100vh)!important;
  object-fit: cover;
}

.split-item.active .overlay, .split-item:hover .overlay {
  opacity: 1!important;
}

.split-item IMG {
  position: relative;
  z-index: 1;
  transform:scale(1);
}

.split-item .overlay {
  position: relative;
  background: rgba(33,37,41,0.8)!important;
  z-index: 2;
}

.split-item .inner-overlay {
  position: relative;
  top: 0px;
}

.split-item.active IMG, .split-item:hover IMG {
  transform: scale(1.1);
}

.split-item.active .inner-overlay, .split-item:hover .inner-overlay {
    top: -20px;
}

.split-item.active .inner-overlay .cta-btn, .split-item:hover .inner-overlay .cta-btn {
    top: -20px;
}

.split-item .overlay .inner-overlay {
  padding-bottom: 75px!important;
}

.split-item .overlay .inner-overlay p {
  font-size: 85%;
}

#usps {
  background: var(--st-blue-dark);
}

.main-banner IMG {
  object-fit: cover;
  max-width: 100%;
  height: auto;
}

.sub-page.pageUid-6 #maincontent, .sub-page.pageUid-5 #maincontent, .sub-page.pageUid-4 #maincontent, .sub-page.pageUid-3 #maincontent, .sub-page.pageUid-11 #maincontent {
  padding-top: 5%!important;
  padding-bottom: 5%!important;
}

.sub-page #maincontent a {
  color:var(--st-blue-dark);
  text-decoration: none;
  border-bottom: 1px dotted var(--st-blue-dark);
}

.sub-page #maincontent a:hover {
  color:var(--st-blue-light)!important;
  border-bottom: 1px dotted var(--st-blue-light);
}

@media (min-width: 3840px) {

  .split-item IMG, .split-item IMG {
    transform: scale(1.5);
  }
  .split-item.active IMG, .split-item:hover IMG {
    transform: scale(1.65);
  }
}

@media (min-width: 2880px) and (max-width: 3839px) {

  .split-item IMG, .split-item IMG {
    transform: scale(1.35);
  }
  .split-item.active IMG, .split-item:hover IMG {
    transform: scale(1.5);
  }
}

@media (min-width: 2560px) and (max-width: 2879px) {

  .split-item IMG, .split-item IMG {
    transform: scale(1.1);
  }
  .split-item.active IMG, .split-item:hover IMG {
    transform: scale(1.2);
  }
}

@media (min-width: 1750px) {

  .nav-container .menu-container {
    width: 60%!important;
  }


  .main-navigation li {
    font-size: clamp(24px,3vw,40px)!important;
  }

  .main-navigation li a::after {
    background:var(--st-blue-dark);
    opacity:0.05;
    position: absolute;
    z-index: -1;
    width:0;
    height: 65px;
    left: 0;
    content: '';
    border-bottom-right-radius: var(--st-border-radius);
  }

}

@media (min-width: 1400px) {
  #image .swiper-slide IMG {
    min-height: 100vh!important;
    min-width: 100vw!important;
    transform: translateX(0px);
  }
}

@media (max-width: 1399px) {
  .tab-item {
    max-width: 750px;
  }

  .nav-container .menu-container {
    width: 80%!important;
  }

  .main-navigation li {
    font-size: 2.25em!important;
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .main-navigation li a {
    padding-top: 15px;
    padding-bottom: 15px;
    padding-left: 50px;
    padding-right: 50px;
    display: inline;
    position: relative;
    z-index: 2;
  }

  .main-navigation li a::after {
    background:var(--st-blue-dark);
    opacity:0.05;
    position: absolute;
    z-index: -1;
    width:0;
    height: 58px;
    left: 0;
    content: '';
    border-bottom-right-radius: var(--st-border-radius);
  }

}

@media (min-width: 1200px) {

  .main-banner {
    max-height: 800px;
    overflow: hidden;
  }

  #image .splitscreen {
    height: calc(100vh - 170px);
  }

  #image .split-item IMG {
    max-height: calc(100vh - 170px)!important;
    object-fit: cover;
  }

  #image .claimline h2 {
    margin: 0!important;
    padding: 0!important;
    font-size: 3.5em!important;
    max-width: 100%!important;
    margin: 0px auto!important;
  }

  #image .claimline {
    height: 170px;
  }

}

@media (max-width: 1199px) {

  .info-teaser.bg-blue {
    min-height: 300px;
    max-width: 100%;
  }

  .info-teaser.bg-blue IMG {
    width: 100%;
    height: auto!important;
  }


  .main-banner IMG {
    object-fit: cover;
    max-width: 150%;
    height: auto;
  }

  .main-banner {
    max-height: 800px;
    overflow: hidden;
  }

  header#navHeader {
      width: 75%!important;
  }

  #mobileNav .nav-container {
    width: 75%!important;
  }

  section.content h2 {
    font-size: 3em;
    padding-left:40px!important;
    max-width: 400px!important;
  }

  section.content h2::before {
    height: 95px;
    width: 13px;
    background:var(--st-blue-light);
    content:'';
    position: absolute;
    left: 0;
    top: 10px;
  }

}

@media (min-width: 992px) and (max-width: 1399px) {

  #image .claimline {
    height: 160px;
    z-index: 100;
  }

  #image .claimline h2 {
    margin: 0!important;
    padding: 0!important;
    font-size: 3.5em!important;
    max-width: 100%!important;
    margin: 0px auto!important;
  }

  #image .splitscreen {
    width: 400vw;
    height: calc(100vh - 160px);
  }

  #image .split-item {
    z-index: 1;
    width: 100vw;
    float: left;
    max-height: calc(100vh - 160px);
    overflow: hidden!important;
  }

  #image .split-item IMG {
    max-height: calc(100vh - 160px)!important;
    object-fit: cover;
  }

  #image .split-item .inner-overlay p {
    max-width: 60%!important;
    margin: 0px auto!important;
  }

  footer {
    font-size: 85%;
    height: 250px;
    color:#fff!important;
    background:var(--st-blue-footer);
    text-align: center!important;
  }

}

@media (max-width: 1399px) {

  #image .swiper-slide IMG {
      height: 950px;
      width: auto!important;
      transform: translateX(0px);
  }

  #image, #image .container_fluid, #image .splitscreen, #image .splitscreen .split-item, #image .splitscreen .split-item IMG {
    height: 750px!important;
    max-height: unset!important;
    overflow: hidden;
  }
}

@media (max-width: 1399px) and (orientation:landscape) {

  .nav-container .bottom-line {
    display: none!important;
  }

  .nav-container .menu-container {
    width: 90%!important;
    height: calc(100% - 155px)!important;
    margin-top: 15px!important;
    overflow-y: auto!important;
    display: block!important;
  }

  .main-navigation li {
    font-size: 1.4em!important;
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .main-navigation li a::after {
    background: var(--st-blue-dark);
    opacity: 0.05;
    position: absolute;
    z-index: -1;
    width: 0;
    height: 36px;
    left: 0;
    content: '';
    border-bottom-right-radius: var(--st-border-radius);
  }

  .main-navigation li a {
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 25px;
    padding-right: 25px;
    display: inline;
    position: relative;
    z-index: 2;
  }

  .button-handle {
    position: absolute;
    bottom: 0px;
  }

  .tap-icon {
    bottom: 15px;
  }

  #image .claimline {
    display: none!important;
  }

  #image .split-item {
    position: relative!important;
    max-width: 100vw!important;
    background: red!important;
    float: left;
  }

  #image .split-item IMG {
    object-fit: cover!important;
    width: 100%!important;
  }
}



@media (max-width: 991px) {

  #image .swiper-slide IMG {
      height: 750px;
      transform: translateX(-100px);
  }

  .st-overlay .inner {
    padding: 25px;
  }

  body {
    overflow-x: hidden;
  }
  header#navHeader {
      width: 75%!important;
  }

  #mobileNav .nav-container {
    width: 75%!important;
  }

  #image .claimline h2 {
    margin: 0!important;
    padding: 0!important;
    font-size: 3.25em!important;
    max-width: 100%!important;
    margin: 0px auto!important;
  }

  #image .claimline {
    height: 170px;
    background:var(--st-blue-footer);
  }

  #image .split-item {
    position: relative!important;
    max-width: 100vw!important;
    max-height: calc(100vh - 160px)!important;
    float: left;
  }

  #image .splitscreen {
    min-width: 400vw!important;
    width: 100%!important;
    height: calc(100vh - 160px)!important;
  }

  footer {
    font-size: 75%;
    height: auto!important;
    color:#fff!important;
    background:var(--st-blue-footer);
    text-align: center!important;
  }

  footer a {
    font-size: 125%!important;
  }

  header#navHeader {
      width: 75%!important;
  }

  #mobileNav .nav-container {
    width: 75%!important;
  }
}



@media (max-width: 767px) {

  .st-overlay .inner {
        font-size: 0.7em!important;
    }

  .st-overlay .inner IMG.st-banner-info {
        margin-top: 15px;
  }

  .ref .logo IMG {
    width: 100%!important;
    height: auto!important;
  }

  .accordion {
    width: 100%!important;
  }


  .frame-space-before-medium {
    margin-top: 1.5em;
  }

  .frame-space-after-medium {
    margin-bottom: 1.5em;
  }

  section.content h2 {
    font-size: 1.85em;
    padding-left:30px!important;
    max-width: 290px!important;
  }

  section.content h2::before {
    height: 59px;
    width: 11px;
    background:var(--st-blue-light);
    content:'';
    position: absolute;
    left: 0;
    top: 6px;
  }

  header#navHeader .logo, .nav-container .logo-inner {
    max-width: 140px;
    height: auto;
  }

  .fixed_header IMG.logo {
    width: 115px;
    height: 48px;
  }

  .fixed_header .logo-link {
    width: 40px;
  }

  .nav-container .close-toggle {

  }

  .main-navigation li {
    font-size: 1.4em!important;
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .nav-container .menu-container {
    width: 90%!important;
    height: calc(60% - 65px)!important;
  }

  .bottom-line {
    align-items: start !important;
    height: 40%!important;
  }

  .main-navigation li a::after {
    background: var(--st-blue-dark);
    opacity: 0.05;
    position: absolute;
    z-index: -1;
    width: 0;
    height: 45px;
    left: 0;
    content: '';
    border-bottom-right-radius: var(--st-border-radius);
  }

  .main-navigation li a {
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 25px;
    padding-right: 25px;
    display: inline;
    position: relative;
    z-index: 2;
  }
}

@media (max-width: 520px) {

  #image .swiper-slide IMG {
      height: 750px;
      width: auto!important;
      transform: translateX(-25%);
  }

  footer .mail-link {
    position: relative;
    display:block;
    top: 0px!important;
  }
  footer .metanav {
    padding-left: 0!important;
  }
  #image {
    height: calc(100vh - 60px);
  }

  #image .splitscreen {
      min-width: 400vw!important;
      width: 100%!important;
      height: calc(100vh - 160px)!important;
  }

  #image .split-item {
    position: relative!important;
    max-width: 100vw!important;
    max-height: calc(100vh - 160px)!important;
    float: left;
  }

  #image .split-item .overlay .inner-overlay p {
    width: 100%!important;
  }

  #image .claimline {
    height: 100px!important;
  }

  #image .claimline h2 {
    font-size: 2.75em!important;
    max-width: 100%!important;
    padding-bottom: 0px!important;
  }

  header#navHeader {
      width: 95%!important;
  }

  #mobileNav .nav-container {
    width: 90%!important;
  }

}