/* --------------------------------- * slider left hidden menu ------------------------------------------------------------------------------------------------------------------------- */ #slider { display: block; position: fixed; top: 0; height: 100%; width: 280px; z-index: 10000; box-sizing: content-box; } #slider * { box-sizing: content-box; } #slider.right { left: auto; right: -280px; } #slider.right.slide { right: 0px; width: 100%; background: rgba(238, 238, 238, 0.75); } #slider.left { left: -280px; right: auto; } #slider.left.slide { left: 0px; width: 100%; background: rgba(238, 238, 238, 0.75); } #chm-slider-left-menu-controls { display: block; position: absolute; top: 0; border: none !important; outline: none !important; margin: 0; z-index: 10100; background-color: #404042; } #chm-slider-left-menu-controls .btn { } #chm-slider-left-menu-controls .logo { display: block; float: left; color: #BABABA; text-align: center; cursor: pointer; } #chm-slider-left-menu-controls .btn img, #chm-slider-left-menu-controls .logo img { width: 100%; } #chm-slider-left-menu-controls span { } #slider-social-media-container { box-sizing: content-box; clear: both; display: block; height: 48px; margin-top: 48px; padding: 0; position: relative; text-align: center; width: 280px; } /* HAMBYRGER MENU /* /* Fount here http://callmenick.com/post/animating-css-only-hamburger-menu-icons ------------------------------------------------------------------------------------------------------------------------- */ .c-hamburger { display: block; float: left; position: relative; overflow: hidden; color:#BABABA; font-size: 0; text-indent: -9999px; appearance: none; box-shadow: none; cursor: pointer; -webkit-transition: background 0.3s; transition: background 0.3s; border-radius: 5px; } .c-hamburger:focus { outline: none; } .c-hamburger span { display: block; position: absolute; background: #ffffff !important; } .c-hamburger span::before, .c-hamburger span::after { position: absolute; display: block; width: 100%; background-color: #ffffff; content: ""; } .c-hamburger--htx { } .c-hamburger--htx span { -webkit-transition: background 0s 0.3s; transition: background 0s 0.3s; } .c-hamburger--htx span::before, .c-hamburger--htx span::after { -webkit-transition-duration: 0.3s, 0.3s; transition-duration: 0.3s, 0.3s; -webkit-transition-delay: 0.3s, 0s; transition-delay: 0.3s, 0s; } .c-hamburger--htx span::before { -webkit-transition-property: top, -webkit-transform; transition-property: top, transform; } .c-hamburger--htx span::after { -webkit-transition-property: bottom, -webkit-transform; transition-property: bottom, transform; } /* active state, i.e. menu open */ .c-hamburger--htx.is-active { } .c-hamburger--htx.is-active span { background-color: transparent !important; } .c-hamburger--htx.is-active span::before { top: 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .c-hamburger--htx.is-active span::after { bottom: 0; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } .c-hamburger--htx.is-active span::before, .c-hamburger--htx.is-active span::after { -webkit-transition-delay: 0s, 0.3s; transition-delay: 0s, 0.3s; } /* ----------------------------------- */ /* slider styles /* ------------------------------------------------------------------------------------------------------------------------- */ .slider { position: relative; display: block; float: left; top: 0; height: 100%; z-index: 1000; width: 280px; overflow-x: none; overflow-y: auto; background-color: #404042; color: #ffffff; border: none !important; } .slider ul { display: block; margin: 0; padding: 0; text-align: left; } .slider ul li, .slider ul li a { display: block; margin: 0; font-family: Lato, sans-serif; font-size: 19px; font-weight: 300; line-height: 36px; } .slider ul li.chm-logo, .slider ul li a.chm-logo { padding: 64px 64px 48px 42px !important; margin-bottom: 24px; border-bottom: 1px solid #808080; } .slider ul li.chm-logo, .slider ul li a.chm-logo img { width: 100%; } .slider ul li > a:hover, .slider ul li > span:hover, .slider ul li.active > a, .slider ul li.active > span, .slider ul li.slider-class-active > a, .slider ul li.slider-class-active > span { color: #FCBD05; } .slider ul li a, .slider ul li span { padding: 0 12px 0 24px; display: block; text-decoration: none; color: #f9f9f9; } .slider ul li ul { border-bottom: none; margin: 12px 0 18px 12px; } .slider ul li ul li, .slider ul li ul li a { line-height: 21px; font-size: 14px; } .slider ul li ul li.slider-left-menu-subtitle h3, .slider ul li ul li.slider-left-menu-subtitle a h3 { display: block; margin: 0; font-family: Lato, sans-serif; font-size: 14px; font-weight: 400; line-height: 21px; text-transform: uppercase; padding: 0 12px 0 24px; color: #f9f9f9; word-spacing: 3px; } .slider-social-media { display: inline-block; height: 42px; width: 42px; margin: 12px 0; margin-right: 22px; text-align: center; } .slider-social-media:last-child { margin-right: 0 !important; } .slider-social-media img, .slider-social-media a img { width: 100%; } a.slider-social-media { display: block; height: 36px; width: 36px; -webkit-transition: all .2s linear; -moz-transition: all .3s linear; -o-transition: all .3s linear; transition: all .3s linear; } a.slider-social-media:hover, a.slider-social-media:active { cursor: pointer !important; transform: scale(1.1); } /* --------------------------------- * RESPONSIVE STYLES ----------------------------------- */ /* For devices larger than 320px */ @media (min-width: 240px) { #chm-slider-left-menu-controls { right: -95px; padding: 3px 3px 3px 0; } #chm-slider-left-menu-controls .logo { height: 26px; width: 26px; margin: 7px 12px 11px 6px; } .c-hamburger { height: 36px; width: 36px; line-height: 36px; margin: 3px 6px; } .c-hamburger span { top: 16px; left: 4px; right: 4px; height: 3px; } .c-hamburger span::before, .c-hamburger span::after { left: 0; height: 3px; } .c-hamburger span::before { top: 10px; } .c-hamburger span::after { bottom: 10px; } } /* For devices smaler than 768px */ @media (min-width: 768px) { #chm-slider-left-menu-controls { right: -110px; padding: 6px 6px 6px 0; height: 54px; } #chm-slider-left-menu-controls .logo { height: 32px; width: 32px; margin: 11px 12px 11px 6px; } .c-hamburger { height: 42px; width: 42px; line-height: 42px; margin: 6px; } .c-hamburger span { top: 19px; left: 5px; right: 5px; height: 4px; } .c-hamburger span::before, .c-hamburger span::after { left: 0; height: 4px; } .c-hamburger span::before { top: 12px; } .c-hamburger span::after { bottom: 13px; } }