.view {
    color: #7D7D7D;
    font-family: 'moderat', Helvetica, sans-serif;
    font-size: 16px;
    height: 40px;
    /* padding: 0px 50px 0px 50px; */
    overflow: hidden;
    position: relative;
    text-align: center;
    /* text-transform: uppercase; */
    /* width: 130px; */
    margin-top: 5px;
}

.view:last-child {
     margin: 0px;
}

.view .mask, .view .content {
     height: 30px;
     left: 0px;
     overflow: hidden;
     position: absolute;
     top: 0px;
     width: 110px;
}

.view a {
     color: #000000;
     display: inline-block;
     font-family: 'moderat',Helvetica,sans-serif;
     margin-top: 8px;
     text-decoration: none !important;
     border-bottom: none !important;
     /*text-transform: uppercase;*/
}

.view a:hover {
     color: #FFFFFF;
}

.view-first .mask {
     opacity: 1;
     transition: all 0.2s ease-in-out 0s;
}

.view-first {
    background: none repeat scroll 0% 0% #FFFFFF;
    opacity: 1;
    transition: all 0s ease-in-out 0s;
    border-radius: 20px;
    margin: 5% 10% 5% 10%;
}

.view-first a {
     opacity: 1;
     transition: all 0.2s ease-in-out 0s;
}

.view-first:hover {
     background-color: #000000;
     opacity: 1;
}

.view-first:hover a {
     color: #FFF;
}

.view-first:hover .mask {
     opacity: 1;
}