.navigation {
   background-color: transparent; 

   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;
      }

      &-link {
         color: #fff;
         text-decoration: none;
         margin-right: 3rem;
      }

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

}

 ::placeholder {
    color: rgb(167, 166, 166);
    opacity: 1;
    /* Firefox */
 }

input[type="text"] {
   font-size: 1.4rem;
   border: none;
   outline: none;
   background-color: red;
   width: 0px;
   padding: 10px;
   padding-right: 2rem;
   // background: none;
   transition: width .5s cubic-bezier(0.000, 0.795, 0.000, 1.000);
   cursor: pointer;
}

input[type="text"]:focus:hover {
   z-index: 2;
   border-bottom: 1px solid #BBB;
   color: #fff;
}

input[type="text"]:focus {
   width: 22rem;
   color: #fff;
   z-index: 1;
   background-color: #000;
   border: 1px solid #fff;
   cursor: text;
}

input[type="submit"] {
   height: 67px;
   width: 63px;

   text-indent: -10000px;
   border: none;
   position: absolute;
   z-index: 2;
   cursor: pointer;
   opacity: 0.4;
   cursor: pointer;
   transition: opacity .4s ease;
}

.logo {
   z-index: -1;
   width: 2rem;
   height: 2rem;
   transform: translateX(2.4rem) translateY(.5rem);
   cursor: pointer;
}