html, body, figure {
    width:  100%;
    height: 100%;
    margin:   0;
    padding:  0;

    display:         flex;
    justify-content: center;
    align-items:     center;
}

h1 {
    font-size: 170%;
}
																 
h2 {
    font-size: 150%;
}

h3 {
    font-size: 130%;
}

@media screen and (max-width: 1300px) {
    h1 {
	font-size: 150%;
    }

    h2 {
	font-size: 130%;
    }
    
    h3 {
	font-size: 110%;
    }
}


body {
    background: url(images/uow-background--ko-te-tangata-red.png) no-repeat center center fixed;;
    background-size: cover;
    
    font-family:     'Inconsolata', Arial, Helvetica, sans-serif;
    color:           #000000;
}

.center {
    display:         flex;
    justify-content: center;
    align-items:     center;
    flex-direction:  column;
}


.button {
    position: relative;
    margin: auto;
    margin-top: 5px;
    padding: 10px;
    text-align: center;
    width: 400px;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    color: black;
    font-size: 50px;
    text-decoration: none;
    background-color: burlywood;
}


.frame {
    padding:5px;
}

    
/*
  CSS background image cross-fade (xfade) adapted from details in:
     https://stackoverflow.com/questions/24618296/crossfade-animation-does-not-work-in-firefox-ie-or-opera
*/

#xfade {
    position: relative;
}

#xfade figure {
    position: absolute;
    opacity: 0;
}


figure:nth-child(1) {
    background: url(images/uow-background--ko-te-tangata-red.png) no-repeat center center fixed;;
    background-size: cover;
    
    animation:         xfade 48s 0s infinite; /* name, duration, delay-start, iteration-count */
    -moz-animation:    xfade 48s 0s infinite;
    -webkit-animation: xfade 48s 0s infinite;
    -o-animation:      xfade 48s 0s infinite;
}
figure:nth-child(2) {
    background: url(images/uow-background--for-the-people-red.png) no-repeat center center fixed;;
    background-size: cover;

    animation:         xfade 48s 12s infinite;
    -moz-animation:    xfade 48s 12s infinite;
    -webkit-animation: xfade 48s 12s infinite;
    -o-animation:      xfade 48s 12s infinite;
}
figure:nth-child(3) {
    background: url(images/uow-background--for-the-people-yellow.png) no-repeat center center fixed;;
    background-size: cover;

    animation:         xfade 48s 24s infinite;
    -moz-animation:    xfade 48s 24s infinite;
    -webkit-animation: xfade 48s 24s infinite;
    -o-animation:      xfade 48s 24s infinite;
}
figure:nth-child(4) {
    background: url(images/uow-background--ko-te-tangata-yellow.png) no-repeat center center fixed;;
    background-size: cover;
    
    animation:         xfade 48s 36s infinite;
    -moz-animation:    xfade 48s 36s infinite;
    -webkit-animation: xfade 48s 36s infinite;
    -o-animation:      xfade 48s 36s infinite;
}


@keyframes xfade { 
  0%{
    opacity: 0;
  }
  5%{
    opacity: 1;
  }
  25% {
    opacity: 1;
  }
  30%{
    opacity: 0;
  }
}

@-webkit-keyframes xfade { /* e.g., Safari and Chrome */
  0%{
    opacity: 0;
  }
  2%{
    opacity: 1;
  }
  25% {
    opacity: 1;
  }
  40%{
    opacity: 0;
  }
}

@-moz-keyframes xfade {
  0%{
    opacity: 0;
  }
  2%{
    opacity: 1;
  }
  25% {
    opacity: 1;
  }
  40%{
    opacity: 0;
  }
}


@-o-keyframes xfade {
  0%{
    opacity: 0;
  }
  2%{
    opacity: 1;
  }
  25% {
    opacity: 1;
  }
  40%{
    opacity: 0;
  }
}

@-ms-keyframes xfade {
  0%{
    opacity: 0;
  }
  2%{
    opacity: 1;
  }
  25% {
    opacity: 1;
  }
  40%{
    opacity: 0;
  }
}