.horizontal-nav-section {
	width: 100%;
	height: 85px;
	margin-top: 15px; 
	margin-bottom: 15px;
	border: 0px;
	}

.PrimaryNav {
  list-style: none;
  margin: 50px auto; 
  max-width: 720px;
  padding: 0;
  width: 100%;
}

.Nav-item {
  background: #E8E8E8;
  display: block;
  float: left;
  margin: 0;
  padding: 0;
  width: 20%;
  text-align: center;
}
.Nav-item:first-child {
  border-radius: 3px 0 0 3px;
}
.Nav-item:last-child {
  border-radius: 0 3px 3px 0; 
}
.Nav-item.is-active a {
  color: #0033CC; 
	font-weight: bold;
}
.Nav-item a {
  color: #082478;
  display: block;
  padding-top: 5px;
  padding-bottom: 5px;  
  text-decoration: none !important;  
}
.Nav-item a:hover {
  color: #e82d00;  
}






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

/* SMALLER TABLET screens -----------*/   /*--- SMALLER TABLET ---*/
@media screen and (max-width: 480px) {
  	.Nav-item a {
		font-size: 11px    
  		}
	}




/*********************************************************************************************************/
@media only screen and (min-width : 320px) and (max-width : 480px) {/*--- Mobile portrait ---*/
  	.Nav-item a {
		font-size: 12px; 
  		}
	}




/*********************************************************************************************************/
@media only screen and (min-width : 480px) and (max-width : 595px) {/*--- Mobile landscape ---*/
  	.Nav-item a {
		font-size: 13px;   
  		}
	}




/*********************************************************************************************************/
@media only screen and (min-width : 595px) and (max-width : 690px) {/*--- Small tablet portrait ---*/
  	.Nav-item a {
		font-size: 13px;    
  		}
	}




/*********************************************************************************************************/
@media only screen and (min-width : 690px) and (max-width : 769px) {/*--- Tablet portrait ---*/
  	.Nav-item a {
		font-size: 13px;   
  		}
	}




/*********************************************************************************************************/
/* SMALLER TABLET screens -----------*/   /*--- (location for ID picture) --- SMALLER TABLET ---*/
@media only screen and (min-width : 769px) and (max-width : 800px) {/*--- Small tablet landscape ---*/
	.Nav-item a {
		font-size: 14px;   
  		}
	}




/*********************************************************************************************************/
/* SMALLER TABLET screens -----------*/   /*--- (location for ID picture --- SMALLER TABLET ---*/
@media only screen and (min-width : 800px) and (max-width : 1024px) {/*--- Small tablet landscape ---*/
  	.Nav-item a {
		font-size: 15px;      
  		}
	}




/*********************************************************************************************************/
@media only screen and (min-width : 1024px) and (max-width : 1224px) {/*--- Tablet landscape ---*/
  	.Nav-item a {
		font-size: 17px; 
  		}
	}





/*********************************************************************************************************/
/* Desktops and laptops ----------- */  /*--- SMALL DESKTOP ---*/
@media only screen 
and (min-width : 1224px) {
  	.Nav-item a {
		font-size: 18px;  
		} 
	}
/*********************************************************************************************************/








.with-indicator {
  position: relative;
  z-index: 0;  
}
.with-indicator .Nav-item:last-child:before, .with-indicator .Nav-item:last-child:after {
  content: "";
  display: block;
  position: absolute;
  pointer-events: none;
  transition: left 1.3s ease;  
}
``````````````````````````````````````.with-indicator .Nav-item:last-child:before {
  border: 3px solid transparent;
  border-top-color: #082478;
  width: 0;
  height: 0;
  top: 0;
  left: 10%;
  margin-left: -3px;  
}

.with-indicator .Nav-item:last-child:after {
  	background: #082478;
  	top: -1px;
  	bottom: -1px;
  	left: 0;
  	width: 20%;
  	z-index: -1;
	}

.with-indicator .Nav-item:nth-child(1).is-active ~ .Nav-item:last-child:after {
  left: 0%;
}
.with-indicator .Nav-item:nth-child(1).is-active ~ .Nav-item:last-child:before {
  left: 10%;
}
.with-indicator .Nav-item:nth-child(2).is-active ~ .Nav-item:last-child:after {
  left: 20%;
}
.with-indicator .Nav-item:nth-child(2).is-active ~ .Nav-item:last-child:before {
  left: 30%;
}
.with-indicator .Nav-item:nth-child(3).is-active ~ .Nav-item:last-child:after {
  left: 40%;
}
.with-indicator .Nav-item:nth-child(3).is-active ~ .Nav-item:last-child:before {
  left: 50%;
}
.with-indicator .Nav-item:nth-child(4).is-active ~ .Nav-item:last-child:after {
  left: 60%;
}
.with-indicator .Nav-item:nth-child(4).is-active ~ .Nav-item:last-child:before {
  left: 70%;
}
.with-indicator .Nav-item:nth-child(1):hover ~ .Nav-item:last-child:after {
  left: 0% !important;
}
.with-indicator .Nav-item:nth-child(1):hover ~ .Nav-item:last-child:before {
  left: 10% !important;
}
.with-indicator .Nav-item:nth-child(2):hover ~ .Nav-item:last-child:after {
  left: 20% !important;
}
.with-indicator .Nav-item:nth-child(2):hover ~ .Nav-item:last-child:before {
  left: 30% !important;
}
.with-indicator .Nav-item:nth-child(3):hover ~ .Nav-item:last-child:after {
  left: 40% !important;
}
.with-indicator .Nav-item:nth-child(3):hover ~ .Nav-item:last-child:before {
  left: 50% !important;
}
.with-indicator .Nav-item:nth-child(4):hover ~ .Nav-item:last-child:after {
  left: 60% !important;
}
.with-indicator .Nav-item:nth-child(4):hover ~ .Nav-item:last-child:before {
  left: 70% !important;
}
.with-indicator .Nav-item:last-child:hover:before, .with-indicator .Nav-item:last-child.is-active:before {
  left: 90% !important;
}
.with-indicator .Nav-item:last-child:hover:after, .with-indicator .Nav-item:last-child.is-active:after {
  left: 80% !important;
}

*, *:before, *:after {
  box-sizing: border-box;
}

.PrimaryNav:before,
.PrimaryNav:after {
  content: " ";
  display: table;   
}

.PrimaryNav:after {
  clear: both;
}

.toggle {
  color: #fff;
  font-family: sans-serif;
  text-align: center;
}