.icon {
    display: inline-block;
    width: 45px;
    height: 45px;
    text-align: center;
    line-height: 45px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    font-size: inherit;
    vertical-align: middle;
    text-rendering: auto;
    overflow: hidden;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}

.icon.facebook {
    /* background-color: #1877F2; */
    background-size: 100%;
    background-image: url(../../image/icon/icon-facebook.svg);
}
.icon.facebook2 {
    /* background-color: #1877F2; */
    background-size: 100%;
    background-image: url(../../image/icon/icon-facebook2.svg);
}

.icon.telephone {
    background-color: #5e7aa2;
    background-image: url(../../image/icon/icon-phone.png);
}

.icon.twitter {
    /* background-color: #26A6D1; */
    background-size: 80%;
    background-image: url(../../image/icon/icon-twitter.svg);
}

.icon.youtube {
    background-color: var(--color-primary);
    background-size: 80%;
    background-image: url(../../image/icon/icon-youtube.png);
}

.icon.join {
    background-color: #4BB1B0;
    background-image: url(../../image/icon/icon-join.png);
}

.icon.contact {
    background-color: #F7C52A;
    background-image: url(../../image/icon/icon-contact.png);
}

.icon.home {
    background-color: #4BB1B0;
    background-image: url(../../image/icon/icon-home.png);
}

.icon.view {
    background-color: #5bb7b6;
    background-image: url(../../image/icon/icon-view.svg);
}

.icon.date {
    background-color: #5bb7b6;
    background-image: url(../../image/icon/icon-date.svg);
}

.icon.download {
    background-color: #e8e8e8;
    background-image: url(../../image/icon/icon-download.png);
}

.icon.contact-location {
    background-color: #fff;
    background-image: url(../../image/icon/icon-contact-location-I.svg);
}

.icon.contact-tele {
    background-color: #fff;
    background-image: url(../../image/icon/icon-contact-tell-I.svg);
}

.icon.contact-fax {
    background-color: #fff;
    background-image: url(../../image/icon/icon-contact-print-I.svg);
}

.icon.contact-mail {
    background-color: #fff;
    background-image: url(../../image/icon/icon-contact-mail-I.svg);
}

.icon.google-map {
    background-color: transparent;
    background-image: url(../../image/icon/icon-google-map.png);
}

.icon.graphic-map {
    background-color: transparent;
    background-image: url(../../image/icon/icon-graphic-map.png);
}


/* .icon::before {
    content: 'sums ';
    color: transparent;
    position: absolute;
    background-color: #fff;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
} */