/* ---------- Main CSS file ---------- // 
// Author:  Jelmar Hekker              // 
// Website: http://www.jelmarhekker.nl //
// Version: 1                          //   
// Year: 2019                          //   
// ----------------------------------- */
/* CSS imports */
@import url(structure.css);
@import url(default.css);
/* Fonts imports */
@import url("https://fonts.googleapis.com/css?family=Zilla+Slab:300,300i,400,400i,700,700i|Open+Sans:300,300i,400,400i,600,600i,700,700,800,800i&display=swap");
/* General website settings */
html, body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  background: #ebeae6;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  outline: none;
  font-family: "Open Sans", Helvetica, Arial, Verdana; }

*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transform-style: preserve-3d; }

p {
  margin: 0; }

h1, h2, h3, h4, h5, h6 {
  font-family: "Open Sans", Helvetica, Arial, Verdana;
  color: #000; }

a, a:hover, a:visited, a:active {
  text-decoration: none;
  color: #fff; }

.noscroll {
  overflow: hidden; }

/* General Sections */
#main-container {
  z-index: 1; }

header, #content, footer {
  display: block;
  width: 100%; }

#content, footer {
  position: relative; }

/* Header */
header {
  position: absolute;
  height: 100px;
  background: transparent;
  padding: 60px 80px 100px;
  z-index: 2; }

.logo {
  width: 26px; }

.menu-button {
  position: relative;
  display: block;
  float: right;
  height: 20px;
  width: 20px;
  margin-top: 20px;
  cursor: pointer;
  overflow: unset; }

.menu-button .menu-line-top, .menu-button .menu-line-middle, .menu-button .menu-line-bottom {
  height: 2px;
  width: 20px;
  background: #0071E1;
  margin-top: 4px;
  right: 0; }

.menu-button:hover .menu-line-top {
  width: 20px;
  -webkit-animation: menuLineTop 400ms forwards ease-in-out;
  -moz-animation: menuLineTop 400ms forwards ease-in-out;
  -o-animation: menuLineTop 400ms forwards ease-in-out;
  animation: menuLineTop 400ms forwards ease-in-out; }

@keyframes menuLineTop {
  0% {
    width: 20px;
    margin-left: 0;
    margin-bottom: 0; }
  50% {
    width: 60px;
    margin-left: -30px;
    margin-top: -10px;
    margin-bottom: 10px; }
  100% {
    width: 20px;
    margin-left: 0;
    margin-bottom: 0; } }

@-webkit-keyframes menuLineTop {
  0% {
    width: 20px;
    margin-left: 0;
    margin-bottom: 0; }
  50% {
    width: 60px;
    margin-left: -30px;
    margin-top: -10px;
    margin-bottom: 10px; }
  100% {
    width: 20px;
    margin-left: 0;
    margin-bottom: 0; } }

.menu-button:hover .menu-line-middle {
  width: 20px;
  -webkit-animation: menuLineMiddle 400ms forwards ease-in-out;
  -moz-animation: menuLineMiddle 400ms forwards ease-in-out;
  -o-animation: menuLineMiddle 400ms forwards ease-in-out;
  animation: menuLineMiddle 400ms forwards ease-in-out; }

@keyframes menuLineMiddle {
  0% {
    width: 20px;
    margin-left: 0; }
  50% {
    width: 50px;
    margin-left: -15px; }
  100% {
    width: 20px;
    margin-left: 0; } }

@-webkit-keyframes menuLineMiddle {
  0% {
    width: 20px;
    margin-left: 0; }
  50% {
    width: 50px;
    margin-left: -15px; }
  100% {
    width: 20px;
    margin-left: 0; } }

.menu-button:hover .menu-line-bottom {
  width: 20px;
  -webkit-animation: menuLineBottom 400ms forwards ease-in-out;
  -moz-animation: menuLineBottom 400ms forwards ease-in-out;
  -o-animation: menuLineBottom 400ms forwards ease-in-out;
  animation: menuLineBottom 400ms forwards ease-in-out; }

@keyframes menuLineBottom {
  0% {
    width: 20px;
    margin-left: 0;
    margin-top: 4px; }
  50% {
    width: 60px;
    margin-left: -50px;
    margin-top: 10px; }
  100% {
    width: 20px;
    margin-left: 0;
    margin-top: 4px; } }

@-webkit-keyframes menuLineBottom {
  0% {
    width: 20px;
    margin-left: 0;
    margin-top: 4px; }
  50% {
    width: 60px;
    margin-left: -50px;
    margin-top: 10px; }
  100% {
    width: 20px;
    margin-left: 0;
    margin-top: 4px; } }

/* Content */
#content {
  display: block;
  height: auto;
  padding: 160px 60px 20px; }

.photo-collage {
  display: block;
  position: relative;
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  width: 687px;
  float: right; }

.left-side-photos, .right-side-photos {
  display: block;
  position: relative;
  float: left;
  font-size: 0; }

.left-side-photos {
  width: 361px; }

.right-side-photos {
  width: 326px; }

.left-side-photos img, .right-side-photos img {
  display: inline-block;
  position: relative;
  margin: 6px;
  -webkit-animation-duration: 800ms;
  -moz-animation-duration: 800ms;
  -o-animation-duration: 800ms;
  animation-duration: 800ms;
  -webkit-animation-timing-function: cubic-bezier(0.43, 0.35, 1, 0.66);
  animation-timing-function: cubic-bezier(0.43, 0.35, 1, 0.66); }

.eye-right {
  -webkit-transform: translate3d(0, 3000px, 0);
  -moz-transform: translate3d(0, 3000px, 0);
  -ms-transform: translate3d(0, 3000px, 0);
  -o-transform: translate3d(0, 3000px, 0);
  transform: translate3d(0, 3000px, 0); }

.eye-right.bounceInDown {
  -webkit-animation-delay: 150ms;
  -moz-animation-delay: 150ms;
  -o-animation-delay: 150ms;
  animation-delay: 150ms; }

.hair-left {
  -webkit-transform: translate3d(-3000px, 0, 0);
  -moz-transform: translate3d(-3000px, 0, 0);
  -ms-transform: translate3d(-3000px, 0, 0);
  -o-transform: translate3d(-3000px, 0, 0);
  transform: translate3d(-3000px, 0, 0); }

.hair-left.bounceInUp {
  -webkit-animation-delay: 550ms;
  -moz-animation-delay: 550ms;
  -o-animation-delay: 550ms;
  animation-delay: 550ms; }

.hair-right {
  -webkit-transform: translate3d(3000px, 0, 0);
  -moz-transform: translate3d(3000px, 0, 0);
  -ms-transform: translate3d(3000px, 0, 0);
  -o-transform: translate3d(3000px, 0, 0);
  transform: translate3d(3000px, 0, 0); }

.hair-right.bounceInRight {
  -webkit-animation-delay: 350ms;
  -moz-animation-delay: 350ms;
  -o-animation-delay: 350ms;
  animation-delay: 350ms; }

.eye-left {
  -webkit-transform: translate3d(-3000px, 0, 0);
  -moz-transform: translate3d(-3000px, 0, 0);
  -ms-transform: translate3d(-3000px, 0, 0);
  -o-transform: translate3d(-3000px, 0, 0);
  transform: translate3d(-3000px, 0, 0); }

.eye-left.bounceInRight {
  -webkit-animation-delay: 250ms;
  -moz-animation-delay: 250ms;
  -o-animation-delay: 250ms;
  animation-delay: 250ms; }

.cheek-left {
  -webkit-transform: translate3d(3000px, 0, 0);
  -moz-transform: translate3d(3000px, 0, 0);
  -ms-transform: translate3d(3000px, 0, 0);
  -o-transform: translate3d(3000px, 0, 0);
  transform: translate3d(3000px, 0, 0); }

.cheek-left.bounceInLeft {
  -webkit-animation-delay: 450ms;
  -moz-animation-delay: 450ms;
  -o-animation-delay: 450ms;
  animation-delay: 450ms; }

.mouth-right {
  -webkit-transform: translate3d(0, 3000px, 0);
  -moz-transform: translate3d(0, 3000px, 0);
  -ms-transform: translate3d(0, 3000px, 0);
  -o-transform: translate3d(0, 3000px, 0);
  transform: translate3d(0, 3000px, 0); }

.mouth-right.bounceInLeft {
  -webkit-animation-delay: 650ms;
  -moz-animation-delay: 650ms;
  -o-animation-delay: 650ms;
  animation-delay: 650ms; }

.chin-right {
  -webkit-transform: translate3d(0, 3000px, 0);
  -moz-transform: translate3d(0, 3000px, 0);
  -ms-transform: translate3d(0, 3000px, 0);
  -o-transform: translate3d(0, 3000px, 0);
  transform: translate3d(0, 3000px, 0); }

.chin-right.bounceInLeft {
  -webkit-animation-delay: 750ms;
  -moz-animation-delay: 750ms;
  -o-animation-delay: 750ms;
  animation-delay: 750ms; }

.mouth-left {
  -webkit-transform: translate3d(0, -3000px 0);
  -moz-transform: translate3d(0, -3000px 0);
  -ms-transform: translate3d(0, -3000px 0);
  -o-transform: translate3d(0, -3000px 0);
  transform: translate3d(0, -3000px 0); }

.mouth-left.bounceInDown {
  -webkit-animation-duration: 800ms;
  -moz-animation-duration: 800ms;
  -o-animation-duration: 800ms;
  animation-duration: 600ms;
  -webkit-animation-delay: 850ms;
  -moz-animation-delay: 850ms;
  -o-animation-delay: 850ms;
  animation-delay: 850ms; }

#introScreen {
  margin: -200px 0 0;
  height: 1000px;
  width: 100%;
  overflow: hidden;
  padding-top: 200px;
  opacity: 1;
  -webkit-transition: all 500ms linear;
  -moz-transition: all 500ms linear;
  -ms-transition: all 500ms linear;
  -o-transition: all 500ms linear;
  transition: all 500ms linear; }

#introScreen.hide {
  opacity: 0; }

.introText-Box {
  display: block;
  position: absolute;
  height: auto;
  width: 100%;
  font-size: 1.3em;
  z-index: 1; }

.introText-Box .subtext::-moz-selection {
  background: #0071E1;
  color: #fff;
  padding: 10px; }

.introText-Box .subtext::selection {
  background: #0071E1;
  color: #fff;
  padding: 10px; }

.introText-Box .subtext {
  display: block;
  position: absolute;
  font-family: "Zilla Slab", Georgia, Times, serif;
  font-weight: 700;
  font-size: 1.88em;
  margin: 180px 0 0 420px;
  width: 319px;
  opacity: 0;
  color: #000;
  -webkit-animation: showSubTextLeft 800ms forwards cubic-bezier(0.52, 0.53, 0.22, 0.97);
  -moz-animation: showSubTextLeft 800ms forwards cubic-bezier(0.52, 0.53, 0.22, 0.97);
  -o-animation: showSubTextLeft 800ms forwards cubic-bezier(0.52, 0.53, 0.22, 0.97);
  animation: showSubTextLeft 800ms forwards cubic-bezier(0.52, 0.53, 0.22, 0.97);
  -webkit-animation-delay: 800ms;
  -moz-animation-delay: 800ms;
  -o-animation-delay: 800ms;
  animation-delay: 600ms; }

@keyframes showSubTextLeft {
  0% {
    opacity: 0;
    margin: 303px 0 0 300px; }
  100% {
    opacity: 1;
    margin: 303px 0 0 390px; } }

@-webkit-keyframes showSubTextLeft {
  0% {
    opacity: 0;
    margin: 303px 0 0 300px; }
  100% {
    opacity: 1;
    margin: 303px 0 0 390px; } }

/* Menu */
#menu {
  display: none;
  position: fixed;
  height: 100vh !important;
  min-width: 100%;
  z-index: 100; }

body.noscroll #menu.showMenu {
  overflow: hidden; }

#menu.showMenu, #menu.closeMenu {
  display: block; }

#menu.showMenu .menu-bg, #menu.closeMenu .menu-bg {
  display: block;
  position: fixed;
  height: 20px;
  width: 20px;
  top: 80px;
  right: 80px;
  border-radius: 50%;
  background: #0071E1; }

#menu.showMenu .menu-bg {
  opacity: 0;
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  -webkit-animation: openMenu 800ms forwards ease-in-out;
  -moz-animation: openMenu 800ms forwards ease-in-out;
  -o-animation: openMenu 800ms forwards ease-in-out;
  animation: openMenu 800ms forwards ease-in-out;
  -webkit-animation-delay: 400ms;
  -moz-animation-delay: 400ms;
  -o-animation-delay: 400ms;
  animation-delay: 400ms; }

@keyframes openMenu {
  0% {
    display: block;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    top: 80px;
    right: 80px;
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0; }
  10%, 50% {
    display: block;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    top: 80px;
    right: 80px;
    -webkit-transform: scale(2);
    transform: scale(2);
    opacity: 1; }
  20% {
    display: block;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    top: 80px;
    right: 80px;
    -webkit-transform: scale(5);
    transform: scale(5);
    opacity: 1; }
  100% {
    display: block;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    top: 80px;
    right: 80px;
    -webkit-transform: scale(300);
    transform: scale(300);
    opacity: 1; } }

@-webkit-keyframes openMenu {
  0% {
    display: block;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    top: 80px;
    right: 80px;
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0; }
  10%, 50% {
    display: block;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    top: 80px;
    right: 80px;
    -webkit-transform: scale(2);
    transform: scale(2);
    opacity: 1; }
  20% {
    display: block;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    top: 80px;
    right: 80px;
    -webkit-transform: scale(5);
    transform: scale(5);
    opacity: 1; }
  100% {
    display: block;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    top: 80px;
    right: 80px;
    -webkit-transform: scale(300);
    transform: scale(300);
    opacity: 1; } }

#menu.closeMenu .menu-bg {
  opacity: 1;
  -webkit-transform: scale(300);
  -ms-transform: scale(300);
  transform: scale(300);
  -webkit-animation: closeMenu 800ms forwards ease-in-out;
  -moz-animation: closeMenu 800ms forwards ease-in-out;
  -ms-animation: closeMenu 800ms forwards ease-in-out;
  -o-animation: closeMenu 800ms forwards ease-in-out;
  animation: closeMenu 800ms forwards ease-in-out;
  -webkit-animation-delay: 400ms;
  -moz-animation-delay: 400ms;
  -o-animation-delay: 400ms;
  animation-delay: 400ms; }

@keyframes closeMenu {
  0% {
    display: block;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    top: 80px;
    right: 80px;
    -webkit-transform: scale(300);
    transform: scale(300);
    opacity: 1; }
  50%, 90% {
    display: block;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    top: 80px;
    right: 80px;
    -webkit-transform: scale(5);
    transform: scale(5);
    opacity: 1; }
  80% {
    display: block;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    top: 80px;
    right: 80px;
    -webkit-transform: scale(2);
    transform: scale(2);
    opacity: 1; }
  99% {
    display: block;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    top: 80px;
    right: 80px;
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1; }
  100% {
    display: block;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    top: 80px;
    right: 80px;
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
    opacity: 0; } }

@-webkit-keyframes closeMenu {
  0% {
    display: block;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    top: 80px;
    right: 80px;
    -webkit-transform: scale(300);
    transform: scale(300);
    opacity: 1; }
  50%, 90% {
    display: block;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    top: 80px;
    right: 80px;
    -webkit-transform: scale(5);
    transform: scale(5);
    opacity: 1; }
  80% {
    display: block;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    top: 80px;
    right: 80px;
    -webkit-transform: scale(2);
    transform: scale(2);
    opacity: 1; }
  99% {
    display: block;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    top: 80px;
    right: 80px;
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1; }
  100% {
    display: block;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    top: 80px;
    right: 80px;
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
    opacity: 0; } }

.menu-inner {
  height: 100%;
  width: 100%;
  padding: 60px 80px;
  display: block;
  position: absolute;
  z-index: 1; }

.menu-inner .top-section {
  height: 160px; }

.close-button {
  display: inline-block;
  height: 20px;
  width: 20px;
  float: right;
  margin: 20px 0 0 0;
  cursor: pointer;
  -webkit-transition: 300ms  ease-in-out;
  -moz-transition: 300ms  ease-in-out;
  -ms-transition: 300ms  ease-in-out;
  -o-transition: 300ms  ease-in-out;
  transition: 300ms  ease-in-out;
  -webkit-transform: translate(80px, 3000px) scale(1);
  -moz-transform: translate(80px, 3000px);
  -ms-transform: translate(80px, 3000px);
  -o-transform: translate(80px, 3000px);
  transform: translate(80px, 3000px) scale(1); }

.close-button:hover {
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1); }

.cross-wrapper {
  display: inline-block;
  height: 20px;
  width: 20px;
  top: 0;
  left: 0;
  overflow: visible; }

.close-button .crossLine, .close-button .crossLine-cc {
  width: 24px;
  height: 2px;
  background: #fff;
  display: block;
  position: absolute;
  margin: 10px 0 0 -2px;
  -webkit-transition: all 300ms linear ease-in-out;
  -moz-transition: all 300ms linear ease-in-out;
  -ms-transition: all 300ms linear ease-in-out;
  -o-transition: all 300ms linear ease-in-out;
  transition: all 300ms linear ease-in-out; }

.close-button .crossLine {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg); }

.close-button .crossLine-cc {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg); }

.close-button .crossSlideIn {
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  -webkit-transition: scale 400ms ease;
  -moz-transition: scale 400ms ease;
  -ms-transition: scale 400ms ease;
  -o-transition: scale 400ms ease;
  transition: scale 400ms ease; }

.close-button:hover .crossSlideIn {
  -webkit-transform: scale(1.5);
  -ms-transform: scale(1.5);
  transform: scale(1.5);
  overflow: visible; }

.close-button.crossSlideIn {
  -webkit-transform: translate(80px, 3000px);
  -moz-transform: translate(80px, 3000px);
  -ms-transform: translate(80px, 3000px);
  -o-transform: translate(80px, 3000px);
  transform: translate(80px, 3000px);
  -webkit-animation: crossSlideIn 800ms forwards ease-in-out;
  -moz-animation: crossSlideIn 800ms forwards ease-in-out;
  -o-animation: crossSlideIn 800ms forwards ease-in-out;
  animation: crossSlideIn 800ms forwards ease-in-out;
  -webkit-animation-delay: 800ms;
  -moz-animation-delay: 800ms;
  -o-animation-delay: 800ms;
  animation-delay: 800ms; }

@keyframes crossSlideIn {
  0% {
    -webkit-transform: translate(80px, 3000px);
    -moz-transform: translate(80px, 3000px);
    -ms-transform: translate(80px, 3000px);
    -o-transform: translate(80px, 3000px);
    transform: translate(80px, 3000px); }
  100% {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0); } }

@-webkit-keyframes crossSlideIn {
  0% {
    -webkit-transform: translate(80px, 3000px);
    -moz-transform: translate(80px, 3000px);
    -ms-transform: translate(80px, 3000px);
    -o-transform: translate(80px, 3000px);
    transform: translate(80px, 3000px); }
  100% {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0); } }

.close-button.crossHideOut {
  -webkit-transform: translate(0, 0);
  -moz-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  -o-transform: translate(0, 0);
  transform: translate(0, 0);
  -webkit-animation: crossHideOut 400ms forwards ease-in-out;
  -moz-animation: crossHideOut 400ms forwards ease-in-out;
  -o-animation: crossHideOut 400ms forwards ease-in-out;
  animation: crossHideOut 400ms forwards ease-in-out;
  opacity: 1; }

@keyframes crossHideOut {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } }

@-webkit-keyframes crossHideOut {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } }

@media only screen and (min-width: 375px) and (max-width: 768px) and (-webkit-min-device-pixel-ratio: 2) {
  .close-button.crossHideOut {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0);
    -webkit-animation: crossHideOut 400ms forwards ease-in-out;
    -moz-animation: crossHideOut 400ms forwards ease-in-out;
    -o-animation: crossHideOut 400ms forwards ease-in-out;
    animation: crossHideOut 400ms forwards ease-in-out;
    opacity: 1; }
  @keyframes crossHideOut {
    0% {
      -webkit-transform: translate(0, 0);
      transform: translate(0, 0);
      opacity: 1; }
    100% {
      -webkit-transform: translate(0, 0);
      transform: translate(0, 0);
      opacity: 0; } }
  @-webkit-keyframes crossHideOut {
    0% {
      opacity: 1; }
    100% {
      opacity: 0; } } }

#menu.closeMenu .menu-inner .menuList ul li {
  -webkit-animation: hideMenuItems 400ms forwards ease-in-out;
  -moz-animation: hideMenuItems 400ms forwards ease-in-out;
  -o-animation: hideMenuItems 400ms forwards ease-in-out;
  animation: hideMenuItems 400ms forwards ease-in-out;
  text-align: left; }

.menuList ul li:nth-child(1) {
  -webkit-animation-delay: 200ms;
  -moz-animation-delay: 200ms;
  -o-animation-delay: 200ms;
  animation-delay: 200ms; }

.menuList ul li:nth-child(2) {
  -webkit-animation-delay: 400ms;
  -moz-animation-delay: 400ms;
  -o-animation-delay: 400ms;
  animation-delay: 400ms; }

.menuList ul li:nth-child(3) {
  -webkit-animation-delay: 600ms;
  -moz-animation-delay: 600ms;
  -o-animation-delay: 600ms;
  animation-delay: 600ms; }

.menuList ul li a {
  position: relative;
  color: #fff; }

.menuList ul li a::before {
  content: '';
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 3px;
  background: #fff;
  -webkit-transition: width 600ms ease-in-out;
  -moz-transition: width 600ms ease-in-out;
  -ms-transition: width 600ms ease-in-out;
  -o-transition: width 600ms ease-in-out;
  transition: width 600ms ease-in-out; }

.menuList ul li a:hover::before {
  content: '';
  width: 100%;
  -webkit-transition: width 600ms ease-in-out;
  -moz-transition: width 600ms ease-in-out;
  -ms-transition: width 600ms ease-in-out;
  -o-transition: width 600ms ease-in-out;
  transition: width 600ms ease-in-out; }

@keyframes hideMenuItems {
  00% {
    opacity: 1;
    margin-left: 0; }
  100% {
    opacity: 0;
    margin-left: -100px; } }

@-webkit-keyframes hideMenuItems {
  0% {
    opacity: 1;
    margin-left: 0; }
  100% {
    opacity: 0;
    margin-left: -100px; } }

.menu-button.slideRightMenu {
  -webkit-animation: slideRightMenu 400ms forwards ease-in-out;
  -moz-animation: slideRightMenu 400ms forwards ease-in-out;
  -o-animation: slideRightMenu 400ms forwards ease-in-out;
  animation: slideRightMenu 400ms forwards ease-in-out; }

@-webkit-keyframes slideRightMenu {
  0% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    opacity: 1; }
  100% {
    -webkit-transform: translate(80px, 0);
    transform: translate(80px, 0);
    opacity: 0; } }

@keyframes slideRightMenu {
  0% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    opacity: 1; }
  100% {
    -webkit-transform: translate(80px, 0);
    transform: translate(80px, 0);
    opacity: 0; } }

.menu-button.slideLeftMenu {
  -webkit-animation: slideLeftMenu 400ms forwards ease-in-out;
  -moz-animation: slideLeftMenu 400ms forwards ease-in-out;
  -o-animation: slideLeftMenu 400ms forwards ease-in-out;
  animation: slideLeftMenu 400ms forwards ease-in-out;
  -webkit-animation-delay: 1100ms;
  -moz-animation-delay: 1100ms;
  -o-animation-delay: 1100ms;
  animation-delay: 1100ms;
  -webkit-transform: translate(80px, 0);
  -ms-transform: translate(80px, 0);
  transform: translate(80px, 0);
  opacity: 0; }

@-webkit-keyframes slideLeftMenu {
  0% {
    -webkit-transform: translate(80px, 0);
    transform: translate(80px, 0);
    opacity: 0; }
  100% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    opacity: 1; } }

@keyframes slideLeftMenu {
  0% {
    -webkit-transform: translate(80px, 0);
    transform: translate(80px, 0);
    opacity: 0; }
  100% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    opacity: 1; } }

.menuList {
  height: auto;
  width: 100%;
  text-align: left;
  font-family: 'Zilla Slab';
  font-size: 5em;
  font-weight: 700;
  color: #fff; }

.menuList ul li {
  display: block;
  margin-top: 30px;
  opacity: 0;
  margin-left: -100px;
  list-style: none;
  -webkit-animation: showMenuItems 400ms forwards cubic-bezier(0.02, 0.6, 0.48, 0.95);
  animation: showMenuItems 400ms forwards cubic-bezier(0.02, 0.6, 0.48, 0.95); }

.menuList ul li:nth-child(1) {
  -webkit-animation-delay: 1200ms;
  -moz-animation-delay: 1200ms;
  -o-animation-delay: 1200ms;
  animation-delay: 1200ms; }

.menuList ul li:nth-child(2) {
  -webkit-animation-delay: 1400ms;
  -moz-animation-delay: 1400ms;
  -o-animation-delay: 1400ms;
  animation-delay: 1400ms; }

.menuList ul li:nth-child(3) {
  -webkit-animation-delay: 1600ms;
  -moz-animation-delay: 1600ms;
  -o-animation-delay: 1600ms;
  animation-delay: 1600ms; }

@keyframes showMenuItems {
  0% {
    opacity: 0;
    margin-left: -100px; }
  100% {
    opacity: 1;
    margin-left: 0; } }

@-webkit-keyframes showMenuItems {
  0% {
    opacity: 0;
    margin-left: -100px; }
  100% {
    opacity: 1;
    margin-left: 0; } }

.menuList ul li::-moz-selection {
  background: #fff;
  color: #0071E1; }

.menuList ul li::selection {
  background: #fff;
  color: #0071E1; }

.Blok {
  width: 80%;
  height: 300px;
  background: #FFF;
  -webkit-border-radius: 2px;
  border-radius: 2px;
  -webkit-box-shadow: 0 0 10px 10px rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.2);
  padding: 30px; }

.content-inside {
  padding: 60px;
  padding-bottom: 100px; }

/* Footer */
footer {
  background: #e2e2dc;
  height: 100px;
  margin-bottom: -100px;
  line-height: 100px; }

/* Fonts */
@media only screen and (min-device-width: 375px) and (max-device-width: 666px) {
  #content {
    padding: 60px 20px 20px; }
  header {
    padding: 20px 30px 20px; }
  #menu.openMenu .menu-bg, #menu.closeMenu .menu-bg {
    display: block;
    position: fixed;
    height: 20px;
    width: 20px;
    top: 40px;
    right: 30px;
    border-radius: 50%;
    background: #0071E1; }
  #menu.openMenu .menu-bg {
    opacity: 0;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    -webkit-animation: openMenu 800ms forwards ease-in-out;
    -moz-animation: openMenu 800ms forwards ease-in-out;
    -o-animation: openMenu 800ms forwards ease-in-out;
    animation: openMenu 800ms forwards ease-in-out;
    -webkit-animation-delay: 400ms;
    -moz-animation-delay: 400ms;
    -o-animation-delay: 400ms;
    animation-delay: 400ms; }
  @keyframes openMenu {
    0% {
      display: block;
      -webkit-border-radius: 50%;
      border-radius: 50%;
      width: 20px;
      height: 20px;
      top: 40px;
      right: 30px;
      -webkit-transform: scale(1);
      transform: scale(1);
      opacity: 0; }
    10%, 50% {
      display: block;
      -webkit-border-radius: 50%;
      border-radius: 50%;
      width: 20px;
      height: 20px;
      top: 40px;
      right: 30px;
      -webkit-transform: scale(2);
      transform: scale(2);
      opacity: 1; }
    20% {
      display: block;
      -webkit-border-radius: 50%;
      border-radius: 50%;
      width: 20px;
      height: 20px;
      top: 40px;
      right: 30px;
      -webkit-transform: scale(5);
      transform: scale(5);
      opacity: 1; }
    100% {
      display: block;
      -webkit-border-radius: 50%;
      border-radius: 50%;
      width: 20px;
      height: 20px;
      top: 40px;
      right: 30px;
      -webkit-transform: scale(300);
      transform: scale(300);
      opacity: 1; } }
  @-webkit-keyframes openMenu {
    0% {
      display: block;
      -webkit-border-radius: 50%;
      border-radius: 50%;
      width: 20px;
      height: 20px;
      top: 40px;
      right: 30px;
      -webkit-transform: scale(1);
      transform: scale(1);
      opacity: 0; }
    10%, 50% {
      display: block;
      -webkit-border-radius: 50%;
      border-radius: 50%;
      width: 20px;
      height: 20px;
      top: 40px;
      right: 30px;
      -webkit-transform: scale(2);
      transform: scale(2);
      opacity: 1; }
    20% {
      display: block;
      -webkit-border-radius: 50%;
      border-radius: 50%;
      width: 20px;
      height: 20px;
      top: 40px;
      right: 30px;
      -webkit-transform: scale(5);
      transform: scale(5);
      opacity: 1; }
    100% {
      display: block;
      -webkit-border-radius: 50%;
      border-radius: 50%;
      width: 20px;
      height: 20px;
      top: 40px;
      right: 30px;
      -webkit-transform: scale(300);
      transform: scale(300);
      opacity: 1; } }
  #menu.closeMenu .menu-bg {
    opacity: 1;
    -webkit-transform: scale(300);
    -ms-transform: scale(300);
    transform: scale(300);
    -webkit-animation: closeMenu 800ms forwards ease-in-out;
    -moz-animation: closeMenu 800ms forwards ease-in-out;
    -ms-animation: closeMenu 800ms forwards ease-in-out;
    -o-animation: closeMenu 800ms forwards ease-in-out;
    animation: closeMenu 800ms forwards ease-in-out;
    -webkit-animation-delay: 400ms;
    -moz-animation-delay: 400ms;
    -o-animation-delay: 400ms;
    animation-delay: 400ms;
    -webkit-backface-visibility: hidden; }
  @keyframes closeMenu {
    0% {
      display: block;
      -webkit-border-radius: 50%;
      border-radius: 50%;
      width: 20px;
      height: 20px;
      top: 40px;
      right: 30px;
      -webkit-transform: scale(300);
      transform: scale(300);
      opacity: 1; }
    50%, 90% {
      display: block;
      -webkit-border-radius: 50%;
      border-radius: 50%;
      width: 20px;
      height: 20px;
      top: 40px;
      right: 30px;
      -webkit-transform: scale(5);
      transform: scale(5);
      opacity: 1; }
    80% {
      display: block;
      -webkit-border-radius: 50%;
      border-radius: 50%;
      width: 20px;
      height: 20px;
      top: 40px;
      right: 30px;
      -webkit-transform: scale(2);
      transform: scale(2);
      opacity: 1; }
    99% {
      display: block;
      -webkit-border-radius: 50%;
      border-radius: 50%;
      width: 20px;
      height: 20px;
      top: 40px;
      right: 30px;
      -webkit-transform: scale(1);
      transform: scale(1);
      opacity: 1; }
    100% {
      display: block;
      -webkit-border-radius: 50%;
      border-radius: 50%;
      width: 20px;
      height: 20px;
      top: 40px;
      right: 30px;
      -webkit-transform: scale(1);
      transform: scale(1);
      opacity: 1;
      opacity: 0; } }
  @-webkit-keyframes closeMenu {
    0% {
      display: block;
      -webkit-border-radius: 50%;
      border-radius: 50%;
      width: 20px;
      height: 20px;
      top: 40px;
      right: 30px;
      -webkit-transform: scale(300);
      transform: scale(300);
      opacity: 1; }
    50%, 90% {
      display: block;
      -webkit-border-radius: 50%;
      border-radius: 50%;
      width: 20px;
      height: 20px;
      top: 40px;
      right: 30px;
      -webkit-transform: scale(5);
      transform: scale(5);
      opacity: 1; }
    80% {
      display: block;
      -webkit-border-radius: 50%;
      border-radius: 50%;
      width: 20px;
      height: 20px;
      top: 40px;
      right: 30px;
      -webkit-transform: scale(2);
      transform: scale(2);
      opacity: 1; }
    99% {
      display: block;
      -webkit-border-radius: 50%;
      border-radius: 50%;
      width: 20px;
      height: 20px;
      top: 40px;
      right: 30px;
      -webkit-transform: scale(1);
      transform: scale(1);
      opacity: 1; }
    100% {
      display: block;
      -webkit-border-radius: 50%;
      border-radius: 50%;
      width: 20px;
      height: 20px;
      top: 40px;
      right: 30px;
      -webkit-transform: scale(1);
      transform: scale(1);
      opacity: 1;
      opacity: 0; } }
  #menu.showMenu .menu-inner {
    padding: 20px 40px; }
  .menuList {
    font-size: 2em; }
  .close-button.crossHideOut {
    -webkit-transform: translate(40px, -40px);
    -moz-transform: translate(40px, -40px);
    -ms-transform: translate(40px, -40px);
    -o-transform: translate(40px, -40px);
    transform: translate(40px, -40px);
    -webkit-animation: crossHideOut 400ms forwards ease-in-out;
    -moz-animation: crossHideOut 400ms forwards ease-in-out;
    -o-animation: crossHideOut 400ms forwards ease-in-out;
    animation: crossHideOut 400ms forwards ease-in-out;
    opacity: 1; }
  @keyframes crossHideOut {
    0% {
      -webkit-transform: translate(40px, -40px);
      transform: translate(40px, -40px);
      opacity: 1; }
    100% {
      -webkit-transform: translate(40px, -40px);
      transform: translate(40px, -40px);
      opacity: 0; } }
  @-webkit-keyframes crossHideOut {
    0% {
      -webkit-transform: translate(40px, -40px);
      transform: translate(40px, -40px);
      opacity: 1; }
    100% {
      -webkit-transform: translate(40px, -40px);
      transform: translate(40px, -40px);
      opacity: 0; } }
  .introText-Box .subtext {
    font-size: 1.88em;
    margin: 280px 0 0 390px;
    width: 319px;
    opacity: 0;
    color: #fff;
    -webkit-animation: showSubTextRight 800ms forwards cubic-bezier(0.52, 0.53, 0.22, 0.97);
    -moz-animation: showSubTextRight 800ms forwards cubic-bezier(0.52, 0.53, 0.22, 0.97);
    -o-animation: showSubTextRight 800ms forwards cubic-bezier(0.52, 0.53, 0.22, 0.97);
    animation: showSubTextRight 800ms forwards cubic-bezier(0.52, 0.53, 0.22, 0.97);
    -webkit-animation-delay: 800ms;
    -moz-animation-delay: 800ms;
    -o-animation-delay: 800ms;
    animation-delay: 600ms;
    z-index: 1; }
  .photo-collage {
    -webkit-transform: scale(0.4);
    -ms-transform: scale(0.4);
    transform: scale(0.4); } }

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
  header {
    position: absolute;
    height: 100px;
    background: transparent;
    padding: 60px 80px 100px;
    z-index: 2; }
  .introText-Box .subtext {
    font-size: 1.88em;
    margin: 280px 0 0 390px;
    width: 319px;
    opacity: 0;
    color: #fff;
    -webkit-animation: showSubTextRight 800ms forwards cubic-bezier(0.52, 0.53, 0.22, 0.97);
    -moz-animation: showSubTextRight 800ms forwards cubic-bezier(0.52, 0.53, 0.22, 0.97);
    -o-animation: showSubTextRight 800ms forwards cubic-bezier(0.52, 0.53, 0.22, 0.97);
    animation: showSubTextRight 800ms forwards cubic-bezier(0.52, 0.53, 0.22, 0.97);
    -webkit-animation-delay: 800ms;
    -moz-animation-delay: 800ms;
    -o-animation-delay: 800ms;
    animation-delay: 600ms;
    z-index: 1; }
  @keyframes showSubTextRight {
    0% {
      opacity: 0;
      margin: 280px 0 0 300px; }
    100% {
      opacity: 1;
      margin: 280px 0 0 260px; } }
  @-webkit-keyframes showSubTextRight {
    0% {
      opacity: 0;
      margin: 280px 0 0 300px; }
    100% {
      opacity: 1;
      margin: 280px 0 0 260px; } } }