@media screen and (max-width: 29.938em) {
	.border-corner{
		border-bottom: 1px solid;
    	background-image: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 100%);
    	background-position: 0 6em;
    	background-repeat: no-repeat;
    	background-size: 1px 100%}
	.border-divider{
		padding-top: 3em;
		/* padding-top: 1em; */
		border-top: 1px solid black}
	.border-divider--hidden{
		border-top: none}
}
@media screen and (max-width: 0.938em) {
	.border-divider--mobile{
		padding-top: 3em;
		/* padding-top: 1em; */
		border-top: 1px solid black}
}
@media screen and (min-width: 29.938em) {	
	/* borders */
	.border{ /* box with partial top border and left border with offset: default, basic page */
		background-size: 100px 1px, 1px 100%;
		background-repeat: no-repeat;
		background-image: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 100% ),
					  	  linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 100% );
		background-position: 0px 0px, 0px 1em}
	.border--first{ /* top border less wide: default, but first */
		background-size: 44px 1px, 1px 100%}
	.border-aside{ /* top border simulating (empty) )sidebar: employee head */
		background-size: 44px 1px;
		background-repeat: no-repeat;	
		background-image: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 100% )}
	.border-header{ /* borders for navigation */
		background-size: 44px 1px, 100% 1px, 1px 100%;
		background-repeat: no-repeat;
		background-image: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 100% ),
		  			  	  linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 100% ),
					  	  linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 100% );
		background-position: 0px 100%, 64px 100%, 64px 1em}
	.border-left{ /* box with left border only, full height: header, footer */
		border-left: 1px solid #000}
	.footer .border-left{
		border: none}
	.border-left--offset{ /* box with left border with offset: lawyer card */
		background-size: 1px 100%;
		background-repeat: no-repeat;
		background-image: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 100% );
		background-position: 0px 1em}
	.border-sidebar{ /* top border at sidebar */
		border-top: 1px solid #000}	
	.border-top{ /* box with partial top border: employee image */
		background-size: 100px 1px;
		background-repeat: no-repeat;
		background-image: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 100% )}
	.border-top--first{ /* top border less wide */
		background-size: 44px 1px}		
}
@media screen and (min-width: 29.938em) and (max-width: 47.938em) {	
	/* borders */
	.border--mobile{ /* box with partial top border and left border with offset: default, basic page */
		background-size: 100px 1px, 1px 100%;
		background-size: 55% 1px, 1px 100%;
		background-repeat: no-repeat;
		background-image: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 100% ),
					  	  linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 100% );
		background-position: 0px 0px, 0px 1em}
}
@media screen and (min-width: 30em) {	
	.border{
		background-size: 55% 1px, 1px 100%}	
	.border--first{
		background-size: 60px 1px, 1px 100%}
	.border-aside{
		background-size: 60px 1px}
	.border-header{
		background-size: 68px 1px, 100% 1px, 1px 100%;
		background-position: 0px 100%, 88px 100%, 88px 1em}		
	.footer .border-left{
		border-left: 1px solid #000}
	.border-left--offset{
		background-position: 0px 2em}
	.border-top{
		background-size: 55% 1px}
	.border-top--first{
		background-size: 60px 1px}
}
@media screen and (min-width: 35em) {
	.footer .border{
		background: none}
	.border-footer{
		background-size: 55% 1px, 45% 1px;
		background-repeat: no-repeat;	
		background-image: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 100% ),
						  linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 100% );
		background-position: 0px 0px, 104% 0px}
}
@media screen and (min-width: 48em) {			
	.border{
		background-size: 55% 2px, 2px 100%;
		background-position: 0px 0px, 0px 2em}
	.border--mobile {
		background-size: 2px 100%;
		background-repeat: no-repeat;
		background-image: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 100% );
		background-position: 0px 2em
	}
	.border--first{
		background-size: 108px 2px, 2px 100%}
	.border-aside{
		background-size: 108px 2px}	
	.border-footer{
		background-size: 55% 2px, 45% 2px}
	.border-header{
		background-size: 88px 2px, 100% 2px, 2px 100%;
		background-position: 0px 100%, 108px 100%, 108px 1em}
	.border-left,.footer .border-left {
		border-left: 2px solid #000}
	.border-left--offset{
		background-size: 2px 100%}
	.border-sidebar{
		border-top: 2px solid #000}
	.border-top{
		background-size: 55% 2px}	
	.border-top--first{
		background-size: 108px 2px}	
}
@media screen and (min-width: 60em) {
	.border--first{
		background-size: 216px 2px, 2px 100%}
	.border-aside,.bordered-aside{
		background-size: 196px 2px}
	.border-top--first{
		background-size: 216px 2px}
	.border-header{
		background-size: 196px 2px, 100% 2px, 2px 100%;
		background-position: 0px 100%, 304px 100%, 304px 1em}
}