/*******************************************************************************
    Hey Contact Heroes
--------------------------------------------------------------------------------
        HTML + Body
*******************************************************************************/
*,
*:before,
*:after {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}
html {
  position: relative;
  font-size: 100%;
}
body {
  width: 100%;
  height: 100%;
  margin: 0;
  color: #1ca6a6;
  font-family: "Mulish", sans-serif;
  font-weight: 400;
  font-size: 1.125em;
  line-height: 1.42;
  letter-spacing: normal;
  background: hsl(200, 1%, 97%);
}
body main:not(.jobsPage) {
  color: #555554;
}
/*******************************************************************************
        videoSection
*******************************************************************************/
#videoSection {
  position: relative;
  height: 100vh;
  overflow: hidden;
}
#videoSection video {
  position: absolute;
  width: 102%;
  height: 102%;
  object-fit: cover;
}
/*******************************************************************************
    Content
*******************************************************************************/
#footer .content {
  margin: 3em auto;
}
#footer .contentSplitted {
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-content: flex-start;
  flex-flow: column nowrap;
  margin: 1em 0;
  clear: both;
}
#footer .content3xn {
  flex-flow: row wrap;
  align-items: stretch;
  justify-content: space-between;
}
#footer .content3xn .item {
  flex: 0 0 100%;
  margin: 1em 0;
}
@media only screen and (min-width: 768px) {
  #footer .contentSplitted {
    flex-flow: row wrap;
    margin: 4em 0;
  }
  #footer .content3xn .item {
    flex: 0 0 25%;
  }
  #footer .content3xn .item:nth-child(2) {
    flex: 0 0 50%;
  }
}
/*******************************************************************************
        Footer
*******************************************************************************/
#footer {
  position: relative;
  padding: 1rem 0;
  color: white;
  background: #a31780;
  border-top: 2px solid #76115d;
}
#footer .area {
  max-width: 1700px;
  margin: 0 auto;
  padding: 0 2em;
}
#footer a {
  color: white;
  text-decoration: none;
}
#footer a:hover,
#footer a.active,
#footer a:focus {
  color: #cccccc;
}
#footer ul {
  margin: 1em;
  padding: 0;
}
#footer ul li {
  list-style: none;
  line-height: 1.42;
  margin: 0.35em 0;
}
#footer ul li a:link {
  display: block;
  font-size: 1.25rem;
  font-weight: normal;
  text-decoration: none;
  text-align: right;
  transition: color 0.225s ease;
}
#footer .item:nth-child(2),
#footer .content:nth-child(2) {
  text-align: center;
}
#footer .item:nth-child(2) svg {
  width: 300px;
  max-width: 100%;
}
#footer .content3xn .item p {
  text-align: left;
}
#footer .content:nth-child(1) {
  margin-bottom: 2rem;
}
#footer .content:nth-child(2) {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 2rem;
}
#footer .content:nth-child(2) a {
  margin: 0 0.25rem;
}
#footer .talk {
  font-size: 3rem;
  margin: 0 0 2rem;
}
/*******************************************************************************
        NAVIGATION
--------------------------------------------------------------------------------
            Navigationbar
*******************************************************************************/
nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  transform: translateZ(0);
  transform: -webkit-translateZ(0);
  z-index: 11;
}
nav[aria-hidden="true"] {
  bottom: 0;
  overflow: auto;
}
nav[aria-hidden="true"] #navbar {
  min-height: 100%;
  background-color: white;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-items: center;
}
nav[aria-hidden="true"] #navbar .mobile-nav .fa-times {
  display: inline-block;
}
nav[aria-hidden="true"] #navbar .mobile-nav .fa-bars {
  display: none;
}
nav[aria-hidden="true"] #navbar #navigationMenu {
  display: block;
}
nav[aria-hidden="true"] #navbar #logo {
  margin: 2rem 0 1rem 0;
}
nav.sticky #navbar #logo {
  display: none;
}
nav.sticky[aria-hidden="true"] #navbar #logo {
  display: block;
}
#navbar {
  position: relative;
  max-width: 1920px;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
}
#navbar #logo,
#navbar #navigation {
  margin: 1rem;
}
#navbar .mobile-nav {
  position: absolute;
  right: 0;
  top: 0;
  display: block;
  width: 48px;
  height: 48px;
  padding: 12px;
  font-size: 1.2rem;
  color: orange;
  text-align: center;
  background-color: transparent;
  border: none;
  cursor: pointer;
}
#navbar .mobile-nav .fa-times {
  display: none;
}
#navbar #navigationMenu {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
}
#navbar #navigationMenu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
#navbar #navigationMenu li {
  margin: 0.25em 0;
}
#navbar #navigationMenu li.divider {
  border-bottom: 1px dotted #f49a1a;
}
#navbar #navigationMenu i.fas {
  display: none;
  padding-left: 0.5rem;
}
#navbar #navigationMenu span {
  font-size: 1.7rem;
}
#navbar #navigationMenu .subnav {
  margin: 1.5em 0;
}
#navbar #navigationMenu .subnav:first-child {
  margin-top: 0;
}
#navbar a {
  display: inline-block;
  padding: 0.25em 0;
  font-size: 1.125rem;
  color: #f49a1a;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
#navbar a:link,
#navbar a:visited,
#navbar a:hover,
#navbar a:active #navbar a:focus {
  text-decoration: none;
}
@media print {
  nav {
    position: relative;
  }
}
#logo a {
  display: block;
}
#logo a svg {
  height: 100px;
}
@media only screen and (min-width: 768px) {
  nav {
    position: absolute;
  }
  nav[aria-hidden="true"] #navbar {
    min-height: auto;
    bottom: auto;
    flex-flow: row nowrap;
    justify-content: space-between;
    background-color: transparent;
  }
  nav[aria-hidden="true"] #navbar #logo {
    margin: 1rem;
  }
  nav.sticky {
    position: fixed;
  }
  nav.sticky #navbar .mobile-nav {
    display: block;
    right: 0;
    top: 0.4rem;
  }
  nav.sticky #navbar .mobile-nav:hover,
  nav.sticky #navbar .mobile-nav:active {
    color: #d17f0a;
  }
  nav.sticky #navbar #navigationMenu {
    display: none;
  }
  nav.sticky #navbar #logo {
    display: none;
  }
  nav.sticky[aria-hidden="true"] {
    bottom: auto;
    background-color: #ffffff;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.74863449) 50%, #ffffff 60%, #ffffff 100%);
    overflow: visible;
  }
  nav.sticky[aria-hidden="true"] #navbar {
    justify-content: flex-end;
  }
  nav.sticky[aria-hidden="true"] #navbar #navigationMenu {
    display: block;
    margin-right: 1.5rem;
  }
  nav.sticky[aria-hidden="true"] #navbar #navigationMenu ul {
    top: 100%;
    left: -1rem;
    background-color: white;
    padding: 1rem 1rem 0;
  }
  nav.sticky[aria-hidden="true"] #navbar #logo {
    display: none;
  }
  #navbar {
    margin: 0 0.5rem;
  }
  #navbar .mobile-nav {
    display: none;
  }
  #navbar #navigationMenu {
    display: block;
    text-align: left;
  }
  #navbar #navigationMenu i.fas {
    display: inline;
  }
  #navbar #navigationMenu span {
    font-size: 1.125rem;
  }
  #navbar #navigationMenu li.divider,
  #navbar #navigationMenu li.footerLink {
    display: none;
  }
  #navbar #navigationMenu .subnav {
    position: relative;
    display: inline-block;
    margin: 0 1em;
    vertical-align: top;
  }
  #navbar #navigationMenu .subnav a.Jobs span,
  #navbar #navigationMenu .subnav a.Business span {
    text-decoration: underline;
  }
  #navbar #navigationMenu .subnav ul {
    position: absolute;
    display: none;
  }
  #navbar #navigationMenu .subnav:hover ul {
    display: block;
  }
  #navbar a {
    font-size: 1rem;
  }
  #navbar a:hover,
  #navbar a:active {
    color: #d17f0a;
  }
}
@media only screen and (min-width: 1920px) {
  #navbar {
    margin: 0 auto;
  }
}
/*******************************************************************************
        Selection + Placeholder
*******************************************************************************/
::-moz-selection {
  background: #1ca6a6;
  color: white;
}
::selection {
  background: #1ca6a6;
  color: white;
}