footer {

    width:100%;
    background-color: var( --footerBgColour );
    color: var( --footerTextColour );

}

footer > .container {

    width:90vw;
    margin: 0 auto 0 auto;
    padding: 5vw 0;

}

#footerLogo,
#footerText,
#footerSocial {

    display: inline-block;
    vertical-align: top;
    position: relative;

}

#footerLogo,
#footerSocial {

    width:14.5%;

}

#footerText {

    width:69.5%;
    text-align: center;

}

#footerText > h1 {

    text-align: center;
    text-transform: uppercase;
    font-size: 2vw;
    letter-spacing: 0.025em;
    margin-bottom: 0.7vw;

}

#footerSocial {

    text-align: right;

}

#footerSocial ul {

    display: inline-block;
    margin: 0;
    padding: 0;

}

#footerSocial li {

    display: inline-block;
    list-style-type: none;
    padding-left: 0.5vw;

}

#footerSocial li .icon {

    height:2.5vw;
    width:2.5vw;

}

#footerLogo.breakPointDesktopLarge > .image,
#footerLogo.breakPointDesktop > .image,
#footerLogo.breakPointDesktopSmall > .image,
#footerLogo.breakPointPad > .image {

    width:7.4vw;
    height:auto;

}

#footerLogo.breakPointMobile,
#footerText.breakPointMobile,
#footerSocial.breakPointMobile {

    display: block;
    width: 100%;
    text-align: center;

}

#footerLogo.breakPointMobile > .image {

    width:64px;
    height:auto;
    margin: 0 auto 10px auto;

}

#footerText.breakPointMobile .text {

    font-size: 3vw;

}

#footerText.breakPointMobile > h1 {

    font-size: 16px;
    letter-spacing: 0.025em;
    margin-bottom: 6px;

}

#footerSocial.breakPointMobile {

    margin-top: 10px;

}

#footerSocial.breakPointMobile li {

    padding:1vw;

}

#footerSocial.breakPointMobile li .icon {

    height:32px;
    width:32px;

}