_footer.scss 3.25 KB
#wrapper-footer{
    background-color:#012169;
    height: 273px;
    @media screen and (max-width: 768px) {
        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;
            }
        }
    }
}