/*
a {
  text-decoration: none;
  font-weight: 600;
}
a:focus, a:hover {
  text-decoration: none;
  font-weight: 600;
}

a.base {
  text-decoration: none;
  color: rgba(0, 0, 255, 0.7);
  border-bottom: 2px solid rgba(0, 255, 255, 1);
  font-weight: 700;
}
a.base:focus, a:hover {
  color: rgba(0, 0, 255, 1);
  border-color: rgba(255,255,255,1);
  outline: none;
  font-weight: 800;
}
*/
/* XXXXXXXXXXXXXXXXXXXXXXXX TOP> LINKS > Effect1 */
/*
a.effect1 {
  text-decoration: none;
  color: rgba(255,255,255,1);	
  position: relative;
  padding: 16px 7px;
  border-top: 2px solid rgba(255,255,255,0);
  border-bottom: 2px solid rgba(255,255,255,0);
  transition: padding .3s,border-color .3s;
}
*/
a.effect1 {
  text-decoration: none;
  /*  color: rgba(255,255,255,1);*/
  /*  color: rgba(6, 72,179, 1);*/
  color: rgba(0, 0, 255, 1);
  position: relative;
  padding: 16px 7px;
  border-top: 2px solid rgba(255, 255, 255, 0);
  border-bottom: 2px solid rgba(255, 255, 255, 0);
  transition: padding .3s, border-color .3s;
  font-weight: 700;
}
/*
a:focus, a:hover {
  padding: 5px 7px;
  border-color: rgba(255,255,255,1);
  outline: none;
}
*/
a.effect1:focus, a.effect1:hover {
  padding: 5px 7px;
  border-color: rgba(0, 0, 255, 1);
  outline: none;
}
a.effect1::before {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  max-height: 0;
  color: rgba(0, 255, 255, 0);
  border-left: 2px solid rgba(0, 255, 255, 0);
  content: attr(data-text);
  transition: max-height .3s, border-color 0s;
}
a.effect1::after {
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  padding: 5px;
  max-height: 0;
  color: rgba(255, 255, 255, 0);
  border-right: 2px solid rgba(255, 255, 255, 0);
  content: attr(data-text);
  transition: max-height .3s, border-color 0s;
}
a.effect1:focus::before, a.effect1:hover::before, a.effect1:focus::after, a.effect1:hover::after {
  max-height: 100%;
  transition-delay: .28s;
  border-color: rgba(0, 0, 255, 1);
}
/* XXXXXXXXXXXXXXXXXXXXXXXX END> LINKS > Effect1 */
/* XXXXXXXXXXXXXXXXXXXXXXXX TOP> LINKS > Effect2 
https://codepen.io/brenden/pen/RNZXqx
(Start Centered, animated line moving outward to the ends of the link)
*/
a.effect2, a.effect2:visited, a.effect2:hover, a.effect2:active {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  position: relative;
  transition: 0.5s color ease;
  text-decoration: none;
  /*	color:#81b3d2;*/
  /*	font-size:2.5em;*/
  font-weight: 600;
}
a.effect2:hover {
  color: rgba(0, 0, 255, 1);
}
a.effect2:after {
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}
a.effect2:after {
  content: "";
  transition: 0.5s all ease;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  position: absolute;
}
a.effect2:after {
  bottom: -0.25em;
}
/*
  height: 5px;
  height: 0.35rem;
*/
a.effect2:after {
  height: 2px;
  height: 0.1rem;
  width: 0;
  /*  background: #d73444;*/
  background: #FEC209;
}
a.effect2:hover:after {
  width: 100%;
}
/* XXXXXXXXXXXXXXXXXXXXXXXX END> LINKS > Effect2 */
/* XXXXXXXXXXXXXXXXXXXXXXXX TOP> LINKS > Effect3 
https://codepen.io/pirrera/pen/emKqBp
(Underlined link, animates to reveal background color)
*/
a.effect3 {
  text-decoration: none;
  border-bottom: 2px solid #FEC209;
  /*  box-shadow: inset 0 -4px 0 #FEC209;*/
/*  color: inherit;*/
  transition: background 0.9s cubic-bezier(.33, .66, .66, 1);
  font-weight: 700;
}
a.effect3:hover {
  background: #FEC209;
}
/* XXXXXXXXXXXXXXXXXXXXXXXX END> LINKS > Effect3 */
/* XXXXXXXXXXXXXXXXXXXXXXXX TOP> LINKS > Effect4 
https://codepen.io/nickcil/pen/aFbcm
(Line under link animates)
*/
a.effect4 {
  /* font-family: 'Lato';*/
  text-decoration: none;
  /*  font-size: 26px;*/
  color: #000;
  /*  font-weight: 900;*/
  margin: 0 20px 0 0;
  position: relative;
	box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;
}
a.effect4:before {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 2px;
/*  color: inherit;*/
  background-color: #000;
  content: '';
  -webkit-transform: translateY(8px);
  opacity: 0;
  transition-property: -webkit-transform, opacity;
  transition-duration: .3s;
}
a.effect4:hover:before {
  -webkit-transform: translateY(0);
/*  opacity: 0.5;*/
	opacity: 1;
}
a.effect4:hover {
	color:#FEC209;
}
/* XXXXXXXXXXXXXXXXXXXXXXXX END> LINKS > Effect4 */
/* XXXXXXXXXXXXXXXXXXXXXXXX TOP> LINKS > Effect5
https://codepen.io/nickcil/pen/aFbcm
(Line under link animates)
*/
a.effect5 {
  /* font-family: 'Lato';*/
  text-decoration: none;
  /*  font-size: 18px;*/
  /*  color: #000;*/
  /*  font-weight: 300;*/
  /*  margin: 0 2px;*/
  position: relative;
}
a.effect5:before {
  position: absolute;
  margin: 0 auto;
  top: 100%;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #000;
  content: '';
  opacity: .3;
  -webkit-transform: scaleX(.9);
  transition-property: opacity, -webkit-transform;
  /*  transition-duration: .3s;*/
  transition-duration: .5s;
}
a.effect5:hover:before {
  opacity: 1;
  -webkit-transform: scaleX(1);
}
/* XXXXXXXXXXXXXXXXXXXXXXXX END> LINKS > Effect5 */