/* ========= 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-crm {
    font-size: 20px;
     margin-top: 10px;
     font-family: 'Poppins', sans-serif;
    color:white;
}
 .wsm-crm:after {
    font-size: 20px;
     margin-top: 10px;
     content:"CRM";
     font-family: 'Poppins', sans-serif;
    color:white;
}
 .wsm-spmenu {
     position: fixed;
     background: #4c92da;
     box-shadow:-10px 6px 0px rgba(0, 0, 0, 0.3);
}
 .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: 260px;
     height: auto;
     top: 20%;
     z-index: 1000;
}
 .wsm-spmenu-vertical a {
     padding: 0.8em;
     border-bottom: 1px solid #128be0;
}
/* Vertical menu that slides from the left or right */
 .wsm-spmenu-left {
     left: -260px;
}
 .wsm-spmenu-left.wsm-spmenu-open {
     left: 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: #4c92da;
    box-shadow:-10px 6px 0px rgba(0, 0, 0, 0.3);
}

 .wsm-active.wsm-menu-trigger{
     left:190px;
}

.wsm-menu-trigger-top{
	top:20%;
	left:0px;
}

@media screen and (max-width: 1020px) {   
	 .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: #4c92da;
	   /*  box-shadow:-10px 6px 0px rgba(0, 0, 0, 0.3);*/ 
	    margin-left: -40px;
		border-radius: 50px;
	/* 	-ms-transform: rotate(45deg); IE 9
		-webkit-transform: rotate(45deg); Safari 3-8
		transform: rotate(45deg);
 */		
	}
	
	.wsm-active{
		box-shadow:-10px 6px 0px rgba(0, 0, 0, 0);
	}
	
	.wsm-crm:after {
		font-size: 25px;
		font-family: FontAwesome;
		content:'\f105'; 
		margin-top: 10px;
		color: white;
		/* transform: rotate(-45deg);  */ 
		margin-left: 38px; 
	}
	
	.wsm-active.wsm-crm:after {
		font-size: 25px;
		font-family: FontAwesome;
		content:'\f057'; 
		margin-top: 10px;
		color: white;
		margin-left: 0px; 
		/* transform: rotate(-45deg);  
		margin-left: -10px; */ 
	}
	
	.wsm-spmenu-open{
		width: 100%;
		height: 100%;
		top: 0%;
		z-index: 1000;
	}
	
	.wsm-active.wsm-menu-trigger{
		left: 350px;
	}

	.wsm-active.wsm-menu-trigger-top {
	   top:0%;
	}
	
	.wsm-menu-trigger-top{
		top:50%;
		left:0px;
	}
}

 .wsm-active{
     box-shadow:-10px 6px 0px rgba(0, 0, 0, 0);
}

@media screen and (max-width: 320px) {   
	.wsm-active{
		box-shadow:-10px 6px 0px rgba(0, 0, 0, 0);
		margin-left:-60px;
	}
}

 .wsm-menu-trigger-bottom{
     bottom:10px;
     left:0px;
}

 .wsm-spmenu-open .wsm-menu-trigger{
     background: none;
     text-align: center;
}
 .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-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 {
         left: -190px;
    }
     .wsm-spmenu-right {
         right: -190px;
    }
     .wsm-spmenu-push-toright {
         left: 190px;
    }
}