
.navigation {
   background-color: transparent; 
   z-index: 100;
   grid-column: 1 / 13; 
   position: fixed;
   width: 100%;
   height: 6.7rem;
   transition-timing-function: ease-in;
   transition: all 1s;


   &.black {
      background-color: $color-background;
   }

   &__container {
      background-color: transparent;
      margin-left: 3.8rem;
      display: flex;
      height: 6.7rem;
      justify-content: flex-start;
      align-items: center;

      a:first-child {
         padding-left: .2%;
         color: $color-red;
         font-size: 4rem;
      }

      &--bellLogo {
         cursor: pointer;
         height: 2.2rem;
         fill: red; 
         width: 2.2rem;
         padding-right: 2.5rem;

      }
      
      &--userLogo {
         margin-top: 2rem;
         border-radius: 5px;
         cursor: pointer;
         background-color: rgb(201, 199, 78);
         height: 3rem;
         width: 3rem;
         margin-right: .5rem;
        
         &:hover > .dropdownContent {
            
            transition: all .4s;
            opacity: 1; 
            visibility: visible;
         }
      }

      &--downArrow {
         cursor: pointer;
         fill: #fff; 
         height: 1rem;
         width: 1rem;
         margin-right: 5.8rem;

      }

      &--logo { 
         margin-top: 1rem;
         height: 5rem;
         padding-right: 1rem;
        
      }

      &-link {
          font-weight: 500;
         font-size: 1.5rem;
         color: rgb(221, 221, 221);
         text-decoration: none;
         margin-right: 2rem;
         transition: all .2s; 
     
         &:last-child {
            padding-right: 2.6rem;
         }

         &:hover {
            color: rgb(167, 167, 167); 
         }
        
      }

      &--left {
         flex-grow: 1;
         color: #fff;
         padding-right: 2rem;
         display: flex;
         justify-content: flex-end;

         &__input {
              font-size: 1.4rem;
              border: none;
              color: #fff;
              outline: none;
              width: 0px;
              padding: 10px;
              padding-right: 2rem;
              background: $color-background;
               border: 1px solid #fff;
              transition: width .5s;
              cursor: pointer;

               opacity: 0;
             

              &:focus {
                  padding-left: 4rem;
                  width: 22rem;
                  cursor: text;
                  opacity: 1;
                
              }
         }
      }
   }

}

.logo {
   width: 1.8rem;
   height: 1.8rem;
   transform: translateX(2.4rem) translateY(1rem);
   cursor: pointer;
}



.dropdownContent {
   display: flex; 
   flex-direction: column;
//   align-items: center;
   opacity: 0;
  
   color: #FFF;
   transition-delay: .5s;
   padding-left: 1rem;
   padding-top: 1.8rem;
   visibility: hidden;
   height: 19rem;
   border: 1px solid rgb(73, 73, 73);
   width: 15rem;
   background-color: rgba(#000, .9);
   transform: translateY(4.6rem) translateX(-11rem);

   &--2 {
        height: 10rem;
   }

   &-text {
      width: 60%;
      padding-top: 1.2rem;
      font-size: 1.2rem;
      
      &:hover {
         border-bottom: 1px solid #fff; 
         // border-width: 2%;
      }
   }

     &-textOutside {
        font-size: 1.2rem;
        padding-bottom: 1rem;
     }

   &--user {
      height: 3rem;
      width: 3rem;
      border-radius: 5px;
      background-color: rgb(64, 168, 228); 

      &-2 {
         background-color: rgb(230, 145, 48);
      }

      &-3 {
         background-color: rgb(123, 230, 96);
      }

      &-text {
         width: 3rem;
         font-size: 1.2rem;
         transform: translateX(4rem) translateY(-2rem);
         
         &:hover {
            border-bottom: 1px solid #fff; 
            border-width: 100%;
         }
      }
   }

}

.dropdownContainer {
   
   height: 100%;
   justify-content: center;
   align-content: center;

   &:hover .dropdownContent {
      transition: all .4s;
      opacity: 1;
      visibility: visible;
   }
}
