body {
    font-family: "Karla", sans-serif;
    min-height: 100vh;
    background-color: #d0d0ce;
    positon:relative;
    min-width:320px;
}
.bg-color-grey {
    background-color: #d0d0ce;
}
.bg-color-dark-grey {
    background-color: #3e3e3e !important;
}
.bg-color-white {
    background-color: #fff;
}
.btn-secondary{
    background-color: #3e3e3e;
}
.btn-secondary:hover {
    border: 1px solid #a0c55c;
    background-color: #a0c55c;
    color: #000;
}

.apps-nav{
    display: block;
    position:absolute;
    padding: 0;
    text-align: center;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transition: 0.3s ease-in-out;
}
@media (max-width:767px){
    .apps-nav{
        display: block;
        position:absolute;
        top:150px;
        left:50%;
        transform: translate(-50%, 0);
    }
}

.apps-nav-item{
    text-decoration: none;
    display: inline-block;
    position:relative;
    width: 25%;
    min-height: 100px;
    margin:5px;
    min-width:300px;
    background-color:#666666;
    color:#fff;
    border-radius: 20px;
    transition: 0.3s ease-in-out;
    padding:5px;
    overflow:hidden;
}
.apps-nav .apps-nav-icon{
    font-size:3rem;
    transition: 0.3s ease-in-out;
}
.apps-nav .apps-nav-title{
    font-size:1.5rem;
    display:block;
    width:100%;
    position:absolute;
    bottom:5px;
    text-align:center;
    text-transform: uppercase;
    opacity:1;
    transition: 0.3s ease-in-out;
}
.apps-nav a.apps-nav-link{
    display: block;
    width:100%;
    min-height: 100px;
    text-decoration: none;
    color: #fff;
    transition: 0.3s ease-in-out;
    overflow:hidden;
}
.apps-nav .apps-nav-description{
    display: block;
    width:105%;
    height:40%;
    position:absolute;
    top:100%;
    left:50%;
    background-color: #343434;
    color:#fff;
    line-height: 20px;
    transform: translate(-50%, 0);
    -webkit-transform: translate(-50%, 0);
    -moz-transform: translate(-50%, 0);
    -o-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transition: 0.3s ease-in-out;
    opacity:0;
    z-index:1000;
}
.apps-nav .apps-nav-item:hover {
    background-color: #a0c55c;
    color:#006666;
    box-shadow: 0px 0px 20px #000000; 
}
.apps-nav .apps-nav-item:hover .apps-nav-description{
    left:50%;
    transform: translate(-50%, -100%);
    -webkit-transform: translate(-50%, -100%);
    -moz-transform: translate(-50%, -100%);
    -o-transform: translate(-50%, -100%);
    -ms-transform: translate(-50%, -100%);
    opacity:1;
}
.apps-nav .apps-nav-item:hover .apps-nav-title{
    color:#006666;
    letter-spacing: 3px;
    bottom:10px;
    opacity:0;
}
.apps-nav .apps-nav-item:hover .apps-nav-icon{
    font-size:2.5rem; 
}