.sidr { width: 340px; font-size: 15px; background: #fff; color: #293340; display: block; position: fixed; top: 0; height: 100%; z-index: 999999; overflow-x: hidden; overflow-y: auto; }
.sidr.left, #sidr { left: -500px; right: auto; }
.sidr.right { left: auto; right: -500px; }

#dim-overlay { display: block; display: none; position: absolute; width: 100%; height: 100%; background: rgba(0,0,0,0.7); z-index: 10000; }
a#sidr-close, a#menu-close:visited { color: #293340; font-size: 30px; position: absolute; top: 0; right: 0; width: 60px; height: 60px; text-align: center; border-left: 1px solid #ccc; }
a#sidr-close:hover, a#menu-close:focus { opacity: 1; }
a#sidr-close em { display: block; line-height: 60px; }

.sidr .sidr-inner { }
.sidr .sidr-header { height: 63px; width: 100%; border-bottom: 3px solid #ff8c00; background: #fff; position: absolute; top: 0; left: 0; z-index: 1000; }
.sidr-logo { width: 190px; padding: 13px 0 0 17px; }
.sidr .sidr-header .top-card { position: absolute; top: 0; right: 61px; }
.sidr .sidr-header .top-card .qty { line-height: 1.3; }

.sidr ul { margin: 0; padding: 0; }
.sidr ul li a, .sidr ul li a:visited { padding: 10px 20px 10px 17px; font-size: 18px; line-height: 1.3; color: #293340; border-left: 3px solid #fff; }
.sidr ul li a:hover, .sidr ul li a:focus { background: #eee; color: #293340; border-color: #ff8c00; }

.sidr ul.submenu li a, .sidr ul.submenu li a:visited { font-size: 17px; }

.sidr ul li a.link-frame-open { position: relative; }
.sidr ul li a.link-frame-open:after { font-weight: 400; position: absolute; top: 8px; right: 15px; font-size: 22px; content:"\f105"; font-family: Font Awesome\ 5 Pro; }

/*** icons ***/
#mainNavMobile { margin-bottom: 20px; }
#mainNavMobile a { position: relative; padding-left: 50px; }
#mainNavMobile a:before { display: block; content:"\f015"; font-size: 18px; font-weight: 400; position: absolute; top: 10px; left: 15px; font-family: Font Awesome\ 5 Pro; }
#mainNavMobile #mobile-nav-home a:before { content:"\f015"; }
#mainNavMobile #mobile-nav-catalog a:before { content:"\f498"; }
#mainNavMobile #mobile-nav-new a:before { content:"\f06d"; }
#mainNavMobile #mobile-nav-offers a:before { content:"\f295"; }
#mainNavMobile #mobile-nav-masterclasses a:before { content:"\f559"; }
#mainNavMobile #mobile-nav-delivery a:before { content:"\f0d1"; }
#mainNavMobile #mobile-nav-contacts a:before { content:"\f0e0"; }
#mainNavMobile #mobile-nav-download a:before { content:"\f0ed"; }
#mainNavMobile #mobile-nav-favorites a:before { content:"\f004"; }
#mainNavMobile #mobile-nav-user a:before { content:"\f007"; }

/*** lang ***/
#sidr-lang-switcher { padding: 0 20px 20px;}
#sidr-lang-switcher h3 { font-size: 18px; margin: 0 -20px 15px; padding: 0 15px; background: url(../images/line.png) repeat-x 0 13px; }
#sidr-lang-switcher h3 span { padding: 0 5px; background: #fff; display: inline-block; }
#sidr-lang-switcher a { color: #293340; font-size: 11px; padding: 22px 0 0; margin: 0 15px 0 0; width: 23px; opacity: 0.5; display: inline-block; line-height: 1; text-transform: uppercase; text-align: center; }
.sidr .lang-ru { background: url(../images/lang-ru.png) no-repeat 0 0 / 23px auto; }
.sidr .lang-ua { background: url(../images/lang-ua.png) no-repeat 0 0 / 23px auto; }
.sidr .lang-en { background: url(../images/lang-en.png) no-repeat 0 0 / 23px auto; }
#sidr-lang-switcher a.active { font-weight: 700; }
#sidr-lang-switcher a.active, #sidr-lang-switcher a:hover, #sidr-lang-switcher a:focus { opacity: 1; }


.sidr-frame-main { padding: 78px 0 15px; }
/*** sidr-frame ***/
.sidr-frame { padding: 78px 0 15px; position: absolute; top: -300%; left: -100%; width: 100%; height: 100%; background: #fff; z-index: 100;
	-webkit-transition: left 0.05s ease-out, top 0s linear;
	-moz-transition: left 0.05s ease-out, top 0s linear;
	-o-transition: left 0.05s ease-out, top 0s linear;
	transition: left 0.05s ease-out, top 0s linear;
}
.sidr-frame.open { top: 0; left: 0;
	-webkit-transition: left .15s ease-in, top 0s linear;
	-moz-transition: left .15s ease-in, top 0s linear;
	-o-transition: left .15s ease-in, top 0s linear;
    transition: left .15s ease-in, top 0s linear;
}
.frame-close-wrapper { }
.frame-close-wrapper a { font-size: 17px; line-height: 1.3; padding: 10px 20px 10px 40px; background: #f08400; color: #fff; margin-bottom: 10px; text-shadow: rgba(195,107,0,0.75) 0 1px 3px; display: block; text-decoration: none; position: relative; }
.frame-close-wrapper a:hover, .frame-close-wrapper a:focus { text-decoration: none; background-color: #f08400; color: #fff; }
.frame-close-wrapper a:before { display: block; position: absolute; top: 9px; left: 15px; font-size: 20px; content:"\f104"; font-family: Font Awesome\ 5 Pro; }

.sidr-frame-2-level.open .frame-close-wrapper a, .sidr-frame-2-level.open .frame-close-wrapper a:hover, .sidr-frame-2-level.open .frame-close-wrapper a:focus { background: #673899; text-shadow: rgba(74,35,115,0.75) 0 1px 3px; }

.sidr-frame-1-level.open { border-left: 5px solid #ff8c00; }
.sidr-frame-2-level.open { width: 355px; left: 5px; border-left: 5px solid #673899; }


@media (max-width: 360px) {
	.sidr { width: 100%; } .sidr.right { right: -100%; } .sidr.left { left: -100%; }
}