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

.text-lucida
{
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-weight: 400;
    font-style: normal;
    color:#FFFFFF ;
}
main {
    background-color: #3399CC;
    min-height: 100vh;
}

.container
{
  max-width: 1170px;
  margin: 0 auto;  
}

h1 {
    padding-top: 66px;
    font-size: 21px;
    margin-bottom: 36px;
}

ul {
    font-size: 0;
    width: 100%;
    text-align: center;
    list-style: none;
    border: 2px solid #FFFFFF;
    background-color: #FFFFFF;
    line-height: normal
}

li {
    font-size: 22px;
    display: inline-block;
    line-height: 2;
    padding-top: 25px;
    cursor: pointer;
     border: 3px solid #FFFFFF;
     height: 147px;
     text-align: center;
}

ul:hover li {
    opacity: 70%;
    transition: all .1s ease-in;
}

ul li:hover {
       opacity: 100%;
       transition: all .1s ease-in;
}

.box-blue {
    width: 50%;
    background-color: #3399CC;
}

.box-turquoise {
    width: 25%;
    background-color:#33CCCC ;
}

.box-purple {
    width: 25%;
    background-color:#996699 ;
}

.box-brown {
    width: 25%;
    background-color: #C24747;
}

.box-coral {
    width: 25%;
    background-color: #E2674A;
}

.box-yelow {
     width: 25%;
    background-color:#FFCC66;
}

.box-light-green {
     width: 25%;
    background-color:#99CC99;
}

.box-teal {
    width: 25%;
    background-color: #669999;
}

.box-rose-pink {
    width: 50%;
    background-color:#CC6699 ;
}

.box-green {
    width: 25%;
    background-color: #339966;
}

.box-slate-blue {
    width: 100%;
    background-color:#666699 ;
}

li > i {
    font-size: 42px;
    vertical-align: middle
}

p {
    font-size: 16px;
    margin-top: 35px;
}