:root {
  /* Element sizes */
  --menu-height:  50px;
  --center-full-width:  60%;
  --center-full-width-mobile: 90%;
  /* Allowed site colors */
  --pure-white: #FFFFFF;
  --white: #F3F4ED;
  --pale: #C1C3B5;
  --light-green: #E5E6E0;
  --alt-light-green: #DCDDD6;
  --green: #A3A691;
  --dark-green: #3A3C30;
  --honey: #E1B362;
  --ochre: #B08758;
  --alt-grey: #282828;
  --dark-grey: #262626;
  --grey: #323232;
  --light-grey: #3C3C3C;
  --transp-ochre: rgba(189, 122, 48, 0.9);
  /* Element specific color variables */
  --pale-text: var(--pale);
  --bg-color: var(--alt-grey);
  --font-color: var(--light-green);
  --section-1n-bg: var(--light-grey);
  --section-2n-bg: var(--grey);
  --text-over-image: var(--pale);
  --dyn-button-color: var(--white);
  --dyn-button-background: var(--transp-ochre);
  --tag-bg: var(--white);
  --tag-text: var(--dark-grey);
  /* Global animation parameters */
  --bg-transition-time: 2s;
  --img-overlay-color: 32;
  --img-overlay-opacity: 0.7;
  --img-overlay-opacity-hover: 0.5;
  /* Image variables */
  --mai-logo-white:  url("/assets/images/mai-logo-hor-slogan-white.svg");
  --mai-logo-dark:  url("/assets/images/mai-logo-hor-slogan-grey.svg");
  --mai-logo: var(--mai-logo-white);
  --tradewinds-awardable-white:  url("/assets/images/tradewindsai-awardable-white.png");
  --tradewinds-awardable-black:  url("/assets/images/tradewindsai-awardable-black.png");
  --tradewinds-badge: var(--tradewinds-awardable-black);
  --afsa-logo-white: url("/assets/images/afsa-logo-slogan-white.svg");
  --afsa-logo-black: url("/assets/images/afsa-logo-slogan-dark.svg");
  --afsa-logo: var(--afsa-logo-white);
}

[data-theme="light"] {
  --bg-color: var(--alt-light-green);
  --font-color:  var(--dark-grey);
  --section-1n-bg: var(--white);
  --section-2n-bg: var(--light-green);
  /*--pale-text: var(--grey);*/
  --text-over-image: #fff;
  --img-overlay-color: 90;
  --img-overlay-opacity: 0.5;
  --img-overlay-opacity-hover: 0.2;
  --mai-logo: var(--mai-logo-dark);
  --tradewinds-badge: var(--tradewinds-awardable-white);
  --dyn-button-color: var(--grey);
  --afsa-logo: var(--afsa-logo-black);
  --tag-bg: var(--light-grey);
  --tag-text: var(--white);
}



@font-face {
  font-family: "ArchivoBlack";
  src: url("/assets/fonts/Archivo_Black/ArchivoBlack-Regular.ttf");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "K2D_extraLight";
  src: url("/assets/fonts/K2D/K2D-ExtraLight.ttf");
}

@font-face {
  font-family: "K2D_extraLightItalic";
  src: url("/assets/fonts/K2D/K2D-ExtraLightItalic.ttf");
}

body {
  margin: 0;
  background-color: var(--bg-color);
  font-family: "K2D_extraLight";
  color: var(--font-color);
}

h1, h2, h3, h4 {
  font-family: "ArchivoBlack";
  display: block;
}

h1 {
  font-size: 3em;
}

h1 span {
  font-weight: 100;
  font-family: "K2D_extraLight";
  font-size: 0.6em;
}

h2 {
  font-size: 2em;
}

h3 {
  font-size: 1.5em;
  font-family: "K2D_extraLight";
}

h4 {
  font-size: 1em;
}

p {
  font-size: 1.1em;
}

a {
  color: var(--honey);
}

.button {
  margin-right: auto;
  background: none;
  border: solid 1px var(--honey);
  color: var(--white);
  padding: 0.5em 3em;
  font-family: "ArchivoBlack";
  text-transform: uppercase;
  text-decoration: none;
  transition: 0.5s;
  margin-top: 1.5em;
}

.button:hover {
  background: var(--transp-ochre);
  transition: 0.5s;
}

.dyn-color {
  color: var(--dyn-button-color);
  background: none;
}

.dyn-color:hover {
  background: var(--dyn-button-background);
}

#mobile-menu-btn {
  display: none;
}

#mobile-menu-btn-close {
  display: none;
}

#main-menu {
  margin: 0 auto;
  display: flex;
  max-width: var(--center-full-width);
  padding: 0 2em 0 2em;
  color: var(--light-green);
  background: var(--dark-grey);
}

#main-menu a {
  color:  color: var(--light-green);
  font-family: "K2D_extraLight";
  text-decoration: none;
  text-transform: uppercase;
  font-size: 0.8em;
}

#main-menu a.selected {
  background-color: var(--light-grey);
}

#main-menu ul li:hover {
  background-color: var(--light-grey);
}

#main-menu ul {
  margin-top: 0;
  margin-bottom: 0;
  display: flex;
  height: var(--menu-height);
}

#main-menu ul li {
  padding: 0 0.8em;
  list-style: none;
  line-height: var(--menu-height);
}

#main-menu .center li {
  padding: 0 1.5em;
}


#menu-logo {
  max-width: 220px;
  cursor: pointer;
}

#menu-logo-mobile {
  display: none;
  max-width: 40px;
  height: 50px;
  cursor: pointer;
}

.center {
  margin: auto;
}

.pull-right {
  margin-left:  auto;
}

.pull-left {
  margin-right: auto;
}


/* Content styles */

header {
  padding: 10em 1em 6em 1em;
  text-align: center;
  min-height: 400px;
}

header center {
  display: flex;
}

header center h1 {
  font-family: "K2D_extraLight";
  text-transform: uppercase;
  font-weight: 100;
  font-size: 1.5em;
  letter-spacing: 0.25em;
  border-bottom: 1px solid;
  border-image:  url("/assets/images/gradient_line_vec.svg") 1;
  margin: auto;
  padding-bottom: 0.3em;
  color: var(--white);
}

header .replication {
  max-width: 20%;
  margin: auto;
  opacity: 0.8;
}

header .verticals {
  font-family: "K2D_extraLightItalic";
  text-transform: uppercase;
  font-size: 1.4em;
  font-weight: 100;
  color:  var(--pale-text);
  margin: 0;
}

header video {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  z-index: -1;
}

.mai-logo {
  content: var(--mai-logo);
}

.small-header {
  min-height: 120px;
  max-width: 40%;
  margin: auto;
  padding: 6em 1em 6em 1em;
}

.small-header center h1 {
  color: var(--font-color);
}


.wrapper {
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  max-width: var(--center-full-width);
  padding: 4em 4em;
}

.wrapper>*:last-child {
  margin-bottom: 3em;
}

.synopsis {
  font-size: 2em;
  padding: 1em 0;
  margin-top: 0;
  max-width: 60%;
}

.tradewinds-awardable {
  flex-direction: row;
  padding: 3em 4em;
}

.tradewinds-awardable h1 {
  padding-top: 1.5em;
}

#tradewinds .tradewinds-awardable h1 {
  padding-top: 0.5em;
}

.tradewinds-badge {
  content: var(--tradewinds-badge);
  max-width: 400px;
}

.afsa-logo {
  content: var(--afsa-logo);
  max-width: 400px;
  margin: 2em 0;
}

.tradewinds-awardable .synopsis {
  font-size: 1.3em;
  padding-bottom: 1em;
}

.afsa-fp {
  background: linear-gradient( rgba(var(--img-overlay-color), var(--img-overlay-color), var(--img-overlay-color), var(--img-overlay-opacity)), rgba(var(--img-overlay-color), var(--img-overlay-color), var(--img-overlay-color), var(--img-overlay-opacity)) ), url("/assets/images/afsa-gui-frontpage-nologo.png");
  background-position: center;
  color: var(--text-over-image);
  text-shadow: 0 0 0.5em rgb(0, 0, 0);
  transition: var(--bg-transition-time);
}

.afsa-fp:hover {
  background: linear-gradient( rgba(var(--img-overlay-color), var(--img-overlay-color), var(--img-overlay-color), var(--img-overlay-opacity-hover)), rgba(var(--img-overlay-color), var(--img-overlay-color), var(--img-overlay-color), var(--img-overlay-opacity-hover)) ), url("/assets/images/afsa-gui-frontpage-nologo.png");
  transition: var(--bg-transition-time);
}

.reidv4-fp {
  background: linear-gradient( rgba(var(--img-overlay-color), var(--img-overlay-color), var(--img-overlay-color), var(--img-overlay-opacity)), rgba(var(--img-overlay-color), var(--img-overlay-color), var(--img-overlay-color), var(--img-overlay-opacity)) ), url("/assets/images/reidv4-frontpage.png");
  background-position: center;
  color: var(--text-over-image);
  text-shadow: 0 0 0.5em rgb(0, 0, 0);
  transition: var(--bg-transition-time);
}

.reidv4-fp:hover {
  background: linear-gradient( rgba(var(--img-overlay-color), var(--img-overlay-color), var(--img-overlay-color), var(--img-overlay-opacity-hover)), rgba(var(--img-overlay-color), var(--img-overlay-color), var(--img-overlay-color), var(--img-overlay-opacity-hover)) ), url("/assets/images/reidv4-frontpage.png");
  transition: var(--bg-transition-time);
}

.aegol-fp {
  background: linear-gradient( rgba(var(--img-overlay-color), var(--img-overlay-color), var(--img-overlay-color), var(--img-overlay-opacity)), rgba(var(--img-overlay-color), var(--img-overlay-color), var(--img-overlay-color), var(--img-overlay-opacity)) ), url("/assets/images/aegol-frontpage.png");
  background-position: center;
  color: var(--text-over-image);
  text-shadow: 0 0 0.5em rgb(0, 0, 0);
  transition: var(--bg-transition-time);
}

.aegol-fp:hover {
  background: linear-gradient( rgba(var(--img-overlay-color), var(--img-overlay-color), var(--img-overlay-color), var(--img-overlay-opacity-hover)), rgba(var(--img-overlay-color), var(--img-overlay-color), var(--img-overlay-color), var(--img-overlay-opacity-hover)) ), url("/assets/images/aegol-frontpage.png");
  transition: var(--bg-transition-time);
}


section {
  background: var(--section-1n-bg);
  padding: 4em 16em;
}

section:nth-child(2n) {
  background: var(--section-2n-bg); 
}

.tab {
  font-weight: bold;
  padding: 0.7em 1em;
  font-size: 0.8em;
  margin: 0 0.5em;
  clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 35%, 90% 0);
  background-color: var(--white);
  color: var(--dark-grey);
}

.tag {
  font-weight: bold;
  padding: 0.5em 1em;
  font-size: 0.7em;
  margin: 0 0.5em;
  background-color: var(--tag-bg);
  color: var(--tag-text);
  border-radius: 1em;
}

.green {
  background-color: var(--green);
  color: var(--white);
}

.reidv4-keypoints {
  margin: 1em 0 3em 0;
}

.contact-elem {
  padding: 1em 0;
}

.contact-elem h1 {
  padding: 0.1em 0;
  margin: 0;
}

.contact-elem .synopsis {
  padding: 0.1em 0;
}

#about .mai-logo {
  max-width: 50%;
}

#about .synopsis {

}

footer {
  margin: 0 auto;
  width: 100%;
  background-color: var(--bg-color);
}

footer center {
  margin: 0 auto;
  display: flex;
  max-width: var(--center-full-width);
  flex-direction: row;
  padding: 6em 4em;
}

footer .address {
  text-align: left;
  line-height: 0.5em;
}

.solution-compatibility-note {
  text-transform: uppercase;
  margin: auto;
  max-width: 40%;
  text-align: center;
}

.footer-logo {
  width: 20%;
  margin-top: auto;
  margin-bottom: auto;
  content: var(--mai-logo);
}

.footer-2 {
  padding: 2em 4em;
}

footer .footer-2 .address {
  line-height: 1em;
}

@media (max-width: 1600px) {
  #main-menu {
    max-width: 80%;
  }

  .wrapper {
    max-width: var(--center-full-width-mobile);
  }
}

@media (max-width: 1200px) {

  section {
    padding: 2em;
  }

  header .replication {
    max-width: 80%;
    margin: auto;
    opacity: 0.8;
  }

  /*@media (orientation: landscape) {
    header video {
      right: -360px;
      bottom: -390px;
    }
  }*/

  .tradewinds-awardable {
    padding: 0;
    flex-direction: column;
  }

  .tradewinds-badge {
    width: 100%;
  }

  .tradewinds-awardable .pull-right {
    margin-right: auto;
  }

  .small-header {
    max-width: 90%;
  }

  footer center {
    max-width: 100%;
  }

  .footer-logo {
    width: 30%;
  }

  .wrapper {
    max-width: var(--center-full-width-mobile);
  }

  #main-menu {
    max-width: 100%;
  }

  #main-menu .center li {
    padding: 0 1.2em;
  }

  #main-menu a {
    font-size: 0.7em;
  }

  #menu-logo {
    max-width: 130px;
  }
}

@media (max-width:  800px) {

  section {
    padding: 1em;
  }

  header .replication {
    max-width: 80%;
    margin: auto;
    opacity: 0.8;
  }

  header video {
    right: -480px;
    bottom: 100px;
  }

  footer center {
    flex-direction: column;
  }

  .footer-logo {
    width: 100%;
    margin-top: 2em;
  }

  .solution-compatibility-note {
    max-width: 100%;
    margin-top: 3em;
    margin-bottom: 2em;
  }

  .small-header {
    max-width: 90%;
  }

  h1 {
    font-size: 2.5em;
  }

  h1 span {
    display: block;
  }

  h2 {
    font-size: 1.5em;
  }

  h3 {
    font-size: 1.2em;
    font-family: "K2D_extraLight";
  }

  h4 {
    font-size: 1em;
  }

  .synopsis {
    font-size: 1.2em;
    padding-top: 0;
    margin-top: 0;
    max-width: 90%;
  }

  .wrapper {
    padding: 0;
  }

  .afsa-fp {
    padding:  1em;
  }

  .reidv4-fp {
    padding:  1em;
  }

  .aegol-fp {
    padding:  1em;
  }

  .tag {
    display: block;
    margin: 0.5em;
  }

  #about .mai-logo {
    max-width: 100%;
    padding: 2em 0;
  }

  #mobile-menu-btn {
    display: block;
    background: rgba(0, 0, 0, 0);
    line-height: 60px;
  }

  #mobile-menu-btn img{
    height: 20px;
    /*filter: invert(100%);*/
  }

  #mobile-menu-btn-close {
    display: block;
    background: rgba(0, 0, 0, 0);
    line-height: 60px;
    display: none;
  }

  #mobile-menu-btn-close img {
    height: 20px;
  }

  #main-menu {
    height: 50px;
  }

  #main-menu ul {
    display: none;
    height: initial;
  }

  #main-menu ul li {
    line-height: initial;
  }

  #main-menu a {
    margin-left: auto;
  }

  #main-menu.mobile-open ul {
    flex-direction: column;
    padding: 3em 0 0 0;
    display: block;
  }

  #main-menu.mobile-open #mobile-menu-btn {
    display: none;
  }

  #main-menu.mobile-open #mobile-menu-btn-close {
    display: block;
  }

  #menu-logo {
    display: none;
  }

  #menu-logo-mobile {
    display: block;
  }

  .pull-right {
    margin-left: initial;
  }

  #main-menu.mobile-open {
    max-width: 100%;
    height: 100vh;
    max-height: 100vh;
    flex-direction: column;
    overflow-y: scroll;
    /*align-items: center;*/
    /*padding: 3em;*/
  }

  .center {
    margin: initial;
  }

  #main-menu.mobile-open.center {
    margin-bottom: 1em;
  }

  #main-menu.mobile-open ul li {
    padding: 0.7em;
  }

  .hide-on-mobile {
    display: none;
  }
}