/* IMAGE STYLES */

    @keyframes FadeIn {
        0% {	opacity: 0.0; }
        25% {	opacity: 0.0; }
        100% {	opacity: 1.0; }
    }
    @keyframes FadeOut {
        0% {	opacity: 1.0; }
        25% {	opacity: 1.0; }
        100% {	opacity: 0.0; }
    }

    @keyframes FadeOutSlow {
        0% {	opacity: 1.0; }
        50% {	opacity: 1.0; }
        100% {	opacity: 0.0; }
    }


	img.bg {
		width: 70%;
		height: auto;
		padding-top: 2.5%;
		padding-left: 15%;
		padding-right: 15%;
	}

    .fadeIn {
        animation-name: FadeIn;
        animation-duration: 10s; 
        animation-fill-mode: forwards;
		-webkit-animation-fill-mode: forwards;
        /* animation-iteration-count:infinite; */
    }

    .fadeOut {
        animation-name: FadeOut;
        animation-duration: 10s; 
        animation-fill-mode: forwards;
		-webkit-animation-fill-mode: forwards;
        /* animation-iteration-count:infinite; */
    }

    .fadeOutSlow {
        animation-name: FadeOutSlow;
        animation-duration: 25s; 
        animation-fill-mode: forwards;
		-webkit-animation-fill-mode: forwards;
        /* animation-iteration-count:infinite; */
    }

    /* BOX STYLES */

    p {
      font-size: calc(8pt + 2vw);
      /*font-size: 10pt;8/
      color: inherit;
      line-height: 1.666;
      font-weight: lighter;
      word-wrap: break-word;
      /* text-rendering: geometricPrecision; */
      font-feature-settings: "kern" 1;
	  font-variant-ligatures: common-ligatures;
	  margin-top: 0px;
	  margin-bottom: 0px;
	  margin-left: auto;
	  margin-right: auto;
	  padding-bottom: 6em;
      text-align: center;
    }

	/* more text and any other "natural" text */
	.natural > p {
      font-size: 14pt;
      text-align: left;
	  padding-top: 10pt;
	  padding-bottom: 14pt;
	}

	.caption {
		font-variant: small-caps;
		color: #eeeeee;
	}

    div.textbox {
      padding-top: 33vh;
	  margin: auto;
    }

    div.fs {
	  top: 0px;
	  left: 0px;
	  right : 0px;
	  position: fixed;
	  margin: auto;
      display: block;
      min-width:100vw;
      min-height:100vh;
	  /*
      align-items: center;
      justify-content: center;
      flex-direction: column;
	  */
    } 

    /* TEXT STYLES */

    h1.title {
      text-align: center;
      color: inherit;
      font-size: calc(4pt + 7vw);
      /* font-size: 16pt; */
      font-weight: lighter;
	  margin-top: 0px;
	  margin-bottom: 0px;
	  margin-left: auto;
	  margin-right: auto;
    } 

    a {
	  
	  color: #C0EDF9; /* light blue */
	  /* color: #047689; teal */
	  text-decoration: none;
    }
	
    @keyframes hilight {
        0% {	color: #fcfac3;	} 
        70% {	color: #fcfac3;	} 
        100% {	color: #FFF91A;	}
    }

	.fadeHighlight {
      animation-name: hilight;
      animation-duration: 10s; 
      animation-fill-mode: forwards;
	  -webkit-animation-fill-mode: forwards;
	}

    a.hi {
	  color: #fcfac3;
	  text-decoration: none;
    }

	video { 
		height: auto;
		width: 100%;
	}

	/*
	button.play {
		display: block;
		background-image: url("ui/play-tw.png");
	}
	button.pause {
		display: none;
	}

	button.control {
		background-repeat: no-repeat;
		background-position: bottom right; 
		background-size: auto 1cm; 
		background-blend-mode: overlay;
		position: fixed;  
		right: 25px;  
		bottom: 25px;
		z-index: 500;
		width: 1cm;
		height: 1cm;
	}
	*/