.head-nav li:hover {
  	background-color: #eee;
	}
.head-nav li:hover:before {
  	background-color: #eee;
	}

.head-nav li:hover a {
  	color: #0000FF;
	}

.head-nav li:before {
  position: absolute;
  left: -0.925rem;
  top: 0;
  width: 0.925rem;
  height: 100%;
  content: "";
  z-index: 1;
  transition: background 400ms;  
}
.head-nav ul {
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
  padding: 0;
  list-style: none;  
	/**CENTER DIV**/
 		position: absolute;
  		top: 50%;
  		-webkit-transform: translateY(-50%);
  		-ms-transform: translateY(-50%);
  		transform: translateY(-50%); 


}
.head-nav li {
  position: relative;
  clear: both;
  width: 100%;
  padding: 0;
  transition: background 400ms; 
}
.head-nav li a {
  display: flex;
  padding-top: 0.7vh;
  padding-bottom: 0.7vh;  
}
.head-nav a {
  align-items: center;
  width: 100%;
  color: #333333;
  text-decoration: none;
  transition: color 400ms;  
}
.head-nav a span {
  position: relative;
  display: block;
  z-index: 0;
  font-family: 'Work Sans', sans-serif;
  text-indent: -20em;
  white-space: nowrap;
  transition: text-indent 400ms ease-in-out; 
}
.head-nav svg {
  position: relative;
  max-width: 30px;
  max-height: 30px;
  z-index: 1;
  fill: #fefefe;
  transition: 400ms;  
}
@media screen and (max: 768px) {
  .head-nav ul {
    margin-top: 0.23125rem;
  }
  .head-nav svg {
    max-width: 20px; 
  }
}

.main-head {
  	position: fixed;
  	bottom: 0;
  	width: 83px; width: 40px;
  	height: 100%;
  	z-index: 1;
  	transition: width 400ms; 
  	background: #E8E8E8;  
	background-image: url("../Picture_Center/background-center/concrete-wall.png");
	}

.main-head:hover {
  width: 200px; 
}
.main-head:hover + .wrap-all-the-things {
  transform: translateX(175px);
  max-width: 100%;
  opacity: 0.4; 
}
.main-head:hover .head-nav li:nth-of-type(1) span {
  transition-delay: 100ms;
}
.main-head:hover .head-nav li:nth-of-type(2) span {
  transition-delay: 200ms;
}
.main-head:hover .head-nav li:nth-of-type(3) span {
  transition-delay: 300ms;
}
.main-head:hover .head-nav li:nth-of-type(4) span {
  transition-delay: 400ms;
}
.main-head:hover .head-nav span {
  text-indent: 0;
}
@media screen and (max: 768px) {
  .main-head {
    width: 70px;
    padding: 0 0.925rem;  
  }
  .main-head .head-nav {
    padding-left: 7px;
  }
  .main-head:hover .head-nav span {
    text-indent: 1em;
  }
}

.wrap-all-the-things {
  min-height: 100%;
  height: 100%;
  margin-top: 140px !important;
  transition: transform 400ms, opacity 400ms; 
}






/***************************************************************************************************************************/

/* SMALLER TABLET screens -----------*/   /*--- SMALLER TABLET ---*/
@media screen and (max-width: 480px) {
  	.wrap-all-the-things {
		padding-left: 10px; 
  		}
	
	.main-head {
		display: none;  
		}
	}




/*********************************************************************************************************/
@media only screen and (min-width : 320px) and (max-width : 480px) {/*--- Mobile portrait ---*/
  	.wrap-all-the-things {
		padding-left: 10px;  
  		}
	
	.main-head {
		display: none;  
		}
	}




/*********************************************************************************************************/
@media only screen and (min-width : 480px) and (max-width : 595px) {/*--- Mobile landscape ---*/
  	.wrap-all-the-things {
		padding-left: 10px;  
  		}
	
	.main-head {
		display: none;  
		}
	}




/*********************************************************************************************************/
@media only screen and (min-width : 595px) and (max-width : 690px) {/*--- Small tablet portrait ---*/
  	.wrap-all-the-things {
		padding-left: 10px;   
  		}
	
	.main-head {
		display: none;  
		}
	}




/*********************************************************************************************************/
@media only screen and (min-width : 690px) and (max-width : 769px) {/*--- Tablet portrait ---*/
  	.wrap-all-the-things {
		padding-left: 10px;  
  		}
	
	.main-head {
		display: none;  
		}
	}




/*********************************************************************************************************/
/* SMALLER TABLET screens -----------*/   /*--- (location for ID picture) --- SMALLER TABLET ---*/
@media only screen and (min-width : 769px) and (max-width : 800px) {/*--- Small tablet landscape ---*/
	.wrap-all-the-things {
		padding-left: 78px;  
  		}
	
	.main-head {
		display: inline;  
		}
	}




/*********************************************************************************************************/
/* SMALLER TABLET screens -----------*/   /*--- (location for ID picture --- SMALLER TABLET ---*/
@media only screen and (min-width : 800px) and (max-width : 1024px) {/*--- Small tablet landscape ---*/
  	.wrap-all-the-things {
		padding-left: 78px;    
  		}
	
	.main-head {
		display: inline;  
		}
	}




/*********************************************************************************************************/
@media only screen and (min-width : 1024px) and (max-width : 1224px) {/*--- Tablet landscape ---*/
  	.wrap-all-the-things {
		padding-left: 78px; 
  		}
	
	.main-head {
		display: inline;  
		}
	}





/*********************************************************************************************************/
/* Desktops and laptops ----------- */  /*--- SMALL DESKTOP ---*/
@media only screen 
and (min-width : 1224px) {
  	.wrap-all-the-things {
		padding-left: 78px;  
		} 
	
	.main-head {
		display: inline;  
		}
	}
/*********************************************************************************************************/