STEP Mobile menus from right colorful plus shadow

/* Mobile content windows moving from right
background: #4e2e2c
text: #fff
hover: #bf9e9c
extras background: #3f2523
*/

.toggle-window-arr {left: unset;right: 40px;text-align: right;}
.continue-shopping::before {margin-right: 0;-moz-transform: scale(-1, -1);-o-transform: scale(-1, -1); -webkit-transform: scale(-1, -1); transform: scale(-1, -1);}

/* mobile menu from right */
@media (max-width: 768px) {
.navigation-window-visible #navigation {width: 90%;}
.overall-wrapper {transition: margin 400ms;}
.navigation-window-visible .overall-wrapper {margin-left: -90%; width: 100%;}
.navigation-window-visible .top-navigation-menu {display: none !important;}
.navigation-window-visible .container>div.top-navigation-contacts {left: unset !important; right: 10px;}
.navigation-window-visible .container>div.top-navigation-contacts a {color: #fff;}
.navigation-window-visible .navigation-in {-webkit-box-shadow: inset 20px 0 12px -6px #00000027; -moz-box-shadow: inset 20px 0 12px -6px #00000027; box-shadow: inset 20px 0 12px -6px #00000027;
}

.navigation-in {background-color: #4e2e2c;}
.navigation-in a {color: #fff !important; font-size: 24px;}
.navigation-in .menu-level-2 a {color: #a3a3a3;}
.navigation-in ul li a b {font-weight: 400;}
.navigation-in a:hover {color: #bf9e9c !important;}
.navigation-in ul li a {text-align: center; padding: 20px;}
.navigation-in ul.menu-level-2 li a {padding: 20px;font-size: 18px;color: #444444;}
.navigation-in ul.menu-level-2, .menu-helper>ul { background-color: #3f2523; border-color: #3f2523;}
.navigation-in>ul>li {border-color: transparent;}
.navigation-in .menu-level-1:before {
content: ''; height: 100px; width: 80%; margin: 10%; display: block;
background: url("https://cdn.myshoptet.com/usr/432643.myshoptet.com/user/logos/127630716_131621015407148_1907343431568840963_n.png");
background-repeat: no-repeat; background-size: contain; background-position: center;}
.navigation-close {color: #fff;}
}

/* cart from right */
@media (max-width: 768px) {
.content-window.cart-window {width: 0px;left: unset; right: 0;}
.cart-window-visible .content-window.cart-window {width: 90%;left: unset; right: 0;}
.overall-wrapper {transition: margin 400ms;}
.cart-window-visible .overall-wrapper {margin-left: -90%; width: 100%;}
.cart-window-visible .content-window.cart-window, .cart-window-visible .content-window.cart-window .content-window-in{background-color: #4e2e2c;-webkit-box-shadow: inset 20px 0 12px -6px #00000027; -moz-box-shadow: inset 20px 0 12px -6px #00000027; box-shadow: inset 20px 0 12px -6px #00000027;}
.cart-window-visible .content-window.cart-window *:not(.btn) {color: #fff !important;}
.cart-window-visible .content-window.cart-window a:hover {color: #bf9e9c !important;}

.cart-window-visible .cart-table tr td {background-color: #4e2e2c;}
.cart-window-visible .cart-heading, .cart-heading.h1 {font-size: 30px;}
.cart-window-visible .contact-box ul li>span::before {color: #fff !important;}
.cart-window-visible .form-control {border-color: #3f2523; color: #666; background-color: #3f2523;}
}

/* login from right */
@media (max-width: 768px) {
.user-action {width: 0px;left: unset; right: 0; height: 100%;transition: width 400ms;}
.login-window-visible .content-window-in.login-window-in {width: 100%;left: unset; right: 0;}
.overall-wrapper {transition: margin 400ms;}
.login-window-visible .overall-wrapper {margin-left: -90%; width: 100%;}
.login-window-visible .user-action {right: 0; width: 90%;}
.content-window-in.login-window-in, .cart-window-visible .content-window.cart-window .content-window-in{background-color: #4e2e2c;-webkit-box-shadow: inset 20px 0 12px -6px #00000027; -moz-box-shadow: inset 20px 0 12px -6px #00000027; box-shadow: inset 20px 0 12px -6px #00000027;}
.content-window-in.login-window-in *:not(.btn):not(.user-action-tabs a) {color: #fff !important;}
.content-window-in.login-window-in a:hover {color: #bf9e9c !important;}
.login-window-visible .form-control{border-color: #3f2523; color: #666; background-color: #3f2523;}
}

/* search from right */
@media (max-width: 768px) {
.content-window.search-window {width: 0px;left: unset; right: 0;}
.search-window-visible .content-window.search-window {width: 90%;left: unset; right: 0;}
.overall-wrapper {transition: margin 400ms;}
.search-window-visible .overall-wrapper {margin-left: -90%; width: 100%;}
.search-window-visible .content-window.search-window, .search-window-visible .content-window.search-window .content-window-in{background-color: #4e2e2c;-webkit-box-shadow: inset 20px 0 12px -6px #00000027; -moz-box-shadow: inset 20px 0 12px -6px #00000027; box-shadow: inset 20px 0 12px -6px #00000027;}
.search-window-visible .content-window.search-window *:not(.btn) {color: #fff !important;}
.search-window-visible .content-window.search-window a:hover {color: #bf9e9c !important;}
.search-window-visible .form-control {border-color: #3f2523; color: #666; background-color: #3f2523;}
}