.sidr { display: none; position: absolute; position: fixed; top:0; height:100%; z-index:999999; width:260px; overflow-x:none; overflow-y:auto; } .sidr .sidr-inner { padding: 0; height: 100%; position: relative; } .sidr { width: 360px; } .sidr.sidr-right { right: -360px; } .sidr.sidr-left { left: -360px; } .sidr.sidr-wide { width: 100%; } .sidr.sidr-right.sidr-wide { right: -100%; } .sidr.sidr-left.sidr-wide { left: -100%; } .sidr { background: var(--BRAND_COLOR); color: var(--WHITE_COLOR); /*-webkit-box-shadow: rgba(0,0,0,0.5) 0px 0 10px; -moz-box-shadow: rgba(0,0,0,0.5) 0px 0 10px; box-shadow: rgba(0,0,0,0.5) 0px 0 10px;*/ } /*** close **/ .sidr-close, .sidr-close:visited { color: var(--WHITE_COLOR); position: fixed; top: 0; left: 300px; width: 50px !important; height: 50px; padding: 10px; z-index: 1000; text-decoration: none; } .sidr-close:hover, .sidr-close:focus { color: var(--WHITE_COLOR); outline: none; text-decoration: none; } .sidr-right a.sidr-close, .sidr-right .sidr-close:visited, .sidr-wide .sidr-close, .sidr-wide .sidr-close:visited { left: 0; right: auto; } .sidr-close em { font-size: 22px; width: 100%; height: 100%; line-height: 50px; text-align: center; top: 15px; right: 15px; /* -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; */ } /*** hdr ***/ .sidr-hdr { width: 360px; min-width: 300px !important; height: 50px; border-bottom: 1px solid rgba(0,0,0, .3); opacity: 0; background: var(--BRAND_COLOR); padding: 0; z-index: 101; position: fixed; top: 0; left: 0; } .sidr-wide .sidr-hdr { width: 100%; } .sidr.sidr-right .sidr-hdr { left: auto; right: 0; } /*** logo ***/ .sidr-logo { width: 200px; position: relative; left: calc(50% - 100px); top: 10px; } .sidr-logout { position: absolute; top: 20px; left: 220px; padding-left: 20px; } .sidr-logout a, .sidr-logout a:visited { } .sidr-logout a:hover, .sidr-logout a:focus { } .sidr ul { display: block; } .sidr ul li { font-size: 1rem; overflow: hidden; display: block; border-top: 1px solid rgba(255,255,255, .1); border-bottom: none; font-weight: 700; } .sidr ul li a, .sidr ul li a:visited { color: var(--WHITE_COLOR); padding: 15px 20px 15px 17px; line-height: 1.3; border-left: 6px solid transparent; text-decoration: none; display: block; } .sidr ul li a:hover, .sidr ul li a:focus { color: var(--WHITE_COLOR); background: rgba(0,0,0, .1); } .sidr ul li.active a, .sidr ul li.active a:visited, .sidr ul li.active a:hover, .sidr ul li.active a:focus { cursor: default; border-color: var(--WHITE_COLOR); background: var(--BRAND_COLOR); } .sidr ul li a.link-frame-open { position: relative; } .sidr ul li a.link-frame-open:after { font-size: 1.125rem; padding: 0 0 0 10px; line-height: 1; font-weight: 400; position: absolute; top: 15px; right: 20px; content:"\f054"; font-family: "Font Awesome 5 Pro"; } .sidr ul li.nav-back { font-size: 14px; } .link-frame-close { text-align: left; } .link-frame-close:hover, .link-frame-close:focus { color: var(--LINK_COLOR); } .sidr ul.submenu {} .sidr ul.submenu li { border: none; } .sidr ul.submenu li a, .sidr ul.submenu li a:visited { font-size: .875rem; padding: 10px 20px; } .sidr ul.submenu.submenu-categories li a, .sidr ul.submenu.submenu-categories li a:visited { font-size: .875rem; padding: 10px 20px 10px 30px; font-weight: normal; } .sidr ul.submenu-categories-toplevel { border-bottom: 1px solid var(--WHITE_COLOR); } .dim-overlay { display: none; position: absolute; width: 100%; height: 100%; background: rgba(0,0,0, .5); z-index: 2000; } .sidr .nav-regions strong span, #sidr-frame-2 .link-frame-close strong span { text-transform: lowercase; } #sidr #submenu-categories { padding: 5px 0; background: var(--BRAND2_COLOR); } /*** sidr-frame ***/ .sidr-frame { background: var(--BRAND_COLOR); position: absolute; top: -100%; left: -100%; width: 100%; height: auto; height: 100%; 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; } .sidr-frame-main { position: relative; top: auto; left: auto; } .frame-close-wrapper { border-top: 1px solid rgba(255,255,255, .1); border-bottom: 1px solid rgba(255,255,255, .1); font-weight: 700; } .frame-close-wrapper a, .frame-close-wrapper a:visited { color: var(--WHITE_COLOR); font-size: 1rem; line-height: 1.3; padding: 15px 15px 15px 32px; display: block; text-decoration: none; position: relative; } .frame-close-wrapper a:hover, .frame-close-wrapper a:focus { color: var(--WHITE_COLOR); text-decoration: none; } .frame-close-wrapper a:before { font-size: 1rem; display: block; position: absolute; top: 15px; left: 10px; font-weight: 400; content:"\f053"; font-family: "Font Awesome 5 Pro"; } .sidr-frame-inner { padding-top: 50px; padding-bottom: 60px; } /*** bottom ***/ #sidr-bottom-menu { padding: 0; text-align: center; } #sidr.with-fixed-sidr-botoom #sidr-bottom-menu, .with-fixed-sidr-botoom .sidr-bottom-menu { position: absolute; bottom: 0; width: 100%; } #sidr-bottom-menu ul li { border-top: none; border-bottom: 1px solid rgba(255,255,255, .1); } #sidr-bottom-menu ul li:last-of-type { border-bottom: none; } .sidr-frame .form-submit { padding: 0 15px 15px; } .sidr.subframe-open #sidr-bottom-menu { display: none; } .sidr-block { padding: 20px 20px; border-top: 1px solid rgba(255,255,255, .1); } .sidr-block h3 { font-size: 1rem; color: var(--WHITE_COLOR); padding: 0 0 15px; margin: 0 0 5px; text-transform: none; font-weight: 700; display: block; position: relative; } .sidr-block--links { margin: 0 -10px; } .sidr-block--links ul { margin: 0; padding: 0; } .sidr-block--links ul li { margin: 0; padding: 0; border: none; } .sidr-block--links ul li a { color: var(--WHITE_COLOR); display: block; overflow: hidden; padding: 7px 10px; line-height: 20px; text-decoration: none; border: none; font-weight: normal; } .sidr-block--links ul li.active a, .sidr-block--links ul li.active a:visited, .sidr-block--links ul li.active a:hover, .sidr-block--links ul li.active a:focus { color: var(--BRAND_COLOR); background-color: var(--WHITE_COLOR); border: 1px solid rgba(255,255,255, 1); position: relative; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; } .sidr-block--links ul li.active a:after { font-size: .75rem; color: var(--BRAND_COLOR); padding-left: 5px; position: absolute; top: 8px; right: 10px; display: block; font-weight: 400; content:"\f00c"; font-family:'Font Awesome 5 Pro'; } /*** LANG ***/ #sidr-languages { border-top: 1px solid rgba(255,255,255, .1); padding-top: 40px; } /*** REGIONS ***/ #sidr-regions { } #regions-block-mobile-trigger { font-size: .8725rem; color: var(--WHGITE_COLOR); line-height: 31px; width: auto; padding: 3px 20px 3px 18px; margin-bottom: 20px; text-transform: uppercase; border: 2px solid var(--WHITE_COLOR); background: var(--BRAND_COLOR); } #regions-block-mobile-trigger:hover { color: var(--BRAND_COLOR); border: 2px solid var(--WHITE_COLOR); background: var(--WHITE_COLOR); } #regions-block-mobile-trigger:after { clear: both; display: block; content:""; } #regions-block-mobile-trigger img { width: 13px; float: right; margin: 6px 10px 0 0; } #regions-block-mobile-trigger span { float: right; } #regions-block-mobile-trigger span:after { display: none; font-size: .75rem; font-weight: normal; top: 0; } #regions-block-mobile-trigger span * { line-height: 31px; display: inline-block; } #regions-block-mobile-trigger region { padding-left: 25px; background: url("../images/icon-globe-white.svg") no-repeat 0 center / 17px auto; } #regions-block-mobile-trigger language { padding: 0 0 0 45px; margin-left: 20px; background: url("../images/icon-language-white.svg") no-repeat 20px 7px / 17px auto; position: relative; } #regions-block-mobile-trigger language:before { display: block; width: 0; height: 22px; position: absolute; top: 4px; left: 0; border-left: 1px solid var(--WHITE_COLOR); content:""; } #regions-block-mobile-trigger:hover region { background-image: url("../images/icon-globe.svg"); } #regions-block-mobile-trigger:hover language { background-image: url("../images/icon-language.svg"); } #regions-block-mobile-trigger:hover language:before { border-color: var(--BRAND_COLOR); } #sidr-regions h3 { padding-left: 27px; } #sidr-regions h3:before { width: 17px; height: 17px; background: url("/images/icon-globe-white.svg") no-repeat 0 0; content:""; position: absolute; top: 0; left: 0; } #sidr-languages h3 { padding-left: 27px; } #sidr-languages h3:before { width: 17px; height: 17px; background: url("/images/icon-language-white.svg") no-repeat 0 0; content:""; position: absolute; top: 0; left: 0; } /*** USER ***/ #sidr-user .link-login, #sidr-user .link-register { font-size: 16px; float: left; width: calc(50% - 10px); } #sidr-user .link-register { float: right; color: var(--WHITE_COLOR); background: var(--BRAND2_COLOR); border-color: var(--WHITE_COLOR); } /*** user ***/ #sidr-user { } #sidr-user .sidr-frame, #sidr-user .sidr-frame-inner { } #sidr-user #submenu-user-mobile { padding: 0; position: relative; top: auto; left: auto; right: auto; width: 100%; display: block; z-index: 100; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } #sidr-user #submenu-user-mobile a em { top: 12px; display: none; } #sidr-user ul li a, #sidr-user ul li a:visited { color: var(--WHITE_COLOR);} .sidr-nav-user-fav, .sidr-nav-langs { margin: 10px 0; padding-top: 10px; border-top: 1px solid #ccc; } #sidr-user .user-details { color: #fff; padding: 15px 20px; margin: 0 15px 20px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } #sidr-user .user-details-item { padding: 0; float: right; width: 30%; } #sidr-user .user-details-name { width: 65%; float: left; } #sidr-user .user-details strong { font-size: 18px; display: block; } #sidr-user .user-details small { font-display: 10px; clear: both; display: block; opacity: 0.5; padding: 15px 0 0; } #sidr-user .sidr-hdr a.sidr-close, #sidr-user .sidr-hdr a.sidr-close:visited { left: auto; right: 0; } #menu-user-close { left: auto; right: 0; } /*** fav ***/ #favblock-content-mobile .row { margin: 0; } #favblock-content-mobile .merch-list { margin: 0; } #favblock-content-mobile .merch-list .merch-wrapper { display: none; float: none; width: 100%; padding: 0; margin-bottom: 0; } #favblock-content-mobile .merch-list .merch-wrapper:nth-child(1), #favblock-content-mobile .merch-list .merch-wrapper:nth-child(2), #favblock-content-mobile .merch-list .merch-wrapper:nth-child(3) { display: block; } #favblock-content-mobile .merch-list a.link-to-merchant { padding: 15px; color: var(--WHITE_COLOR); background: transparent; border: none; border-bottom: 1px solid #ccc; min-height: auto; overflow: hidden; } #favblock-content-mobile .merch-list a.link-to-merchant .merch-title, #favblock-content-mobile .merch-list a.link-to-merchant .merch-rates { color: var(--WHITE_COLOR); } #favblock-content-mobile .merch-list a.link-to-merchant:hover, #favblock-content-mobile .merch-list a.link-to-merchant:focus { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } #favblock-content-mobile .merch-list .merch-item .merch-full .merch-banner { float: left; width: 25%; max-width: 120px; border: 1px solid var(--BORDER_COLOR); padding: 1px; background: #fff; margin-right: 20px; } #favblock-content-mobile .merch-list .merch-item .merch-full .merch-banner img { width: 100%; height: auto; display: block; } #favblock-content-mobile .merch-list .merch-item a .merch-title, #favblock-content-mobile .merch-list .merch-item .merch-rates { background: transparent; float: left; width: 70%; text-align: left; padding: 0; min-height: inherit; height: auto; } #favblock-content-mobile .merch-list .merch-item a .merch-title span { height: auto; } body.logged-in #favblock-content-mobile .merch-item .merch-fav a { display: none !important; } #sidr-frame-21 div.more { padding: 5px 0; } #sidr-frame-21 a.more { color: var(--WHITE_COLOR); padding: 10px 20px; display: block; } #user-fav-mobile .nomerchants { padding: 15px; } @media (max-width: 360px) { .sidr { width: 100%; } .sidr.right { right: -100%; } .sidr.left { left: -100%; } .sidr-hdr { width: 100%; min-width: 100% !important; } #sidr.with-fixed-sidr-bottom #sidr-bottom-menu, .with-fixed-sidr-bottom .sidr-bottom-menu { width: 100%; } }