nav {
   background-image: url("../img/background.png");
   opacity: 0.98;
   background-size: 120%;
   background-repeat: repeat;
  /* background-color: rgba(255, 255, 255, 0.95); */
  box-shadow: 4px 1px 8px 0 rgba(0,0,0,.3);
  /* position: fixed; */
  width: 100%;
  z-index: 3;
  line-height: 20px;
   position: fixed; /* Make it stick/fixed */
   top: 0; /* Stay on top */
   width: 100%; /* Full width */
   transition: top 0.3s; /* Transition effect when sliding down (and up) */
}

a.active {
   color: #ff677c;
}

.link {
   display: block;
   margin-top: 40px;
}

nav ul {
  margin: 0;
  margin: 3px 0 0 0;
  list-style: none;
  overflow: hidden;
}

nav li a {
  display: block;
  padding: 20px 20px;
  text-decoration: none;
}

/* menu */

nav .menu {
  clear: both;
  max-height: 0;
  transition: max-height .2s ease-out;
}

/* menu icon */

nav .menu-icon {
  cursor: pointer;
  display: inline-block;
  float: right;
  padding: 28px 0px;
  position: relative;
  user-select: none;
}

nav .menu-icon .navicon {
  background: #fff;
  display: block;
  height: 2px;
  position: relative;
  transition: background .2s ease-out;
  width: 18px;
}

nav .menu-icon .navicon:before,
nav .menu-icon .navicon:after {
  background: #fff;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  transition: all .2s ease-out;
  width: 100%;
}

nav .menu-icon .navicon:before {
  top: 5px;
}

nav .menu-icon .navicon:after {
  top: -5px;
}

/* menu btn */

nav .menu-btn {
  display: none;
}

nav .menu-btn:checked ~ .menu {
  max-height: 240px;
}

nav .menu-btn:checked ~ .menu-icon .navicon {
  background: transparent;
}

nav .menu-btn:checked ~ .menu-icon .navicon:before {
  transform: rotate(-45deg);
}

nav .menu-btn:checked ~ .menu-icon .navicon:after {
  transform: rotate(45deg);
}

nav .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
nav .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
  top: 0;
}

/* 48em = 768px */

@media (min-width: 900px) {
  nav ul li {
    float: left;
  }

  nav li a {
    padding: 20px 30px;
  }

  nav .menu {
    clear: none;
    float: right;
    max-height: none;
  }
  nav .menu-icon {
    display: none;
  }
}






/** -------------------------------------------------- OVERWRITES -------------------------------------------------- **/
/* ----------------------------------------------------------------------------------------------------------------- */

/* ---- VARIOUS ---------------------------------------------------------- */
nav a {
   text-decoration: none !important;
}

nav a:hover {
   color: #ff677c;
}

.dark-background {
   background-image: url("../img/background.png");
   background-size: 120%;
   background-repeat: repeat;
}

.badge {
   width: 30%;
   margin: 20px 0 0 -13px;
   display: block;
}
@media only screen and (max-width: 900px) {
   .badge {
      width: 50%;
   }
}

.icon {
   height: 30px;
   width: 30px;
}

.fa-primary {
   fill: #777c8b;
}

.fa-secondary {
   fill: #777c8b;
}

.flex-container {
   display: flex;
   flex-direction: column;
   min-height: 80vh;
   overflow: hidden;
   height: 80vh;
}

.display-inline {
   display: inline;
   margin-left: 20px;
}


/* ---- ABOUT ---------------------------------------------------------------- */

.picture {
   width: 80%;
}

@media only screen and (max-width: 900px) {
   .picture {
      width: 100%;
   }
}

.portrait {
   width: 50%;
}

@media only screen and (max-width: 900px) {
   .portrait {
      width: 100%;
   }
}


.eve, .else {
   padding: 0 50px 0 50px;
}

@media only screen and (max-width: 900px) {
   .eve, .else {
      padding: 0;
   }
}

/* ---- LOGO ---------------------------------------------------------------- */
.logo {
   width: 20%;
   height: auto;
   min-height: 80vh;
}

@media only screen and (max-width: 900px) {
   .logo {
      width: 40%;
   }
}

.logo-small {
   width: 30px;
   padding-top: 14px;
}

.logo-footer {
   width: 30px;
}

.footer-element {
   margin-top: 6px;
}

.footer-logo-li {
   padding: 0 0px 0 0 !important;
}

header .logo {
   align-self:center;
   flex-grow:1;
   height: auto;
   min-height: 30vh;
}

header h3 {
   align-self:center;
}


/* ---- LINK ---------------------------------------------------------------- */
a {
   color: #777c8b;
}

a:hover {
   color: #ff677c;
}

.link-white {
   color: #fff;
}

.link-white:hover {
   color: #ff677c;
}


/* ---- TYPOGRAPHY ---------------------------------------------------------- */
h1 {
   font-size: 50px;
   line-height: 70px;
   margin-bottom: 60px;
}
@media only screen and (max-width: 900px) {
	h1  {font-size: 30px; line-height: 50px;}
}

h2 {
   margin-bottom: 0px;
}

.luna {
   font-family: 'lunaregular';
}

/* ---- FOOTER ---------------------------------------------------------- */
#footer ul {
   float: right;
}

#footer ul li {
   float: right;
   list-style-type: none;
   padding: 0 20px;
}

@media only screen and (max-width: 900px) {
   #footer ul li {
      float: none;
      padding: 20px 0 20px 20px;
   }
}