/*! Generated by Fontspring (https://www.fontspring.com) on August 27, 2018. Fully installable fonts can be purchased at http://www.fontspring.com. The fonts included in this stylesheet are subject to the End User License you purchased from Fontspring. The fonts are protected under domestic and international trademark and copyright law. You are prohibited from modifying, reverse engineering, duplicating, or distributing this font software. (c) 2010-2018 Fontspring */
@font-face { font-family: 'Amsi pro condlight'; src: url(/_assets/_fonts/amsipro/amsiprocond-light-webfont.woff2) format('woff2'), url(/_assets/_fonts/amsipro/amsiprocond-light-webfont.woff) format('woff'); font-weight: normal; font-style: normal; font-display: swap; }
@font-face { font-family: 'Amsi pro condbold'; src: local('Amsi pro condbold'), local('Amsi-pro-condbold'), url(/_assets/_fonts/amsipro/amsiprocond-bold-webfont.woff2) format('woff2'), url(/_assets/_fonts/amsipro/amsiprocond-bold-webfont.woff) format('woff'); font-style: normal; font-weight: 700; font-display: swap; }
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 400; src: local('Open Sans Regular'), local('OpenSans-Regular'), url(/_assets/_fonts/opensans/opensans-regular.woff2) format('woff2'), url(/_assets/_fonts/opensans/opensans-regular.woff) format('woff'); font-display: swap; }
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 700; src: local('Open Sans Semibold'), local('OpenSans-semibold'), url(/_assets/_fonts/opensans/opensans-semibold.woff2) format('woff2'), url(/_assets/_fonts/opensans/opensans-semibold.woff) format('woff'); font-display: swap; }
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 300; src: local('Open Sans Light'), local('OpenSans-Light'), url(/_assets/_fonts/opensans/opensans-light.woff2) format('woff2'), url(/_assets/_fonts/opensans/opensans-light.woff) format('woff'); font-display: swap; }


/*****************

InBrief CSS

*****************/

body {
  background: url(gfx/background-2019.png) repeat-x 0 0;
}
nav#global_nav {
  padding: 13px 18px 0px;
}
div.global_nav_footer {
  background: url(/_assets/_gfx/sprite-nav.png) no-repeat -170px bottom;
  height: 16px;
  bottom: -64px;
}
header#global_intro {
  margin: 12px 0 0 0;
}
div.global_nav_main ul,
nav#global_nav p {
  display: none;
}
header#global_intro h1.global_intro_maori {
  margin-bottom: 0;
}
#title h1 {
  background: url(gfx/title.png) 24px 185px no-repeat;
  color: #444444;
  font-family: 'Amsi pro condbold', 'Open Sans', Helvetica, Arial, Geneva, sans-serif;
  font-size: 34px;
  font-weight: 700;
  line-height: 1.2;
  margin-top: 3px;
  opacity: 1;
  padding: 450px 0px 14px 23px;
  position: static;
	text-indent: -9999px;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
}
#title h1.notopimage {
  max-width: 882px;
}
#wrapper {
  background: url(gfx/banner-2019.jpg) no-repeat right 0;
}
.titleinner {
  padding-top: 3px;
  padding-bottom: 0px;
}
.titleinner img {
  display: none;
}
.titleinner h1 {
  margin-top: 0px;
}
#contentwrapper {
  width: 100%;
  padding: 0 0px 14px 0px;
  margin: 0 auto;
}
.search #contentwrapper {
  max-width: 1114px;
  margin: 0 auto;
}
#content {
  margin: 0;
  padding: 0;
  width: 100%;
  float: none;
}
.search #content {
  max-width: 882px;
  margin-left: 232px;
}
#content .background-white {
  /*padding-bottom: 80px;*/
}
#content .background-blue {
  background: url(gfx/tesselation-background.png) right 0 no-repeat #1f4a8c;
  overflow: hidden;
  /*padding-bottom: 80px;*/
  clear: both;
}
#content .content-inner {
  max-width: 1114px;
  margin: 63px auto 50px auto;
}
#content .background-white:nth-child(1) .content-inner:nth-child(1) {
  margin: 0px auto 60px auto;
  position: relative;
}
#content .background-white:nth-child(1) .content-inner:nth-child(1):after {
  content: '';
  display: block;
  width: 90px;
  height: 70px;
  background: #ffffff url(gfx/arrow-down.png) center center no-repeat;
  background-size: 50%;
  position: absolute;
  bottom: -40px;
  left: 46%;
}
#content .content-inner ul {
  position: relative;
}
#content .content-inner ul:after {
  content: '';
  display: block;
  width: 100%;
  height: 0px;
  position: relative;
  clear: both;
}
#content .content-inner li {
  width: 30%;
  margin-right: 5%;
  display: inline-block;
  float: left;
  margin-bottom: 42px;
  position: relative;
}
#content .content-inner li:before {
  width: 12px;
  height: 25px;
  content:'';
  background: url(gfx/arrow-blue.svg) no-repeat;
  position: absolute;
  top: 2px;
  left: -30px;
}
#content .background-photo h2:before {
  content: '';
  width: 100px;
  height: 7px;
  background: #f9c000;
  position: absolute;
  top: -35px;
  left: 45.7%;
}
#content .background-photo h2:after {
  content: '';
  width: 100px;
  height: 50px;
  background: url(gfx/arrow-down-white.png) center center no-repeat;
  position: absolute;
  bottom: -65px;
  left: 45.7%;
}
#content .content-inner li a {
  border-bottom: none;
}
#content .background-blue .content-inner li a {
  color: #c9dcff;
}
#content .content-inner li li {
  float: none;
  width: 100%;
  margin-bottom: 0;
  font-size: 13px;
}
#content .content-inner li li:before {
  background-size: 10px;
  top: 5px;
  left: -20px;
}
#content .content-inner li:nth-of-type(3n) {
  margin-right: 0;
}
#content .content-inner li:nth-of-type(3n+1) {
  clear: left;
}
#content p,
#content ul,
#content li {
  font-family: 'Open Sans', Helvetica, Arial, Geneva, sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.5;
}
#content h1 {
  color: #1f4a8c;
  font-family: 'Amsi pro condbold', 'Open Sans', Helvetica, Arial, Geneva, sans-serif;
  font-size: 45px;
  font-weight: 300;
  line-height: 1.2;
  margin-bottom: 7px;
  text-align: center;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
#content h1 strong {
  font-weight: 800;
  color: #f9c000;
}
#content h2 {
  border-bottom: none;
  color: #1f4a8c;
  font-size: 60px;
  font-family: 'Amsi pro condbold', 'Open Sans', Helvetica, Arial, Geneva, sans-serif;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.3;
  margin-bottom: 100px;
  padding-bottom: 7px;
  position: relative;
  text-align: center;
  text-rendering: optimizeLegibility;
  text-transform: uppercase;

}
#content h2:after {
  width: 10%;
  height: 5px;
  content:'';
  background: #f9c000;
  position: absolute;
  bottom: -40px;
  left: 44.5%;
}
#content .background-blue h2,
#content .background-blue p,
#content .background-blue ul {
  color: #ffffff;
}
#content .icon-container h2 {
  color: #1f4a8c;
  font-family: 'Amsi pro condlight', 'Open Sans', Helvetica, Arial, Geneva, sans-serif;
  font-size: 70px;
  font-weight: 300;
  letter-spacing: 0.02em;
  margin-bottom: 14px;
  margin-top: 0;
  padding-bottom: 0;
  text-transform: none;
}
#content .icon-container h2:after {
  display: none;
}
#content .icon-container h3 {
  font-family: 'Open Sans', Helvetica, Arial, Geneva, sans-serif;
  font-weight: 300;
  text-align: center;
  color: #555555;
  line-height: 1.4;
}
#content .icon-container h3 a {
  font-variant-position: super;
  border-bottom: none;
}
#content h4 {
  color: #f9c000;
  font-family: 'Amsi pro condbold', 'Open Sans', Helvetica, Arial, Geneva, sans-serif;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0.03em;
  margin-bottom: 21px;
  text-align: center;
  text-transform: uppercase;
}
#content .background-white:nth-of-type(1) {
  padding-bottom: 0;
}
#content .background-white .content-inner:nth-of-type(1) p {
  border-bottom: 1px solid #e4e4e4;
  color: #aaaaaa;
  font-family: 'Amsi pro condlight', 'Open Sans', Helvetica, Arial, Geneva, sans-serif;
  font-size: 38px;
  padding-bottom: 63px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
}
#right {
  background-size: 26px 100%;
}
#content .foot-notes ul {
  border-top: 2px solid #e4e4e4;
  padding-top: 49px;
}
#content .foot-notes li {
  width: 100%;
  margin-right: 0;
  margin-bottom: 7px;
  float: none;
  display: block;
  font-size: 13px;
  font-style: italic;
  font-family: Helvetica, Arial, Geneva, sans-serif;
}
#content .foot-notes li:before {
  display: none;
}
#content .foot-notes li span {
  color: #f9c000;
  width: 21px;
  display: inline-block;
}
.back-up {
  background: #f1f1f1;
  padding: 3px 7px;
  margin-left: 5px;
  border-radius: 16px;
}
#content  a.back-up {
  border-bottom: none;
  font-size: 11px;
  font-style: normal;
  transition: all 0.2s ease;
}
#content  a.back-up:hover {
  background: #416ebf;
  color: #ffffff;
}
.flexbox .container {
  max-width: 1114px;
  margin: 0 auto;
  display: flex;
  -webkit-flex-flow: row wrap;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
.no-flexbox .container {
    max-width: 1114px;
    margin: 0 auto;
}
.flexbox .icon-container {
    -webkit-animation: fadein 3s;
    animation: fadein 3s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    background: #fff;
    border: 1px solid #dddddd;
    border-radius: 3px;
    flex: 0 47%;
    margin-bottom: 63px;
}
.no-flexbox .icon-container {
    background: #fff;
    border-radius: 4px;
    margin-bottom: 63px;
    width: 47.5%;
    float: left;
}
.no-flexbox .icon-container:nth-of-type(2n+1) {
    margin-right: 5%;
}
.background-white .icon-container {
    box-shadow: 0 0 40px #e4e4e4;
}
.flexbox .icon {
    background: #ffffff;
    margin: 5%;
    padding: 5% 5% 5% 5%;
    -webkit-box-flex: 35%;
    -webkit-flex: 35%;
    -ms-flex: 35%;
    flex: 35%;
}
.no-flexbox .icon {
    background: #ffffff;
    margin: 5%;
    padding: 5% 5% 5% 5%;
}
#content li span a {
    font-size: 12px;
    vertical-align: top;
    border-bottom: none;
}
#content .background-blue li span a {
    color: #c9dcff;
}
/* Photo background blocks */
#content .background-photo.photo1 {
    background: url(gfx/banner1.jpg) no-repeat center bottom;
}
#content .background-photo.photo2 {
    background: url(gfx/banner2.jpg) no-repeat center bottom;
}
#content .background-photo.photo3 {
    background: url(gfx/banner3.jpg) no-repeat center bottom;
}
#content .background-photo.photo4 {
    background: url(gfx/banner6.jpg) no-repeat center bottom;
}
#content .background-photo.photo5 {
    background: url(gfx/banner5.jpg) no-repeat center bottom;
}
#content .background-photo.photo1,
#content .background-photo.photo2,
#content .background-photo.photo3,
#content .background-photo.photo4,
#content .background-photo.photo5 {
    background-size: cover;
    overflow: hidden;
    padding-top: 250px;
    padding-bottom: 0px;
}
#content .background-photo.photo1 h2,
#content .background-photo.photo2 h2,
#content .background-photo.photo3 h2,
#content .background-photo.photo4 h2,
#content .background-photo.photo5 h2 {
    color: #ffffff;
    text-shadow: 0px 0px 14px #000;
}
#content .background-photo.photo4 h2 span {
    position: relative;
    display: inline-block;
}
#content .background-photo.photo4 h2 span:before {
    width: 29px;
    content: '';
    height: 4px;
    position: absolute;
    display: block;
    background: #ffffff;
    top: 4px;
    left: 0;
}


/* Animations */

#content .icon1 p,
#content .icon2 p,
#content .icon3 p,
#content .icon4 p,
#content .icon5 p,
#content .icon8 p,
#content .icon12 p {
    text-indent: -9999px;
    margin: 0;
    line-height: 0;
    padding: 0 !important;
    font-size: 10px;
    border-bottom: none !important;
}
#content .icon-container .icon2 h2,
#content .icon-container .icon3 h2,
#content .icon-container .icon6 h2,
#content .icon-container .icon9 h2,
#content .icon-container .icon10 h2,
#content .icon-container .icon11 h2,
#content .icon-container .icon13 h2,
#content .icon-container .icon14 h2,
#content .icon-container .icon15 h2,
#content .icon-container .icon16 h2,
#content .icon-container .icon17 h2,
#content .icon-container .icon18 h2 {
    margin-top: 0px;
}
#content .icon-container .icon4 h2,
#content .icon-container .icon5 h2 {
    margin-top: 21px;
}
#content .icon-container .icon7 h2 {
    margin-top: 42px;
}
#content .icon-container .icon10 h2 {
    margin-top: 49px;
}
/* Icons one */
.head-one,
.head-two,
.head-three,
.head-four,
.head-five,
.head-six,
.head-seven,
.head-eight,
.head-nine,
.head-ten,
.head-eleven,
.head-twelve,
.head-thirteen,
.head-fourteen,
.head-fifteen,
.head-sixteen,
.head-seventeen,
.head-eighteen,
.head-nineteen,
.head-twenty {
    width: 20%;
    float: left;
    height: 80px;
    display: block;
    opacity: 0;
}
.element-visible .head-one,
.element-visible .head-two,
.element-visible .head-three,
.element-visible .head-four,
.element-visible .head-five,
.element-visible .head-six,
.element-visible .head-seven,
.element-visible .head-eight,
.element-visible .head-nine,
.element-visible .head-ten,
.element-visible .head-eleven,
.element-visible .head-twelve,
.element-visible .head-thirteen,
.element-visible .head-fourteen,
.element-visible .head-fifteen,
.element-visible .head-sixteen,
.element-visible .head-seventeen,
.element-visible .head-eighteen,
.element-visible .head-nineteen,
.element-visible .head-twenty {
    -webkit-animation: fadein-grow forwards 2s;
    animation: fadein-grow forwards 2s;
    -webkit-animation-delay: 0.5s;
    animation-delay: 0.5s;
}
.head-one,
.head-three,
.head-five,
.head-seven,
.head-nine,
.head-eleven,
.head-thirteen,
.head-fifteen,
.head-seventeen,
.head-nineteen {
    background: url(gfx/head-man.svg) no-repeat center center;
    background-size: 80%;
}
.element-visible .head-two,
.element-visible .head-four,
.element-visible .head-six,
.element-visible .head-eight,
.element-visible .head-ten,
.element-visible .head-twelve,
.element-visible .head-fourteen,
.element-visible .head-sixteen,
.element-visible .head-eighteen,
.element-visible .head-twenty {
    background: url(gfx/head-woman.svg) no-repeat center center;
    background-size: 90%;
    -webkit-animation-delay: 0.7s;
    animation-delay: 0.7s;
}
.no-cssanimations #content .icon1 {
    background: url(gfx/heads.png) no-repeat center 0;
}
/* Icon 2 */
.icon2 .earth {
    background: url(gfx/world.svg) no-repeat center center;
    background-size: 60%;
    height: 300px;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
}
.icon2 .element-visible .earth {
    -webkit-animation: fadein-grow forwards 2s;
    animation: fadein-grow forwards 2s;
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
}
.no-cssanimations .icon2 {
    background: url(gfx/world.png) no-repeat center 20px;
    background-size: 40%;
}
/* Icon 3 */
.icon3 .icon-layer-outer  {
    background: url(gfx/medal2.svg) no-repeat center 1000px;
    background-size: 40%;
    padding-bottom: 42px;
}
.icon3 .icon-layer-outer .icon-layer {
    background: url(gfx/medal1.svg) no-repeat center center;
    background-size: 50%;
    height: 200px;
    opacity: 0;
}
.icon3 .icon-layer-outer.element-visible  {
    -webkit-animation: movein 3s forwards;
    animation: movein 3s forwards;
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
}
.icon3 .icon-layer-outer.element-visible .icon-layer {
    -webkit-animation: fadeinspin 3s forwards;
    animation: fadeinspin 3s forwards;
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
}
.no-cssanimations .icon3 .icon-layer-outer {
    background: url(gfx/medal.png) no-repeat center top;
}
/* Icon 4 */
.icon4 h2:before {
    clear: both;
    width: 100%;
    height: 1px;
    display: block;
    content: '';
}
.icon4 .microscope,
.icon4 .arts,
.icon4 .brain,
.icon4 .computer,
.icon4 .dna,
.icon4 .leaf {
    width: 20%;
    float: left;
    height: 80px;
    display: block;
    background: url(gfx/microscope.svg) no-repeat center center;
    background-size: 75%;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
}
.icon4 .microscope {
    background: url(gfx/microscope.svg) no-repeat center center;
    background-size: 75%;
}
.icon4 .arts {
    background: url(gfx/arts.svg) no-repeat center center;
    background-size: 75%;
}
.icon4 .brain {
    background: url(gfx/brain.svg) no-repeat center center;
    background-size: 75%;
}
.icon4 .computer {
    background: url(gfx/computer.svg) no-repeat center center;
    background-size: 75%;
}
.icon4 .dna {
    background: url(gfx/dna.svg) no-repeat center center;
    background-size: 75%;
}
.icon4 .leaf {
    background: url(gfx/leaf.svg) no-repeat center center;
    background-size: 75%;
}
.icon4 .element-visible .microscope,
.icon4 .element-visible .arts,
.icon4 .element-visible .brain,
.icon4 .element-visible .computer,
.icon4 .element-visible .dna,
.icon4 .element-visible .leaf {
    -webkit-animation: fadein-grow forwards 2s;
    animation: fadein-grow forwards 2s;
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
}
.icon4 .element-visible .microscope,
.icon4 .element-visible .arts {
    -webkit-animation-delay: 0.5s;
    animation-delay: 0.5s;
}
.icon4 .element-visible .brain,
.icon4 .element-visible .leaf {
    -webkit-animation-delay: 0.7s;
    animation-delay: 0.7s;
}
.no-cssanimations .icon4 {
    background: url(gfx/microscopes.png) no-repeat center top;
    background-size: 400px;
}
/* Icon 5 */
.icon5 .undergraduate {
    background: url(gfx/student.svg) no-repeat 50px 20px;
    background-size: 100%;
    width: 49%;
    float: left;
    height: 220px;
    opacity: 0;
}
.icon5 .postgraduate {
    background: url(gfx/graduate.svg) no-repeat -60px 0;
    width: 47%;
    float: left;
    height: 220px;
    background-size: 120%;
    opacity: 0;
}
.icon5 .element-visible .undergraduate {
    -webkit-animation: fadein-grow forwards 2s;
    animation: fadein-grow forwards 2s;
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
}
.icon5 .element-visible .postgraduate {
    -webkit-animation: fadein-grow forwards 2s;
    animation: fadein-grow forwards 2s;
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
}
.no-cssanimations .icon5 {
    background: url(gfx/students.png) no-repeat center 0;
}
/* Icon 6 */
.icon6 svg,
.icon7 svg,
.icon10 svg,
.icon15 svg {
    width: 200px;
    height: 200px;
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    border-radius: 50%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    opacity: 0;
}
.icon6 .element-visible svg,
.icon7 .element-visible svg,
.icon10 .element-visible svg,
.icon15 .element-visible svg {
    -webkit-animation: fadein-grow 1s ease;
    animation: fadein-grow 1s ease;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
}
.icon6 .icon-layer-outer.element-visible {
    background: url(gfx/tooth.svg) no-repeat center 0;
    background-size: 50%;
    height: 220px;
    opacity: 0;
}
.icon6 .icon-layer-outer.element-visible {
    -webkit-animation: fadein-wiggle 2s ease;
    animation: fadein-wiggle 2s ease;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
}
.no-cssanimations .icon6 {
    background: url(gfx/tooth.png) no-repeat center 0;
    background-size: 40%;
}
/* Icon 7 */
.icon7 circle {
    fill: #f9c000;
    stroke: #fcda6d;
    stroke-width: 32;
    stroke-dasharray: 80 100;
}
.icon7 .element-visible circle {
    -webkit-animation: grow-more 2s ease;
    animation: grow-more 2s ease;
    -webkit-animation-fill-mode: backwards;
    animation-fill-mode: backwards;
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
}
.no-cssanimations .icon7 {
    background: url(gfx/80-percent.png) no-repeat center 10px;
}
/* Icon 8 */
.icon8 .college {
    width: 20%;
    float: left;
    height: 80px;
    display: block;
    background: url(gfx/college.svg) no-repeat center center;
    background-size: 75%;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
}
.icon8 .element-visible .college {
    -webkit-animation: fadein-grow forwards 2s;
    animation: fadein-grow forwards 2s;
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
}
.no-cssanimations .icon8 {
    background: url(gfx/colleges.png) no-repeat center 10px;
}
/* Icon 9 */
.icon9 .icon-layer {
    height: 250px;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    opacity: 0;
}
.icon9 .element-visible .icon-layer {
    background: url(gfx/rhode.svg) no-repeat center center;
    background-size: 60%;
    -webkit-animation: fadein-grow forwards 2s;
    animation: fadein-grow forwards 2s;
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
}
.no-cssanimations .icon9 {
    background: url(gfx/rhode.png) no-repeat center 70px;
}
/* Icon 10 */
.icon10 circle {
    fill: #f9c000;
    stroke: #fcda6d;
    stroke-width: 32;
    stroke-dasharray: 93 100;
}
.icon10 .element-visible circle {
    -webkit-animation: grow-even-more 2s ease;
    animation: grow-even-more 2s ease;
    -webkit-animation-fill-mode: backwards;
    animation-fill-mode: backwards;
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
}
.no-cssanimations .icon10 {
    background: url(gfx/93-percent.png) no-repeat center 20px;
}
/* Icon 11 */
.icon11 .icon-layer {
    height: 200px;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    opacity: 0;
}
.icon11 .element-visible .icon-layer {
    background: url(gfx/tiara.svg) no-repeat center center;
    background-size: 60%;
    -webkit-animation: fadein-grow forwards 2s;
    animation: fadein-grow forwards 2s;
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
}
.no-cssanimations .icon11 {
    background: url(gfx/tiara.png) no-repeat center 80px;
}
/* Icon 12 */
.icon12 .day {
    background: url(gfx/sun.svg) no-repeat center center;
    width: 40%;
    margin-right: 20%;
    height: 200px;
    float: left;
    opacity: 0;
}
.icon12 .night {
    background: url(gfx/moon.svg) no-repeat center center;
    background-size: 90%;
    width: 40%;
    height: 200px;
    float: left;
    opacity: 0;
}
.icon12 .element-visible .day {
    -webkit-animation: rise 3s forwards;
    animation: rise 3s forwards;
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
}
.icon12 .element-visible .night {
    -webkit-animation: setdown 2s forwards;
    animation: setdown 2s forwards;
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
}
.no-cssanimations .icon12 {
    background: url(gfx/sun-moon.png) no-repeat center 20px;
}
/* Icon 13 */
.icon13 .icon-layer {
    height: 200px;
    opacity: 0;
}
.icon13 .element-visible .icon-layer {
    background: url(gfx/maori.svg) no-repeat center center;
    background-size: 100%;
    -webkit-animation: in-from-left forwards 2s;
    animation: in-from-left forwards 2s;
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
    transform-origin: center left;
}
.no-cssanimations .icon13 {
    background: url(gfx/maori.png) no-repeat center 100px;
}
/* Icon 14 */
.icon14 .icon-layer {
    height: 200px;
    opacity: 0;
}
.icon14 .element-visible .icon-layer {
    background: url(gfx/pacific.svg) no-repeat center center;
    background-size: 100%;
    -webkit-animation: in-from-left forwards 2s;
    animation: in-from-left forwards 2s;
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
    transform-origin: center left;
}
.no-cssanimations .icon14 {
    background: url(gfx/pacific.png) no-repeat center 100px;
}
/* Icon 15 */
.icon15 .element-visible circle {
     fill: #f9c000;
    stroke: #fcda6d;
    stroke-width: 32;
    stroke-dasharray: 95 100;
    -webkit-animation: grow-even-more 2s ease;
    animation: grow-even-more 2s ease;
    -webkit-animation-fill-mode: backwards;
    animation-fill-mode: backwards;
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
}
.no-cssanimations .icon15 {
    background: url(gfx/95-percent.png) no-repeat center 20px;
}
/* Icon 16 */
.icon16 .icon-layer {
    height: 200px;
    opacity: 0;
}
.icon16 .element-visible .icon-layer {
    background: url(gfx/poison.svg) no-repeat center center;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    -webkit-animation: dropin forwards 2s;
    animation: dropin forwards 2s;
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
}
.no-cssanimations .icon16 {
    background: url(gfx/poison.png) no-repeat center 20px;
}
/* Icon 17 */
.icon17 .element-visible .icon-layer {
    height: 250px;
    background: url(gfx/chat.svg) no-repeat center center;
    -webkit-animation: fadein-grow forwards 2s;
    animation: fadein-grow forwards 2s;
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    opacity: 0;
}
.no-cssanimations .icon17 {
    background: url(gfx/chat.png) no-repeat center 100px;
}
/* Icon 18 */
.icon18 .element-visible .icon-layer {
    height: 250px;
    opacity: 0;
}
.icon18 .element-visible .icon-layer {
    background: url(gfx/plane.svg) no-repeat center center;
    background-size: 60%;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    -webkit-animation: fadein-fly forwards 2s;
    animation: fadein-fly forwards 2s;
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
}
.no-cssanimations .icon18 {
    background: url(gfx/plane.png) no-repeat center 100px;
}

/* Keyframes */
@-webkit-keyframes fadein-grow {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
        opacity: 0;
    }
    50% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }
}
@keyframes fadein-grow {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
        opacity: 0;
    }
    50% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }
}
@-webkit-keyframes movein {
    0% {
       background-position: center 1000px;
    }
    100% {
       background-position: center bottom;
    }
}
@keyframes movein {
    0% {
       background-position: center 1000px;
    }
    100% {
       background-position: center bottom;
    }
}
@-webkit-keyframes rise {
    0% {
       background-position: center 500px;
        opacity: 0;
    }
    100% {
       background-position: center center;
        opacity: 1;
    }
}
@keyframes rise {
    0% {
        background-position: center 500px;
        opacity: 0;
    }
    100% {
        background-position: center center;
        opacity: 1;
    }
}
@-webkit-keyframes setdown {
    0% {
        background-position: center -500px;
        opacity: 0;
    }
    100% {
        background-position: center center;
        opacity: 1;
    }
}
@keyframes setdown {
    0% {
        background-position: center -500px;
        opacity: 0;
    }
    100% {
        background-position: center center;
        opacity: 1;
    }
}
@-webkit-keyframes fadeinspin {
    0% {
       opacity: 0;
       -webkit-transform: rotate(180deg) scale(0);
       transform: rotate(180deg) scale(0);
    }
    50% {
       -webkit-transform: rotate(0) scale(1.3);
       transform: rotate(0) scale(1.3);
    }
    100% {
       opacity: 1;
       -webkit-transform: rotate(0) scale(1);
       transform: rotate(0) scale(1);
    }
}
@keyframes fadeinspin {
    0% {
       opacity: 0;
       -webkit-transform: rotate(180deg) scale(0);
       transform: rotate(180deg) scale(0);
    }
    50% {
       -webkit-transform: rotate(0) scale(1.3);
       transform: rotate(0) scale(1.3);
    }
    100% {
       opacity: 1;
       -webkit-transform: rotate(0) scale(1);
       transform: rotate(0) scale(1);
    }
}
@-webkit-keyframes grow {
    from { stroke-dasharray: 0 100; }
    to { stroke-dasharray: 10 100; }
}
@keyframes grow {
    from { stroke-dasharray: 0 100; }
    to { stroke-dasharray: 10 100; }
}
@-webkit-keyframes grow-more {
    from { stroke-dasharray: 0 100; }
    to { stroke-dasharray: 80 100; }
}
@keyframes grow-more {
    from { stroke-dasharray: 0 100; }
    to { stroke-dasharray: 80 100; }
}
@-webkit-keyframes grow-even-more {
    from { stroke-dasharray: 0 100; }
    to { stroke-dasharray: 93 100; }
}
@keyframes grow-even-more {
    from { stroke-dasharray: 0 100; }
    to { stroke-dasharray: 93 100; }
}
@-webkit-keyframes dropin {
    0% {
       opacity: 0;
       -webkit-transform: translate(0px, -110px) rotate(0);
       transform: translate(0px, -110px) rotate(0);
    }
    40%{
        -webkit-transform: translate(0px, 5px);
        transform: translate(0px, 5px);
    }
    45%{
        -webkit-transform: translate(0px, 0px) rotate(-5deg);
        transform: translate(0px, 0px) rotate(-5deg);
    }
    75% {
       -webkit-transform: rotate(5deg);
       transform: rotate(5deg)
    }
    100% {
       opacity: 1;
       -webkit-transform: rotate(0) scale(1);
       transform: rotate(0) scale(1);
    }
}
@keyframes dropin {
    0% {
       opacity: 0;
       -webkit-transform: translate(0px, -110px) rotate(0);
       transform: translate(0px, -110px) rotate(0);
    }
    40%{
        -webkit-transform: translate(0px, 5px);
        transform: translate(0px, 5px);
    }
    45%{
        -webkit-transform: translate(0px, 0px) rotate(-5deg);
        transform: translate(0px, 0px) rotate(-5deg);
    }
    75% {
       -webkit-transform: rotate(5deg);
       transform: rotate(5deg)
    }
    100% {
       opacity: 1;
       -webkit-transform: rotate(0) scale(1);
       transform: rotate(0) scale(1);
    }
}
@-webkit-keyframes in-from-left {
    0% {
       opacity: 0;
       -webkit-transform: scaleX(0) translateX(10px);
       transform: scaleX(0) translateX(10px);
    }
    100% {
       opacity: 1;
       -webkit-transform: scaleX(1) translateX(0px);
       transform: scaleX(1) translateX(0px);
    }
}
@keyframes in-from-left {
    0% {
       opacity: 0;
       -webkit-transform: scaleX(0) translateX(10px);
       transform: scaleX(0) translateX(10px);
    }
    100% {
       opacity: 1;
       -webkit-transform: scaleX(1) translateX(0px);
       transform: scaleX(1) translateX(0px);
    }
}
@-webkit-keyframes fadein-fly {
    0% {
        -webkit-transform: translate(300px, 200px);
        transform: translate(300px, 200px);
        opacity: 0;
        -webkit-transform-origin: bottom right;
        transform-origin: bottom right;
    }
    100% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
        opacity: 1;
    }
}
@keyframes fadein-fly {
    0% {
        -webkit-transform: translate(300px, 200px);
        transform: translate(300px, 200px);
        opacity: 0;
        -webkit-transform-origin: bottom right;
        transform-origin: bottom right;
    }
    100% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
        opacity: 1;
    }
}
@-webkit-keyframes fadein-wiggle {
    0% {
        -webkit-transform: translate(0px, 200px);
        transform: translate(0px, 200px) rotate(10deg);
        opacity: 0;
        -webkit-transform-origin: bottom center;
        transform-origin: bottom center;
    }
    30% {
        -webkit-transform: rotate(-5deg);
        transform: rotate(-5deg);
    }
    50% {
        -webkit-transform: rotate(5deg);
        transform: rotate(5deg);
    }
    70% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
        opacity: 1;
    }
}
@keyframes fadein-wiggle {
    0% {
        -webkit-transform: translate(0px, 200px);
        transform: translate(0px, 200px) rotate(10deg);
        opacity: 0;
        -webkit-transform-origin: bottom center;
        transform-origin: bottom center;
    }
    30% {
        -webkit-transform: rotate(-5deg);
        transform: rotate(-5deg);
    }
    50% {
        -webkit-transform: rotate(5deg);
        transform: rotate(5deg);
    }
    70% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
        opacity: 1;
    }
}



@media (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2), (min-resolution: 2dppx), (min-resolution: 192dpi) {
    #title h1,
    body.frontpage #title h1 {
      background-image: url(gfx/title@2x.png);
      background-size: 216px;
    }
}




/* Banner reposition */

@media only screen and (max-width: 1500px) {
    #wrapper {
       background: url(gfx/banner-2019.jpg) no-repeat 250px 0;
    }
}


@media only screen and (max-width: 1175px) {
    .topnavinner,
    footer.wrapper,
    div.footer_wrapper {
        width: 100%;
        box-sizing: border-box;
    }
}


/* Tablet styles */

@media only screen and (max-width: 1114px) {
    #content .content-inner {
        max-width: 90%;
        margin: 100px 5% 50px 5%;
    }
    .titleinner,
    div#nav_holder,
    .topnavinner,
    footer.wrapper, div.footer_wrapper {
        width: 100%;
        box-sizing: border-box;
    }
    #title h1.notopimage {
        max-width: 100%;
        box-sizing: border-box;
    }
    #wrapper {
       background: url(gfx/banner-2019.jpg) no-repeat right -120px top 0;
    }
    #content .background-white:nth-child(1) .content-inner:nth-child(1)::after {
        left: 45%;
    }
    .icon13 .element-visible .icon-layer,
    .icon14 .element-visible .icon-layer {
        height: 150px;
    }
    #content .icon-container .icon16 h2 {
        font-size: 55px;
    }
    /* Search page */
    .search #contentwrapper {
       max-width: 100%;
        width: 100%;
       margin: 0 auto;
    }
    .search #content {
       max-width: 74%;
    }
    .search #content #google {
        margin-top: 21px !important;
    }
    .search #content form {
        width: 60%;
    }
    .search #content form fieldset {
        width: 100% !important;
    }
    .search #google .ui-tabs-panel {
        margin-left: 0;
    }
    .search #google ul.ui-tabs-nav {
        margin-left: 0 !important;
    }
}

@media only screen and (max-width: 920px) {
    .head-one,
    .head-two,
    .head-three,
    .head-four,
    .head-five,
    .head-six,
    .head-seven,
    .head-eight,
    .head-nine,
    .head-ten,
    .head-eleven,
    .head-twelve,
    .head-thirteen,
    .head-fourteen,
    .head-fifteen,
    .head-sixteen,
    .head-seventeen,
    .head-eighteen,
    .head-nineteen,
    .head-twenty {
        height: 55px;
    }
    .icon2 .earth {
        height: 215px;
    }
    .icon3 .icon-layer-outer .icon-layer {
        height: 135px;
    }
    .icon4 .microscope,
    .icon4 .arts,
    .icon4 .brain,
    .icon4 .computer,
    .icon4 .dna,
    .icon4 .leaf,
    .icon8 .college {
        height: 60px;
    }
    .icon5 .undergraduate {
        width: 35%;
        height: 180px;
        margin-left: 15%;
        margin-right: 0%;
        background-position: center;
        background-size: 135%;
    }
    .icon5 .postgraduate {
        margin-right: 15%;
        width: 35%;
        height: 180px;
        background-position: center;
        background-size: 160%;
    }
    .icon6 .icon-layer-outer.element-visible {
        background: url(gfx/tooth.svg) no-repeat center center;
        height: 180px;
    }
    #content .content-inner li::before {
        left: -25px;
    }
}


@media only screen and (min-width: 769px) and (max-width: 1024px) {
    #features {
        width: 650px;
    }
    #title h1 {
       padding: 420px 0px 14px 23px;
    }
    #content .background-white .content-inner:nth-of-type(1) p {
        padding-bottom: 44px;
    }
    #content .background-white:nth-child(1) .content-inner:nth-child(1)::after {
       bottom: -40px;
    }
}


@media only screen and (max-width: 768px) {
	#title h1 {
        padding-right: 0;
    }
    body.frontpage #title h1 {
        padding-right: 0;
    }
    div#nav_holder {
        width: 85%;
    }
    #wrapper {
       background: url(gfx/banner-2019.jpg) no-repeat right -150px top 0;
    }
    .titleinner {
        padding-left: 7%;
    }
    #title h1 {
       background: url(gfx/title.png) 5px 280px no-repeat;
    }
    #wrapper,
    #features {
        width: 100%;
        box-sizing: border-box;
    }
    #globalsearch {
        width: 63%;
    }
    #right {
        border-bottom: none;
        width:90%;
        box-sizing: border-box;
        margin-left: 5%;
    }
    #features .events {
        width: 418px;
        margin-left: 232px;
        border-left: none;
    }
    #features .events article {
        margin-top: 14px;
    }
    #features .events article:first-child {
        margin-top: 14px;
    }
    #content .background-white:nth-child(1) .content-inner:nth-child(1)::after {
        left: 42%;
    }
    /* Search page */
    .search #content {
       margin-left: 2.5%;
        max-width: 94%;
    }
    .search #content form {
        width: 100%;
    }
    .search #content #google input[type="radio"] {
        width: 5%;
        min-height: auto;
        margin-top: 2px;
    }
    .search #content form fieldset fieldset.leftright label {
        width: 20%;
        min-height: auto;
        margin-top: 0;
    }
}


/* Mobile styles*/

@media only screen and (max-width: 700px) {
    body {
        background: none;
    }
    #wrapper {
        background-size: 900px;
    }
    .titleinner {
        width: 92%;
        padding-left: 0;
    }
    #title h1 {
        padding: 350px 0px 0px 0px;
        background: url(gfx/title.png) 0px 137px no-repeat;
        font-size: 36px;
    }
    #features .events {
        width: 97%;
        margin-left: 0px;
        padding: 0;
    }
    #features .events article {
        width: 47.5%;
        margin-right: 5%;
    }
    #features .events article:nth-of-type(2n) {
        margin-right: 0;
    }
    #content .background-blue,
    #content .background-white {
        padding-bottom: 0px;
    }
    #content .background-photo.photo1,
    #content .background-photo.photo2,
    #content .background-photo.photo3,
    #content .background-photo.photo4,
    #content .background-photo.photo5 {
        padding-top: 100px;
    }
    #content .icon-container h2 {
        font-size: 41px;
    }
    .icon9 .icon-layer {
        height: 200px;
    }
    #content .icon-container .icon10 h2 {
        margin-top: 14px;
    }
    .icon11 .icon-layer,
    .icon12 .day,
    .icon12 .night,
    .icon18 .element-visible .icon-layer,
    .icon17 .element-visible .icon-layer {
       height: 150px;
    }
    svg {
        max-width: 90% !important;
        height: 90% !important;
    }
    .icon-container {
        margin-bottom: 28px;
        flex: 0 0 47%;
        overflow: hidden;
    }
    #content .content-inner {
        margin-top: 42px;
    }
    #content .foot-notes li {
        word-break:  break-all;
    }
    #content h2 {
        font-size: 30px;
    }
    .icon4 .microscope,
    .icon4 .arts,
    .icon4 .brain,
    .icon4 .computer,
    .icon4 .dna,
    .icon4 .leaf {
        height: 45px;
        width: 25%;
    }
    #content .background-photo h2::before,
    #content .background-photo h2::after {
        left: 40.7%;
    }
}

@media only screen and (max-width: 500px) {
    #wrapper {
        background-size: 700px;
    }
    #title h1 {
        padding: 270px 0px 0px 0px;
        background: url(gfx/title.png) 0px 100px no-repeat;
        font-size: 36px;
        background-size: 170px;
    }
    #content .background-white:nth-child(1) .content-inner:nth-child(1)::after {
        left: 40%;
    }
    #content .content-inner li {
        width: 100%;
        margin-right: 0%;
        margin-bottom: 14px;
    }
    .icon {
        padding: 2%;
    }
    #content h2 {
        font-size: 22px;
    }
    #content h2::after {
        width: 20%;
        left: 40.5%;
    }
    .head-one, .head-two, .head-three, .head-four, .head-five, .head-six, .head-seven, .head-eight, .head-nine, .head-ten, .head-eleven, .head-twelve, .head-thirteen, .head-fourteen, .head-fifteen, .head-sixteen, .head-seventeen, .head-eighteen, .head-nineteen, .head-twenty {
       height: 30px;
        width: 20%;
    }
    .icon2 .earth {
        height: 100px;
    }
    .icon4 .element-visible .microscope {
        height: 30px;
    }
    .icon3 .icon-layer-outer .icon-layer {
       height: 70px;
    }
    .icon3 .icon-layer-outer {
        padding-bottom: 20px;
    }
    .icon8 .college {
       height: 35px;
    }
    .icon9 .icon-layer,
    .icon11 .icon-layer,
    .icon12 .day,
    .icon12 .night,
    .icon13 .element-visible .icon-layer,
    .icon14 .element-visible .icon-layer,
    .icon18 .element-visible .icon-layer,
    .icon17 .element-visible .icon-layer {
        height: 85px;
    }
    .icon5 .undergraduate,
    .icon5 .postgraduate {
        height: 100px;
    }
    .icon16 .element-visible .icon-layer {
        height: 130px;
    }
    #content .icon-container h3 {
        font-size: 16px;
    }
    #content .icon-container .icon1 h2,
    #content .icon-container .icon6 h2,
    #content .icon-container .icon10 h2,
    #content .icon-container .icon16 h2 {
        font-size: 34px;
    }
    #content .icon-container .icon13 h2 {
        margin-top: 14px;
        font-size: 21px;
    }
    #content .icon-container .icon5 h2,
    #content .icon-container .icon6 h2,
    #content .icon-container .icon7 h2,
    #content .icon-container .icon8 h2,
    #content .icon-container .icon12 h2 {
        margin-top: 21px;
    }
    #content .background-photo h2::before,
    #content .background-photo h2::after {
        left: 37%;
    }
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .icon3 .icon-layer-outer .icon-layer,
    .icon11 .element-visible .icon-layer,
    .icon13 .element-visible .icon-layer,
    .icon14 .element-visible .icon-layer,
    .icon18 .element-visible .icon-layer {
        background-size: 100%;
    }
}