/* reset */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font: inherit;
	font-size: 100%;
	vertical-align: baseline;
}
/*
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
*/


/* grid based on https://github.com/ireade/holy-grail-css-grid */

/* define grid areas */
.lfb-header { grid-area: header; }
.lfb-nav { grid-area: nav; }
.lfb-main { grid-area: main; }
.lfb-aside { grid-area: aside; }
.lfb-footer { grid-area: footer; }


.lfb {
	display: grid;
	grid-template-areas: "nav main header"
	                     "nav main aside"
	                     "footer footer footer";

	grid-template-columns: 14em 1fr 224px;

	grid-template-rows: 7em 
						          1fr 
						          .1em;

	min-height: 100vh;
}


@media screen and (max-width: 768px) {
	.lfb {
		grid-template-areas: "nav"
		                     "main"
		                     "footer";

		grid-template-columns: 100%;
		grid-template-rows: 14em 
							          1fr
							          .1em;
	}
/*  .logo-corner {
    position: fixed;
    z-index: -1;
    margin-top: -73em;
    overflow: hidden;
    opacity: .2;
    width: 100%;
  } */
}


/* misc. styling */

@font-face {
    font-family: 'Erk-Mn'; /* regular */
    src: url('../fnts/ErkMn.eot?#iefix') format('embedded-opentype'), 
        url('../fnts/ErkMn.woff') format('woff'), 
        url('../fnts/ErkMn.ttf')  format('truetype'),
        url('../fnts/ErkMn.svg#Erk-Mn') format('svg');
    font-weight: normal;
    font-style: normal;    
}

@font-face {
    font-family: 'Erk-Mn'; /* italic */
    src: url('../fnts/ErkMn-Italic.eot?#iefix') format('embedded-opentype'), 
        url('../fnts/ErkMn-Italic.woff') format('woff'), 
        url('../fnts/ErkMn-Italic.ttf')  format('truetype'),
        url('../fnts/ErkMn-Italic.svg#Erk-Mn-Italic') format('svg');
    font-weight: normal;
    font-style: italic;
}

html {
	font-size: 62.5%;
  overflow-x: hidden;
}

body {
	font-size: 1.4em;
	line-height: 1.6;
	font-family: 'Erk-Mn';
    /* background-color: rgba(211, 211, 211, 0.5); */
    animation: colorchange 20s; /* animation-name followed by duration in seconds */
    -webkit-animation: colorchange 20s; /* Chrome and Safari */
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

    @keyframes colorchange
    {
      0%   {background: rgba(211, 211, 211, 0.5);}
      25%  {background: rgba(152, 251, 152, 0.2);}
      100% {background: rgba(211, 211, 211, 0.5);}
    }

    @-webkit-keyframes colorchange
    {
      0%   {background: rgba(211, 211, 211, 0.5);}
      25%  {background: rgba(152, 251, 152, 0.2);}
      100% {background: rgba(211, 211, 211, 0.5);}
    }


p {
	display: block;
	margin-bottom: 15px;
  font-family: 'Erk-Mn';
}

em {
  font-style: italic;
}

a:link {
  text-decoration: none;
  color: black;
  border-bottom: 1px solid darkgray;
}

a:hover {
  font-style: italic;
  text-decoration: none;
  border-bottom: 1px solid black;
}

a:visited {
  text-decoration: none;
  color: black;
  border-bottom: 1px solid darkgray;
}

.lfb-header {
	/* background-color: rgba(0, 255, 255, 0.2); */
	font-size: 1.4em;
	display: flex;
	align-items: center;
	text-align: left;
  padding: 1.2em;
}

.lfb-footer {
	/* background-color: rgba(0, 255, 255, 0.6); */
	color: black;
	font-size: 1.4em;
	display: flex;
}

.logo-corner {
    position: fixed;
    z-index: -1;
    margin-top: -74%;
    overflow: hidden;
    /* height: 30em; */
    opacity: .2;
    min-width: 100%;
/*
    animation-name: rotate-logo;
    animation-duration: 160s;
    animation-iteration-count: infinite;
    transform-origin: 50% 50%;
    display: inline-block;
*/
}
/*
@keyframes rotate-logo {
    0% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(180deg);
    }
    100% {
        transform: rotate(0deg);
    }
}
*/

/*
.logo-corner-div {
    background-image: url("../img/FFB-cyan.svg");
    background-repeat: no-repeat;
    background-size: 100%;
    z-index: 10;
}
*/

.lfb-nav,
.lfb-aside {
	/* background-color: rgba(0, 255, 255, 0.4); */
	text-align: left;
}

/* .lfb-header, */
.lfb-nav,
.lfb-aside,
.lfb-main {
	padding: 1.2em;
 	font-size: 1.4em;
}


/* 'Pure CSS Ticker' method based on https://codepen.io/lewismcarey/pen/GJZVoG */

@-webkit-keyframes ticker {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }
  100% {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}
@keyframes ticker {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }
  100% {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}
.ticker-wrap {
  display: none;
  position: fixed;
  bottom: 0;
  width: 100%;
  overflow: hidden;
  height: 3.5em;
  /* background-color: rgba(0, 0, 0, 0.9); */
  padding-left: 100%;
}
.ticker {
  display: inline-block;
  height: 3.5em;
  line-height: 3.5em;
  white-space: nowrap;
  padding-right: 100%;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-name: ticker;
  animation-name: ticker;
  -webkit-animation-duration: 40s;
  animation-duration: 40s;
}
.ticker__item {
  display: inline-block;
  padding: 0 2rem;
  font-size: 2rem;
  color: black;
}