﻿
/*---------------------- NEW MENU PANEL-------------------------*/
/*--------------------------------------------------------------*/

/*speed progress panel (override jQuery-mobile-1.4.5 panel setting) */
.ui-panel-animate {
    transition: transform 0.6s ease !important;
}
.ui-panel-animate.ui-panel-position-right.ui-panel-display-overlay,
.ui-panel-animate.ui-panel-position-right.ui-panel-display-push {
	right: 0;
	-webkit-transform: translate3d(20em,0,0);
	-moz-transform: translate3d(20em,0,0);
	transform: translate3d(20em,0,0);
}

#mymenu {
		/*-moz-transform: translateX(20em);
		-webkit-transform: translateX(20em);
		-ms-transform: translateX(20em);
		transform: translateX(20em);
		-moz-transition: -moz-transform 0.5s ease;
		-webkit-transition: -webkit-transform 0.5s ease;
		-ms-transition: -ms-transform 0.5s ease;
		transition: transform 0.5s ease;
		-webkit-overflow-scrolling: touch;*/
		background:#21b2a6 /*#15635d*/ /*#15635d*/ /*#21b2a6*/; /*#eee*/
		color: #ffffff;
        text-shadow:1px 1px black;
		height: 100%;        
		max-width: 80%;
		overflow-y: auto;
		padding: 3em 2em;
		position: fixed;
		right: 0;
		top: 0;
		width: 20em;
        opacity:0.95;
		z-index: 10002;
	}

		#mymenu ul {
			list-style: none;
			padding: 0;
		}

			#mymenu ul > li {
				/*border-top: solid 1px #18726b rgba(0, 0, 0, 0.125)*/;
                border-top: solid 1px rgba(0, 0, 0, 0.125);
				margin: 0.5em 0 0 0;
				padding: 0.5em 0 0 0;
			}

				#mymenu ul > li:first-child {
					border-top: 0 !important;
					margin-top: 0 !important;
					padding-top: 0 !important;
				}

				#mymenu ul > li > a {
					border: 0;
					color: inherit;
					display: block;					
                    font:inherit;                    
                    font-size: 0.8em !important;
					letter-spacing: 0.225em;
					outline: 0;
					text-decoration: none;
					text-transform: uppercase;
                    text-shadow:none;
                    transition:0.5s all;
	                -webkit-transition:0.5s all;
	                -moz-transition:0.5s all;
	                -o-transition:0.5s all; 
	                -ms-transition:0.5s all;
				}

                #mymenu ul > li > a:hover {
					/*border: 0;*/
					color: yellow;
                    padding-left:15px;
					/**/display: block;
                    /*font-weight:bold;*/
					/*font-size: 0.9em;*/
					/*letter-spacing: 0.23em;*/
					/*outline: 0;
					text-decoration: none;
					text-transform: uppercase;*/
				}

                #mymenu ul > li > a img {
                    padding-right:8px;
                    width:23px;
                }

					@media screen and (max-width: 736px) {

						#mymenu ul > li > a {
							line-height: 3em;
						}

					}

		#mymenu .close {
			background-image: url(../images/close.svg);
			background-position: 4.85em 1em;
			background-repeat: no-repeat;
			border: 0;
			cursor: pointer;
			display: block;
			height: 3em;
			position: absolute;
			right: 0;
			top: 0;
			vertical-align: middle;
			width: 7em;
		}

		@media screen and (max-width: 736px) {

			#mymenu {
				padding: 3em 1.5em;
			}

		}

/*------------ End of NEW MENU PANEL ---------------------------*/
/*--------------------------------------------------------------*/