.navigation {
   display: flex;
   position: fixed;
   width: 100%;
   background-color: #0d1320;
   height: 8rem;
   z-index: 1000;
   justify-content: center;
   padding: 0 8vw;
   align-items: center;
   top: 0;
}

.skad-logo {
   display: flex;
   position: relative;
   background-image: url("/assets/logo.svg");
   background-repeat: no-repeat;
   width: 12rem;
   height: 3rem;
   z-index: 99999;
   align-items: center;
   margin-right: auto;
   cursor: pointer;
}

/* MOBILE MENU BUTTON */
.nav-button {
   display: none;
}

/* MAIN MENU  */
.nav-menu {
   display: flex;
   align-items: center;
   justify-content: flex-end;
   align-content: center;
   flex-direction: row;

   gap: 1rem;
}

   .nav-point > a {
      padding: .5rem .8rem;
      color: #fff;
      border-radius: .2rem;
   }

   .nav-point a:hover {
      background-color: #374051;
   }

/* SUBMENU  */
.nav-submenu {
   display: none;
   position: absolute;
   text-align: center;
   width: 10rem;
   /* background-color:rgba(13, 19, 32, .6); */

   margin-left: -2.2rem;
   /* margin-top: 1.7rem; */
   padding-top: 1rem;
   
}

   @keyframes fadein {
      0% {opacity: 0}
      100% {opacity: 1}
   }

   @keyframes fadeout {
      0% {opacity: 1}
      100% {opacity: 0}
   }

   @keyframes blink {
      /* 0% {background-color: rgba(255, 255, 255, .5);}
      100% {background-color: rgba(255, 255, 255, .2);} */
   }

   .nav-arrow {
      width: 1.5rem;
      height: 1.5rem;
      margin: 0 auto;
      margin-bottom: .8rem;
      filter: invert(68%) sepia(59%) saturate(6624%) hue-rotate(300deg) brightness(85%) contrast(89%);
   }

   /* Activate sub menu  */
   .nav-career:hover .nav-submenu  { 
      display: block;
      animation-name: fadein;
      animation-duration: .2s;
   }

   .nav-career .nav-submenu  { 
      animation-name: fadeout;
      animation-duration: .2s;
   }

   .nav-subpoint { /* Sub Menu Point  */
      background-color: rgba(67, 76, 92, 1);
      margin-bottom: .3rem;
      padding: .4rem;
   }

   .nav-subpoint:hover {
      background-color:#cf4990;
      transition: background-color .2s ease-out;
   }

   .nav-subpoint:not(:hover) {
      animation-name: blink;
      animation-duration: .2s;
   }

   .nav-subpoint a:hover {
      background-color: transparent !important;
      border-radius: 0rem !important;
      padding: 0rem 0rem !important;
   }

/* Line under menu point if selected */
#services .nav-expertise::after,
#restrukturierung .nav-expertise::after,
#branchen .nav-branchen::after,
#about .nav-about::after,
#karriere .nav-career::after,
#aktuelles .nav-news::after,
#kontaktpage .nav-contact::after,
#teamtalk .team-talk::after {
   display: block;
   content: '';
   width: 80%;
   height: 2px;
   background: #cf4990;
   position: relative;
   margin: 0 auto;
   bottom: 0;
   left: 0;
   top: .5rem;
}























/* // Small devices (Phones) */
@media screen and (min-width: 0px) and (max-width: 768px) {

   .navigation {
      height: 5rem;
      padding: 0 4vw;
   }

   .nav-menu{
      display: none;
   }

   .nav-button {
      display: block;
      background-image: url("/images/burger-menu-collapsed.png");
      background-repeat: no-repeat;
      background-size: contain;
      width: 2rem;
      height: 1rem;
   }

   .nav-button:hover {
      cursor: pointer;
   }

   .skad-logo{
      width: 8rem;
      height: 1rem;
      background-image: url("/assets/skad.svg");
      background-size: contain;
      /* height: 3rem; */
   }

   /* OPEN MENU  */
   @keyframes nav-bg {
      0% {opacity: 0%;}
      100% {opacity: 100%;}
   }

   @keyframes nav-points {
      0% {opacity: 0%; margin-left: -2rem;}
      100% {opacity: 100%; margin-left: 0rem;}
   }

   @keyframes nav-menu {
      0% {opacity: 0%; margin-top: 5rem;}
      100% {opacity: 100%; margin-top: 0rem;}
   }

   .navigation.open-menu {
      height: 100%;
      align-items: center;
      background-color: #141f33;
      top: 0;
      animation-name: nav-bg;
      animation-duration: .2s;
   }

   .nav-menu.open-menu{
      display: block;
      position: absolute;
      /* background-color: #141f33; */
      /* background-color:#000; */
      z-index: 1200;
      width: 80%;

      animation-name: nav-menu;
      animation-duration: .5s;
      animation-timing-function: ease-out .1s;
   }

   .nav-point.open-menu{
      border-bottom: 1px solid #58b1ff;
      padding: .5rem 0;
   }

   .nav-point.open-menu a{
      letter-spacing: 2.8px;
      color: #cf4990;
      font-family: 'Wremena_Bold', Georgia, "Times New Roman", Times, serif;
      font-size: 1.5rem;
      text-transform: uppercase;

      animation-name: nav-points;
      animation-duration: .8s;
      animation-timing-function: ease-out .1s;
   }

   .nav-point.open-menu a:hover {
      color: #58b1ff;
      background-color:unset;
   }

   .skad-logo.open-menu{
      position: absolute;
      top: 1.9rem;
      left: 4vw;
   }

   .nav-button.open-menu {
      z-index: 9999;
      position: absolute;
      top: 1.8rem;
      right: 5vw;
      background-image: url("/images/burder-menu-close-button.png");
      background-repeat: no-repeat;
      background-size: contain;
      width: 1.5rem;
      height: 1.5rem;
      transition: transform .5s;
   }

   .nav-button.open-menu:hover {
      transform: rotate(180deg);
   }

   /* MOBILE SUBMENU  */
   .nav-submenu.open-menu {
      display: block !important;
      position: relative;
      text-align: left;
      width: 100%;
      margin-left: 0;
      padding-top: 0;
   }

      .nav-arrow.open-menu { /* Press arrow to open menu */
         display: block;
         position: absolute;
         top: -2rem;
         right: 0;
         margin-right: 1rem;
         filter: invert(100%) sepia(0%) saturate(2%) hue-rotate(141deg) brightness(105%) contrast(101%);
      }

      .nav-arrow.open-menu:hover {
         cursor: pointer;
      }

      /* Activate sub menu  */
      .nav-career:hover .nav-submenu.open-menu  { 
         display: block;
      }

      .nav-career .nav-submenu.open-menu  { 
         animation-name: none;
      }

      .nav-subpoint.open-menu { /* Sub Menu Point  */
         display: none;
         background-color: rgba(255, 255, 255, 0);
         margin-top: .5rem;
         margin-bottom: .5rem;
         padding: 0rem;
         padding-left: 0rem;
         text-align: none;
         margin-left: 2rem;
         font-size: 1.2rem;
      }

      .nav-subpoint.open-menu a { /* Sub Menu Point  */
         font-size: 1.2rem;
         padding-top: 1rem;
      }

      .nav-subpoint.open-menu:hover { /* Sub Menu Point  */
         
      }

      .nav-subpoint.open-menu.open-submenu { /* Open submenu points  */
         display: block;
      }

      .nav-subpoint:hover {
         background-color: transparent;
      }

      .nav-subpoint:not(:hover) {
         animation-name: none;
      }

      .nav-subpoint a:hover {
         background-color: transparent !important;
         border-radius: 0rem !important;
         padding: 0rem 0rem !important;
      }







   /* Line under menu point if selected */
   #services .nav-expertise::after,
   #restrukturierung .nav-expertise::after,
   #branchen .nav-branchen::after,
   #about .nav-about::after,
   #karriere .nav-career::after,
   #aktuelles .nav-news::after,
   #kontaktpage .nav_contact::after {
      display: none;
   }


}
















/* // Medium devices (Tablets) */
@media screen and (min-width: 768px) and (max-width: 1024px) {

   .navigation {
      height: 5rem;
      padding: 0 4vw;
   }

   .nav-menu{
      display: none;
   }

   .nav-button {
      display: block;
      background-image: url("/images/burger-menu-collapsed.png");
      background-repeat: no-repeat;
      background-size: contain;
      width: 2rem;
      height: 1rem;
   }

   .nav-button:hover {
      cursor: pointer;
   }

   .skad-logo{
      width: 8rem;
      height: 1rem;
      background-image: url("/assets/skad.svg");
      background-size: contain;
      /* height: 3rem; */
   }

   /* OPEN MENU  */
   @keyframes nav-bg {
      0% {opacity: 0%; height: 5rem; background-color:#0d1320;}
      100% {opacity: 100%; height: 100%; background-color: #141f33;}
   }

   @keyframes nav-points {
      0% {opacity: 0%; margin-left: -2rem;}
      100% {opacity: 100%; margin-left: 0rem;}
   }

   @keyframes nav-menu {
      0% {opacity: 0%; margin-top: 5rem;}
      100% {opacity: 100%; margin-top: 0rem;}
   }

   .navigation.open-menu {
      height: 100%;
      align-items: center;
      background-color: #141f33;
      top: 0;
      animation-name: nav-bg;
      animation-duration: .2s;
   }

   .nav-menu.open-menu{
      display: block;
      position: absolute;
      /* background-color: #141f33; */
      /* background-color:#000; */
      z-index: 1200;
      width: 50%;

      animation-name: nav-menu;
      animation-duration: .5s;
      animation-timing-function: ease-out .1s;
   }

   .nav-point.open-menu{
      border-bottom: 1px solid #58b1ff;
      padding: .5rem 0;
   }

   .nav-point.open-menu a{
      letter-spacing: 2.8px;
      color: #cf4990;
      font-family: 'Wremena_Bold', Georgia, "Times New Roman", Times, serif;
      font-size: 1.5rem;
      text-transform: uppercase;

      animation-name: nav-points;
      animation-duration: .8s;
      animation-timing-function: ease-out .1s;
   }

   .nav-point.open-menu > a:hover {
      color: #58b1ff;
      background-color:unset;
   }

   .skad-logo.open-menu{
      position: absolute;
      top: 2rem;
      left: 4vw;
   }

   .nav-button.open-menu {
      z-index: 9999;
      position: absolute;
      top: 2rem;
      right: 4vw;
      background-image: url("/images/burder-menu-close-button.png");
      background-repeat: no-repeat;
      background-size: contain;
      width: 1.5rem;
      height: 1.5rem;
      transition: transform .5s;
   }

   .nav-button.open-menu:hover {
      transform: rotate(180deg);
   }

   /* MOBILE SUBMENU  */
   .nav-submenu.open-menu {
      display: block !important;
      position: relative;
      text-align: unset;
      width: 100%;
      margin-left: 0;
      padding-top: 0;
   }

      .nav-arrow.open-menu { /* Press arrow to open menu */
         display: block;
         position: absolute;
         top: -2rem;
         right: 0;
         margin-right: 1rem;
         filter: invert(100%) sepia(0%) saturate(2%) hue-rotate(141deg) brightness(105%) contrast(101%);
      }

      .nav-arrow.open-menu:hover {
         cursor: pointer;
      }

      /* Activate sub menu  */
      .nav-career:hover .nav-submenu.open-menu  { 
         display: block;
      }

      .nav-career .nav-submenu.open-menu  { 
         animation-name: none;
      }

      .nav-subpoint.open-menu { /* Sub Menu Point  */
         display: none;
         background-color: rgba(255, 255, 255, 0);
         margin-top: .5rem;
         margin-bottom: .5rem;
         padding: 0rem;
         padding-left: 0rem;
         margin-left: 2rem;
      }

      .nav-subpoint.open-menu a { /* Sub Menu Point  */
         font-size: 1.2rem;
         padding-top: 1rem;
      }

      .nav-subpoint.open-menu a:hover { /* Sub Menu Point  */
         color: #58b1ff;
      }


      .nav-subpoint.open-menu.open-submenu { /* Open submenu points  */
         display: block;
      }

      .nav-subpoint:hover {
         background-color: transparent;
      }

      .nav-subpoint:not(:hover) {
         animation-name: none;
      }

      .nav-subpoint > a:hover {
         background-color: transparent !important;
         border-radius: 0rem !important;
         padding: 0rem 0rem !important;
      }


   /* Line under menu point if selected */
   #services .nav-expertise::after,
   #restrukturierung .nav-expertise::after,
   #branchen .nav-branchen::after,
   #about .nav-about::after,
   #karriere .nav-career::after,
   #aktuelles .nav-news::after,
   #kontaktpage .nav_contact::after {
      display: none;
   }

}














/* // Large devices */
@media screen and (min-width: 1024px) and (max-width: 1280px) {

   .navigation {
      padding: 0 5vw;
   }

   .skad-logo {
      width: 10rem;
      height: 2.8rem;
   }

   .nav-menu {
      font-size: .9rem;
      gap: .5rem;
   }

   .nav-button {
      display: none;
   }

}






























/* Home */
#indexpage .nav_home::after {
   display: block;
   content: '';
   width: 70%;
   height: 2px;
   background: #cf4990;
   position: relative;
   margin: 0 auto;
   bottom: 0;
   left: 0;
}



/* Services Top Page*/
#services .nav_services::after {
   display: block;
   content: '';
   height: 2px;
   background: #cf4990;
   width: 70%;
   position: relative;
   margin: 0 auto;
   bottom: 0;
   left: 0;
}

/* Services > Restrukturierung*/
#restrukturierung .nav_services::after {
    display: block;
    content: '';
    height: 2px;
    background: #cf4990;
    width: 70%;
    position: relative;
    margin: 0 auto;
    bottom: 0;
    left: 0;
 }

 /* Services > RPA*/
#rpa .nav_services::after {
    display: block;
    content: '';
    height: 2px;
    background: #cf4990;
    width: 70%;
    position: relative;
    margin: 0 auto;
    bottom: 0;
    left: 0;
 }

/* Services > KI*/
#ki .nav_services::after {
    display: block;
    content: '';
    height: 2px;
    background: #cf4990;
    width: 70%;
    position: relative;
    margin: 0 auto;
    bottom: 0;
    left: 0;
 }

 /* Branchen */
#branchen .nav_branchen::after {
   display: block;
   content: '';
   height: 2px;
   background: #cf4990;
   width: 70%;
   position: relative;
   margin: 0 auto;
   bottom: 0;
   left: 0;
}

 /* About */
 #about .nav_about::after {
   display: block;
   content: '';
   height: 2px;
   background: #cf4990;
   width: 70%;
   position: relative;
   margin: 0 auto;
   bottom: 0;
   left: 0;
}


/* Karriere */
#karriere .nav_career::after {
    display: block;
    content: '';
    height: 2px;
    background: #cf4990;
    width: 70%;
    position: relative;
    margin: 0 auto;
    bottom: 0;
    left: 0;
 }

 /* News */
#aktuelles .nav_news::after {
    display: block;
    content: '';
    height: 2px;
    background: #cf4990;
    width: 70%;
    position: relative;
    margin: 0 auto;
    bottom: 0;
    left: 0;
 }

  /* News */
#kontaktpage .nav_contact::after {
    display: block;
    content: '';
    height: 2px;
    background: #cf4990;
    width: 70%;
    position: relative;
    margin: 0 auto;
    bottom: 0;
    left: 0;
 }