/* img { height: 150px; width: 100%; } */

    .item {
        padding-left: 5px;
        padding-right: 5px;
    }

    .item-card {
        height: 150px;
        padding: 20px;
        margin-bottom: 12px;
        transition: 0.5s;
        cursor: pointer;
    }

    .item-card-title {
        font-size: 15px;
        font-style: italic;
        transition: 1s;
        cursor: pointer;
    }

    .item-card-title a {
        font-style: normal;
        color: #717171;
    }

    .item-card-title a:hover {
        color: #333;
        text-decoration: none;
    }

    /* .item-card-title i { font-size: 15px; transition: 1s; cursor: pointer; color: #ffa710; } */

    .card-title i:hover {
        transform: scale(1.25) rotate(100deg);
        color: #18d4ca;
    }

    .card:hover {
        transform: scale(1.05);
        box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.3);
    }

    .card-text {
        height: 80px;
    }

    .card::before,
    .card::after {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        transform: scale3d(0, 0, 1);
        transition: transform .3s ease-out 0s;
        background: rgba(255, 255, 255, 0.1);
        content: '';
        pointer-events: none;
    }

    .card::before {
        transform-origin: left top;
    }

    .card::after {
        transform-origin: right bottom;
    }

    .card:hover::before,
    .card:hover::after,
    .card:focus::before,
    .card:focus::after {
        transform: scale3d(1, 1, 1);
    }

    .color-pink {
        color: #fdc7d7;
    }

    .color-blue {
        color: #56b4da;
    }

    .bg-pink {
        border-bottom: 7px solid #fdc7d7;
    }

    .bg-blue {
        border-bottom: 7px solid #56b4da;
    }



    .popup-close {
        width: 34px;
        height: 34px;
        padding-top: 4px;
        display: inline-block;
        position: absolute;
        top: 20px;
        right: 20px;
        -webkit-transform: translate(50%, -50%);
        transform: translate(50%, -50%);
        border-radius: 100%;
        background: transparent;
        border: solid 4px #808080;
    }

    .popup-close:after,
    .popup-close:before {
        content: "";
        position: absolute;
        top: 11px;
        left: 5px;
        height: 4px;
        width: 16px;
        border-radius: 30px;
        background: #808080;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }

    .popup-close:after {
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }

    .popup-close:hover {
        -webkit-transform: translate(50%, -50%) rotate(180deg);
        transform: translate(50%, -50%) rotate(180deg);
        background: #f00;
        text-decoration: none;
        border-color: #f00;
    }

    .popup-close:hover:after,
    .popup-close:hover:before {
        background: #fff;
    }