.menuTop {max-width:1200px;position: relative;z-index:10;margin:0 auto}
.menuTop ul {list-style:none;display:flex;justify-content: flex-end;position:relative;z-index:0}
.menuTop li.submenu {position:relative}
.menuTop li+li {margin-left:50px}
.menuTop li a {display:block;position:relative;color:#fff;font-weight:500;text-transform:uppercase;height:55px}
.menuTop li a::after {content:'';position:absolute;bottom:10px;right:0;left:0;margin:0 auto;height:5px;max-width:45px;background-color:#eefc9b;display:none}
.menuTop li a:hover,
.menuTop li a.sel {color:#eefc9b}
.menuTop li a:hover::after,
.menuTop li a.sel::after {display:block}
.menuTop li a.submenu,
.menuTop li a.suboffer {position:relative}
.menuTop li ul {display:block}
.menuTop li li+li {margin-left:0}
.menuTop li ul:not(.offer) {position:absolute;background-color:#fff;top:100%;left:50%;transform:translateX(-50%);visibility:hidden;opacity:0;transition:visibility .3s, opacity .3s;}
.menuTop li li a {display:block;text-align:left;height:auto;white-space:nowrap;padding:0;text-transform:none;color:#597e9e;font-size:18px;position:relative;transition:color .2s}
.menuTop li li a::before {content:'';position:absolute;z-index:-1;background-color:#0284b7;top:0;right:100%;bottom:0;left:0;transition:right .4s}
.menuTop li li a:hover,
.menuTop li li a.sel {color:#fff;/*background-color:#0284b7*/;}
.menuTop li li a:hover::before,
.menuTop li li a.sel::before {right:0}
.menuTop li li a::after {content:none}
.menuTop li li span {display:block;background-repeat:no-repeat;padding:15px;background-size:0 0}
.menuTop li li span[style*="background-image"]::before {content:'';width:30px;height:30px;display:inline-block;vertical-align:middle;background-image:inherit;background-repeat:no-repeat;background-size:auto 200%;background-position:0 100%;margin-right:10px;filter:brightness(70%);transition:filter .2s}
.menuTop li li a:hover>span[style*="background-image"]::before,
.menuTop li li a.sel>span[style*="background-image"]::before {filter:brightness(0%) invert(100%)}
.menuTop li div.offer {position:absolute;display:flex;background-color:#fff;top:100%;right:0;visibility:hidden;opacity:0;transition:visibility .3s, opacity .3s;box-shadow:0px 5px 5px rgba(0, 0, 0, 0.1)}
.menuTop li:hover>div.offer,
.menuTop li:hover>ul {visibility:visible;opacity:1}

.menuTop li div.offer>ul {min-width:500px;}
.menuTop li div.offer li a {background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAMCAYAAAC5tzfZAAAABHNCSVQICAgIfAhkiAAAAHlJREFUKJGV0TEOAQEQBdAfNuIAROUIat1exgFFIZGgEJegULiD2tNsodiwM80Uk5eZ/El6CmvcMeub9xbG2OJWhQ32HVxU4ARHPKpwiss3bLBJsvxjn0naJKckq1GS+YCF766/KuddByfZBXGugkMFNNiVnov2F/gAIgeI2IYFWksAAAAASUVORK5CYII=');background-repeat:no-repeat;background-position: right 20px center}
.menuTop li div.offer a.info {background-color:#eef4f6;color:#597e9e;font-size:16px;padding:20px;width:400px;display:flex;height:auto;font-weight:300;text-transform:none}
.menuTop li div.offer a.info::after {content:none}
.menuTop li div.offer a.info>div {margin:auto}
.menuTop li div.offer a.info img {max-width:100%;width:auto;height:auto;max-height:240px;display:block;margin:0 auto 10px;}

div.menuBottom {color:#fff;background-color:#012a3a}
div.menuBottom ul {list-style:none;max-width:1200px;margin:0 auto;padding:0 10px}
div.menuBottom li {display:inline-block}
div.menuBottom li+li {margin-left:10px}
div.menuBottom li a {color:#5eabc8;text-decoration:underline;font-size:14px}
div.menuBottom li a:hover {color:#fff;text-decoration:none}

div.menuTop a.showMenu {display:none;text-decoration:none;color:#fff;width:45px;height:45px;text-align:center;outline-style:none;border-radius:5px;background:#129ed5 url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAaCAYAAAC3g3x9AAAABHNCSVQICAgIfAhkiAAAAPVJREFUSIntlKFOQ0EQRc80TcBBg0P1D+AjSBD8BElFEVgCEgmOT8Ag6iAE9zSW9wmvEgU10KqDePvChqQIsoKkvclmZu/u3tzdyU6oNbBHGdShHgPDQoJNIZ2VRqj3wFYhvaZHW5koNGaFjK00Qr2h4F/uA9u0FSqBQSGdNf431GtbjNRDda7eqY36mmKV7btI+XsXk06lvvQy7VPgDNjIuCoihhFxkHGXvxnsp7gA9lNcZOtHagNM0nwGbALjZYKdwzkwTQfynvaUHJ5n3C3fDfkty3eAj/zKE6ACPn86VB86IiJOgOeUXwF1esdd4HGZ8z/jC4zNf/hu8mZxAAAAAElFTkSuQmCC') no-repeat 50% 50%;}
div.menuTop a.showMenu:hover {background-color:#0880b0;}


@media screen and (max-width:980px){
	div.menuTop nav > a {flex:0 2 100px}
	.menuTop li a {font-size:16px;font-weight:normal}
	.menuTop li div.offer div.info {width:300px}
	.menuTop li li a>span {padding:10px}
}

@media screen and (max-width:768px){
	.menuTop {margin:0 0 0 auto;}
	div.menuTop nav {display:none;height:auto;position:fixed;right:-90%;width:90%;top:65px;bottom:0;overflow:auto;background-color:#fff}
	.menuTop li+li {border-top:1px dotted #c5d2dd;margin-left:0}
	.menuTop li div.offer {visibility:visible;opacity:1;transition:none;display:block;position:static;border-top:1px dotted #c5d2dd;background-color:transparent;box-shadow:none;}
	.menuTop li div.offer > ul {min-width:0}
	.menuTop li div.offer a.info {display:none}
	.menuTop ul {display:block}
	.menuTop li a {display:block;padding:15px 20px;text-align:left;height:auto;color:#0284b7;font-size:15px;white-space:normal;}
	.menuTop li li a {display:block;padding:10px 20px 10px 45px;text-align:left;height:auto;color:#0284b7;font-size:15px;white-space:normal;}
	.menuTop li a::before,
	.menuTop li li a::before {content:none}
	.menuTop li a:hover,
	.menuTop li a.sel,
	.menuTop li li a:hover,
	.menuTop li li a.sel {background-color:#0284b7;color:#fff}
	.menuTop li a::after {content:none}
	.menuTop li ul:not(.offer) {position:static}
	.menuTop li li a>span[style*="background-image"]::before {content:none}
	.menuTop li li a>span {display:inline;padding:0}
	.menuTop li li a>span::before {content:none}
	.menuTop li div.offer li a {background-image:none}
	div.menuTop a.showMenu {display:inline-block}
}