.footer {
   color: $body-color;
   font-size: $font-size-smaller;

   .container-fluid {
      border-top: 1px solid $border-color;

      &:first-child {
         padding-top: 70px;
         padding-bottom: 30px;
      }
   }

   .container-flex {
      align-items: center;
   }

   .footer-contact {
      width: 50%;

      a {
         display: inline-block;
         color: $text-dark;
         margin-bottom: 4px;

         @media screen and (min-width: $xl) {
            font-size: 16px;
         }
      }

      span {
         color: $text-muted;
      }
   }

   .footer-social {
      display: flex;
      align-items: center;
      flex-wrap: wrap;

      .fc {
         display: block;
         font-size: 18px;
         color: $text-dark;
         margin-right: 22px;

         span {
            display: none;
         }
      }
   }

   .footer-left {
      display: flex;
      flex-wrap: wrap;

      .column {
         width: 100%;
      }
   }

   .logo-wrapper {
      display: flex;
      justify-content: center;
   }

   .logo {
      margin-top: -8px;
   }

   .title-default {
      color: $text-dark;
      font-weight: $font-weight-bold;
      letter-spacing: $letter-spacing-lg;
      text-transform: uppercase;
      font-family: $font-family-heading;
      margin-bottom: 14px;
   }

   .footer-deliveries {
      margin: 20px auto 0;
      display: flex;
      align-items: center;
      justify-content: center;

      img {
         margin: 0 20px;
      }
   }
}

.footer-menu {
   display: flex;
   flex-grow: 1;

   a {
      @include underline-hover;
   }

   .column {
      padding-bottom: 30px;
      width: 50%;
   }

   li {
      padding: 4px 0;
   }
}

.footer-newsletter {
   padding-top: 45px;
   margin-bottom: 40px;

   > .row {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
   }

   form {
      display: flex;
      padding-left: 50px;
   }

   .w-media,
   p {
      margin-bottom: 0;
   }

   .w-media .fc {
      font-size: 40px;
      width: 65px;
   }

   .wpj-col-4 {
      max-width: 250px;
      flex: 0 0 250px;
   }

   .wpj-col-8 {
      max-width: calc(100% - 250px);
      flex: 0 0 calc(100% - 250px);
   }


   .form-control {
      margin-right: 28px;
      border: 0;
      border-bottom: 1px solid $border-color;
      padding-left: 0;
      color: $black;
      font-weight: $font-weight-semibold;
      font-family: $font-family-heading;

      &::placeholder {
         color: $black;
         font-weight: $font-weight-semibold;
         font-family: $font-family-heading;
      }
   }
}

@media screen and (max-width: $lg - 1) {
   .footer {
      .logo-col {
         display: none;
      }

      .footer-contact {
         margin-bottom: 30px;
      }
   }

   .footer-newsletter {
      .newsletter-text {
         margin-bottom: 20px;
      }

      form {
         padding-left: 0;
      }
   }
}

@media screen and (max-width: $md - 1) {
   .footer {
      .container-fluid:first-child {
         padding-top: 20px;
         padding-bottom: 20px;
      }

      .footer-contact {
         width: 100%;
         margin-bottom: 20px;
      }

      .title-default {
         position: relative;
         padding: 22px 40px 21px 10px;
         margin-bottom: 0;

         &::after {
            @include fonticon;

            content: $icons-caret-down;
            position: absolute;
            right: 10px;
            top: calc(50% - 7px);
            font-size: 14px;
            transition: all $transition-speed;
         }

         &.is-open::after {
            transform: rotate(180deg);
         }
      }

      .footer-left {
         .column:first-of-type {
            border-top: 1px solid $border-color;
         }
      }
   }

   .footer-menu {
      flex-wrap: wrap;
      margin: 0 -10px;

      .column {
         width: 100%;
         max-width: 100%;
         padding-bottom: 0;
         border-bottom: 1px solid $border-color;

         > ul {
            display: none;
            padding: 0 10px 20px;
         }

         li {
            padding: 4px 0;
         }
      }
   }

   .footer-newsletter {
      .newsletter-text {
         br {
            content: '';

            &::after {
               content: ' ';
            }
         }
      }
   }
}

@media screen and (max-width: $sm - 1) {
   .footer {
      .footer-deliveries {
         display: none;
      }

      .container-fluid:first-child {
         padding-bottom: 0;
      }

      .container-fluid:not(:first-child) {
         border-top: 0;
      }
   }

   .footer-newsletter {
      .wpj-col-4,
      .wpj-col-8 {
         max-width: 100%;
         flex: 0 0 100%;
      }

      .w-media {
         justify-content: center;
         margin-bottom: 20px;

         .fc {
            font-size: 28px;
            width: 42px;
            position: relative;
            top: -3px;
         }
      }

      .w-media-body {
         flex-grow: initial;
      }

      .w-text {
         text-align: center;
      }
   }
}
