#menu{position:absolute;left:50%;-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);-o-transform:translateX(-50%);transform:translateX(-50%);width:100%;max-width:1725px;display:grid;display:-moz-grid;grid-template-columns:repeat(3,1fr);opacity:0;pointer-events:none;z-index:-1;min-height:30vh}
#menu.open{opacity:1;pointer-events:all;z-index:50}
.menu__uls{position:relative;opacity:0;pointer-events:none}
.menu__uls.open{opacity:1;pointer-events:all}
.menu__ul{position:absolute;top:0;left:0;width:100%;height:100%;padding:30px 0;margin:0;list-style:none;opacity:0;pointer-events:none;z-index:1;overflow:auto}
.menu__ul--1{background-color:#272727;position:relative}
.menu__ul--2{background-color:#333}
.menu__ul--3{background-color:#464646}
.menu__ul.open{opacity:1;pointer-events:all;z-index:2}
.menu__li,.menu__back{position:relative;display:block;width:100%;padding:0 20px}
.menu__link{display:flex;display:-webkit-flex;justify-content:space-between;align-items:center;padding:15px 20px;position:relative;width:100%;color:#fff;background-color:transparent;text-transform:uppercase;font-weight:700;font-size:  17px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px}
.menu__link--1.menu__link--selected{background-color:#464646}
.menu__link--2.menu__link--selected{background-color:#464646}
.menu__link--3.menu__link--selected{background-color:#333}
.menu__link > svg{display:inline-block;position:absolute;top:50%;right:10px;-webkit-transform:translateY(-50%);-moz-transform:translateY(-50%);-ms-transform:translateY(-50%);-o-transform:translateY(-50%);transform:translateY(-50%);width:8px;height:auto}
.menu__back > svg{display:inline-block;position:relative;width:20px;height:20px;margin-right:10px;top:-1px}
@media screen and (min-width: 1251px) {
    .menu__link:hover{cursor:pointer}
    .menu__link--1:hover{background-color:#464646}
    .menu__link--2:hover{background-color:#464646}
    .menu__link--3:hover{background-color:#333}

    .menu__ul--2, .menu__ul--3 {left: -1px;}
}
@media screen and (max-width: 1250px) {
    #menu{display:block;height:calc(100vh - 50px)}
    .menu__uls{width:100%;height:100%;position:absolute;top:0;left:0;z-index:1;-webkit-transition:left .3s ease;-moz-transition:left .3s ease;-ms-transition:left .3s ease;-o-transition:left .3s ease;transition:left .3s ease;opacity:1}
    .menu__uls--1{z-index:1}
    .menu__uls--2{z-index:2;left:100%}
    .menu__uls--3{z-index:3;left:100%}
    .menu__uls--2.open,.menu__uls--3.open{left:0}
    .menu__ul{padding:30px 0 20%}
    .menu__li,.menu__back{padding:0 5px}
    .menu__link{padding:10px 30px 10px 10px}
    .menu__back{display:flex;display:-webkit-flex;align-items:center;justify-content:flex-start;padding:10px;color:#fff;font-weight:700;font-size:  18px;text-transform:uppercase;border-bottom:1px solid #474747}
}