/* ========= INFORMATION ============================
	- document:  Slide Menu - create the bright slide-out menu..
	- url:       https://wow-estore.com/item/slide-menu-pro/
	- author:    Wow-Company
	- profile:   https://wow-estore.com/
	- version:   2.0
	- email:     wow@wow-company.com
==================================================== */
/* General styles for all menus */ .wsm-spmenu { position: fixed; background: #1f9ef8; } .wsm-spmenu h3 { color: #afdefa; font-size: 1.9em; padding: 20px; margin: 0; font-weight: 300; background: #0d77b6; } .wsm-spmenu a { display: block; font-size: 1.1em; font-weight: 300; color: #fff; } .wsm-spmenu a:hover { background: #128be0; } /* Orientation-dependent styles for the content of the menu */ .wsm-spmenu-vertical { width: 240px; height: 100%; top: 0; z-index: 1000; } .wsm-spmenu-vertical a { padding: 1em; border-bottom: 1px solid #128be0; } /* Vertical menu that slides from the left or right */ .wsm-spmenu-left { right: -240px; } .wsm-spmenu-left.wsm-spmenu-open { right: 0px; } /* Transitions */ .wsm-spmenu, .wsm-spmenu-push { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; transition: all 0.3s ease; } .wsm-icon:before { speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; display: inline-block; vertical-align: bottom; margin-right: 0.8em; font-size: 1.2em; -webkit-font-smoothing: antialiased; } .wsm-menu-trigger { position: fixed; z-index: 100; display: block; width: 50px; height: 50px; cursor: pointer; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; transition: all 0.3s ease; padding:5px; background: #1f9ef8; } .wsm-menu-trigger span { position: absolute; top: 50%; margin:auto; display: block; width: 80%; height: 4px; font-size: 0px; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-transition: background-color 0.3s; transition: background-color 0.3s; background-color:#fff; } .wsm-menu-trigger-top{ top:10px; right:0px; } .wsm-menu-trigger-bottom{ bottom:10px; left:0px; } .wsm-active.wsm-menu-trigger{ right:190px; } .wsm-spmenu-open .wsm-menu-trigger{ background: none; } .wsm-spmenu-open .wsm-menu-trigger span { background-color: transparent; } .wsm-menu-trigger span:before, .wsm-menu-trigger span:after { position: absolute; left: 0; width: 100%; height: 100%; content: ''; -webkit-transition: -webkit-transform 0.3s; transition: transform 0.3s; background-color:#fff; } .wsm-menu-trigger span:before { -webkit-transform: translateY(-250%); transform: translateY(-250%); } .wsm-menu-trigger span:after { -webkit-transform: translateY(250%); transform: translateY(250%); } .wsm-spmenu-open .wsm-menu-trigger span:before { -webkit-transform: translateY(0) rotate(45deg); transform: translateY(0) rotate(45deg); } .wsm-spmenu-open .wsm-menu-trigger span:after { -webkit-transform: translateY(0) rotate(-45deg); transform: translateY(0) rotate(-45deg); } /* Example media queries */ @media screen and (max-width: 55.1875em){ .wsm-spmenu-top { top: -110px; } .wsm-spmenu-bottom { bottom: -110px; } } @media screen and (max-height: 26.375em){ .wsm-spmenu-vertical { font-size: 90%; width: 190px; } .wsm-spmenu-left, .wsm-spmenu-push-toleft { right: 0; } .wsm-spmenu-right { right: -190px; } .wsm-spmenu-push-toright { right: 240px; } }