* {
    /*margin: 0;
    padding: 0;*/
    font-family: "Montserrat",sans-serif;
    /*list-style: none;*/
}

body {
    background: #333;
}

.metro {
    color: white;
    /*position: absolute;*/
    top: 15%;
    left: 10%;
}

.item {
    width: 200px;
    height: 120px;
    float: left;
    margin: 4px;
    cursor: pointer;
    text-align: center;
    position: relative;
    text-transform: uppercase;
    transition: 0.4s;
}

    .item:hover {
        transform: scale(0.9);
    }

    .item i {
        font-size: 36px;
        line-height: 90px;
        opacity: 0.8;
    }

    .item span {
        opacity: 0.8;
        position: absolute;
        bottom: 6px;
        left: 6px;
        font-size: 15px;
    }

.i1 {
    background: #3498db;
}

.i2 {
    background: #e74c3c;
    width: 408px;
}

.i3 {
    background: #2ecc71;
}

.i4 {
    background: #34495e;
}

.i5 {
    background: #9b59b6;
}

.i6 {
    background: #FF7E00;
    width: 270px;
}

.i0 {
    background: #3B7A57;
}

.i7 {
    background: #2ecc71;
    width: 270px;
}

.i8 {
    background: #C70039;
}

.i9 {
    background: #c32030;
    width: 408px;
}

.ia {
    background: #C70039;
    width: 200px;
}