.mobile-quick-links {
    display: none;
}

.quick-links {
    margin: 20px auto;
}

.quick-links ul {
    list-style: none;
    margin: 0px;
    padding: 3% 1.9% 1% !important;
    text-align: left;
    width: 61%;
    display: inline-block;
    min-height: 116px;
    overflow: hidden;
    background: #c4dad8;
}

.quick-links ul.three-ql {
    min-height: 95px;
    background: #6d6e73;
    text-align: center;
    width: 30.8%;
    vertical-align: top;
    border-left: 2px solid #ffffff;
}

/*
.quick-links ul.horizontal {
border-bottom: 2px solid #9E1F35;
margin-bottom: 2%;
}

.quick-links ul.horizontal li {
font-size: 20px;
width: 50%;
background: none;
box-shadow: none;
border-radius: 0;
margin: 0;
padding: 0;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.quick-links ul.horizontal li:hover,.quick-links ul.horizontal li:focus {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none; }

.quick-links ul.horizontal li.active { 
background: #ffffff;
}
*/

.quick-links ul li {
    display: inline-block;
    vertical-align: top;
    width: 31%;
    padding: 1%;
    transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
}

.quick-links ul.three-ql li {
    width: 29%;
    padding: 2%;
}

.quick-links ul li:hover img,
.quick-links ul li:hover span.icon,
.quick-links ul li:focus img,
.quick-links ul li:focus span.icon {
    opacity: 0.8;
}

.quick-links ul.horizontal li:hover,
.quick-links ul.horizontal li:focus {
    background: rgba(255, 255, 255, 0.8);
}

.quick-links ul a {
    color: #ffffff;
    text-decoration: none;
    vertical-align: middle;
    display: block;
}

.quick-links ul a span {
    display: inline-block;
    margin-bottom: 5px;
    line-height: 30px;
}

.quick-links ul a span span {
    display: none;
}

.quick-links ul a span.icon {
    height: 30px;
    width: 10%;
    font-size: 1.4em;
    color: #664c3e;
    text-align: center;
}

.quick-links ul a img {
    height: auto;
    width: 10%;
    font-size: 1.4em;
    color: #664c3e;
    text-align: center;
    display: inline-block;
    margin-bottom: 5px;
    line-height: 30px;
}
.three-ql a span.icon {
    background: #fff;
    line-height: 34px;
    height: 34px;
    width: 34px;
    border-radius: 100%;
}

.quick-links ul a span.icon,
.quick-links ul a img,
.quick-links ul a .qu-text {
    transition: all 0.2s ease-in-out;
    vertical-align: middle;
}

.quick-links ul a:hover span.icon,
.quick-links ul a:hover img,
.quick-links ul a:focus span.icon,
.quick-links ul a:focus img {
    -ms-transform: scale(0.95);
    -webkit-transform: scale(0.95);
    transform: scale(0.95);
}

span.qu-text {
    max-height: 40px;
    font-size: 14px;
    max-width: 200px;
    width: 90%;
}

.qu-text .text-center {
    display: inline-block;
    line-height: normal;
    font-size: 16px;
    font-weight: 500;
    color: #000000;
    margin: 0 10px;
}

.three-ql .qu-text {
    display: block;
    width: auto;
}

.three-ql .qu-text .text-center {
    color: #fff;
}

.three-one a span.icon {
    color: #255229;
    background: #c3dad8;
}
.three-two a span.icon {
    color: #6b4911;
    background: #ffae77;
}
.three-three a span.icon {
    color: #7e4113;
    background: #f4d790;
}

@media screen and (max-width: 1100px) {
    .quick-links ul {
        width: 60%;
    }

    .quick-links ul.three-ql {
        width: 31.6%;
    }

    .qu-text .text-center {
        font-size: 16px;
    }
}

@media screen and (max-width: 840px) {
    .quick-links ul {
        min-height: auto;
    }

    .quick-links ul.three-ql {
        border: none;
    }
    .quick-links ul.three-ql li {
        padding: 1%;
    }
    .quick-links ul,
    .quick-links ul.three-ql {
        width: 96%;
        height: auto !important;
    }
}

@media screen and (max-width: 480px) {
    .quick-links ul li {
        width: 48%;
    }
}