@import url("https://fonts.googleapis.com/css?family=Raleway:300,500,700&display=swap");
@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,700&display=swap");

:root {
  --dark-grey: #333;
  --mid-dark-grey: #555;
  --mid-grey: #777;
  --mid-light-grey: #f0f0f0;
  --light-grey: #f8f8f8;
  --green: #1362ac;
  --overlay-green: rgba(8, 38, 68, 0.5);
  --red: #0c2d4d;
  --overlay-red: rgba(15, 18, 30, 0.5);
  --font-a: "Raleway", sans-serif;
  --font-b: "Roboto", sans-serif;
  --overlay-white: rgba(255, 255, 255, 0.9);
  --page-width: 960px;
  --fade-dur: 20s;
}

@viewport {
  width: 100vw;
  height: 100vh;
}
/* Global Styles */
body {
  margin: 0px;
  background: #fff;
  font-family: var(--font-b);
}
a:link,
a:visited,
a:active {
  text-decoration: none;
  color: var(--green);
}

.mob {
  display: none;
}

#mapContainer {
  position: relative;
  z-index: 0;
}
.zenIcon {
  background-image: url("images/favicon.png");
  text-align: center;
  line-height: 80px;
  color: var(--green);
  font-family: var(--font-b);
  font-size: 16px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  font-weight: 500;
}

div#main {
  position: absolute;
  height: 100%;
  top: 0px;
  width: 100%;
  overflow-x: hidden;
  flex-direction: column;
  z-index: 0;
  box-sizing: border-box;
  overflow-y: scroll;
  scrollbar-width: thin;
  -ms-overflow-style: none;
  overflow: -moz-scrollbars-none;
}
.flexRow {
  display: flex;
  flex-direction: row;
}
.flexCol {
  display: flex;
  flex-direction: column;
}
.flex {
  flex: 1;
}
.fullHeight {
  height: 100%;
}
section {
  width: 100%;
  margin: 0 auto;
  position: relative;
  background: #fff;
}
.headingOverlap {
  margin-top: -120px;
  background: var(--overlay-white);
}
.headingOverlap.withButton {
  margin-top: -170px;
  border: none;
}
.backgroundCover {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0px;
  background-image: url(images/home2.jpg);
  opacity: 0.75;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top;
  z-index: 0;
}
.fullSize {
  position: relative;
  height: 100%;
  width: 100%;
}
.downChevron {
  height: 70px;
  background-image: url(images/down-chevron.png);
  background-size: 40px 40px;
  background-repeat: no-repeat;
  background-position: center;
  background-color: var(--overlay-white);
  margin: 0 auto;
  cursor: pointer;
  position: relative;
  z-index: 10;
  width: 100%;
}
.txtC {
  text-align: center !important;
}
p.li {
  font-weight: 500;
  color: var(--green);
  text-align: center;
}
b {
  color: var(--green);
}
.midLine {
  background: linear-gradient(
    transparent 0%,
    transparent 50%,
    var(--green) 50%,
    var(--green) calc(50% + 1px),
    transparent calc(50% + 1px),
    transparent 100%
  );
  flex: 1;
  opacity: 0;
  transition: opacity 1s;
}
.midLine:first-child {
  margin-right: 10px;
}
.midLine:last-child {
  margin-left: 10px;
}
section {
  background: #fff;
}

/*  Header Styles */
header {
  height: 50px;
  padding: 10px 20px 10px 20px;
  position: relative;
  z-index: 1;
  background: var(--overlay-white);
  display: flex;
  flex-direction: row;
}
#navButton {
  height: 8vh;
  width: 8vh;
  line-height: 8vh;
  font-size: 6vh;
  text-align: center;
  color: var(--green);
  margin-left: 1vw;
  display: none;
}
#mobileNav {
  position: absolute;
  width: 100%;
  box-sizing: border-box;
  background: var(--overlay-green);
  z-index: 10;
  text-align: center;
  padding: 0 1vw 0 1vw;
  display: none;
  height: calc(100% - 10vh);
  overflow-y: scroll;
}
#mobileNav > a {
  display: block;
  font-size: 4vh;
  line-height: 10vh;
  color: #fff;
}

#logo {
  height: 50px;
  width: 190px;
  background-image: url(images/logo.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
#smButtons,
#phonenumber {
  line-height: 50px;
}
#smButtons {
  flex: 1;
  line-height: 50px;
}
.smButton {
  display: inline-block;
  height: 30px;
  width: 30px;
  margin-top: 10px;
  background-color: var(--green);
  opacity: 0.5;
  background-size: 100% 100%;
  cursor: pointer;
  transition: background-color 1s;
}
.smButton.twitter {
  background-image: url(images/x.png);
}
.smButton.linkedin {
  background-image: url(images/linkedin.png);
}
.smButton:hover {
  background-color: var(--red);
  transition: background-color 0.5s;
}

#phonenumber {
  flex: 1;
  text-align: right;
  font-size: 25px;
  color: var(--mid-dark-grey);
}

/* Footer styles */
footer {
  width: 100%;
  text-align: center;
  font-size: 10px;
  line-height: 15px;
  padding: 10px 0 10px 0;
  color: var(--mid-grey);
}
footer > a:link,
footer > a:visited,
footer > a:active {
  color: inherit;
}
footer > a:hover {
  text-decoration: underline;
  color: var(--green);
}
footer.mob {
  display: none;
  color: #fff;
  padding: 0px;
  line-height: 3vh;
  font-size: 1.5vh;
  background: #fff;
  padding: 1vw;
  box-sizing: border-box;
  color: var(--dark-grey);
}
footer.mob > a {
  display: block;
  font-size: 5vh;
  line-height: 8vh;
  background: #fff;
  color: #fff;
  background: var(--green);
}
footer.mob > span {
  display: block;
  font-size: 4vh;
  line-height: 6vh;
}

/* Navigation bar styles */
nav {
  display: flex;
  flex-direction: row;
  font-weight: 300;
  position: relative;
  z-index: 1;
  background: var(--overlay-white);
  border-bottom: 1px solid var(--overlay-green);
}
nav > .navItem {
  flex: 1;
  line-height: 40px;
  text-align: center;
  box-sizing: border-box;
  color: var(--green);
  cursor: pointer;
  border-bottom: 3px solid transparent;
  text-align: center;
}
.navItem:hover {
  color: var(--red);
  border-width: 3px;
  transition: color 0.5s, border-color 0.5s, border-width 0.5s;
  border-color: var(--overlay-green);
}
.navItem > .midLine {
  background: linear-gradient(
    transparent 0%,
    transparent calc(50% - 1px),
    var(--red) calc(50% - 1px),
    var(--red) 50%,
    transparent 50%,
    transparent 100%
  );
  display: none;
}
.navItem:last-child {
  margin-right: 0px;
}
.navItem.current {
  border-color: var(--overlay-red);
  color: var(--red);
}

.navItem:hover > .midLine {
  opacity: 1;
}

/* Services Aside */
.serviceBoxes {
  height: 240px;
  width: calc(100%);
  margin: 0 auto;
  display: flex;
  flex-direction: row;
}
.serviceBoxContainer {
  flex: 1;
  cursor: pointer;
}
.serviceBoxContainer:last-child {
  margin-right: 0px;
}
.serviceBoxImage {
  height: 200px;
  width: 100%;
  background-size: cover;
  background-position: center;
}
.serviceBoxImageOverlay {
  position: relative;
  margin-bottom: -200px;
  height: 200px;
  width: 100%;
  background: transparent;
  opacity: 0.15;
  transition: background 1s;
}
.serviceBoxContainer:hover > .serviceBoxImageOverlay {
  background: var(--green);
  transition: background 0.5s;
}
.serviceBoxImage.intelligence {
  background-image: url(images/intelligence.jpg);
}
.serviceBoxImage.security {
  background-image: url(images/security.jpg);
}
.serviceBoxImage.investigation {
  background-image: url(images/investigation.jpg);
}
.serviceBoxImage.diligence {
  background-image: url(images/diligence.jpg);
}
.serviceBoxImage.surveillance {
  background-image: url(images/surveillance.jpg);
}
.serviceBoxImage.training {
  background-image: url(images/training.jpg);
}
.serviceBoxTitle {
  line-height: 40px;
  text-align: center;
  font-size: 20px;
  font-weight: 300;
  color: var(--green);
  display: flex;
  flex-direction: row;
  box-sizing: border-box;
  padding: 0 10px 0 10px;
}
.serviceBoxTitle > div {
  flex: 1;
  opacity: 0;
  background: linear-gradient(
    transparent 0%,
    transparent calc(50% - 1px),
    var(--green) calc(50% - 1px),
    var(--green) 50%,
    transparent 50%,
    transparent 100%
  );
  transition: opacity 1s;
}
.serviceBoxContainer:hover > .serviceBoxTitle > div {
  opacity: 1;
  transition: opacity 0.5s;
}
.serviceBoxTitle > div:first-child {
  margin-right: 5px;
}
.serviceBoxTitle > div:last-child {
  margin-left: 5px;
}
.serviceBoxContainer:hover > .serviceBoxTitle {
  /*color: var(--red);
    transition: color 0.5s;*/
}

/* Buttons */
.cta {
  color: var(--green);
  font-weight: 500;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  box-sizing: border-box;
  padding: 0 50px 0 50px;
  transition: color 1s;
  font-size: 20px;
  line-height: 26px;
}
.cta:hover {
  color: var(--red);
  transition: color 0.5s;
}
.cta > .midLine {
  background: linear-gradient(
    transparent 0%,
    transparent calc(50% - 1px),
    var(--red) calc(50% - 1px),
    var(--red) 50%,
    transparent 50%,
    transparent 100%
  );
}
.cta:hover > .midLine {
  opacity: 1;
}

/* Headings */
h1 {
  color: var(--green);
  font-family: var(--font-b);
  font-weight: 300;
  margin: 0px;
  text-align: center;
  font-size: 40px;
  line-height: 100px;
  position: relative;
  z-index: 10;
  box-sizing: border-box;
}
h2 {
  color: var(--green);
  font-family: var(--font-b);
  font-weight: 300;
  margin: 0px;
  text-align: center;
  font-size: 30px;
  line-height: 60px;
}
h1.mob {
  display: none;
}

.lineHeader {
  display: flex;
  flex-direction: row;
  padding: 0 20px 0 20px;
  margin-bottom: 10px;
}
.lineHeader > .midLine {
  opacity: 1;
}

/* Contact Button */
#contactButton {
  position: absolute;
  z-index: 1;
  bottom: 10px;
  right: 10px;
  line-height: 50px;
  padding: 0 20px 0 20px;
  background: var(--green);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  transition: background 1s;
}
#contactButton:hover {
  background: var(--red);
  transition: background 0.5s;
}

/* News Bar */
#newsContainer {
  display: flex;
  flex-direction: row;
  box-sizing: border-box;
  width: 100%;
}
.newsItem {
  flex: 1;
  background: var(--light-grey);
  padding: 15px;
  display: flex;
  flex-direction: column;
  text-align: center;
  color: var(--mid-dark-grey);
}

.newsItem:nth-child(even) {
  background: var(--mid-light-grey);
}
.newsItem:last-child {
  margin-right: 0px;
}
.newsTitle {
  color: var(--green);
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 10px;
  transition: color 0.5s;
}
.newsDate {
  font-size: 16px;
  color: var(--green);
  margin-bottom: 10px;
}
.newsSnippet {
  font-size: 14px;
  line-height: 20px;
  text-align: justify;
  flex: 1;
}
.newsLink:link,
.newsLink:visited,
.newsLink:active {
  color: var(--green);
  line-height: 30px;
  margin: 0 auto;
  transition: color 0.5s;
}
.newsLink:hover,
.newsTitle:hover {
  color: var(--red);
}

/* Tweet Bar */
#tweetsContainer {
  display: flex;
  flex-direction: row;
  box-sizing: border-box;
}
.tweet {
  flex: 1;
  padding: 10px;
  color: var(--mid-dark-grey);
  background: var(--light-grey);
  text-align: center;
  display: flex;
  flex-direction: column;
}
.tweet:nth-child(even) {
  background: var(--mid-light-grey);
}
.tweetHead {
  display: flex;
  flex-direction: row;
  margin-bottom: 10px;
}
.tweetProfilePic {
  height: 50px;
  width: 50px;
  background: red;
}
.tweetName {
  flex: 1;
  text-align: right;
}

.twitterName {
  line-height: 30px;
  font-size: 20px;
}
.twitterUsername {
  line-height: 20px;
  font-size: 16px;
  color: var(--mid-grey);
}
.tweetBody {
  font-size: 12px;
  flex: 1;
  line-height: 18px;
}
.tweetBody > a:link,
.tweetBody > a:visited,
.tweetBody > a:active {
  color: var(--green);
  font-size: 14px;
  line-height: 30px;
}
.tweetDate {
  font-size: 10px;
  margin-top: 10px;
}

/* Textboxes */
.textBox {
  width: 960px;
  text-align: justify;
  margin: 0 auto;
  color: var(--dark-grey);
  font-size: 1em;
  font-weight: 300;
  line-height: 1.5em;
  margin-bottom: 0px;
  box-sizing: border-box;
  padding: 30px;
  background: #fff;
}
.textBox.wide {
  width: 100%;
}
.textCol {
  margin-right: 20px;
  flex: 1;
  text-align: justify;
}
.textCol:last-child {
  margin-right: 0px;
}

.bigPictureContainer {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  /*background-size:cover;
    background-repeat: no-repeat;
    animation-name: homepageImageFrames;
    animation-duration: 5s;
    animation-iteration-count: infinite;*/
}
.bigPicture {
  position: absolute;
  width: 100%;
  height: 100%;
  background-size: cover;
  opacity: 0;
}
.aofc {
  opacity: 1;
  animation: aofc;
  animation-duration: var(--fade-dur);
  animation-iteration-count: infinite;
}
.bofc {
  animation: bofc;
  animation-duration: var(--fade-dur);
  animation-iteration-count: infinite;
}
.cofc {
  animation: cofc;
  animation-duration: var(--fade-dur);
  animation-iteration-count: infinite;
}
.bigPicture.homea {
  background-image: url("images/home1.jpg");
}
.bigPicture.homeb {
  background-image: url("images/home2.jpg");
}
.bigPicture.homec {
  background-image: url("images/home3.jpg");
}

.thinPictureContainer {
  height: 50%;
  margin-top: 110px;
  background: #fff;
  opacity: 1;
  transition: opacity 1s;
}
.thinPicture {
  position: absolute;

  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
  height: 100%;
}
.aofe {
  opacity: 1;
  animation: aofe;
  animation-duration: var(--fade-dur);
  animation-iteration-count: infinite;
}
.bofe {
  opacity: 0;
  animation: bofe;
  animation-duration: var(--fade-dur);
  animation-iteration-count: infinite;
}
.cofe {
  opacity: 0;
  animation: cofe;
  animation-duration: var(--fade-dur);
  animation-iteration-count: infinite;
}
.dofe {
  opacity: 0;
  animation: dofe;
  animation-duration: var(--fade-dur);
  animation-iteration-count: infinite;
}
.eofe {
  opacity: 0;
  animation: eofe;
  animation-duration: var(--fade-dur);
  animation-iteration-count: infinite;
}

.aoff {
  opacity: 1;
  animation: aoff;
  animation-duration: var(--fade-dur);
  animation-iteration-count: infinite;
}
.boff {
  opacity: 0;
  animation: boff;
  animation-duration: var(--fade-dur);
  animation-iteration-count: infinite;
}
.coff {
  opacity: 0;
  animation: coff;
  animation-duration: var(--fade-dur);
  animation-iteration-count: infinite;
}
.doff {
  opacity: 0;
  animation: doff;
  animation-duration: var(--fade-dur);
  animation-iteration-count: infinite;
}
.eoff {
  opacity: 0;
  animation: eoff;
  animation-duration: var(--fade-dur);
  animation-iteration-count: infinite;
}
.foff {
  opacity: 0;
  animation: foff;
  animation-duration: var(--fade-dur);
  animation-iteration-count: infinite;
}

.aofg {
  opacity: 1;
  animation: aofg;
  animation-duration: var(--fade-dur);
  animation-iteration-count: infinite;
}
.bofg {
  opacity: 0;
  animation: bofg;
  animation-duration: var(--fade-dur);
  animation-iteration-count: infinite;
}
.cofg {
  opacity: 0;
  animation: cofg;
  animation-duration: var(--fade-dur);
  animation-iteration-count: infinite;
}
.dofg {
  opacity: 0;
  animation: dofg;
  animation-duration: var(--fade-dur);
  animation-iteration-count: infinite;
}
.eofg {
  opacity: 0;
  animation: eofg;
  animation-duration: var(--fade-dur);
  animation-iteration-count: infinite;
}
.fofg {
  opacity: 0;
  animation: fofg;
  animation-duration: var(--fade-dur);
  animation-iteration-count: infinite;
}

.gofg {
  opacity: 0;
  animation: gofg;
  animation-duration: var(--fade-dur);
  animation-iteration-count: infinite;
}

.thinPicture.about {
  background-image: url("images/about1.jpg");
}
.thinPicture.team {
  background-image: url("images/team1.jpg");
}
.thinPicture.ethos {
  background-image: url("images/ethos1.jpg");
}
.thinPicture.methods {
  background-image: url("images/methods1.jpg");
}
.thinPicture.process {
  background-image: url("images/process1.jpg");
}
.thinPicture.services {
  background-image: url("images/services1.jpg");
}
.thinPicture.intelligencea {
  background-image: url("images/intelligence1.jpg");
}
.thinPicture.intelligenceb {
  background-image: url("images/intelligence2.jpg");
}
.thinPicture.intelligencec {
  background-image: url("images/intelligence3.jpg");
}
.thinPicture.securitya {
  background-image: url("images/security1.jpg");
}
.thinPicture.securityb {
  background-image: url("images/security2.jpg");
}
.thinPicture.securityc {
  background-image: url("images/security3.jpg");
}
.thinPicture.investigationa {
  background-image: url("images/investigation1.jpg");
}
.thinPicture.investigationb {
  background-image: url("images/investigation2.jpg");
}
.thinPicture.investigationc {
  background-image: url("images/investigation3.jpg");
}
.thinPicture.diligencea {
  background-image: url("images/diligence1.jpg");
}
.thinPicture.diligenceb {
  background-image: url("images/diligence2.jpg");
}
.thinPicture.diligencec {
  background-image: url("images/diligence3.jpg");
}
.thinPicture.surveillancea {
  background-image: url("images/surveillance1.jpg");
}
.thinPicture.surveillanceb {
  background-image: url("images/surveillance2.jpg");
}
.thinPicture.surveillancec {
  background-image: url("images/surveillance3.jpg");
}
.thinPicture.traininga {
  background-image: url("images/training1.jpg");
}
.thinPicture.trainingb {
  background-image: url("images/training2.jpg");
}
.thinPicture.trainingc {
  background-image: url("images/training3.jpg");
}
.thinPicture.intelligencecase {
  background-image: url("images/intelligencecase.jpg");
}
.thinPicture.securitycase {
  background-image: url("images/securitycase.jpg");
}
.thinPicture.investigationcase {
  background-image: url("images/investigationcase.jpg");
}
.thinPicture.diligencecase {
  background-image: url("images/diligencecase.jpg");
}
.thinPicture.surveillancecase {
  background-image: url("images/surveillancecase.jpg");
}
.thinPicture.trainingcase {
  background-image: url("images/trainingcase.jpg");
}

@keyframes aofc {
  0% {
    opacity: 1;
  }
  23% {
    opacity: 1;
  }
  33% {
    opacity: 0;
  }
  56% {
    opacity: 0;
  }
  66% {
    opacity: 0;
  }
  89% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes bofc {
  0% {
    opacity: 0;
  }
  23% {
    opacity: 0;
  }
  33% {
    opacity: 1;
  }
  56% {
    opacity: 1;
  }
  66% {
    opacity: 0;
  }
  89% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes cofc {
  0% {
    opacity: 0;
  }
  23% {
    opacity: 0;
  }
  33% {
    opacity: 0;
  }
  56% {
    opacity: 0;
  }
  66% {
    opacity: 1;
  }
  89% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes aofe {
  0% {
    opacity: 1;
  }
  10% {
    opacity: 1;
  }
  20% {
    opacity: 0;
  }
  30% {
    opacity: 0;
  }
  40% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  60% {
    opacity: 0;
  }
  70% {
    opacity: 0;
  }
  80% {
    opacity: 0;
  }
  90% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes bofe {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  30% {
    opacity: 1;
  }
  40% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  60% {
    opacity: 0;
  }
  70% {
    opacity: 0;
  }
  80% {
    opacity: 0;
  }
  90% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes cofe {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 0;
  }
  20% {
    opacity: 0;
  }
  30% {
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  60% {
    opacity: 0;
  }
  70% {
    opacity: 0;
  }
  80% {
    opacity: 0;
  }
  90% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes dofe {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 0;
  }
  20% {
    opacity: 0;
  }
  30% {
    opacity: 0;
  }
  40% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  80% {
    opacity: 0;
  }
  90% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes eofe {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 0;
  }
  20% {
    opacity: 0;
  }
  30% {
    opacity: 0;
  }
  40% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  60% {
    opacity: 0;
  }
  70% {
    opacity: 0;
  }
  80% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes aoff {
  0% {
    opacity: 1;
  }
  11.66% {
    opacity: 1;
  }
  16.66% {
    opacity: 0;
  }
  28.32% {
    opacity: 0;
  }
  33.32% {
    opacity: 0;
  }
  44.98% {
    opacity: 0;
  }
  49.98% {
    opacity: 0;
  }
  61.64% {
    opacity: 0;
  }
  66.64% {
    opacity: 0;
  }
  78.3% {
    opacity: 0;
  }
  83.3% {
    opacity: 0;
  }
  94.96% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes boff {
  0% {
    opacity: 0;
  }
  11.66% {
    opacity: 0;
  }
  16.66% {
    opacity: 1;
  }
  28.32% {
    opacity: 1;
  }
  33.32% {
    opacity: 0;
  }
  44.98% {
    opacity: 0;
  }
  49.98% {
    opacity: 0;
  }
  61.64% {
    opacity: 0;
  }
  66.64% {
    opacity: 0;
  }
  78.3% {
    opacity: 0;
  }
  83.3% {
    opacity: 0;
  }
  94.96% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes coff {
  0% {
    opacity: 0;
  }
  11.66% {
    opacity: 0;
  }
  16.66% {
    opacity: 0;
  }
  28.32% {
    opacity: 0;
  }
  33.32% {
    opacity: 1;
  }
  44.98% {
    opacity: 1;
  }
  49.98% {
    opacity: 0;
  }
  61.64% {
    opacity: 0;
  }
  66.64% {
    opacity: 0;
  }
  78.3% {
    opacity: 0;
  }
  83.3% {
    opacity: 0;
  }
  94.96% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes doff {
  0% {
    opacity: 0;
  }
  11.66% {
    opacity: 0;
  }
  16.66% {
    opacity: 0;
  }
  28.32% {
    opacity: 0;
  }
  33.32% {
    opacity: 0;
  }
  44.98% {
    opacity: 0;
  }
  49.98% {
    opacity: 1;
  }
  61.64% {
    opacity: 1;
  }
  66.64% {
    opacity: 0;
  }
  78.3% {
    opacity: 0;
  }
  83.3% {
    opacity: 0;
  }
  94.96% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes eoff {
  0% {
    opacity: 0;
  }
  11.66% {
    opacity: 0;
  }
  16.66% {
    opacity: 0;
  }
  28.32% {
    opacity: 0;
  }
  33.32% {
    opacity: 0;
  }
  44.98% {
    opacity: 0;
  }
  49.98% {
    opacity: 0;
  }
  61.64% {
    opacity: 0;
  }
  66.64% {
    opacity: 1;
  }
  78.3% {
    opacity: 1;
  }
  83.3% {
    opacity: 0;
  }
  94.96% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes foff {
  0% {
    opacity: 0;
  }
  11.66% {
    opacity: 0;
  }
  16.66% {
    opacity: 0;
  }
  28.32% {
    opacity: 0;
  }
  33.32% {
    opacity: 0;
  }
  44.98% {
    opacity: 0;
  }
  49.98% {
    opacity: 0;
  }
  61.64% {
    opacity: 0;
  }
  66.64% {
    opacity: 0;
  }
  78.3% {
    opacity: 0;
  }
  83.3% {
    opacity: 1;
  }
  94.96% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes aofg {
  0% {
    opacity: 1;
  }
  10% {
    opacity: 1;
  }
  14.28% {
    opacity: 0;
  }
  24.28% {
    opacity: 0;
  }
  28.56% {
    opacity: 0;
  }
  38.56% {
    opacity: 0;
  }
  42.84% {
    opacity: 0;
  }
  52.84% {
    opacity: 0;
  }
  57.12% {
    opacity: 0;
  }
  67.12% {
    opacity: 0;
  }
  71.4% {
    opacity: 0;
  }
  81.4% {
    opacity: 0;
  }
  85.68% {
    opacity: 0;
  }
  95.68% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes bofg {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 0;
  }
  14.28% {
    opacity: 1;
  }
  24.28% {
    opacity: 1;
  }
  28.56% {
    opacity: 0;
  }
  38.56% {
    opacity: 0;
  }
  42.84% {
    opacity: 0;
  }
  52.84% {
    opacity: 0;
  }
  57.12% {
    opacity: 0;
  }
  67.12% {
    opacity: 0;
  }
  71.4% {
    opacity: 0;
  }
  81.4% {
    opacity: 0;
  }
  85.68% {
    opacity: 0;
  }
  95.68% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes cofg {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 0;
  }
  14.28% {
    opacity: 0;
  }
  24.28% {
    opacity: 0;
  }
  28.56% {
    opacity: 1;
  }
  38.56% {
    opacity: 1;
  }
  42.84% {
    opacity: 0;
  }
  52.84% {
    opacity: 0;
  }
  57.12% {
    opacity: 0;
  }
  67.12% {
    opacity: 0;
  }
  71.4% {
    opacity: 0;
  }
  81.4% {
    opacity: 0;
  }
  85.68% {
    opacity: 0;
  }
  95.68% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes dofg {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 0;
  }
  14.28% {
    opacity: 0;
  }
  24.28% {
    opacity: 0;
  }
  28.56% {
    opacity: 0;
  }
  38.56% {
    opacity: 0;
  }
  42.84% {
    opacity: 1;
  }
  52.84% {
    opacity: 1;
  }
  57.12% {
    opacity: 0;
  }
  67.12% {
    opacity: 0;
  }
  71.4% {
    opacity: 0;
  }
  81.4% {
    opacity: 0;
  }
  85.68% {
    opacity: 0;
  }
  95.68% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes eofg {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 0;
  }
  14.28% {
    opacity: 0;
  }
  24.28% {
    opacity: 0;
  }
  28.56% {
    opacity: 0;
  }
  38.56% {
    opacity: 0;
  }
  42.84% {
    opacity: 0;
  }
  52.84% {
    opacity: 0;
  }
  57.12% {
    opacity: 1;
  }
  67.12% {
    opacity: 1;
  }
  71.4% {
    opacity: 0;
  }
  81.4% {
    opacity: 0;
  }
  85.68% {
    opacity: 0;
  }
  95.68% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fofg {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 0;
  }
  14.28% {
    opacity: 0;
  }
  24.28% {
    opacity: 0;
  }
  28.56% {
    opacity: 0;
  }
  38.56% {
    opacity: 0;
  }
  42.84% {
    opacity: 0;
  }
  52.84% {
    opacity: 0;
  }
  57.12% {
    opacity: 0;
  }
  67.12% {
    opacity: 0;
  }
  71.4% {
    opacity: 1;
  }
  81.4% {
    opacity: 1;
  }
  85.68% {
    opacity: 0;
  }
  95.68% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes gofg {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 0;
  }
  14.28% {
    opacity: 0;
  }
  24.28% {
    opacity: 0;
  }
  28.56% {
    opacity: 0;
  }
  38.56% {
    opacity: 0;
  }
  42.84% {
    opacity: 0;
  }
  52.84% {
    opacity: 0;
  }
  57.12% {
    opacity: 0;
  }
  67.12% {
    opacity: 0;
  }
  71.4% {
    opacity: 0;
  }
  81.4% {
    opacity: 0;
  }
  85.68% {
    opacity: 1;
  }
  95.68% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* Partners */
#partnersContainer {
  display: flex;
  flex-direction: row;
  width: var(--page-width);
  margin: 0 auto;
}
.partner {
  flex: 1;
  height: 150px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.partner.harquebus {
  background-image: url("images/harquebus.jpg");
}
.partner.ds {
  background-image: url("images/ds.png");
}

/* Process Graphic */
#graphicContainer {
  width: 800px;
  height: 800px;
  margin: 0 auto;
  background-image: url(images/zen50.png);
  background-size: 100% 100%;
  background-position: center;
  background-color: #fff;
  background-repeat: no-repeat;
}
.graphicCircle {
  position: absolute;
  height: 190px;
  width: 190px;
  background: #fff;
  box-sizing: border-box;
  border: 10px solid white;
  background-size: 100% 100%;
  border-radius: 100%;
}
.graphicCircle.a {
  background-image: url(images/consultation.jpg);
}
.graphicCircle.b {
  background-image: url(images/proposal.jpg);
}
.graphicCircle.c {
  background-image: url(images/action.jpg);
}
.graphicCircle.d {
  background-image: url(images/analysis.jpg);
}
.graphicCircle.e {
  background-image: url(images/report.jpg);
}
.graphicCircleNumber {
  height: 40px;
  width: 40px;
  border-radius: 30px;
  font-size: 20px;
  background: blue;
  border: 10px solid #fff;
  background-color: var(--green);
  color: #fff;
  line-height: 40px;
  text-align: center;
  position: relative;
  z-index: 2;
}
.graphicCircleNumber > div {
  position: absolute;
  height: 40px;
  width: 40px;

  border-radius: 40px;
  background: #fff;
  opacity: 0.5;
  transition: opacity 1s;
}
.graphicCircle.a {
  margin-left: 300px;
  margin-top: 30px;
}
.graphicCircle.a > .graphicCircleNumber {
  margin: 0 auto;
  margin-top: 140px;
}
.graphicCircle.b {
  margin-left: 590px;
  margin-top: 220px;
}
.graphicCircle.b > .graphicCircleNumber {
  margin-left: -30px;
  margin-top: 70px;
}
.graphicCircle.c {
  margin-left: 470px;
  margin-top: 535px;
}
.graphicCircle.c > .graphicCircleNumber {
  margin-left: 0px;
  margin-top: -10px;
}
.graphicCircle.d {
  margin-left: 110px;
  margin-top: 535px;
}
.graphicCircle.d > .graphicCircleNumber {
  margin-left: 110px;
  margin-top: -10px;
}
.graphicCircle.e {
  margin-left: 10px;
  margin-top: 220px;
}
.graphicCircle.e > .graphicCircleNumber {
  margin-left: 140px;
  margin-top: 70px;
}
.graphicCircleOverlay {
  position: absolute;
  width: 170px;
  height: 170px;
  background: #fff;
  border-radius: 100%;
  opacity: 0.5;
  z-index: 1;
  transition: opacity 1s;
}
.graphicCircle:hover > .graphicCircleOverlay {
  opacity: 0;
  transition: opacity 0.5s;
}
.graphicCircle:hover > .graphicCircleNumber > div {
  opacity: 0;
  transition: opacity 0.5s;
}
#graphicTextContainer {
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 100%;
  margin-left: 245px;
  display: flex;
  flex-direction: column;
  margin-top: 250px;
  text-align: center;
  font-size: 16px;
  line-height: 20px;
  color: var(--dark-grey);
}
#graphicTitle {
  font-size: 30px;
  margin-bottom: 10px;
  color: var(--green);
}

/* Contact Form */
form > input,
form > textarea {
  display: block;
  font: var(--font-b);
  width: 100%;
  margin-bottom: 5px;
  border: none;
  background: var(--light-grey);
  padding: 10px;
}
input[type="submit"] {
  background: var(--green);
  color: #fff;
  font-weight: 500;
  font-size: 20px;
  opacity: 0.5;
  transition: opacity 0.5s;
  cursor: pointer;
}
input[type="submit"]:hover {
  opacity: 1;
}
input:focus,
textarea:focus {
  outline: none;
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 1px;
}
::-webkit-scrollbar-track {
  background: var(--light-grey);
  width: 1px;
}
::-webkit-scrollbar-thumb {
  background: var(--green);
  width: 1px;
}

/* Portrait mobile */
@media (max-width: 960px) {
  .mob {
    display: none;
  }
  header {
    padding: 1vh 0vh 1vh 1vh;
    height: 8vh;
    display: flex;
    flex-direction: row;
  }
  #smButtons {
    display: none;
  }
  header > a {
    flex: 1;
  }
  #logo {
    background-position: left;
    height: 100%;
  }
  #phonenumber {
    text-align: center;
    font-size: 2vh;
    line-height: 8vh;
    display: none;
  }
  nav {
    display: none;
  }
  .navItem {
    display: block;
  }
  #navButton {
    display: block;
  }
  .bigPicture {
    background-position: center;
  }
  #contactButton {
    display: none;
  }
  h1 {
    display: block;
    font-size: 5vh;
    line-height: 10vh;
  }
  .headingOverlap {
    margin-top: -12.3vh !important;
  }
  .headingOverlap.withButton {
    margin-top: -40vh !important;
  }
  h1.headingOverlap.withButton {
    display: none;
  }
  h1.headingOverlap.withButton.mob {
    display: block;
  }

  .downChevron {
    height: 10vh;
  }
  .textBox {
    width: 100%;
  }

  .serviceBoxes {
    display: block;
    height: auto;
    width: 100%;
    padding: 2vw;
  }
  .serviceBoxContainer {
    display: inline-block;
    width: 47vw;
  }
  .serviceBoxContainer:nth-child(odd) {
    margin-right: 2vw;
  }

  #newsSection {
    display: none;
  }
  #tweetSection {
    display: none;
  }
  footer {
    display: none;
  }
  footer.mob {
    display: block;
  }

  .textBox.flexRow {
    display: block;
  }
  .flexRow {
    display: block;
  }
  .textCol {
    min-width: 100%;
    margin-bottom: 7vh;
  }
  .textCol:last-child {
    margin-bottom: 0;
  }

  #graphicContainer {
    display: none;
  }
  .thinPictureContainer {
    margin-top: 10vh;
  }
}