*:before,
*:after {
    box-sizing: border-box;
}

body {
    background-color: #eee
    color: #e5e5e5;
    font: 16px/1.25 sans-serif;
    margin: 0;
}

.row {
    margin-left: auto;
    margin-right: auto;
    max-width: 760px;
    padding: 1em;
}

section {
	width:800px;
	margin:0 auto;
    background: #000;
    position: relative;
}

a {
    color: #a2ed56;
}

a:hover {
    color: #83e4e2;
    text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 400;
}

ul {
    color: #000;
    display: flex;
    list-style: none;
    margin: 0 -1em;
    padding: 0;
}

ul > li {
    flex: 1;
    margin: 1em;
    text-align: center;
}

ul > li:not(:hover),
ul > li > div {
    position: relative;
    z-index: 1;
}

ul > li:before {
    background: transparent;
    bottom: 0;
    content: '';
    left: 0;
    opacity: 0.35;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
    transition: background 0.2s ease-in-out;
    z-index: 0;
}

ul > li:hover:before {
    background: #fff;
}

ul > li > div {
    background: #fff;
    height: 100%;
    padding: 1em;
}

/*** COLORS ***/
/* Primary */
ul > li:nth-of-type(6n+1):hover:before,
ul > li:nth-of-type(6n+1) > div {
    background: #a2ed56;
}

/* Secondary */
ul > li:nth-of-type(6n+2):hover:before,
ul > li:nth-of-type(6n+2) > div {
    background: #83e4e2;
}

/* Tertiary */
ul > li:nth-of-type(6n+3):hover:before,
ul > li:nth-of-type(6n+3) > div {
    background: #fd6470;
}

/* Quaternary */
ul > li:nth-of-type(6n+4):hover:before,
ul > li:nth-of-type(6n+4) > div {
    background: #fca858;
}

/* Quinary */
ul > li:nth-of-type(6n+5):hover:before,
ul > li:nth-of-type(6n+5) > div {
    background: #fddc32;
}



/*** MEDIA QUERIES ***/
@media only screen and ( max-width: 60em ) {

    ul {
        flex-direction: column;
    }

}