/* -----------------------------------------------------------------------------
  MENU STYLES
  
----------------------------------------------------------------------------- */
@import url("https://fonts.googleapis.com/css?family=Lato:300,400,700,900");
@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700");
/* SIZE 
$layout: 1200px;
$height:60px;
$middleheight:$height/2;
$smallheight:$middleheight/2;
*/
/* COLOURS */
/* MIXING */
@import url("https://fonts.googleapis.com/css?family=Lato:300,400,700,900");
@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700");
/* SIZE 
$layout: 1200px;
$height:60px;
$middleheight:$height/2;
$smallheight:$middleheight/2;
*/
/* COLOURS */
/*
@mixin animation($animation...) {
  -o-animation: $animation;
  -moz-animation: $animation;
  -webkit-animation: $animation;
  animation: $animation;
}*/
.main_menu_fixed {
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  transition: all 1s ease-in-out;
  padding: 1.5vw 5vw;
  background-color: rgba(255, 255, 255, 0.6); }
  .main_menu_fixed span {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center; }
  .main_menu_fixed img {
    width: 15vh;
    transition: all 1s ease-in-out; }
  @media (min-width: 768px) {
    .main_menu_fixed {
      padding: 1.5vw 5vw; } }
  .main_menu_fixed.minimal_menu {
    padding: 1vw 5vw; }
    .main_menu_fixed.minimal_menu img {
      width: 12vh; }

.main_menu_toggle {
  margin-top: -1000px;
  background-color: #ffffff;
  position: relative;
  display: block; }
  .main_menu_toggle nav {
    width: 100vw;
    padding: 2.5vw 5vw; }
    @media (min-width: 768px) {
      .main_menu_toggle nav {
        padding: 2.5vw 5vw; } }
  .main_menu_toggle a {
    text-transform: uppercase;
    text-decoration: none;
    color: #1e252b;
    font-family: Lato;
    font-size: 2.25vh;
    padding-top: 1vh;
    font-weight: 300;
    letter-spacing: 3.6px;
    display: block;
    text-align: right; }
    @media (min-width: 768px) {
      .main_menu_toggle a {
        font-size: 1.75vh; } }
  .main_menu_toggle.show {
    margin-top: 0px; }

.lang_sel {
  position: relative;
  font-family: "Lato", sans-serif;
  font-weight: 700;
  font-size: 1.5vh;
  margin-right: 1vw; }
  .lang_sel a {
    text-decoration: none;
    color: #000000;
    opacity: 1;
    transition: opacity 0.4s; }
    .lang_sel a:hover {
      opacity: 0.5; }

.scroll_to {
  display: inline-block; }

/* -----------------------------------------------------------------------------
  HAMBURGER ICONS COMPONENT
  
----------------------------------------------------------------------------- */
/**
 * Toggle Switch Globals
 **/
.c-hamburger {
  position: relative;
  overflow: hidden;
  width: 35px;
  height: 35px;
  font-size: 0;
  padding: 0;
  margin: 0;
  text-indent: -9999px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  box-shadow: none;
  border-radius: none;
  border: none;
  cursor: pointer;
  transition: background 0.3s;
  background-color: transparent; }
  @media (min-width: 768px) {
    .c-hamburger {
      width: 50px;
      height: 35px; } }

.c-hamburger:focus {
  outline: none; }

.c-hamburger span {
  display: block;
  position: absolute;
  top: 16.5px;
  left: 6px;
  right: 6px;
  height: 2px;
  background: black; }
  @media (min-width: 768px) {
    .c-hamburger span {
      left: 9px;
      right: 9px;
      height: 2px; } }

.c-hamburger span::before,
.c-hamburger span::after {
  position: absolute;
  display: block;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: black;
  content: ""; }
  @media (min-width: 768px) {
    .c-hamburger span::before,
    .c-hamburger span::after {
      height: 2px; } }

.c-hamburger span::before {
  top: -8px; }
  @media (min-width: 768px) {
    .c-hamburger span::before {
      top: -10px; } }

.c-hamburger span::after {
  bottom: -8px; }
  @media (min-width: 768px) {
    .c-hamburger span::after {
      bottom: -10px; } }

/**
 * Style 1
 *
 * Rotating hamburger icon (rot), that simply rotates 90 degrees when activated.
 * Nothing too fancy, simple transition.
 *
 **/
.c-hamburger--rot {
  background-color: none; }

.c-hamburger--rot span {
  transition: transform 0.3s; }

/* active state, i.e. menu open */
.c-hamburger--rot.is-active {
  background-color: #166888; }

.c-hamburger--rot.is-active span {
  transform: rotate(90deg); }

/**
 * Style 2
 * 
 * Hamburger to "x" (htx). Takes on a hamburger shape, bars slide
 * down to center and transform into an "x".
 */
.c-hamburger--htx span {
  transition: background 0s 0.3s; }

.c-hamburger--htx span::before,
.c-hamburger--htx span::after {
  transition-duration: 0.3s, 0.3s;
  transition-delay: 0.3s, 0s; }

.c-hamburger--htx span::before {
  transition-property: top, transform; }

.c-hamburger--htx span::after {
  transition-property: bottom, transform; }

/* active state, i.e. menu open */
.c-hamburger--htx.is-active span {
  background: none; }

.c-hamburger--htx.is-active span::before {
  top: 0;
  transform: rotate(45deg); }

.c-hamburger--htx.is-active span::after {
  bottom: 0;
  transform: rotate(-45deg); }

.c-hamburger--htx.is-active span::before,
.c-hamburger--htx.is-active span::after {
  transition-delay: 0s, 0.3s; }

/*# sourceMappingURL=navigation.css.map */