@font-face {
  font-family: "OpenSans-L";
  src: url("../Fonts/OpenSans-Light.woff");
}

@font-face {
  font-family: "OpenSans-R";
  src: url("../Fonts/OpenSans-Regular.woff");
}

@font-face {
  font-family: "Codec-EB";
  src: url("../Fonts/Codec-Cold-ExtraBold-trial.woff"),
    url("../Fonts/Codec-Cold-ExtraBold-trial.ttf");
}

@font-face {
  font-family: "Codec-L";
  src: url("../Fonts/Codec-Cold-Light-trial.woff");
}

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  list-style: none;
  font-size: 16px;
}

body {
  --bg-white: #fbfbfd;
  --bright-blue: #44ece8;
  --tech-blue: #64cbff;
  --accent-dark: #015d8e;
  --gradient-dark: #1ab2ff;
  --gradient-middle: #3193c5;
  --dark-bb: #17e8e5;
  --dark-tb: #1ab2ff;
  --grey: #424242;
  --green: #acf289;
  --dark-g: #6de92f;
  background-color: #fbfbfd; /*--bg-white*/
  font-weight: normal;
  line-height: normal;
}

a,
a:hover,
a:visited {
  text-decoration: none;
  color: inherit;
}

.nav-container {
  position: fixed;
  margin-top: 0px;
  z-index: 100;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
  height: auto;
  overflow: visible;
}

.nav-container-s {
  display: none;
}

nav {
  margin-top: 0px;
  z-index: 100;
  width: auto;
  height: 80px;
  background-color: #424242; /*--grey*/
  overflow: visible;
  flex-grow: 100;
  display: inline-flex;
}

.logo {
  width: auto;
  height: 80px;
  background-color: cadetblue;
  margin-left: 1vw;
  margin-right: 0.5vw;
  overflow: hidden;
}

.logo img {
  height: 100%;
  width: auto;
}

.nav-container,
nav {
  overflow: visible;
}

.menu {
  text-decoration: none;
  list-style: none;
  overflow: visible;
  flex-wrap: nowrap;
  padding: 0 5%;
  margin: 0px;
}

@supports (display: flex) {
 .menu {
  display: flex !important;
  flex-direction: row;
  justify-content: space-evenly;
  width: 100%;
  height: 80px;
 }
}

@supports (-ms-flow-from: thingy) {
  .menu {
    justify-content: space-between !important;
   }
}

.menu-item {
  font-family: "OpenSans-R";
  font-size: 1.5rem;
  letter-spacing: 1px;
  padding: 40px 0 0 0;
  overflow: hidden;
  background-color: transparent;
  text-align: center;
  text-transform: uppercase;
  color: #fff;

  z-index: 100;
}

@supports (display: flex) {
  .menu-item {
    display: flex !important;
    flex-direction: column;
    width: 260px;
    max-height: 80px;
  }
}

.menu .active {
  color: #44ece8; /*--bright-blue*/
}

.menu .active:hover,
.menu .active:focus {
  color: #424242; /*--grey*/
}

.menu .active:focus-within{
  color: #424242; /*--grey*/
}

.menu .active:hover .menu-item ul.li,
.menu .active:focus .menu-item ul.li {
  color: #fff;
}

.menu .active:focus-within .menu-item ul.li {
  color: #fff;
}

.menu-item:hover,
.menu-item:focus {
  color: #424242; /*--grey*/
}

.menu-item:focus-within{
  color: #424242; /*--grey*/
}

.menu-item:focus li.a,
.menu-item:hover li.a {
  color: #424242; /*--grey*/
}

.menu-item:focus-within li.a {
  color: #424242; /*--grey*/
}

/*dings*/
@supports (display: flex) {
  .sub-menu {
    display: flex!important;
    flex-direction: column;
    width: inherit;
    height: auto;
    padding: 0px;
    position: absolute;
    margin-top: 40px;
  }
}

.sub-menu {
  transition: all linear 0.2s;
  z-index: 99;
  box-shadow: 0 -15px 0 rgba(68, 236, 232), 0 1px 15px rgba(0, 0, 0, 0.35);
}

.sub-menu .active a {
  color: #424242; /*--grey*/
  border-bottom-color: #424242; /*--grey*/
}

.sub-item {
  padding: 12px 0px;
  display: none;
  position: relative;
  margin: 2px 0px;
  vertical-align: middle;
}

.sub-item a {
  text-transform: none;
  font-size: 1rem;
  color: #fff;
  letter-spacing: 1.5px;
  text-shadow: 1px 1px 3px #bbb;
}

.sub-item a {
  border-bottom: 1.2px solid;
  border-color: #fff;
  padding-bottom: 3px;
}

.linklist-div a {
  border-bottom: 1.2px solid;
  padding-bottom: 3px;
  border-color: #1ab2ff; /*--dark-tb*/
}

.menu-item:focus,
.menu-item:hover {
  background-color: #44ece8; /*--bright-blue*/
  overflow: visible;
}

.menu-item:focus-within {
  background-color: #44ece8; /*--bright-blue*/
  overflow: visible;
}

.sub-item:last-child {
  margin-bottom: 35px;
}

.sub-item:first-child {
  margin-top: 10px;
}
@supports (display: flex) {
  .menu-item:focus .sub-menu,
  .menu-item:hover .sub-menu {
    display: block;
    background: linear-gradient(
      to bottom,
      #44ece8 0%, /*--bright-blue*/
      #64cbff 100% /*--tech-blue*/
    )!important;
    overflow: visible;
  }

  
  .menu-item:focus-within .sub-menu {
    display: block;
    background: linear-gradient(
      to bottom,
      #44ece8 0%, /*--bright-blue*/
      #64cbff 100% /*--tech-blue*/
    )!important;
    overflow: visible;
  }

}

.menu-item:focus .sub-menu li.sub-item,
.menu-item:hover .sub-menu li.sub-item {
  display: block;
}

.menu-item:focus-within .sub-menu li.sub-item {
  display: block;
}

.sub-item:focus,
.sub-item:hover {
  cursor: pointer;
}

.sub-item:focus-within {
  cursor: pointer;
}

.sub-item:focus a,
.sub-item:focus-within a,
.sub-item:hover a {
  color: #424242; /*--grey*/
  text-shadow: none;
}

.sub-item:focus a,
.sub-item:hover a {
  color: #424242; /*--grey*/
  text-shadow: none;
}

.sub-item:focus-within a {
  color: #424242; /*--grey*/
  text-shadow: none;
}

.sub-item:focus a,
.sub-item:hover a {
  border-color: #424242; /*--grey*/
}


.sub-item:focus-within a {
  border-color: #424242; /*--grey*/
}

/* MAIN */

main {
  /*padding-bottom: 20vh;*/
  margin-top: 0px;
  width: 100%;
  height: auto;
}

#main-page-pic {
  width: 100%;
  height: 68vh;
  /*background: linear-gradient(to left, #14d2cf 0%, #002266 100%);*/
  background: linear-gradient(
    to right,
    #015d8e 0%, /*--accent-dark*/
    #64cbff 100% /*--tech-blue*/
  );
  overflow: hidden;
  vertical-align: middle;
  position: relative;
}

#main-page-pic img, .sub-page-pic img {
  position: absolute;
  opacity: 0.5;
  top: 50%;
  transform: translate(0%, -50%);
}

@supports (mix-blend-mode: overlay) {
  #main-page-pic img, .sub-page-pic img {
    mix-blend-mode: overlay;
    opacity: 1!important;
  }
}

#mpi-1 {
  height: auto;
  width: 100%;
  display: none;
}

#mpi-2 {
  height: 100%;
  width: auto;
  display: none;
}

.main-text {
  margin: 0 auto;
  width: 700px;
  height: auto;
  bottom: 0px;
  padding-top: 15rem;
}

.down {
  height: 2.3rem;
  width: 2.2rem;
  margin: 1.5rem auto;
  position: relative;
  transform: rotate(90deg);
  cursor: pointer;
}

.downarrow {
  position: absolute;
  top: 16px;
  width: 95%;
  height: 2px;
  background-color: #6de92f; /*--dark-g*/
}

.downarrow::after {
  content: '';
  position: absolute;
  width: 60%;
  height: 2px;
  top: -0.5rem;
  right: -0.4rem;
  background-color: #6de92f; /*--dark-g*/
  transform: rotate(60deg);
}

.downarrow::before {
  content: '';
  position: absolute;
  width: 60%;
  height: 2px;
  top: 0.5rem;
  right: -0.4rem;
  background-color: #6de92f; /*--dark-g*/
  transform: rotate(-60deg);
}

.mpi-sub {
  padding: 4vh 0px 0px 0px;
  margin-top: 0px;
}

.mpi-sub .main-text {
  padding-top: 0px;
}

.plus-icons {
  width: 100%;
  min-width: 700px;
  max-width: 85vw;
}

.icon-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 100%;
  padding-top: 1rem;
}

.icon-item {
  width: 17%;
  height: auto;
}

.icon-item span {
  border-bottom: 1px solid;
}

.icon {
  width: 100%;
  height: auto;
  background-color: #64cbff; /*--tech-blue*/
  box-shadow: 4px 6px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 1rem;
}

.icon img {
  width: 100%;
  height: auto;
}

.icon-item:hover .icon {
  background-color: #acf289; /*--green*/
}

.linklist-div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: inherit;
  margin-top: 2.5rem;
}

.linklist-div a,
.icon-item span {
  border-color: #1ab2ff; /*--dark-tb*/
  margin-top: 1.5rem;
  position: relative;
}

.linklist-div a:hover,
.icon-item:hover span {
  border-color: #6de92f; /*--dark-g*/
}

#contact {
  margin-top: 15rem;
}

.contact-gradient .main-text {
  margin-top: 0px;
}

.contact-gradient {
  width: 100%;
  height: 72vh;
  /*background: linear-gradient(to left, #14d2cf 0%, #002266 100%);*/
  background: linear-gradient(
    to right,
    #015d8e 0%, /*--accent-dark*/
    #64cbff 100% /*--tech-blue*/
  );
  overflow: visible;
  vertical-align: middle;
  display: flex;
  flex-direction: column;
  padding-top: 15rem;
}

.send-box {
  width: 100%;
  height: 28vh;
}

form {
  display: flex;
  flex-direction: row;
  margin: 0rem auto 0px auto;
  height: auto;
  bottom: 0px;
  width: 100%;
  min-width: 700px;
  max-width: 85vw;
  flex-wrap: wrap;
}

fieldset {
  display: flex;
  flex-direction: column;
  width: 33.33%;
  border: none;
}

.actions {
  position: relative;
  width: 100%;
  height: 0px;
}

.form-navigation {
  position: absolute;
  top: 10vh;
  left: 50%;
  transform: translate(-50%, 0%);
  width: calc(45vw * 0.17);
  height: calc(45vw * 0.14);
}

fieldset input {
  display: block;
}

.input:first-child {
  margin-top: 0px;
  padding-top: 0px;
}

.form-control:focus {
  box-shadow: none;
  outline: none;
}

textarea {
  background-color: transparent;
  border: none;
}

textarea {
  background-color: #fbfbfd; /*--bg-white*/
  outline: none;
  -moz-outline-style: none;
  resize: none;
  width: 100%;
  height: 28vh;
  padding: 1rem;
  margin-top: 0px;
}

.input {
  margin-top: 0.8rem;
}

input {
  border-bottom: 1px solid #fff;
  color: #fff;
  padding-top: 1rem;
  padding-bottom: 0.5rem;
  width: 80%;
  background-color: transparent;
  border-top: none;
  border-left: none;
  border-right: none;
  border-radius: 0px;
}

.form-control input:invalid {
  color: #ff0036;
  border: 0px 0px 1px 0px solid #ff0036;
  box-shadow: none;
}

.btn-group, .btn-toolbar, .next, .submit {
  width: 100%;
  height: 100%;
  background-color: #3193c5; /*--gradient-middle*/
}

.btn-toolbar .btn-group {
  background-color: transparent;
  background-image: url("../Images/Icons/Senden.svg");
  background-repeat: no-repeat;
  background-size: contain;
  width: 100%;
  height: 100%;
}

.btn-toolbar .submit {
  background-color: transparent;
  background-image: none;
}

.btn-group:hover {
  background-color: #acf289; /*--green*/
}

button {
  height: 100%;
  width: 100%;
  border: none;
  margin: 0px auto;
  background-color: transparent;
  cursor: pointer;
  padding-top: 50%;
}

fieldset legend {
  display: none;
}

.form-group label {
  display: none;
}

.form-control:focus textarea {
background-color: #fff;
}

.clearfix {
  height: 28vh;
  width: 33.33%;
}

/* SUB */

.sub-page {
  padding-bottom: 20vh;
}

.sub-page-intro {
  padding-top: 20vh;
}

.sub-page-pic {
  height: 48vh;
  margin: 0px auto;
  background: linear-gradient(
    to right,
    #015d8e 0%, /*--accent-dark*/
    #64cbff 100% /*--tech-blue*/
  );
  overflow: hidden;
  vertical-align: middle;
  position: relative;
}

.sub-page-pic img {
  left: 50%;
  transform: translate(-50%, -50%);
}

.sub-header {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: auto;
  height: auto;
  left: 50%;
  bottom: 5vh;
  transform: translate( -50%, 0%);
}

.sub-icon {
  width: 280px;
  height: auto;
}

.sub-icon img {
  width: 100%;
  height: auto;
  position: static;
  transform: none;
}

.product-container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  flex-direction: row;
  width: 100%;
  padding-top: 10rem;
}

.product {
  flex-basis: 17%;
  margin: 0px 1.5% 5rem 1.5%;
  background-color: #fbfbfd; /*--bg-white*/
}

.product img {
  width: 100%;
  height: auto;
}

@supports (mix-blend-mode: multiply) {
  .product img {
    mix-blend-mode: multiply;
  }
}

.product a {
  position: relative;
  border-bottom: 1.2px solid;
  border-color: #6de92f; /*--dark-g*/
  padding-bottom: 3px;
  padding-right: 3px;
}

.product a:after {
  content: "";
  display: block;
  position: absolute;
  left: 95%;
  top: 78%;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 6px solid #6de92f; /*--dark-g*/
}

/* TYPO */

h1 {
  font-family: "Codec-EB";
  font-size: 4rem;
  color: #424242; /*--grey*/
  position: absolute;
  bottom: 5vh;
  left: 50%;
  transform: translate(-50%, 0%);
  width: 1000px;
  letter-spacing: 0.1px;
  font-variant-ligatures: common-ligatures;
}

.heroh {
  display: block;
}
.smheroh {
  display: none;
}

h1 span {
  padding: 1.2rem 2rem 0.5rem 2rem;
  background-color: #fff;
  font-size: inherit;
  line-height: 165%;
}

.sub-page-pic h1 {
  width: auto;
  margin: 0px auto;
  position: static;
  transform: none;
}

.sub-page-pic {
  text-align: center;
}

h2 {
  font-family: "Codec-EB";
  font-size: 3rem;
  text-align: center;
  margin: 0px 0px 3rem 0px;
}

h3 {
  font-family: "Codec-EB";
  font-size: 1.8rem;
  color: #424242; /*--grey*/
  font-variant-ligatures: common-ligatures;
  margin-left: 20%;
}

h3 span {
  padding: 0.6rem 1rem 0.3rem 1rem;
  background-color: #fff;
  font-size: inherit;
  line-height: 180%;
}

h4 {
  font-family: "Codec-EB";
  font-size: 1.6rem;
  color: #fff;
  font-variant-ligatures: common-ligatures;
  margin-left: 20%;
}

h5 {
  font-family: "Codec-EB";
  font-size: 1.9rem;
  color: #64cbff; /*--tech-blue*/
  font-variant-ligatures: common-ligatures;
}

p {
  font-family: "OpenSans-L";
  font-size: 1.9rem;
  line-height: 140%;
}

p strong {
  font-family: "Codec-EB";
  font-size: inherit;
  color:  #424242;
}

p em {
  font-size: inherit;
}

.icon-item {
  width: 17%;
  text-align: center;
}

.linklist-div a,
.icon-item span {
  font-family: "Codec-L";
  font-size: 1.9rem;
  line-height: 140%;
  color: #1ab2ff; /*--dark-tb*/
}

.linklist-div a:hover,
.icon-item:hover span {
  color: #6de92f; /*--dark-g*/
}

.contact-gradient h2 {
  color: #fff;
}

.contact-gradient {
  font-family: "Codec-L";
  font-size: 2rem;
  color: #fff;
  letter-spacing: 1px;
  text-align: center;
}

.clearfix {
  text-align: left;
}

.clearfix h2 {
  display: inline-block;
  font-family: "Codec-EB";
  font-size: 1.8rem;
  color: #424242; /*--grey*/
  letter-spacing: 0.75px;
  margin-bottom: 1rem;
  margin-top: 0.8rem;
  text-align: left;
  margin-left: 20%;
  padding: 0.3rem 1rem 0rem 1rem;
  background-color: #fff;
  line-height: 160%;
  width: auto;
}

.clearfix p {
  display: inline-block;
  text-align: left;
  padding-left: 20%;
  font-size: 1.5rem;
  font-family: "Codec-EB";
}


input, textarea, .form-control {
  font-family: "OpenSans-L";
  font-size: 1.6rem;
  line-height: 140%;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
    -webkit-text-fill-color: #fff !important;
  }

.form-control textarea {
  color: #015d8e; /*--accent-dark*/
}

.form-control textarea {
  color: #015d8e; /*--accent-dark*/
}

.form-control input:focus{
  color: #fff;
  background-color: transparent;
  border-color: transparent;
  border-bottom-color: #fff;
  outline: 0;
}

input::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #fff;
  opacity: 1; /* Firefox */
}

textarea::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #015d8e; /*--accent-dark*/
  opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #fff;
}

::-ms-input-placeholder { /* Microsoft Edge */
  color: #fff;
}

button {
  font-family: "Codec-L";
  font-size: 1.2rem;
  letter-spacing: 1px;
  color: #fff;
}

.product p {
  font-size: 1.3rem;
  line-height: 140%;
  margin-bottom: 2rem;
}

.product a {
  font-family: 'Codec-L';
  font-size: 1.35rem;
  letter-spacing: 1px;
  color: #6de92f; /*--dark-g*/
}

.twocolumn {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.column {
  width: 48%;
}

.column p {
  font-size: 1.2rem;
  margin-bottom: 1rem;
}

.column strong {
  font-size: 1.4rem;
}

/* MEDIA QUERRIES */

/* desktop/xlarge */
@media only screen and (min-width: 2500px) {
  body {
    background-color: rosybrown;
  }

  .menu {
    max-width: 1607px;
    margin: 0 auto;
  }

  .menu-item {
    width: 260px;
  }
  
  nav {
    height: 100px;
    background-color: #424242; /*--grey*/
    overflow: visible;
    flex-grow: 100;
    display: inline-flex;
  }

  .logo {
    width: auto;
    height: 100px;
    background-color: cadetblue;
    margin-left: 1vw;
    margin-right: 0.5vw;
    overflow: hidden;
    display: inline-flex;
  }

  .logo img {
    height: 100%;
    width: auto;
  }

  .nav-container,
  nav {
    overflow: visible;
  }

  .menu {
    text-decoration: none;
    list-style: none;
    width: 100%;
    height: 100px;
    overflow: visible;
    flex-wrap: nowrap;
    padding: 0 5%;
  }

  @supports (display: flex) {
    .menu {
    display: flex !important;
    flex-direction: row;
    justify-content: space-evenly;
    }
  }

  .menu-item {
    font-family: "OpenSans-R";
    font-size: 1.5rem;
    letter-spacing: 1px;
    padding: 55px 0 0 0;
    overflow: hidden;
    background-color: transparent;
    text-align: center;
    text-transform: uppercase;
    color: #fff;

    z-index: 100;
  }

  @supports (display: flex) {
    .menu-item {
      display: flex !important;
      flex-direction: column;
      width: 260px;
      max-height: 100px;
    }
  }

  /*dings*/
  @supports (display: flex) {
    .sub-menu {
      display: flex !important;
      flex-direction: column;
      width: inherit;
      height: auto;
      padding: 0px;
      position: absolute;
      margin-top: 40px;
    }
  }

  .sub-menu {
    transition: all linear 0.2s;
    z-index: 99;
    box-shadow: 0 -15px 0 rgba(68, 236, 232), 0 1px 15px rgba(0, 0, 0, 0.35);
  }

  .sub-item {
    padding: 12px 0px;
    display: none;
    position: relative;
    margin: 2px 0px;
    vertical-align: middle;

    text-transform: none;
    font-size: 1.4rem;
    color: #fff;
    letter-spacing: 1.5px;
    text-shadow: 1px 1px 3px #bbb;
  }
}

/* tablet/medium */
@media only screen and (max-width: 1380px) {
  .menu {
    padding: 0 3%;
  }

  .menu-item {
    width: 200px;
  }

  .icon-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  .icon-item {
    width: 30%;
    height: auto;
    margin-bottom: 1.8rem;
  }

  .form-control {
    font-size: 1.4rem;
  }

  .clearfix h2 {
    font-size: 1.5rem;
  }
  
  .clearfix p {
    font-size: 1.2rem;
  }

  .form-navigation {
    width: calc(80vw * 0.17);
    height: calc(80vw * 0.14);
  }

}

/* tablet/small */
@media only screen and (max-width: 1060px) {
  .nav-container {
    display: none;
  }

  .nav-container-s {
    display: flex;
    position: fixed;
    margin-top: 0px;
    z-index: 100;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    height: auto;
    overflow: visible;
  }

  .nav-s {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
  }

  .toggle-btn-container {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
    height: 100%;
  }

  .this-page {
    display: block;
    width: auto;
    height: 80px;
    margin-right: 1.5rem;
    font-family: "OpenSans-R";
    text-transform: uppercase;
    color: #44ece8; /*--bright-blue*/
    padding-top: 40px;
    letter-spacing: 1px;
  }

  .logo {
    margin-left: 0px;
    margin-right: 2vw;
  }

  .toggle-btn {
    width: 45px;
    height: 35px;
    margin-right: 2vw;
    background-color: transparent;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
  }

  .toggle-btn .line {
    width: 100%;
    height: 2px;
    background-color: #fff;
    display: block;
    -webkit-transition: all 0.1s ease-in-out;
    -o-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;
  }

  /* flip btn */

  .toggle-btn.flipped .line:nth-child(2) {
    opacity: 0;
  }

  .toggle-btn.flipped .line:nth-child(1) {
    width: 35px;
    -webkit-transform: translateY(15.5px) translateX(4px) rotate(45deg);
    -ms-transform: translateY(15.5px) translateX(4px) rotate(45deg);
    -o-transform: translateY(15.5px) translateX(4px) rotate(45deg);
    transform: translateY(15.5px) translateX(4px) rotate(45deg);
  }

  .toggle-btn.flipped .line:nth-child(3) {
    width: 35px;
    -webkit-transform: translateY(-17.5px) translateX(4px) rotate(-45deg);
    -ms-transform: translateY(-17.5px) translateX(4px) rotate(-45deg);
    -o-transform: translateY(-17.5px) translateX(4px) rotate(-45deg);
    transform: translateY(-17.5px) translateX(4px) rotate(-45deg);
  }

  .unfold-btn {
    font-family: "OpenSans-R";
    font-size: 1.5rem;
    color: #fff;
    line-height: 150%;
    width: 4rem;
    margin: 0.2rem 0rem;
  }

  .menu-container {
    display: none;
    width: 100vw;
    height: calc(100vh - 80px);
    padding: 2rem 0px 0px 0px;
    position: absolute;
    left: 0px;
    background-color: #424242; /*--grey*/
    /*overflow-y: scroll;*/
  }

  @supports (display: flex) {
    .menu-container {
      margin-top: 80px !important;

    }
  }

  .toggled {
    display: block;
  }

  .menu {
    width: 15rem;
    height: auto;
    padding: 0px;
    margin: 0px auto;
    position: static;
    left: 0px;
  }

  @supports (display: flex) {
    .menu {
      display: flex !important;
      flex-direction: column;
      justify-content: flex-start;
      flex-wrap: nowrap;
    }
  }

  .menu .active:hover {
    color: #44ece8; /*--bright-blue*/
  }

  .ma:hover {
    color: #44ece8; /*--bright-blue*/
  }

  .menu-item {
    padding: 0px 0px;
    background-color: transparent;
    text-align: center;
    color: #fff;
    line-height: 150%;
    margin-bottom: 40px;
    overflow: hidden;
  }

  @supports (display: flex) {
    .menu-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: auto;
      min-height: 40px;
      height: auto;
      max-height: 80px;
    }
  }

  .ma {
    height: 40px;
    width: 100%;
  }

  @supports (display: flex) {
    .sub-menu {
    display: flex !important;
    flex-direction: column;
    width: inherit;
    /*height: auto;*/
    padding: 0px;
    position: static;
    margin-top: 0px;
  }
  }

  .sub-menu {
    transition: all linear 0.2s;
    z-index: 99;
    box-shadow: none;
  }

  .sub-menu .active a {
    color: #44ece8; /*--bright-blue*/
    border-bottom-color: #44ece8; /*--bright-blue*/
  }

  .sub-item {
    padding: 12px 0px;
    display: block;
    position: static;
    margin: 2px 0px;
    vertical-align: middle;
  }

  .sub-item a {
    text-transform: none;
    font-size: 1rem;
    color: #fff;
    letter-spacing: 1.5px;
    text-shadow: none;
  }

  .sub-item a {
    border-bottom: 1.2px solid;
    border-color: #fff;
    padding-bottom: 3px;
  }

  .linklist-div a {
    border-bottom: 1.2px solid;
    border-color: #1ab2ff; /*--dark-tb*/
    padding-bottom: 3px;
    font-size: 1.5rem;
  }

  @supports (display: flex) {
    .menu-item:focus,
    .menu-item:hover {
      background-color: transparent;
      overflow: hidden;
    }

    .menu-item:focus-within {
      background-color: transparent;
      overflow: hidden;
    }

  }

  .sub-item:last-child {
    margin-bottom: 0px;
  }

  .sub-item:first-child {
    margin-top: 0px;
  }
  @supports (display: flex) {
    .menu-item:focus .sub-menu,
    .menu-item:hover .sub-menu {
    display: flex !important;
    background: transparent!important;
    } 

    .menu-item:focus-within .sub-menu {
    display: flex !important;
    background: transparent!important;
    } 
  }
  

  .menu-item:focus .sub-menu li.sub-item,
  .menu-item:hover .sub-menu li.sub-item {
    display: block;
  }

  .menu-item:focus-within .sub-menu li.sub-item {
    display: block;
  }

  .menu .active {
    color: #44ece8; /*--bright-blue*/
  }
  
  .menu .active:hover,
  .menu .active:focus {
    color: #44ece8; /*--bright-blue*/
  }

  .menu .active:focus-within{
    color: #44ece8; /*--bright-blue*/
  }
  
  .menu-item:hover,
  .menu-item:focus {
    color: #44ece8; /*--bright-blue*/
  }

  .menu-item:focus-within{
    color: #44ece8; /*--bright-blue*/
  }

  .sub-item:focus,
  .sub-item:hover {
    cursor: pointer;
  }

  .sub-item:focus-within {
    cursor: pointer;
  }

  .sub-item:focus a,
  .sub-item:hover a {
    color: #44ece8; /*--bright-blue*/
    text-shadow: none;
  }

  .sub-item:focus-within a {
    color: #44ece8; /*--bright-blue*/
    text-shadow: none;
  }

  .sub-item:focus a,
  .sub-item:hover a {
    border-color: #44ece8; /*--bright-blue*/
  }

  .sub-item:focus-within a {
    border-color: #44ece8; /*--bright-blue*/
  }

  .unfolded {
    max-height: 500px;
  }

@supports (display: flex) {
  #main-page-pic {
    width: 100%;
    height: 68vh;
    background: linear-gradient(
      to right,
      #015d8e 0%, /*--accent-dark*/
      #1ab2ff 100% /*--gradient-dark*/
    );
    overflow: hidden;
    vertical-align: middle;
    display: flex;
    justify-content: center;
    position: relative;
  }

  #main-page-pic img {
    position: absolute;
    opacity: 0.5;
    margin-left: auto;
  }

  @supports (mix-blend-mode: overlay) {
    #main-page-pic img {
      mix-blend-mode: overlay;
      opacity: 1 !important;
    }
  }

  h1 {
    font-family: "Codec-EB";
    font-size: 3rem;
    color: #424242; /*--grey*/
    position: absolute;
    bottom: 8vh;
    left: inherit;
    margin-right: auto;
    margin-left: auto;
    width: auto;
    letter-spacing: 0.75px;
    transform: translate(0%, 0%);
  }

  h1 span {
    padding: 0.6rem 1.3rem 0.2rem 1.3rem;
    background-color: #fff;
    font-size: inherit;
    line-height: 160%;
  }

  h2 {
    font-size: 2.6rem;
  }

  .main-text p {
    font-size: 1.5rem;
    line-height: 140%;
  }

  .main-text {
    margin: 0px auto;
    width: 60vw;
    height: auto;
    bottom: 0px;
    padding-top: calc(80px + 5vh);
  }

  .mpi-sub {
    padding: 4vh 0px 0px 0px;
    margin-top: 0px;
  }
}
  .icon-item span {
    font-size: 1.5rem;
  }

  .product {
    flex-basis: 30%;
    margin: 0px 1.5% 5rem 1.5%;
  }

  .product p {
    font-size: 1.1rem;
    line-height: 140%;
    margin-bottom: 1.5rem;
  }
  .product a {
    font-size: 1.2rem;
  }

  .product a:after {
    top: 82%;
  }

  #contact {
    margin-top: 5rem;
  }

  .contact-gradient {
    min-height: 100vh;
    height: auto;
    padding-top: 5rem;
  }

  form {
    display: flex;
    flex-direction: column;
    width: 60vw;
    min-width: 0px;
    max-width: 60vw;
  }
  
  fieldset {
    flex-direction: column;
    margin-bottom: 1.5rem;
    width: 100%;
  }

  input {
    width: 100%;
  }

  .clearfix {
    height: auto;
    width: 100%;
    display: block;
    padding-bottom: 1.5rem;
  }

  .clearfix h2 {
    margin-left: 0px;
  }

  .clearfix p {
    padding-left: 0px;
    display: block;
  }

  .actions {
    width: 100%;
    height: 0px;
    position: relative;
  }
  
  .form-navigation {
    position: absolute;
    left: auto;
    right: 0px;
    top: auto;
    bottom: 1.5rem;
    transform: none;
  }

  .btn-group, .btn-toolbar, .next, .submit {
    width: 100%;
    height: 100%;
    background-color: #3193c5; /*--gradient-middle*/
  }
  
  button {
    height: 100%;
    width: 100%;
    border: none;
    margin: 0px auto;
    background-color: transparent;
    cursor: pointer;
  }

  .send-box {
    width: 100%;
    height: 0px;
  }

  .twocolumn {
    padding-top: 10rem;
  }

  .column p {
    font-size: 1.2rem;
    margin-bottom: 1rem;
  }


}

/* mobile/small */
@media only screen and (max-width: 900px) {
 @supports (display: flex) {
  .heroh {
    display: none;
  }

  .smheroh {
    display: block;
  }

  .main-text {
    margin: 0px auto 0px auto;
    width: 60vw;
    height: auto;
    bottom: 0px;
  }

  .mpi-sub {
    padding: 4vh 0px 0px 0px;
    margin-top: 0px;
  }

  .main-text p {
    font-size: 1.2rem;
    line-height: 150%;
  }

  .plus-icons {
    width: 100%;
    min-width: 60vw;
    max-width: 60vw;
  }

  .icon-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  .icon-item {
    width: 47%;
    height: auto;
    margin-bottom: 1.5rem;
  }

  .icon-item span {
    font-size: 1.5rem;
    line-height: 160%;
  }

  .icon {
    margin-bottom: 0.5rem;
  }

  .product {
    flex-basis: 47%;
    margin: 0px 1.5% 5rem 1.5%;
  }

  .sub-icon {
    width: 180px;
    margin-bottom: -1rem;
  }

  .twocolumn {
    display: flex;
    flex-direction: column;
  }
  
  .column {
    width: 100%;
  }
}

}

/* mobile/xsmall */
@media only screen and (max-width: 730px) {
 @supports (display: flex){

 
  #main-page-pic {
    width: 100%;
    height: 72vh;
  }

  h1 {
    font-size: 2rem;
    color: #424242; /*--grey*/
    position: absolute;
    bottom: 6vh;
    left: inherit;
    margin-right: auto;
    margin-left: auto;
    width: auto;
    letter-spacing: 0.75px;
    transform: translate(0%, 0%);
    text-align: center;
  }

  h1 span {
    padding: 0.38rem 0.8rem 0.1rem 0.8rem;
    background-color: #fff;
    font-size: inherit;
    line-height: 150%;
  }

  h2 {
    font-size: 1.8rem;
  }

  h5 {
    font-size: 1.5rem;
  }

  .main-text {
    width: 80vw;
    height: auto;
    bottom: 0px;
  }

  .main-text p {
    font-size: 1rem;
    line-height: 150%;
  }

  .mpi-sub {
    padding: 2.2vh 0px 0px 0px;
    margin-top: 0px;
  }

  .plus-icons {
    min-width: 80vw;
    max-width: 80vw;
  }

  .icon-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  .icon-item {
    width: 47%;
    height: auto;
    margin-bottom: 1.5rem;
  }

  .icon-item span, .linklist-div a, .form-control {
    font-size: 1.2rem;
  }

  button {
    font-size: 3vw;
  }

  .product a {
    font-size: 1.2rem;
  }

  .product a:after {
    border-top: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 5px solid #6de92f; /*--dark-g*/
    top: 82%;
  }

  .down {
    height: 1.1rem;
    width: 1.15rem;
    margin: 0.5rem auto;
    position: relative;
    transform: rotate(90deg);
    cursor: pointer;
  }
  
  .downarrow {
    top: 8px;
    width: 100%;
    height: 2px;
  }
  
  .downarrow::after {
    width: 80%;
    height: 2px;
    top: -0.4rem;
    right: -0.35rem;
  }
  
  .downarrow::before {
    width: 80%;
    height: 2px;
    top: 0.4rem;
    right: -0.35rem;
  }

  form {
    display: flex;
    flex-direction: column;
    width: 80vw;
    min-width: 0px;
    max-width: 80vw;
  }

  .form-navigation {
    width: calc(100vw * 0.17);
    height: calc(100vw * 0.14);
  }

  .clearfix h2 {
    font-size: 1.2rem;
  }
  
  .clearfix p {
    font-size: 1rem;
  }

}
}
/* IE10+ CSS here */

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .menu-item {
    display: inline-block;
    width: 260px;
    height: 80px;
  }

  .sub-menu {
    display: none;
    width: inherit;
    height: auto;
    padding: 0px;
    position: absolute;
    margin-top: 0px;
    background: linear-gradient(
    to bottom,
    #44ece8 0%, 
    #64cbff 100% 
    ); 
  }

  .sub-item {
    padding: 12px 0px;
    display: block;
    position: relative;
    margin: 2px 0px;
    vertical-align: middle;
  }

  .sub-item:hover a {
    color: #424242;
    border-color: #424242;
  }

  .menu-item:hover .sub-menu {
    display: block;
  }

  .menu-item:hover {
    background-color: #44ece8; 
  }
  
}

@media all and (max-width: 1060px) and (-ms-high-contrast: none), (max-width: 1060px) and (-ms-high-contrast: active)  {
  .menu-item {
    display: block;
    width: 260px;
    height: auto;
  }

  .sub-menu {
    display: block;
    width: inherit;
    height: auto;
    padding: 0px;
    position: static;
    margin-top: 0px;
    background: transparent; 
  }

  .sub-item {
    padding: 12px 0px;
    display: block;
    position: relative;
    margin: 2px 0px;
    vertical-align: middle;
  }

  .sub-item:hover a{
    color: #44ece8!important;
    border-color: #44ece8;
  }

  .menu-item:hover .sub-menu {
    display: block;
  }

  .menu-item:hover {
    background-color: transparent; 
  }

  .unfold-btn {
    display: none;
  }
  
}