.sidr {
    display: none;
    position: absolute;
    position: fixed;
    top: 0;
    height: 100%;
    z-index: 100;
    overflow-x: none;
    overflow-y: auto;
    width:25%;
}
.sidr.small {
	width:25%;	
}
.sidr.medium {
	width:50%;	
}
.sidr.large {
	width:75%;	
}

.sidr.right {
    left: auto;
    text-align:left;
}
.sidr.right,
.sidr.right.small {
	right:-25%;
}

.sidr.right.medium {
	right:-50%;
}

.sidr.right.large {
	right:-75%;
}


.sidr.left {
    right: auto;
	text-align:left;
}
.sidr.left,
.sidr.left.small {
	right:-25%;
}

.sidr.left.medium {
	right:-50%;
}

.sidr.left.large {
	right:-75%;
}




.overlay {
			position:fixed; 
			top:0px; 
			left:0px;
			height:100%; 
			width:100%;  
			display:none; 
			background-color: black;
			z-index:100;
    }





@media only screen and (max-width: 1024px) {
	
	.sidr,
	.sidr.small {
	width:50%;	
}
.sidr.medium {
	width:100%;	
}
.sidr.large {
	width:100%;	
}

.sidr.right {
    left: auto;
}
.sidr.right,
.sidr.right.small {
	right:-50%;
}

.sidr.right.medium {
	right:-100%;
}

.sidr.right.large {
	right:-100%;
}


.sidr.left {
    right: auto;
}
.sidr.left,
.sidr.left.small {
	right:-50%;
}

.sidr.left.medium {
	right:-100%;
}

.sidr.left.large {
	right:-100%;
}
	
						
	}
	
	
	
	/* 
	============================		SMALL  		====================================
*/

	@media only screen and (max-width: 607px) {
	
	.sidr,
	.sidr.small {
	width:100%;	
}
.sidr.medium {
	width:100%;	
}
.sidr.large {
	width:100%;	
}

.sidr.right {
    left: auto;
}
.sidr.right,
.sidr.right.small {
	right:-100%;
}

.sidr.right.medium {
	right:-100%;
}

.sidr.right.large {
	right:-100%;
}


.sidr.left {
    right: auto;
}
.sidr.left,
.sidr.left.small {
	right:-100%;
}

.sidr.left.medium {
	right:-100%;
}

.sidr.left.large {
	right:-100%;
}
	
	
	}