.wrap-menu {
    position:relative;
    max-width:1200px;
    width:100%;
    height:auto;
    margin:0 auto;
}
.wrap-menu::before {
    content:'';
    padding-top:60%;
    display:block;
}
.wrap-menu .title {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
}
.nav-jauto .wrap-menu::before {
    content:none;
}
.nav-jauto .wrap-menu .title {
    display:none;
}
.wrap-menu .title {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
}
.wrap-menu .title h3 {
    position:relative;
    font: normal normal normal 40px/50px 'Quicksand';
    color: #093E54;
    text-align:center;
    z-index:1;
}
.wrap-menu .title h3 .text {
    position:relative;
    font: normal normal bold 40px/50px Quicksand;
    letter-spacing: 2.4px;
    color: #FFFFFF;
    text-transform: uppercase;
    display:inline-block;
    z-index:1;
}
.wrap-menu .title h3 .bg {
    position:relative;
    display:inline-block;
}
.wrap-menu .title h3 .bg::after,
.wrap-menu .title h3 .bg::before {
    content:'';
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(100% + 80px);
    height: calc(100% + 6px);
    background: #68C396;
    font: normal normal bold 40px/50px Quicksand;
    letter-spacing: 2.4px;
    color: #FFFFFF;
    text-transform: uppercase;
    z-index: 0;
}
.wrap-menu .title h3 .bg::before {
    transform: rotate(0.2deg) translate(-52%,-50%);
}
.wrap-menu .title h3 .bg::after {
    transform:rotate(-1.6deg) translate(-48%,-58%);
}
.wrap-menu a {
    position: absolute;
    width: calc(25% - 0px);
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    text-decoration:none;
    font: normal normal bold 25px/10px 'Quicksand';
    letter-spacing: 0.1px;
    line-height: 30px;
    color: #093E54;
}
.wrap-menu a img{
    max-width:200px;
    max-height:150px;
    margin-bottom:10px;
}
.nav-jauto .wrap-menu a {
    position: relative;
    width: 100%;
    max-width:230px;
    min-height:60px;
    height:auto;
    display:block;
    margin:0 auto;
    text-align:left;
    padding-left:90px;
    padding-top:15px;
    text-decoration:none;
}
.nav-jauto .wrap-menu a img{
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:auto;
    max-width:60px;
    max-height:60px;
    margin-bottom:0;
}
.wrap-menu .item-01 {
    top: 0;
    left: 70%;
    transform:translateX(-70%);
}
.wrap-menu .item-02 {
    right:0;
    top: 30%;
    transform:translateY(-30%);
}
.wrap-menu .item-03 {
    bottom: 25%;
    right:0;
    transform:translateY(25%);
}
.wrap-menu .item-04 {
    bottom: 0;
    left: 70%;
    transform:translateX(-70%);
}
.wrap-menu .item-05 {
    bottom: 0;
    left: 30%;
    transform:translateX(-30%);
}
.wrap-menu .item-06 {
    bottom: 25%;
    left: 0;
    transform:translateY(25%);
}
.wrap-menu .item-07 {
    left: 0;
    top: 30%;
    transform:translateY(-30%);
}
.wrap-menu .item-08 {
    top:0;
    left: 30%;
    transform:translateX(-30%);
}
.wrap-menu .item-09 {
    top:0;
    left: 30%;
    transform:translateX(-30%);
}
.wrap-menu .item-10 {
    top:0;
    left: 30%;
    transform:translateX(-30%);
}
.nav-jauto .wrap-menu .item-01,
.nav-jauto .wrap-menu .item-02,
.nav-jauto .wrap-menu .item-03,
.nav-jauto .wrap-menu .item-04,
.nav-jauto .wrap-menu .item-05,
.nav-jauto .wrap-menu .item-06,
.nav-jauto .wrap-menu .item-07,
.nav-jauto .wrap-menu .item-08,
.nav-jauto .wrap-menu .item-09,
.nav-jauto .wrap-menu .item-10 {
    top:inherit;
    left: inherit;
    right: inherit;
    transform:inherit;
}
@media (max-width:1024px){
    .wrap-menu a {
        font: normal normal bold 20px/10px 'Quicksand';
    }
    .wrap-menu a img{
        max-width:110px;
        max-height:100px;
    }
    .wrap-menu .title h3 .text {
        font: normal normal bold 30px/40px Quicksand;
    }
    .wrap-menu .title h3 .bg::after,
    .wrap-menu .title h3 .bg::before {
        width: calc(100% + 80px);
        height: calc(100% + 6px);
    }
}
@media (max-width:767px){
    .wrap-menu a {
        font: normal normal bold 15px/10px 'Quicksand';
    }
    .wrap-menu a img{
        max-width:70px;
        max-height:100px;
    }
    .wrap-menu .title h3 {
        font: normal normal normal 15px/20px 'Quicksand';
    }
    .wrap-menu .title h3 .text {
        font: normal normal bold 15px/20px Quicksand;
    }
    .wrap-menu .title h3 .bg::after,
    .wrap-menu .title h3 .bg::before {
        width: calc(100% + 50px);
        height: calc(100% + 6px);
    }
}

@media (max-width:500px){
    .wrap-menu a {
        font: normal normal bold 12px 'Quicksand';
    }
    .wrap-menu a img{
        max-width:60px;
        max-height:60px;
    }
    .wrap-menu .title h3 {
        font: normal normal normal 13px 'Quicksand';
    }
    .wrap-menu .title h3 .text {
        font: normal normal bold 12px 'Quicksand';
    }
    .wrap-menu .title h3 .bg::after,
    .wrap-menu .title h3 .bg::before {
        width: calc(100% + 20px);
        height: calc(100% + 5px);
    }
}