/* footer common styling */
/*-- common fonts and colour -----------------------------------*/
@font-face {
  font-family: "AvenirNext";
  src: url("../fonts/Avenir_Next.ttf");
}
:root {
  --bluegreenlight: rgb(162, 201, 213);
  --bluegreen2: rgb(130, 185, 195);
  --bluegreen3: rgb(74, 144, 150);
  --bluegreen4: rgb(96, 161, 175);
  --bluegreendark: rgb(1, 90, 120);
  --browntan: rgb(221, 225, 224);
  --brown2: rgb(215, 201, 175);
  --browndark: rgb(176, 143, 108);
}
/*--------------------------------------------------------------*/
footer {
  width: 100%;
  height: auto;
  padding: 0.625rem 0; /*10px*/
  background-color: var(--bluegreendark);
  text-align: center;
  color: white;
  font-family: "AvenirNext";
  font-size: 1rem; /*16px*/
}
#footerHeading {
  font-size: 1.5rem; /*24px*/
}
#hyperLink a:link {					/* hyperlink style */
  color: white;
  background-color: transparent;
  text-decoration: none;
}
#hyperLink a:visited {
  color: var(--browndark);
  background-color: transparent;
  text-decoration: none;
}
#hyperLink a:hover {
  color:var(--browntan);
  background-color: transparent;
  text-decoration: underline;
}
.sm-icon-bar {
  float: none;
  position: relative;			/* centre the icons */
  left: 50%;
  transform: translate(-50%, 0);
  width: 15rem; 				  /* set width - 240px */
  overflow: auto; 				/* Overflow due to float */
}
.sm-icon-bar a {
  float: left; 					    /* Float links side by side */
/*  text-align: left;			  /* Center-align text **/
  width: 25%; 					    /* Equal width (4 icons with 25% width each = 100%) */
  padding: 0 0; 				    /* Some top and bottom padding */
  transition: all 0.3s ease; 	/* Add transition for hover effects */
  color: white; 				    /* White text color */
  font-size: 2rem; 				  /* Increased font size - 32px*/
}
.sm-icon-bar a:hover {
  background-color: var(--bluegreen2); /*rgb(130, 185, 195); /* Add a hover color */
}
.fa {                       /* still have to figure out how to display local image */
/*  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome; /* not sure what FontAwesome font is /
  font-size: 14px;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;*/
  padding: 0.625rem; /*10px*/
  text-align: center;
  text-decoration: none;
}
.fa:hover {
  opacity: 0.8;
}
/*--------------------------------------------------------------*/
@media screen and (max-width: 50em) {
  footer {
	font-size: 0.875rem; /*14px*/
  }
}
/*--------------------------------------------------------------*/