_footer.scss 2.95 KB
#wrapper-footer {
    background-color: #012169;
    height: 273px;
    @media screen and (max-width: 900px) {
      height: auto;
      padding-bottom: 50px;
    }
    a {
      color: #fff;
    }
  }
  
  .footer-widget {
    width: 39%;
    display: inline-block;
    position: relative;
    right: 0px;
    top: 45px;
    vertical-align: top;
    @media screen and (max-width: 768px) {
      width: 90%;
      padding-left: 5%;
    }
    p {
      font-size: 14px;
      text-align: right;
      margin-top: 0px;
      color: #fff;
      @media screen and (max-width: 768px) {
        text-align: left;
      }
    }
  }
  .footer-left {
    width: 60%;
    display: inline-block;
    position: relative;
    left: 0px;
    top: 45px;
    @media screen and (max-width: 768px) {
      width: 90%;
      padding-left: 5%;
    }
    p {
      position: relative;
      right: 0px;
      text-align: left;
      margin-top: 0px;
      color: #fff;
    }
  }
  div.social {
    position: relative;
    right: 0px;
    top: 0px;
    width: 300px;
    display: block;
    float: right;
    @media screen and (max-width: 768px) {
      float: left;
    }
  }
  ul.social {
    list-style-position: inside;
    text-align: right;
    margin-top: 0px;
    margin-bottom: 0rem !important;
    @media screen and (max-width: 768px) {
      text-align: left;
      padding-left: 0px !important;
      margin-bottom: 0.7rem !important;
    }
    li {
      display: inline-block;
  
      a {
        -webkit-transition: none !important;
        transition: none !important;
        display: inline-block;
        width: 36px !important;
        height: 36px !important;
        background: url(/wp-content/themes/understrap-child/src/images/social.svg)
          no-repeat;
        text-indent: 100%;
        white-space: nowrap;
        overflow: hidden;
        background-size: 400%;
        box-shadow: none !important;
        border: solid 0px #4a4e4f;
        background-color: transparent !important;
        margin-top: 0px;
        margin-bottom: 0rem;
      }
  
      a.twitter-icon {
        background-position: 0% 0%;
  
        &:hover {
          opacity: 0.5;
        }
  
        &:active {
          opacity: 0.5;
        }
  
        &:focus {
          opacity: 0.5;
        }
      }
  
      a.instagram-icon {
        background-position: 33% 0%;
  
        &:hover {
          opacity: 0.5;
        }
  
        &:active {
          opacity: 0.5;
        }
  
        &:focus {
          opacity: 0.5;
        }
      }
  
      a.facebook-icon {
        background-position: 66% 0%;
  
        &:hover {
          opacity: 0.5;
        }
  
        &:active {
          opacity: 0.5;
        }
  
        &:focus {
          opacity: 0.5;
        }
      }
  
      a.linkedin-icon {
        background-position: 100% 0%;
  
        &:hover {
          opacity: 0.5;
        }
  
        &:active {
          opacity: 0.5;
        }
  
        &:focus {
          opacity: 0.5;
        }
      }
    }
  }