body{
    background-color:#111;
}

.container{
    width:750px;
    margin:auto;
    margin-top:80px;
}

.rotate{
    transform: rotate(90deg);
}

.letter-rotate{
    transform: rotate(-90deg);
}

p{margin:0;text-align:center;}

.hex {
    float: left;
    margin-left: 3px;
    margin-bottom:1px;
    width:125px;
    height:112px;
    text-align:center;
    font-size:80px;
    font-family:arial;
    line-height:130px;
    text-transform:uppercase;
}

.default{
    background-image: url("../images/yellow.png");
    background-size: cover;
    background-position: center center;
}

.blue{
    background-image: url("../images/blue.png") !important;
    background-size: cover;
    background-position: center center;
    color:transparent;
}

.white{
    background-image: url("../images/white.png") !important;
    background-size: cover;
    background-position: center center;
    color:transparent;
}

.hex-row {
    float:left;
    width:125px;
}

.hex-row.even {

    margin-left:-24px;
}

.hex-row.odd {
    margin-top: -56px;
    margin-left:-24px;
}

@-webkit-keyframes selected {
    0%{
        opacity:1;
    }
    25%{
        opacity:0.5;
    }
    50%{
        opacity:0.3;
    }
    75%{
        opacity:0.5;
    }
    100%{
        opacity:1;
    }
}

.selected{-webkit-animation: selected 0.5s infinite;}

/* Yellow */

.yellow-top{border-bottom: 30px solid #F2E457;}
.yellow-middle{background: #F2E457;}
.yellow-bottom{border-top: 30px solid #F2E457;}

.yellow-top-selected{border-bottom: 30px solid #D2B235;}
.yellow-middle-selected{background: #D2B235;}
.yellow-bottom-selected{border-top: 30px solid #D2B235;}

/* Green */
.green-top{
    border-bottom: 30px solid #6C6;
}

.green-middle{
    background: #6C6;
}

.green-bottom{
    border-top: 30px solid #6C6;
}