$(document).ready(function() { 
            $('.home').mouseover(function(e) {
                e.preventDefault();
				
            $("div.layer").animate({
    		opacity: .8,
			right: "0",
			width: "100%",
			
			
  				}, 300 )
  			$(".home").mouseleave(function(e){
			$("div.layer").animate({
    		opacity: 0,
			right: "-125px",
			display: "block",
			width: "100px",
    		    		
    		
 				 }, 500 );
			});

			
			
 }); });
 
 
  $(document).ready(function() { 
            $('.beauty').mouseover(function(e) {
                e.preventDefault();
				
            $("div.layer2").animate({
    		opacity: .8,
			right: "0",
			width: "100%",
			
  				}, 300 )
  			$(".beauty").mouseleave(function(e){
			$("div.layer2").animate({
    		opacity: 0,
			right: "-125px",
			display: "block",
			width: "100px",
    		    		
    		
 				 }, 500 );
			});

			
			
 }); });
 
 $(document).ready(function() { 
            $('.fp').mouseover(function(e) {
                e.preventDefault();
				
            $("div.layer3").animate({
    		opacity: .8,
			right: "0",
			width: "100%",
			
  				}, 300 )
  			$(".fp").mouseleave(function(e){
			$("div.layer3").animate({
    		opacity: 0,
			right: "-125px",
			display: "block",
			width: "100px",
    		    		
    		
 				 }, 500 );
			});

			
			
 }); });
 
  $(document).ready(function() { 
            $('.ret').mouseover(function(e) {
                e.preventDefault();
				
            $("div.layer4").animate({
    		opacity: .8,
			right: "0",
			width: "100%",
			
  				}, 300 )
  			$(".ret").mouseleave(function(e){
			$("div.layer4").animate({
    		opacity: 0,
			right: "-125px",
			display: "block",
			width: "100px",
    		    		
    		
 				 }, 500 );
			});

			
			
 }); });
 
  $(document).ready(function() { 
            $('.cont').mouseover(function(e) {
                e.preventDefault();
				
            $("div.layer5").animate({
    		opacity: .8,
			right: "0",
			width: "100%",
			
  				}, 300 )
  			$(".cont").mouseleave(function(e){
			$("div.layer5").animate({
    		opacity: 0,
			right: "-125px",
			display: "block",
			width: "100px",
    		    		
    		
 				 }, 500 );
			});

			
			
 }); });
 
 
  $(document).ready(function() { 
            $('.about').mouseover(function(e) {
                e.preventDefault();
				
            $("div.layer6").animate({
    		opacity: .8,
			right: "0",
			width: "100%",
			
  				}, 300 )
  			$(".about").mouseleave(function(e){
			$("div.layer6").animate({
    		opacity: 0,
			right: "-125px",
			display: "block",
			width: "100px",
    		    		
    		
 				 }, 500 );
			});

			
			
 }); });