﻿.quickWrapper {
    /* display: grid; */
    /*grid-template-columns: 1fr 1fr 1fr 1fr;*/
    /*	grid-gap: 20px;*/
    /*	grid-template-columns: repeat(auto-fit, minmax(180px, 230px));*/
    /* grid-template-columns: repeat(auto-fit, minmax(150px, calc(25% - 16px)));
    grid-template-columns: repeat(auto-fit, minmax(150px, 25%));
    grid-auto-rows: 1fr; */
    z-index: 1;
    position: relative;
    min-height: 68px;
    margin-left: -150px;
    z-index: 999;
}
.quickWrapper a {
    text-align: center;
    text-decoration: none; 
    color: #ffffff;
    /* max-width: 370px;
    width: calc(100% - 80px); */
    min-height: 130px;
    font-size: 2.2rem;
    line-height: 2.5rem;
    font-weight: 400;
    margin-bottom: 0px;
    border: 15px solid #fff;
    border-bottom: 10px solid #fff !important;
    border-top: 10px solid #fff !important;
    margin-top: 0 !important;
    position: relative;
    overflow: hidden;
    transition: 0.80s all;
    display: block;
  }
  .quickWrapper a img {
    width: 100%;
    height: auto;
    transition: 0.80s all;
  }
  .quickWrapper a:hover img {
    transform: scale(1.1);
  }
    
    .quickWrapper a:last-child {
        border-bottom: 15px solid #fff !important;
    }
    .quickWrapper a:first-child {
        border-top: 15px solid #fff !important;
    }
    .quickWrapper a span {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        font-size: 2.2rem;
        line-height: 2.5rem;
        font-weight: 400;
        color: #fff;
        display: flex;
        align-items: center;
        padding: 10px 40px 10px 20px !important;
        text-align: left;
    }
    .quickWrapper img {
        width: 100% !important;
    }
    .quickWrapper a span:after {
        content: "";
        background: url(../Images/quick-link-arrow.png) no-repeat;
        position: absolute;
        right: 35px;
        bottom: 15px;
        z-index: 6;
        width: 41px;
        height: 38px;
        transition: 0.3s all;
    }
    .quickWrapper a:hover span:after {
        right: 20px;
    }
    /*.quickWrapper > a:before {
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        position: absolute;*/
        /*	top: 14px;*/
        /*left: 17px;
        background-size: 42px auto !important;
    }*/
    @media (max-width: 1200px) and (min-width: 991px)  {
        .quickWrapper {
            position: absolute;
            margin-left: 0;
            right: 10px;
        }
        .quickWrapper a {
            max-width: 400px;
        }
    }
    @media (max-width: 990px) {
        .quickWrapper {
            display: flex;
            margin-left: 0 !important;
        }
        /* .quickWrapper a {
            max-width: 44% !important;
            border: none !important;
            border-top: none !important;
            margin-bottom: 0 !important;
            margin: 0 !important;
            padding: 10px 3% !important;
        } */
        .quickWrapper a:last-child, .quickWrapper a:first-child {
            border-top: 0 !important;
            border-bottom: 0 !important;
            border-left: 0 !important;
            border-right: 0 !important;
        }
    }
    @media (max-width: 580px) {
        .quickWrapper a span {
            font-size: 1.6rem;
            line-height: 2rem;
            font-weight: 400;
            color: #fff;
            padding: 10px 80px 10px 20px !important;
        }
        .quickWrapper a span:after {
            background-size: cover;
            right: 25px;
            bottom: 10px;
            width: 20px;
            height: 20px;
        }
        .quickWrapper a {
            min-height: 40px !important;
        }
        .quickWrapper a:hover span:after {
            right: 10px;
        }
    }
    @media (max-width: 486px) {
        .quickWrapper a span {
            font-size: 1.4rem;
            line-height: 1.6rem;
            font-weight: 400;
            color: #fff;
            padding: 10px 10px 10px 20px !important;
        }
        .quickWrapper a span:after {
            background-size: cover;
            right: 10px;
            bottom: 10px;
            width: 14px;
            height: 14px;
        }
    }
