@font-face {
      font-family: 'LufthansaHeadWeb-Bold'; 
      src: url('fonts/LufthansaHeadWeb-Bold.ttf');
  }
  
  @font-face {
      font-family: 'LufthansaTextWeb-Regular'; 
      src: url('fonts/LufthansaTextWeb-Regular.ttf');
  }

body, html {
    margin: 0;
    padding: 0;
    width:100%;
    overflow-x: hidden;
    overflow-y: scroll;
    min-height: 100%;
    font-style: normal;
    font-size: 24px;
}
  
.jarallax {
      position: relative;
      z-index: 0;
      height: 70vh;
}

.color_white {
      color: #fff;
}

.color_blue {
      color: #05164D;
}

.lufthansa_story {
      font-family: 'LufthansaTextWeb-Regular'; 
      color: #05164D;
}

.lufthansa_story_header_headline {
      position: absolute;
      bottom: 20px;
      left: 20px;
      color: #fff;
}

.lufthansa_story_header_headline h2 {
      display: inline-block;
      padding: 0 10px;
}

.swiper_1 {
      height: 500px;
}

.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet, 
.swiper-vertical>.swiper-pagination-bullets .swiper-pagination-bullet {
      width: 20px;
      height: 20px;
}

.blockquote {
      font-size: 1.1rem;
}

.lufthansa_story_border {
      border-bottom: 2px solid #f6f7f7;
      border-left: 2px solid #f6f7f7;
      border-right: 2px solid #f6f7f7;
}

.lufthansa_story a {
      color: #05164D;
}

.lufthansa_story a:hover {
      color: #05164D;
}

.blockquote p::before {
      content: url(image/quote.png);
      width: 20px;
      height: 20px;
      position: relative;
      top: -10px;
      padding-right: 10px;
}

.blockquote-footer::before {
      content: none;
  }

.swiper-pagination-bullet-active {
      background: #05164D !important;
}

.lufthansa_story_header img {
      height: 80vh;
      object-fit: cover;
}
    
.jarallax > img {
      position: absolute;
      object-fit: cover;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
       z-index: -1;
}

.lufthansa_story h2 {
      font-family: 'LufthansaHeadWeb-Bold'; 
      font-size: 2.5rem;
}

.lufthansa_story h3 {
      font-family: 'LufthansaHeadWeb-Bold'; 
      font-size: 2rem;
}

.color_gelb {
      background: #f7f7f7;
}

.swiper-slide {
      height: auto;
}

.lufthansa_story_bold {
      font-family: 'LufthansaHeadWeb-Bold'; 
}

.menu {
      background-color: #05164D;
      color: #fff;
      top: 0;
      height: 60px;
      width: 100%;
}
  
#menu__toggle {
      opacity: 0;
}

.menu__btn {
      display: flex; 
      align-items: center;
      position: relative;
      width: 36px;
      height: 26px;
      cursor: pointer;
      z-index: 0;
}

.menu__btn > span,
.menu__btn > span::before,
.menu__btn > span::after {
      display: block;
      position: absolute;
      width: 100%;
      height: 3px;
      background-color: #fff;
}

.menu__btn > span::before {
      content: '';
      top: -10px;
}

.menu__btn > span::after {
      content: '';
      top: 10px;
}

.menu__box {
      display: none;
      position: fixed;
      right: 0;
      top: 0;
      width: 30%;
      height: auto;
      margin: 0;
      padding: 80px 0;
      list-style: none;
      text-align: left;
      background-color: rgba(5, 22, 77, 0.8);
      z-index: 9;
}

.menu__item {
      display: block;
      padding: 12px 24px;
      color: #fff !important;
      font-size: 20px;
      font-weight: 600;
      text-decoration: none !important;
}
  
.menu__box a:hover {
      text-decoration: underline !important;
}
  
#menu__toggle:checked ~ .menu__btn > span {
      transform: rotate(45deg);
}

#menu__toggle:checked ~ .menu__btn > span::before {
      top: 0;
      transform: rotate(0);
}

#menu__toggle:checked ~ .menu__btn > span::after {
      top: 0;
      transform: rotate(90deg);
}

#menu__toggle:checked ~ .menu__box {
      visibility: visible;
      right: 0;
}
  
.close {
      right: 20px;
      top: 70px;
      width: 32px;
      height: 32px;
      opacity: 0.8;
}
    
.close:hover {
      opacity: 1;
}
    
.close:before, .close:after {
      position: absolute;
      left: 15px;
      content: ' ';
      height: 33px;
      width: 2px;
      background-color: #fff;
}
    
.close:before {
      transform: rotate(45deg);
}
    
.close:after {
      transform: rotate(-45deg);
}

label {
      margin-bottom: 0 !important; 
}

.section_swiper {
      overflow: hidden;
}

.swiper-wrapper {
      height: auto !important;
}

.lufthansa_story_wrapper  {
      background-color: #f6f7f7;
}


.blockquote-footer {
      color: #05164D;
}


@media only screen and (max-width: 761px) {
      .menu__box {
            width: 80%;
      }

      .lufthansa_story h3 {
            font-size: 1.3rem;
        }

      .blockquote {
            font-size: 1rem;
      }

      .swiper_1 {
            height: auto;
      }

      .jarallax {
            height: 40vh;
      }        

      .h2, h2 {
            font-size: 1rem !important;
      }

      .h4, h4 {
            font-size: 0.95rem !important;
      }

      body {
            font-size: 18px;
      }

      .h5, h5 {
            font-size: 0.8rem !important;
      }

      .overlay {
            font-size: 14px;
      }

      .header_mouse {
            width: 40px !important;
      }

      .lufthansa_story_header_headline {
            bottom: 70px;
        }
}

.header_mouse {
      position: absolute;
      width: 60px;
      height: auto !important;
      margin-left: auto;
      margin-right: auto;
      left: 0;
      right: 0;
      text-align: center;
      -webkit-animation: mouse-wheel 3s linear infinite;
      -moz-animation: mouse-wheel 3s linear infinite;
      animation: mouse-wheel 3s linear infinite;
}

    
    @-webkit-keyframes mouse-wheel {
       0% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
      }
    
      100% {
        opacity: 0;
        -webkit-transform: translateY(10px);
        -ms-transform: translateY(10px);
        transform: translateY(10px);
      }
    }
    @-moz-keyframes mouse-wheel {
      0% { bottom: 40px; }
      25% { bottom: 42px; }
      50% { bottom: 43px;}
      75% { bottom: 42px;}
      100% { bottom: 40px;}
    }
    @-o-keyframes mouse-wheel {  
      0% { bottom: 40px; }
      25% { bottom: 42px; }
      50% { bottom: 43px;}
      75% { bottom: 42px;}
      100% { bottom: 40px;}
    }
    @keyframes mouse-wheel {
      0% { bottom: 40px; 
            opacity: 0;
            -webkit-transform: translateY(0);
            -ms-transform: translateY(0);
            transform: translateY(0);
      }
      25% { bottom: 42px; }
      50% { bottom: 43px;
            opacity: 0.8;
      }
      75% { bottom: 42px;
            opacity: 1;
      }
      100% { bottom: 40px;        
            opacity: 0;
            -webkit-transform: translateY(80px);
            -ms-transform: translateY(80px);
            transform: translateY(80px);
      }
    }
    
    @-webkit-keyframes mouse-scroll {
    
      0%   { opacity: 0;}
      50%  { opacity: .5;}
      100% { opacity: 1;}
    }
    @-moz-keyframes mouse-scroll {
    
      0%   { opacity: 0; }
      50%  { opacity: .5; }
      100% { opacity: 1; }
    }
    @-o-keyframes mouse-scroll {
    
      0%   { opacity: 0; }
      50%  { opacity: .5; }
      100% { opacity: 1; }
    }
    @keyframes mouse-scroll {
    
      0%   { opacity: 0; }
      50%  { opacity: .5; }
      100% { opacity: 1; }
    }
    
    ul {
      padding-inline-start: 0;
    }

    dl, ol, ul {
      margin-top: 0;
      margin-bottom: 0;
    }

    #quizzie {
      background-color: #f6f7f7;
    }

    #quizzie ul {
      list-style: none;
      display: block;
      width: auto;
      overflow: auto;
      display: none;
      /* Step Questions and Answer Options */
    }
    #quizzie ul.current {
      display: block;
    }
    #quizzie ul li {
      display: inline-block;
      margin-right: 20px;
      margin-left: 20px;
      overflow: auto;
      text-align: center;
    }
    #quizzie ul li.quiz-answer {
      cursor: pointer;
    }
    #quizzie ul li.question, #quizzie ul li.results-inner {
      width: 100%;
      text-align: center;
      margin: 0;
    }
    
    #quizzie .question-wrap, .answer-wrap {
      display: block;
      padding: 10px 40px;
      border-radius: 5px;
    }

    .answer-text {
      margin-bottom: 0;
    }

    .answer-wrap {
      border: 3px solid #05164D;
      color: #05164D;
      background-color: #fff;
      -moz-transition: background-color 0.5s ease;
      -o-transition: background-color 0.5s ease;
      -webkit-transition: background-color 0.5s ease;
      transition: background-color 0.5s ease;
    }

    #quizzie .answer-wrap:hover {
      background-color: #05164D;
      color: #fff;
    }
    
    .answer-wrap_result {
      background-color: #05164D !important;
      border: none !important;
      color: #fff;
    }

    .swiper-pagination-vertical.swiper-pagination-bullets, .swiper-vertical>.swiper-pagination-bullets {
      right: 1px !important;
  }