body.menu--active .header nav {
transform: translateX(0);
      transition: 0.5s ease transform;
}

body.menu--active {
overflow: hidden;
}

.menu {
display: flex;
      justify-content: center;
      align-items: center;
}

.url a, .sub-menu a, .sub-menu-name {
display: inline-block;
      font-size: 13px;
      text-transform: uppercase;
      padding: 25px;
      color: #222;
      border-top: 3px solid transparent;
      transition: 0.3s ease;
      position: relative;
      z-index: 10;
}

.url a:hover, .sub-menu a:hover, .sub-menu-name:hover {
background-color: #f8f8f8;
      border-top: 3px solid #d60000;
}

li.sub-menu {
position: relative;
}

ul.sub-menu {
position: absolute;
      display: none;
      padding: 20px 0;
      width: 168px;
      background-color: #fff;
      z-index: 10;
      top: 100%;
      left: 0;
}

ul.sub-menu .url {
padding: 0 10px;
      background-color: #fff;
}

ul.sub-menu .url a {
font-size: 13px;
      text-transform: uppercase;
      text-decoration: none;
      color: #4c4c4c;
      border-top: none;
      border-top: 1px solid #4c4c4c;
      padding: 7px 0;
      width: 100%;
}

ul.sub-menu .url:first-child a {
border-top: none;
}

ul.sub-menu .url a:hover {
background-color: transparent;
}

.menu li.sub-menu ul.sub-menu li.url a:hover {
color: #4bb8dc;
}

.arrow {
display: none;
}

.burger {
display: none;
      position: relative;
      z-index: 2;
      width: 25px;
      height: 25px;
}

.burger::before, .burger::after {
content: "";
      position: absolute;
      left: 0;
      width: 100%;
      height: 3px;
      display: block;
      background-color: #1f418b;
      border-radius: 10px;
      transition: 0.3s;
}

.burger::before {
top: 5px;
}

.burger::after {
bottom: 5px;
}

.burger.active::before {
transform: rotate(45deg);
      top: 11px;
}

.burger.active::after {
transform: rotate(-45deg);
      bottom: 11px;
}

@media (max-width: 1220px) {
.url a, .sub-menu a, .sub-menu-name {
padding: 20px 10px;
}
}

@media (max-width: 850px) {
.burger {
display: block;
}
}

@media (max-width: 850px) {
.header nav {
position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        width: 280px;
        background-color: #fff;
        border-right: 3px solid #1f418b;
        transform: translateX(-100%);
        z-index: 5;
}
}

@media (max-width: 850px) {
.menu {
display: block;
        height: 100%;
}
}

@media (max-width: 850px) {
.menu-name {
width: 100%;
}
}

@media (max-width: 850px) {
.url a, .sub-menu a, .sub-menu-name {
width: 100%;
        padding: 20px 20px;
}
}

@media (max-width: 850px) {
ul.sub-menu {
width: 100%;
        position: static;
}
}

@media (max-width: 850px) {
ul.sub-menu .url {
width: 100%;
        padding: 0 32px;
        background-color: #fff;
}
}