.ft__wrapper

@include footer-bg($opd-blue)
color: $white
padding: 5vh 5vw
font-size: $sm-font-size

.ft__body

display: flex
flex-direction: column-reverse
width: 100%
padding: 6rem 0
justify-content: space-between

.ft__company

display: flex

.ft__company__logo

@include logo-color($white)
padding-bottom: 3rem

& > .site__logo
  height: 5rem
&::after
  content: 'Limited'
  position: absolute
  font-size: $sm-font-size
  transform: translate(-5rem, 4rem)

.ft__company__no

padding-bottom: 2rem

.ft__company__add > ul

list-style: none
padding: 0
margin: 0
text-decoration: none

.address

line-height: $font-size
& > *
  padding-bottom: 1rem

.ft__sitemap

//width: 40vw

.ft__sitemap

margin-top: 6rem

.ft__sitemap--submenu
  font-size: inherit

.ft__sitemap–header

border-bottom: 1px solid $opd-light-blue
margin-bottom: 3rem
width: 100%

.ft__sitemap–env-wrap

display: flex
flex-direction: column

.ft__sitemap–env

//margin-right: 8rem

.ft__sitemap–env-header

margin-bottom: 2rem

.ft__sitemap–submenu

padding: 0

li
  //line-height: 2rem
  list-style: none

  &:last-child
    @include default-trans
    margin: auto
    margin-top: 2rem
    margin-bottom: 4rem
    background-color: $opd-coral
    text-align: center
    padding: 1rem
    width: 70vw
    border-radius: 6px
    cursor: pointer
    text-transform: uppercase
    a
      text-decoration: none

.ft__sitemap--link
  //text-decoration: none
  color: inherit
  line-height: 3rem

.ft__contact

//width: 20vw
text-align: center

.ft__contact--header
  padding-bottom: 3rem

ul
  list-style: none
  padding: 0
  margin: 0

.ft__contact--link
  padding: 1rem 0

  i
    padding-right: 1rem

  & > a
    color: inherit

.social-media
  padding-top: 4rem
  display: flex
  justify-content: space-around
  i
    font-size: 3rem

.ft__base

border-top: solid 1px $opd-light-blue
text-align: center

a,
p
  color: inherit
  font-size: $sm-font-size
  margin: 0
  padding: 1rem .1rem
  text-decoration: none

.legal-links

display: flex
justify-content: center

flex-direction: row
a
  &::after
    content: " |"

  &:last-child
    &::after
      content: ""

.copyright

&::after
  content: ' Limited'

.ft__sitemap–submenu

li
  transition: .2s ease-in-out

&:hover > li
  opacity: .5

li
  &:hover
    opacity: 1

@media screen and ( min-width: 768px )

.ft__wrapper
  @include footer-bg($opd-blue)
  color: $white
  padding: 5vh 5vw
  font-size: $sm-font-size

.ft__body
  display: flex
  flex-direction: row
  width: 90vw
  padding: 10rem 0
  justify-content: space-between

.ft__company
  width: 20vw
  display: flex

.ft__company__logo
  @include logo-color($white)
  padding-bottom: 3rem
  & > .site__logo
    height: 7rem
  &::after
    content: 'Limited'
    position: absolute
    font-size: $font-size
    transform: translate(-7rem, 6rem)

.ft__company__no
  padding-bottom: 2rem

.ft__company__add > ul
  list-style: none
  padding: 0
  margin: 0
  text-decoration: none

.address
  line-height: $font-size + 1rem
  & > *
    padding-bottom: 1rem

.ft__company--link
  padding: 2rem 0

  & > a
    text-decoration: none
    color: inherit

.ft__sitemap
  width: 40vw

.ft__sitemap, .ft__contact
  margin-top: 0

  .ft__sitemap--submenu
    font-size: inherit

.ft__sitemap--header
  border-bottom: 1px solid $opd-light-blue
  margin-bottom: 3rem
  width: 80%

.ft__sitemap--env-wrap
  display: flex
  flex-direction: row

.ft__sitemap--env
  margin-right: 8rem

.ft__sitemap--env-header
  margin-bottom: 2rem

.ft__sitemap--submenu
  padding: 0

  li
    line-height: 3rem
    list-style: none

    &:last-child
      //margin-top: 5rem
      margin-bottom: 8rem
      width: auto
      border: solid 1px $opd-coral

      .ft__sitemap--link
        @include default-trans
        text-align: center
        padding: 2rem 3rem
        width: auto
        border-radius: 6px
        cursor: pointer
        text-transform: uppercase
      &:hover
        background-color: rgba($opd-coral,.3)
        border: solid 1px $pure-white

  .ft__sitemap--link
    text-decoration: none
    color: inherit
    line-height: 4rem

.ft__contact
  width: 20vw
  text-align: left

  .ft__contact--header
    padding-bottom: 3rem

  ul
    list-style: none
    padding: 0
    margin: 0

  .ft__contact--link
    padding: 2rem 0

    i
      padding-right: 2rem

    & > a
      @include default-trans
      color: inherit
      text-decoration: none

    &:hover > a
      color: $opd-coral

  .social-media
    padding-top: 6rem
    justify-content: flex-start
    i
      font-size: 4rem
      padding-right: 5rem

.ft__base
  align-items: center
  border-top: solid 1px $opd-light-blue
  display: flex
  flex-wrap: wrap

  justify-content: space-between
  min-width: 100%
  width: 100%
  a,
  p
    color: inherit
    font-size: $sm-font-size
    margin: 0
    padding: .5rem .1rem
    text-decoration: none

.legal-links
  display: flex
  justify-content: space-between

  flex-direction: row
  a
    &::after
      content: " |"

    &:last-child
      &::after
        content: ""

.copyright
  &::after
    content: ' Limited'

.ft__sitemap--submenu
  li
    transition: .2s ease-in-out

  &:hover > li
    opacity: .5

  li
    &:hover
      opacity: 1