/*  externallink list */

#externallink-wrapper {
    max-width: var(--max-width-container-content);
    margin: 0 auto;
    text-align: center;
    position: relative;
}

ul.externallink {
    display: grid;
    grid-column-gap: 30px;
    grid-row-gap: 30px;
    -ms-grid-columns: 1fr 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr;
    -ms-grid-rows: auto;
    grid-template-rows: auto;
    align-items: stretch;
    padding: 0 !important;
    margin-left: 0 !important;
}

    ul.externallink li {
        padding: 0 !important;
        margin-left: 0 !important;
        position: relative;
        /*display: flex;
            flex-direction: column;
            align-content: flex-start;
            justify-content: flex-start;
            align-items: flex-start;*/
        display: grid;
        grid-template-columns: auto 1fr;
        grid-template-rows: auto auto 1fr;
        column-gap: 10px;
        justify-items: start;
        row-gap: 8px;
        color: var(--p-main);
        width: 100%;
        height: 100%;
        -webkit-border-radius: var(--radius-box);
        -moz-border-radius: var(--radius-box);
        border-radius: var(--radius-box);
        overflow: hidden;
        /*-webkit-box-shadow: 0 1px 10px rgba(0,0,0,.11);
        -moz-box-shadow: 0 1px 10px rgba(0,0,0,.11);
        box-shadow: 0px 1px 10px 0px rgba(0,0,0,.11);*/
        -webkit-box-shadow: var(--box-shadow);
        -moz-box-shadow: var(--box-shadow);
        box-shadow: var(--box-shadow);
        min-height: 320px;
    }
            ul.externallink li:before {
                content: "";
                width: 100%;
                height: 3px;
                background-color: #d6d6d6;
                display: block;
                position: absolute;
                left: 0;
                top: 197px;
            }


        ul.externallink li .name {
            color: var(--p-main);
            font-size: 24px;
            font-size: 2.4rem;
            line-height: 34px;
            line-height: 3.4rem;
            font-weight: 400;
            letter-spacing: 0px;
            background-size: 16px;
            padding-left: 30px;
            padding-right: 30px;
            width: calc(100% - 60px);
            display: block;
            text-align: left;
            padding-top: 220px;
            grid-column-start: span 2;
        }

                ul.externallink li .name span:before {
                    content: "Link";
                    display: block;
                    position: relative;
                    font-size: 1.4rem;
                    line-height: 1.6rem;
                    font-weight: 400;
                    margin-bottom: 8px;
                    margin-top: 5px;
                    color: var(--button-red);
                }


        /*ul.externallink li .name:before {
            content: "";
            display: block;
            position: relative;
            width: 80px;
            height: 80px;
            border-radius: var(--radius-circle);
            display: block;
            background-color: var(--text-white);
            margin-bottom: 20px;
            opacity: 0.85;
            background-repeat: no-repeat !important;
            background-position: center !important;
            background-size: auto 38px !important;
        }*/

       /* ul.externallink li.accounts .name:before {
            background-image: url(../grfx/homepage/accounts-colour.svg);
        }*/

        ul.externallink li .summary {
            text-align: left;
            padding-bottom: 20px;
            padding-left: 30px;
            padding-right: 30px;
            font-size: 13px;
            font-size: 1.3rem;
            max-width: 270px;
            grid-column-start: span 2;
        }


        ul.externallink li a.link2,
        ul.externallink li a.more {
            display: block;
            background-color: var(--button-red);
            border: 1px solid var(--button-red);
            -webkit-border-radius: var(--radius-button);
            -moz-border-radius: var(--radius-button);
            border-radius: var(--radius-button);
            color: var(--button-text);
            padding: 0px 15px;
            height: 34px;
            line-height: 34px;
            width: auto;
            display: inline-block;
            text-align: center;
            -webkit-transition: all 0.1s ease-in-out;
            transition: all 0.1s ease-in-out;
            font-weight: 300;
            font-size: 17px;
            font-size: 1.3rem;
            text-transform: initial;
            letter-spacing: 0.2px;
            margin-left: 30px;
            margin-right: 30px;
            margin-bottom: 30px;
            margin-top: auto;
            /*max-width: 68px;*/
            min-width: 66px;
        }
        /*ul.externallink li a.more {
            width: calc((100% - 40px - 35px));
        }*/


            ul.externallink li a.link2:hover,
            ul.externallink li a.more:hover {
                background-color: var(--dark-red) !important;
                border: 1px solid var(--dark-red) !important;
            }


        ul.externallink li.links-1 a.link2,
        ul.externallink li.links-1 a.more {
            grid-column-start: span 2;
        }
            ul.externallink li.links-2 a.link2 {
                margin-right: 0;
            }
        ul.externallink li.links-2 a.more {
            margin-left: 0;
        }
       /* ul.externallink li.has2links a.more {
            width: calc((100% - 70px - 35px));
        }*/

        ul.externallink li.tru-pot .name span:before {
            content: "Pensions & investment";
        }
    ul.externallink li.xero .name span:before {
        content: "Cloud accounting software";
    }


                ul.externallink li.tru-pot .name {
                    background-image: url(../grfx/links/lnk-true-potenial.jpg);
                    background-repeat: no-repeat;
                    background-position: top center;
                    background-size: 351px 200px;
                }
            ul.externallink li.xero .name {
                background-image: url(../grfx/links/lnk-xero.jpg);
                background-repeat: no-repeat;
                background-position: top center;
                background-size: 351px 200px;
            }
            ul.externallink li.hmrc .name {
                background-image: url(../grfx/links/lnk-hmcustoms.jpg);
                background-repeat: no-repeat;
                background-position: top center;
                background-size: 351px 200px;
            }
            ul.externallink li.hmtres .name {
                background-image: url(../grfx/links/lnk-hmtreasury.jpg);
                background-repeat: no-repeat;
                background-position: top center;
                background-size: 351px 200px;
            }
            ul.externallink li.dbeis .name {
                background-image: url(../grfx/links/lnk-businesenergyindustry.jpg);
                background-repeat: no-repeat;
                background-position: top center;
                background-size: 351px 200px;
            }
            ul.externallink li.bcoc .name {
                background-image: url(../grfx/links/lnk-britishchamber.jpg);
                background-repeat: no-repeat;
                background-position: top center;
                background-size: 351px 200px;
            }
            ul.externallink li.comphouse .name {
                background-image: url(../grfx/links/lnk-companieshouse.jpg);
                background-repeat: no-repeat;
                background-position: top center;
                background-size: 351px 200px;
            }
            ul.externallink li.ukipo .name {
                background-image: url(../grfx/links/lnk-propertyoffice.jpg);
                background-repeat: no-repeat;
                background-position: top center;
                background-size: 351px 200px;
            }
            ul.externallink li.mco .name {
                background-image: url(../grfx/links/lnk-hmcourts.jpg);
                background-repeat: no-repeat;
                background-position: top center;
                background-size: 351px 200px;
            }
            ul.externallink li.acas .name {
                background-image: url(../grfx/links/lnk-acas.jpg);
                background-repeat: no-repeat;
                background-position: top center;
                background-size: 351px 200px;
            }
            ul.externallink li.citad .name {
                background-image: url(../grfx/links/lnk-citezensadvice.jpg);
                background-repeat: no-repeat;
                background-position: top center;
                background-size: 351px 200px;
            }
            ul.externallink li.confin .name {
                background-image: url(../grfx/links/lnk-gov.uk.jpg);
                background-repeat: no-repeat;
                background-position: top center;
                background-size: 351px 200px;
            }
            ul.externallink li.gso .name {
                background-image: url(../grfx/links/lnk-getsafeonline.jpg);
                background-repeat: no-repeat;
                background-position: top center;
                background-size: 351px 200px;
            }
            ul.externallink li.oons .name {
                background-image: url(../grfx/links/lnk-officenatialstats.jpg);
                background-repeat: no-repeat;
                background-position: top center;
                background-size: 351px 200px;
            }
            ul.externallink li.fin-times .name {
                background-image: url(../grfx/links/lnk-finacialtimes.jpg);
                background-repeat: no-repeat;
                background-position: top center;
                background-size: 351px 200px;
            }
            ul.externallink li.rp .name {
                background-image: url(../grfx/links/lnk-routeplanner.jpg);
                background-repeat: no-repeat;
                background-position: top center;
                background-size: 351px 200px;
            }