img {margin: 3px 10px 3px 0px} 
/* default for all images = margin on left pics 
which doesn't appear to work in Tiny MCE, perhaps 
in conjunction with Skeleton CSS */

a img {
  opacity: .5;
  filter: alpha(opacity=50);
  transition: opacity .25s ease-in-out;
  -moz-transition: opacity .25s ease-in-out;
  -webkit-transition: opacity .25s ease-in-out;
}

a:hover img {
  opacity: 1;
  filter: alpha(opacity=100);
  transition: opacity .25s ease-in-out;
  -moz-transition: opacity .25s ease-in-out;
  -webkit-transition: opacity .25s ease-in-out;
}

a { text-decoration: none; color: #232323; transition: color 0.3s ease; }
a:hover { color: tomato; }

/* for BIFF film */
.container {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
}
.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* preferred style for EGMAF bullet points */
ul {
  list-style-type: disc;
  list-style-position: outside;
}