@import '~Breakpoints';
@import '~Colors';
@import '~FontSize';
@import '~Layout';
@import "~Type";

.footer {
  background-color: white;
  position:         relative;
  z-index:          1; //to sit over hero img
}

.container {
  @include container();
  position:        relative;
  text-align:      center;
  padding-top:     5rem;
  padding-bottom:  1.5rem;
  display:         flex;
  flex-wrap:       wrap;
  justify-content: center;
  align-items:     center;
  @include media-breakpoint-up(lg) {
    justify-content: space-between;
    padding-top:     10rem;
    padding-bottom:  3rem;
  }
  & > * {
    margin: 0 auto;
    @include media-breakpoint-up(sm) {
      margin: 0;
    }
  }
}

.cybernautic, [id*='cms-cybernautic-logo-line-1'] {
  display:    block;
  width:      20rem;
  height:     2rem;
  margin-top: 2rem;
  @include media-breakpoint-up(sm) {
    margin: 0;
  }
  svg {
    fill:       $brand-primary;
    transition: all .5s ease;
  }
  &:hover {
    svg {
      fill: $brand-secondary;
    }
  }
}

.socialRow {
  display:         flex;
  justify-content: space-between;
  width:           100%;
  @include media-breakpoint-up(lg) {
    width: 10rem;

  }

}

.social {
  display:   block;
  color:     $brand-secondary;
  font-size: 2rem;
}

.link {
  padding:     .5rem 1rem;
  line-height: 1;
  display:     block;
  width:       100%;
  @include media-breakpoint-up(lg) {
    width:   auto;
    display: inline;
  }
  transition:  color .35s ease;
  font-weight: 500;
  font-size:   1.6rem;
  &:hover {
    color: $brand-secondary;
  }
}