/* ++++++ CSS RESET======= */

*{
    margin: 0;
    padding: 0;
}


/* =========== COLOR CLASSES =========== */

.off-white {
    background-color: #ebeae8;
}

.off-white:hover{
    background-color: #63b6ff;
}

.off-black {
    background-color: #100d08;
}

.off-black:hover{
    background-color: #00ff8c;
}

.tomato {
    background-color: #ea6427;
}

.tomato:hover{
    background-color: #16a8db;
}

.lemon {
    background-color: #fff333;
}

.lemon:hover{
    background-color: #010cca;
}

.navy {
    background-color: #05326b;
}

.navy:hover{
    background-color: #13eefd;
}

.army {
    background-color: #007258;
}

.army:hover{
    background-color: #4a17f1;
}

.teal {
    background-color: #00a2a4;
}

.teal:hover{
    background-color: #22d7e0;
}
h1, h2{
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 17px;
    color: #000000;
    text-align: center;
    padding-top: 25px;
}

ul {
    text-align: center;

}

ul li{
    display: inline-block;
}

ul li a{
    text-decoration: none;
    font-family: cdlight;
    font-size: 15px;
    display: inline-block;
    color: black;
    display: inline-block;
    margin: 5px;
    margin-bottom: 10px;
    margin-top: 10px;
}

a:hover {
    color: #00a2a4;
}



main#canvas {
    margin: auto;
    margin-top: 25pt;
    width: 650px;
    height: 325px;
}

.column1 {
    float: left;
    width: 2.77777778%;
    height: 100%;
}

.column2 {
    float: left;
    width: 5.55555556%;
    height: 100%;
}

.column3 {
    float: left;
    width: 8.33333333%;
    height: 100%;
}

.column4 {
    float: left;
    width: 16.6666667%;
    height: 100%;
}

.row1 {
    width: 100%;
    height: 5.55555556%;
}

.row2 {
    width: 100%;
    height: 11.1111111%;
}

.row3 {
    width: 100%;
    height: 33.3333333%;
}