// Diamonds
.porto-diamonds {
    font-size: 0;
    margin: 40px auto;
    position: relative;
    text-align: center;
    max-width: 1110px;

    .csstransforms3d & {
        padding: side-values(50px 0 0 52px);
    }

    .no-csstransforms3d & {
        max-width: 1035px;
    }

    > li {
        display: inline-block;
        font-size: 18px;
        margin-#{$right}: 130px;

        .no-csstransforms3d & {
            margin: side-values(0 20px 20px 0);
        }
    }

    .diamond {
        background: #f4f4f4;
        display: block;
        height: 245px;
        overflow: hidden;
        position: relative;
        text-decoration: none;
        width: 245px;

        &:after {
            @include transition (all .2s);
            content: " ";
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            #{$left}: 0;
            background: #000;
            opacity: 0;
            transform: scale(0);
            z-index: 100;
        }

        &:hover {
            &:after {
                opacity: 0.3;
                transform: scale(1);
            }

            .content {
                &:after {
                    opacity: 0.8;
                    transform: scale(1);
                }
            }

        }

        .csstransforms3d & {
            overflow: hidden;
            transform: rotate(-45deg);
        }
    }

    .content {
        display: table-cell;
        height: 245px;
        padding: 0 10px;
        transform: rotate(45deg);
        text-align: center;
        vertical-align: middle;
        width: 245px;
        position: relative;

        &:after {
            @include transition (all .2s);
            color: #fff;
            content: "\e091";
            font-family: "simple-line-icons";
            font-size: 28px;
            #{$left}: 26%;
            margin: -6px -12px;
            opacity: 0;
            position: absolute;
            top: 49%;
            z-index: 1000;
            transform: scale(2);
        }

        img {
            margin-#{$left}: -50%;
            max-width: 375px;
        }
    }

    .diamond-sm {
        .content {
            &:after {
                #{$left}: 24%;
                top: 49%;
            }
        }

    }
}

@media (max-width: 722px) {
    .csstransforms3d .porto-diamonds,
    .porto-diamonds {
        max-width: 245px;
        padding-#{$left}: 0;
    }

    .porto-diamonds > li {
        margin-#{$right}: 0;
        margin-bottom: 130px;
        clear: both;
    }

    .porto-diamonds > li:last-child {
        margin-bottom: 50px;
        margin-#{$right}: 0;
        margin-top: 0;
        padding-#{$left}: 0;
    }
}

