* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.container {
    width: 1168px;
    margin: 0 auto;
}

body {
    background: #3399CC;
    font-family: 'Lucida Sans Unicode';
    color: #FFFFFF;
}

h1 {
    font-size: 21px;
    margin-top: 66px;
    margin-bottom: 32px;

    .wi {
        font-size: 25px;
    }

}

.table {
    text-align: center;
    list-style: none;
    font-size: 0px;
    background: #FFFFFF;
    margin-bottom: 35px;

    li {
        padding-top: 25px;
        padding-bottom: 0px;
        display: inline-block;
        font-size: 22px;
        height: 147px;
        border: 3px solid white;
        

        .wi {
            font-size: 42px;
            margin-top: 7px;
            vertical-align: text-bottom;
            margin-left: 10px;
        }
    }
}

.blue {
    background: #3399CC;
}

.light_blue {
    background: #33CCCC;
}

.violete {
    background: #996699;
}

.red {
    background: #C24747;
}

.orange {
    background: #E2674A;
}

.yellow {
    background: #FFCC66;
}

.olive_green {
    background: #99CC99;
}

.light_green {
    background: #669999;
}

.pink {
    background: #CC6699;
}

.green {
    background: #339966;
}

.dark_violete {
    background: #666699;
}

.whole {
    width: 100%;
}

.half {
    width: 50%;
}

.quarter {
    width: 25%;
}

ul:hover li {
    opacity: 50%;
}

ul li:hover {
    opacity: 100%;
}