.top_menu_responsive_container {
	width: 100%;
	background: rgb(0,0,0);
		
	font-size: 0;
}

.top_menu_button {
	font-size: xx-large;
	width: 6em;
    background: rgb(0,0,0);
    display: table-cell;
    vertical-align: middle;
	box-sizing: border-box;
		padding-left: 0.5em;
		padding-right: 0.5em;
		padding-top: 0;	
		padding-bottom: 0;
	
							
		
				
		height: 2.771281292110204em;
				--A: 0.8em;	
		--B: 50%;	
	
		clip-path: 
			polygon(
			  0% var(--B),                 	/* top left */
			  var(--A) 0%,                 	/* top left */
			  calc(100% - var(--A)) 0%,    	/* top right */ 
			  100% var(--B),               	/* top right */
			  100% calc(100% - var(--B)),  	/* bottom right */ 
			  calc(100% - var(--A)) 100%,  	/* bottom right */ 
			  var(--A) 100%,               	/* bottom left */
			  0% calc(100% - var(--B))    	/* bottom left */
			);
}

#top_menu_slider{
	    -webkit-transition: color 0.5s ease-in;
  		    transition: color 0.5s ease-in;
	color: rgb(255,255,255); 
	text-decoration:none;
	z-index:1;
   	position:relative;
    overflow:hidden;
}

#top_menu_slider:before {
 	content: '';
    position: absolute;
		top: 0; 
		left: 0;
   	width: 300%; 
	height: 300%;
   	background: rgb(255,255,255);
    z-index: -1;
    
	-webkit-transform-origin:0 0 ;
        -ms-transform-origin:0 0 ;
            transform-origin:0 0 ;
		
	-webkit-transform: translateX(-100%) skewX(-30deg);
        -ms-transform: translateX(-100%) skewX(-30deg);
	        transform: translateX(-100%) skewX(-30deg);
			
	-webkit-transition: -webkit-transform 0.3s ease-out;
            transition: 	    transform 0.3s ease-out;
}

#top_menu_slider:hover {
	color: rgb(0,0,0); text-decoration:none;
}

#top_menu_slider:hover:before {
	-webkit-transform: translateX(0%) skewX(-30deg);
        -ms-transform: translateX(0%) skewX(-30deg);
            transform: translateX(0%) skewX(-30deg);
}


@media (max-width: 1200px) and (min-width:401px) {
	.top_menu_button {
		font-size: x-large;
				
		height: 2.078460969082653em;
				--A: 0.6em;	
		--B: 50%;	
	
		clip-path: 
			polygon(
			  0% var(--B),                 	/* top left */
			  var(--A) 0%,                 	/* top left */
			  calc(100% - var(--A)) 0%,    	/* top right */ 
			  100% var(--B),               	/* top right */
			  100% calc(100% - var(--B)),  	/* bottom right */ 
			  calc(100% - var(--A)) 100%,  	/* bottom right */ 
			  var(--A) 100%,               	/* bottom left */
			  0% calc(100% - var(--B))    	/* bottom left */
			);
	}	
}

@media (max-width: 400px) { 
	.top_menu_button {
		font-size: large;
		width: 100px;
		height: 1.5em;

			);	
	}	
}