:root {
    --icon-size: 16vw;
    --icon-radius: 8vw;
    --icon-inner-size: 14vw;
    --icon-inner-radius: 7vw;
    
    --page-offset-top: 8vw;
    --page-height: calc(100vh - 8vw);

}

.hha_centre_icon_page_wrapper {
    margin-top: var(--page-offset-top);
    background-color: RGBA(255,255,255,0.90);
    overflow: hidden;
    height: var(--page-height);
}
.hha_centre_icon_page {
    margin: 0 0vw;
}


.hha_centre_icon {
    text-align: center;
}
.hha_centre_icon_back {
    margin-left: calc(50vw - var( --icon-radius));
    margin-top: calc(-1 * var( --icon-radius));
   
    width: var( --icon-size);
    height: var( --icon-size);
    overflow: hidden;
    border-radius: var( --icon-radius);
}
.hha_centre_icon_back_img {
    margin-left: calc(-50vw + var( --icon-radius));
    margin-top: calc(-1 * (var(--page-offset-top) - var( --icon-radius)));
    background-image: var(--main-image);
    background-size: cover;
    background-position: center center;
    width: 100vw;
    height:  100vh;
    overflow: hidden;    
}
.hha_centre_icon_contents {
    position: absolute;
    background: #FFF;
    width: var(--icon-inner-size);
    height: var(--icon-inner-size);
    border-radius: var(--icon-inner-radius);
    margin-top: calc(var(--page-offset-top) - var(--icon-inner-radius));
    margin-left: calc(50vw - var(--icon-inner-radius));
    overflow: hidden;
}

.hha_centre_icon .centre_icon {
    width: var(--icon-inner-size);
    height: var(--icon-inner-size);
    background-size: 90%;
    background-position: center center;
    background-repeat: no-repeat;
    
}

.hha_centre_page {
    max-width: 1000px;
    margin: 0vw auto;
    padding: 1vw;
    padding-top: 0;
}
.hha_card {
    box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.05);
    border: 1px solid rgba(0,0,0,.1);
    background-color: #FFF;
    padding: 1vw;
}

.hha_card.hha_short {
    max-width: 400px;
}

.centre_box {
    margin: 0 auto;
}

.hha_login_links {
    display: flex;
    justify-content: center;

}
.hha_login_links .hha_login_link {
    margin: 1vw;
    border-radius: 5px;
}
.hha_login_links .hha_login_link a{
    text-decoration: none;
}

.hha_login_link_icon {
    border: solid 1px #CCC;
    background-size: contain;
    width: 100px;
    height: 100px;
    border-radius: 5px;
}
.hha_login_link_icon svg {
    width: 100%;
    height: 100%;
}
.hha-shadow {
    box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.05);
    border: 1px solid rgba(0,0,0,.1);
}