div.modOffer {margin:-80px auto 80px;position:relative;max-width:1200px;padding:0 100px}
div.modOffer div.nav {position:absolute;z-index:0;left:10px;right:10px;top:0;bottom:0;height:64px;margin:auto 0;text-align:right}
div.modOffer div.nav a {display:inline-block;width:64px;height:64px;transition:opacity .1s, visibility .1s, background-color .1s;background-color:#f1f4f5;border-radius:4px;position:relative}
div.modOffer div.nav a.p {float:left}
div.modOffer div.nav a::before {content:'';position:absolute;width:30px;height:30px;background:url('../images/arrow.png') no-repeat 0 0;background-size:200% 200%;left:0;right:0;bottom:0;top:0;margin:auto}
div.modOffer div.nav a.n::before {background-position:100% 0}
div.modOffer div.nav a:hover {background-color:#dae7ec}
div.modOffer div.nav a.hc {visibility:hidden;opacity:0;}
div.sliderWrap+div.modOffer {margin-top:-185px}
div.modOffer>div.limit {position:relative;z-index:1}
div.modOffer ul {list-style:none;display:flex;overflow:hidden}
div.modOffer li {flex:0 1 22.495%;min-width:22.495%;margin-left:3.34%}
div.modOffer li:first-child {margin-left:0;}
div.modOffer li a {display:block;color:#538f45;background-color:#98e388;box-sizing: border-box;height:100%;border-radius:10px;overflow:hidden;position:relative;background-repeat:no-repeat;background-size:0 0;padding-bottom:30px;transition:background-color .2s}
div.modOffer li a::before {content:'';display:block;height:105px;background-color:#9dec8c;margin-bottom:30px;transition:background-color .2s;}
div.modOffer li a[style*="background-image"]::after {content:'';position:absolute;top:23px;left:30px;height:64px;width:64px;background-image:inherit;background-repeat:no-repeat;background-position:0 0;background-size:auto 200%}
div.modOffer li div.title {margin:0 30px 30px;color:#406738;font-weight:500}
div.modOffer li div.msg {margin:0 30px;font-size:14px;line-height:1.5}

div.modOffer li a:hover {background-color:#f1f1f1;color: #608791}
div.modOffer li a:hover::before {background-color:#fcfcfc;}
div.modOffer li a:hover div.title {color: #07465e;}
div.modOffer li a[style*="background-image"]:hover::after {filter:brightness(70%);background-position:0 100%}

div.offers {margin:40px auto}
div.offers ul {list-style:none;display:flex;flex-wrap: wrap}
div.offers li {flex:0 1 22.495%;min-width:22.495%;margin-left:3.34%;margin-bottom:20px}
div.offers li:nth-child(4n+1) {margin-left:0;}

div.offers li a {display:block;color:#538f45;background-color:#98e388;box-sizing: border-box;height:100%;border-radius:10px;overflow:hidden;position:relative;background-repeat:no-repeat;background-size:0 0;padding-bottom:30px;transition:background-color .2s;}
div.offers li a::before {content:'';display:block;height:105px;background-color:#9dec8c;margin-bottom:30px;transition:background-color .2s;}
div.offers li a[style*="background-image"]::after {content:'';position:absolute;top:23px;left:30px;height:64px;width:64px;background-image:inherit;background-repeat:no-repeat;background-position:0 0;background-size:auto 200%}
div.offers li div.title {margin:0 30px 30px;color:#406738;font-weight:500}
div.offers li div.msg {margin:0 30px;font-size:14px;line-height:1.5}

div.offers li a:hover {background-color:#f1f1f1;color: #608791}
div.offers li a:hover::before {background-color:#fcfcfc;}
div.offers li a:hover div.title {color: #07465e;}
div.offers li a[style*="background-image"]:hover::after {filter:brightness(70%);background-position:0 100%}

@media screen and (max-width:1020px){
    div.modOffer li,
    div.offers li {min-width:31.1%;margin-left:3.35%}
    div.modOffer li div.title,
    div.offers li div.title {margin:0 20px 20px}
    div.modOffer li div.msg,
    div.offers li div.msg {margin:0 20px;}
    div.offers li:nth-child(4n+1) {margin-left:3.35%;}
    div.offers li:nth-child(3n+1) {margin-left:0;}
}
@media screen and (max-width:880px){
    div.modOffer li,
    div.offers li {min-width:48.88%;margin-left:2.24%}
    div.modOffer li div.title,
    div.offers li div.title {margin:0 20px 20px}
    div.modOffer li div.msg,
    div.offers li div.msg {margin:0 20px;}
    div.offers li:nth-child(3n+1),
    div.offers li:nth-child(4n+1) {margin-left:2.24%;}
    div.offers li:nth-child(2n+1) {margin-left:0;}
}
@media screen and (max-width:768px){
    div.modOffer,
    div.sliderWrap+div.modOffer {margin:0 auto 40px;padding:0 10px;}
    div.modOffer div.nav {display:none;}
    div.modOffer ul {overflow:auto;flex-wrap:wrap;}
    div.modOffer li,
    div.offers li {margin-bottom:10px;}
    div.modOffer li:nth-child(2n+1) {margin-left:0;}
    div.modOffer li div.msg,
    div.offers li div.msg {display:none;}
    div.modOffer li div.title,
    div.offers li div.title {margin:0 20px;}
    div.modOffer li a,
    div.offers li a {padding-bottom:20px;}
    div.modOffer li a::before,
    div.offers li a::before {margin-bottom:20px;}
    div.modOffer li a[style*="background-image"]::after,
    div.offers li a[style*="background-image"]::after {left:20px;}
}