.icon {
    display: inline-block;
    margin: 0 2px;
    width: 40px;
    height: 40px;
    background-color: transparent;
    background-position: bottom left;
    background-repeat: no-repeat;
    background-size: 32px;
    text-decoration: none;
}

.icon-external,
a.icon-external--hover-white:hover {
    background-image: url(../../layouts/oai/icons/external-link.png);
    background-size: 39px 38px;
}

.icon-external--icon-orange,
a.icon-external--hover-orange:hover {
    background-image: url(../../layouts/oai/icons/external-link-orange.png);
    background-size: 39px 38px;
}

.icon-external--icon-grey,
a.icon-external--hover-grey:hover {
    background-image: url(../../layouts/oai/icons/external-link-gray.png);
    background-size: 39px 38px;
}

.icon-external--icon-black,
a.icon-external--hover-black:hover {
    background-image: url(../../layouts/oai/icons/external-link-black.png);
    background-size: 39px 38px;
}

.icon-edit,
a.icon-edit--hover-white:hover {
    background-image: url(../../layouts/oai/icons/edit.png);
    background-size: 40px 38px;
}

.icon-edit--icon-orange,
a.icon-edit--hover-orange:hover {
    background-image: url(../../layouts/oai/icons/edit-orange.png);
    background-size: 40px 38px;
}

.icon-edit--icon-grey,
a.icon-edit--hover-grey:hover {
    background-image: url(../../layouts/oai/icons/edit-gray.png);
    background-size: 40px 38px;
}

.icon-edit--icon-black,
a.icon-edit--hover-black:hover {
    background-image: url(../../layouts/oai/icons/edit-black.png);
    background-size: 40px 38px;
}

.icon-delete,
a.icon-delete--hover-white:hover {
    background-image: url(../../layouts/oai/icons/delete.png);
    background-size: 35px 38px;
}

.icon-delete--icon-orange,
a.icon-delete--hover-orange:hover {
    background-image: url(../../layouts/oai/icons/delete-orange.png);
    background-size: 35px 38px;
}

.icon-delete--icon-grey,
a.icon-delete--hover-grey:hover {
    background-image: url(../../layouts/oai/icons/delete-gray.png);
    background-size: 35px 38px;
}

.icon-delete--icon-black,
a.icon-delete--hover-black:hover {
    background-image: url(../../layouts/oai/icons/delete-black.png);
    background-size: 35px 38px;
}

@media screen and (max-width: 425px) {
    .icon-edit,
    a.icon-edit--hover-white:hover,
    .icon-edit--icon-orange,
    a.icon-edit--hover-orange:hover,
    .icon-edit--icon-grey,
    a.icon-edit--hover-grey:hover,
    .icon-edit--icon-black,
    a.icon-edit--hover-black:hover {
        width: 20px;
        height: 20px;
        background-size: 20px 18px;
    }
    .icon-delete,
    a.icon-delete--hover-white:hover,
    .icon-delete--icon-orange,
    a.icon-delete--hover-orange:hover,
    .icon-delete--icon-grey,
    a.icon-delete--hover-grey:hover,
    .icon-delete--icon-black,
    a.icon-delete--hover-black:hover {
        width: 20px;
        height: 20px;
        background-size: 15px 18px;
    }
}
