/*
  Running Squiz Matrix
  Developed by Squiz - http://www.squiz.net
  Squiz, Squiz Matrix, MySource, MySource Matrix and Squiz.net are registered Trademarks of Squiz Pty Ltd
  Page generated: 15 November 2025 01:38:44
*/


@font-face {
  font-family: Arimo;
  src: url(https://artanddesign.aut.ac.nz/__data/assets/file/0004/693940/Arimo-Regular.ttf) format("truetype");
  font-weight: 400;
}
@font-face {
  font-family: JakartaSemiBold;
  src: url(https://artanddesign.aut.ac.nz/__data/assets/file/0012/693939/PlusJakartaSans-SemiBold.ttf) format("truetype");
  font-weight: 400;
}
@font-face {
  font-family: JakartaExtraBold;
  src: url(https://artanddesign.aut.ac.nz/__data/assets/file/0004/693958/PlusJakartaSans-ExtraBold.ttf) format("truetype");
  font-weight: bold;
}
@font-face {
  font-family: JakartaMedium;
  src: url(https://artanddesign.aut.ac.nz/__data/assets/file/0004/693949/PlusJakartaSans-Medium.ttf) format("truetype");
  font-weight: 400;
}
@font-face {
  font-family: JakartaLight;
  src: url(https://artanddesign.aut.ac.nz/__data/assets/file/0007/694843/PlusJakartaSans-Light.ttf) format("truetype");
  font-weight: 400;
}
@font-face {
  font-family: JakartaRegular;
  src: url(https://artanddesign.aut.ac.nz/__data/assets/file/0012/694884/PlusJakartaSans-Regular.ttf) format("truetype");
  font-weight: 400;
}
@font-face {
  font-family: JakartaExtraLight;
  src: url(https://artanddesign.aut.ac.nz/__data/assets/file/0011/694883/PlusJakartaSans-ExtraLight.ttf) format("truetype");
  font-weight: 400;
}
@font-face {
  font-family: Redaction;
  src: url(https://artanddesign.aut.ac.nz/__data/assets/file/0003/557823/Redaction-Regular.woff2) format("woff2");
  font-weight: 400;
}
@font-face {
  font-family: Redaction\ 10;
  src: url(https://artanddesign.aut.ac.nz/__data/assets/file/0006/557817/Redaction_10-Regular.woff2) format("woff2");
  font-weight: 400;
}
@font-face {
  font-family: Redaction\ 20;
  src: url(https://artanddesign.aut.ac.nz/__data/assets/file/0007/557818/Redaction_20-Regular.woff2) format("woff2");
  font-weight: 400;
}
@font-face {
  font-family: Redaction\ 35;
  src: url(https://artanddesign.aut.ac.nz/__data/assets/file/0008/557819/Redaction_35-Regular.woff2) format("woff2");
  font-weight: 400;
}
@font-face {
  font-family: Redaction\ 50;
  src: url(https://artanddesign.aut.ac.nz/__data/assets/file/0009/557820/Redaction_50-Regular.woff2) format("woff2");
  font-weight: 400;
}
@font-face {
  font-family: Redaction\ 70;
  src: url(https://artanddesign.aut.ac.nz/__data/assets/file/0010/557821/Redaction_70-Regular.woff2) format("woff2");
  font-weight: 400;
}
@font-face {
  font-family: Redaction\ 100;
  src: url(https://artanddesign.aut.ac.nz/__data/assets/file/0011/557822/Redaction_100-Regular.woff2) format("woff2");
  font-weight: 400;
}
* {
  box-sizing: border-box;
}
figcaption {
  font-family: "Inter", sans-serif;
  font-size: 14px;
  line-height: 23px;
  opacity: 0.4;
  color: #282624;
  text-decoration: none;
}
body {
  background-color: #f7f5ed;
}
[data-key$="00"] {
  display: none;
}
.body.main #app > div.after_load {
  display: none;
}
.body.main .pre_loading {
  background-color: #fff;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
}
.body.main .pre_loading .pre-box {
  display: block;
  position: relative;
  left: 50%;
  top: 50%;
  width: 60%;
  height: auto;
  transform: translateX(-50%) translateY(-50%);
  max-width: 100%;
}
@media (max-width: 1023px) {
  .body.main .pre_loading .pre-box {
    top: 50%;
  }
}
.body.main .pre_loading .pre-box .left-pre-box, .body.main .pre_loading .pre-box .right-pre-box {
  position: relative;
  /**
            display: inline-block;
            **/
  display: none;
  width: 219px;
  height: 100%;
}
@media (max-width: 413px) {
  .body.main .pre_loading .pre-box .left-pre-box, .body.main .pre_loading .pre-box .right-pre-box {
    width: auto;
    display: block;
  }
}
.body.main .pre_loading .pre-box .left-pre-box img, .body.main .pre_loading .pre-box .right-pre-box img {
  display: none;
  position: absolute;
  width: 101px;
  height: 100px;
}
.body.main .pre_loading .pre-box .left-pre-box img.position1, .body.main .pre_loading .pre-box .left-pre-box img.position5, .body.main .pre_loading .pre-box .right-pre-box img.position1, .body.main .pre_loading .pre-box .right-pre-box img.position5 {
  left: 0;
  top: 0;
}
.body.main .pre_loading .pre-box .left-pre-box img.position2, .body.main .pre_loading .pre-box .left-pre-box img.position6, .body.main .pre_loading .pre-box .right-pre-box img.position2, .body.main .pre_loading .pre-box .right-pre-box img.position6 {
  right: 0;
  top: 0;
}
.body.main .pre_loading .pre-box .left-pre-box img.position3, .body.main .pre_loading .pre-box .left-pre-box img.position7, .body.main .pre_loading .pre-box .right-pre-box img.position3, .body.main .pre_loading .pre-box .right-pre-box img.position7 {
  left: 0;
  bottom: 0;
}
.body.main .pre_loading .pre-box .left-pre-box img.position4, .body.main .pre_loading .pre-box .left-pre-box img.position8, .body.main .pre_loading .pre-box .right-pre-box img.position4, .body.main .pre_loading .pre-box .right-pre-box img.position8 {
  right: 0;
  bottom: 0;
}
.body.main .pre_loading .pre-box .left-pre-box {
  margin-bottom: 0;
  margin-right: 15px;
}
@media (max-width: 1023px) {
  .body.main .pre_loading .pre-box .left-pre-box {
    margin-bottom: 15px;
  }
}
.body.main.loaded #app .after_load {
  display: block;
}
.body.main.loaded #app .pre_loading {
  display: none;
}
.body.sub .pre_loading {
  display: none;
}
html {
  font-size: 62.5%;
  scroll-behavior: smooth;
  outline: none;
}
body {
  position: relative;
  font-family: Arimo;
  font-size: 16px;
  line-height: 1;
  margin: 0;
  overflow-x: hidden;
  color: #1a1a1a;
}
@media (min-width: 1440px) {
  body {
    font-size: calc(14px + 6 * ((100vw - 1440px) / 680));
    line-height: 1.2;
  }
}
button {
  transition-duration: 0.3s;
  -webkit-transition-duration: 0.3s;
}
button:focus {
  outline: none;
}
button:hover {
  color: #c4c4c4;
  text-decoration: none;
}
a, button {
  cursor: pointer;
}
a:focus, button:focus {
  outline: none;
}
a:hover {
  text-decoration: underline;
}
.is-active {
  color: #f58220;
}
.contentContainer {
  padding: 0 15px;
  overflow: hidden;
  width: 100%;
  margin: 0 auto;
}
.contentContainer:not(.deptHeading) {
  background-color: #f7f5ed;
}
.contentContainer.whiteContainer {
  background-color: #fff;
}
@media (min-width: 1024px) {
  .contentContainer {
    padding: 0 40px 5% 40px;
  }
}
@media (min-width: 1440px) {
  .contentContainer {
    width: 100%;
    padding: 0 60px 5% 60px;
  }
}
.mt-large {
  margin-top: 50px;
}
.lineNow {
  height: 25px;
  width: 175px;
  border-bottom: 1px solid #1a1a1a;
}
.areas {
  margin-bottom: 50px;
}
.centredContent {
  display: flex;
  justify-content: center;
  align-content: center;
}
.pageContent {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-content: flex-start;
  margin-left: -1.66%;
  margin-right: -1.66%;
}
@media (max-width: 1023px) {
  .pageContent {
    flex-direction: row;
    margin: 0 0 0 0;
    justify-content: space-between;
    align-content: space-between;
  }
}
.largeScreen {
  display: none;
}
@media (min-width: 1440px) {
  .largeScreen {
    display: block;
  }
}
.normalScreen {
  display: block;
}
@media (min-width: 1440px) {
  .normalScreen {
    display: none;
  }
}
.fourOhFourText {
  padding: 10rem 0 0 10%;
  width: 100%;
}
.fourOhFourText p {
  font-size: 3rem;
  line-height: 4rem;
  font-weight: 300;
}
.arrow {
  width: 3.66rem;
  height: auto;
  margin: 0 1rem 0 1rem;
}
.button, .button-link-underline {
  display: inline-block;
  background: none;
  color: #f58220;
  border: 2px solid #f58220;
  font-size: 1.8rem;
  font-weight: 400;
  padding: 0.5rem;
  transition-duration: 0.3s;
  -webkit-transition-duration: 0.3s;
}
.button:focus, .button-link-underline:focus {
  outline: none;
}
.button:hover, .button-link-underline:hover {
  color: #c4c4c4;
  border-color: #c4c4c4;
}
.button-link-underline {
  border-top: none;
  border-left: none;
  border-right: none;
}
.button-loadMore {
  margin: 5rem auto 0 auto;
}
.button-loadMore:focus {
  outline: none;
}
@media (min-width: 1024px) {
  .button-loadMore:hover {
    color: #c4c4c4;
    border-color: #c4c4c4;
  }
}
@media (max-width: 1023px) {
  .button-loadMore {
    margin-bottom: 3rem;
  }
}
.backButton {
  display: inline-flex;
  color: #f58220;
  text-decoration: none;
  font-size: 1.4rem;
  line-height: 2rem;
  transition-duration: 0.3s;
  -webkit-transition-duration: 0.3s;
}
.backButton:hover {
  color: #c4c4c4;
}
@media (max-width: $desktop-breakpoint -1) {
  .backButton {
    margin: 0 0 3rem 0;
  }
}
.ctHeader__error {
  width: 40%;
  margin: 10% 0 0 0;
}
.ctHeader__error p {
  font-size: 2.2rem;
  line-height: 3rem;
  margin-bottom: 8rem;
}
.ctHeader__error a {
  color: #282624;
  text-decoration: none;
}
.ctHeader__error img {
  width: 30px;
  vertical-align: middle;
}
.ctHeader__right {
  width: 40%;
  margin: 0 0 0 10%;
}
.ctHeader__right p {
  font-size: 1.4rem;
  line-height: 2.4rem;
  margin-bottom: 8rem;
}
.ctHeader__right button {
  display: flex;
  border: none;
  background: none;
  color: #f58220;
  font-size: 1.8rem;
  line-height: 2rem;
  padding-left: 0;
  transform-origin: bottom left;
  transform: rotate(90deg);
  margin-left: 6rem;
  transition-duration: 0.3s;
  -webkit-transition-duration: 0.3s;
}
.ctHeader__right button:hover {
  color: #c4c4c4;
  border-color: #c4c4c4;
}
.ctHeader__right button img {
  width: 3.5rem;
  height: 2rem;
  margin: 0 0 0 0.5rem;
  transform: rotate(180deg);
}
@media (max-width: 1023px) {
  .ctHeader__right {
    width: 100%;
    margin: 14rem 0 0 0;
  }
  .ctHeader__right p {
    margin-bottom: 0rem;
  }
  .ctHeader__right button {
    display: flex;
    border: none;
    background: none;
    color: #f58220;
    font-size: 1.8rem;
    width: 20rem;
    padding-left: 0;
    transform-origin: top right;
    transform: rotate(90deg);
    margin-top: 6rem;
    margin-bottom: -6rem;
  }
}
.desktop {
  display: default;
}
@media (max-width: 1024px) {
  .desktop {
    display: none;
  }
}
.mobile {
  display: none !important;
}
@media (max-width: 1024px) {
  .mobile {
    display: block !important;
  }
}
.ctHome__block {
  width: 100%;
  padding: 5rem 0 0 0;
  position: relative;
  z-index: 1;
}
.ctHome__block .leftHeader {
  margin-top: 5.7rem;
}
.ctHome__block .leftHeader h2 {
  font-size: 3rem;
  font-weight: 700;
}
@media (max-width: 1024px) {
  .ctHome__block {
    flex-direction: column;
  }
  .ctHome__block h2 {
    font-size: 3rem;
  }
}
.longHeader {
  width: 60%;
}
@media (max-width: 1024px) {
  .longHeader {
    width: 90%;
  }
}
.ctHome__block-right {
  width: 60%;
  padding: 0 0 10rem 0;
}
@media (max-width: 1024px) {
  .ctHome__block-right {
    width: 100%;
    padding: 0 0 5rem 0;
  }
}
.ctHome__block1 .block1-left {
  width: 100%;
}
.ctHome__block1 .block1-left h1 {
  font-size: 5rem;
  line-height: 5rem;
  width: 40%;
}
@media (max-width: 1024px) {
  .ctHome__block1 .block1-left h1 {
    font-size: 3rem;
    line-height: 3.5rem;
    width: 100%;
  }
}
.ctHome__block1-right p {
  font-size: 3rem;
  font-weight: 300;
  width: 75%;
}
@media (max-width: 1024px) {
  .ctHome__block1-right p {
    font-size: 2.4rem;
    width: 95%;
  }
}
.carousel {
  width: 100%;
  height: auto;
}
.carousel img {
  width: 100%;
}
.ctHome__block2-right {
  display: flex;
  flex-direction: column;
}
.ctHome__block2-right p {
  font-size: 1.6rem;
  font-weight: 300;
  width: 70%;
}
@media (max-width: 1024px) {
  .ctHome__block2-right p {
    width: 95%;
  }
}
.ctHome__stats {
  display: flex;
  justify-content: space-between;
  line-height: 1.8rem;
}
.ctHome__stats h3 {
  font-size: 3rem;
  font-weight: 700;
}
.ctHome__stats h1 {
  font-size: 7.5rem;
  font-weight: 800;
}
.ctHome__stats p {
  font-size: 1.6rem;
  width: 100%;
}
@media (max-width: 1024px) {
  .ctHome__stats {
    line-height: 4rem;
    padding: 3rem 0 0 0;
  }
  .ctHome__stats h1 {
    font-size: 5rem;
    margin: 0 5rem 7rem 0;
  }
  .ctHome__stats h3 {
    font-size: 2.4rem;
    margin: 0 0 0 0;
    line-height: 3rem;
  }
  .ctHome__stats p {
    line-height: 2.4rem;
    margin: 0 0 5rem 0;
  }
}
@media (max-width: 1024px) {
  .last-stat {
    margin: 0 0 0 0 !important;
  }
}
.statHolder {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
@media (max-width: 1024px) {
  .statHolder {
    flex-direction: column;
    justify-content: flex-start;
    margin-bottom: 4rem;
  }
}
@media (max-width: 1024px) {
  .statHolder.mobile {
    margin-top: 0.3rem;
    width: 60%;
  }
}
.stat {
  width: 33%;
}
.stat p {
  display: inline-block;
  width: 100%;
  line-height: 2.4rem;
  margin-top: 0rem;
}
@media (max-width: 1024px) {
  .stat {
    width: 100%;
  }
}
.mobileCount-active {
  display: none;
}
@media (max-width: 1024px) {
  .mobileCount-active {
    display: block;
    margin: 1rem 5rem 0 0;
  }
}
.mobileCount-inactive {
  display: block;
}
@media (max-width: 1024px) {
  .mobileCount-inactive {
    display: none;
  }
}
.ctHome__button {
  width: 20rem;
  padding: 1rem;
  text-decoration: none;
  text-align: center;
  margin: 7rem 0 0 0;
  color: #ffffff;
  font-weight: 400;
}
@media (max-width: 1024px) {
  .ctHome__button {
    margin: 7rem auto 0 auto;
  }
}
.listHeader {
  font-size: 2em;
  margin: 30px 0;
}
.featuredProjects {
  display: flex;
  overflow-x: scroll;
  padding: 0 0 5rem 0;
  border: none;
  padding-top: 5rem;
  scroll-behavior: smooth;
  /* width 
    &::-webkit-scrollbar {
        height: 1px;
    }
    */
  /* Track
    &::-webkit-scrollbar-track {
        background: $white; 
    }
     */
  /* Handle 
    &::-webkit-scrollbar-thumb {
        background: $orange; 
    }
    
    scrollbar-width: thin;
    scrollbar-color: $orange;
*/
}
.featuredProjects div {
  margin: 0 2rem 0 0;
}
.featuredProjects img {
  width: 40rem;
  height: auto;
}
.featuredProjects h3 {
  font-weight: 700;
  font-size: 3rem;
  margin: 1rem 0 1rem 0;
}
.featuredProjects p {
  font-size: 1.6rem;
  font-weight: 300;
}
.featuredProjects .project-awards {
  font-size: 1.4rem;
  font-style: italic;
}
@media (max-width: 1024px) {
  .featuredProjects {
    margin-top: 3rem;
  }
  .featuredProjects img {
    width: 28.5rem;
  }
  .featuredProjects h3 {
    font-size: 2.4rem;
  }
}
.project-awards-container {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin: 3rem -1% 0 -1% !important;
}
.award-thumbnail {
  width: 23% !important;
  height: 23% !important;
  margin: 0 1% 0.5rem 1%;
}
.award-thumbnail img {
  max-width: 100%;
}
.featuredLink {
  display: flex;
  align-items: center;
  font-size: 1.8rem;
  font-weight: 400;
  text-decoration: none;
  color: #f58220;
  margin-top: 3rem;
}
.featuredLink img {
  width: 3.5rem;
  height: 2rem;
  margin: 0 0 0 0.5rem;
  transform: rotate(180deg);
}
@media (max-width: 1024px) {
  .featuredLink {
    margin-top: 3rem;
  }
}
.ctHome__paragraph {
  margin-top: 5rem;
}
.ctHome__paragraph a {
  color: #ffffff;
}
@media (max-width: 1024px) {
  .ctHome__paragraph {
    margin-top: 0rem;
  }
}
.bct {
  line-height: 3rem;
}
.slider-controls {
  display: flex;
  justify-content: space-between;
}
@media (max-width: 1024px) {
  .slider-controls {
    display: none;
  }
}
.slider-arrow {
  background: none;
  border: none;
  width: 4rem;
  margin-top: 1rem;
}
.slider-arrow img {
  width: 100%;
  height: auto;
}
.slider-left {
  transform-origin: center center;
  transform: rotate(180deg);
}
.contactDetails {
  width: 32rem;
}
.contactDetails h3 {
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 3rem;
}
.contactDetails p {
  font-size: 1.6rem;
  font-weight: 300;
  line-height: 2.4rem;
  margin: 1rem 0 5rem 0;
}
.contactDetails a {
  color: #282624;
  font-size: 1.6rem;
}
@media (max-width: 1024px) {
  .contactDetails {
    width: 100%;
  }
  .contactDetails h3 {
    margin: 4rem 0 0 0;
  }
}
.mobileSubtitle {
  display: none;
}
@media (max-width: 1024px) {
  .mobileSubtitle {
    display: block;
    line-height: 2.4rem;
    margin-top: 4rem;
  }
}
.desktopSubtitle {
  display: block;
  margin-top: -5rem;
}
@media (max-width: 1024px) {
  .desktopSubtitle {
    display: none;
  }
}
.contactHeader {
  padding: 0 0 3rem 0;
}
.contactHeader div {
  border: none;
}
.contactHeader p {
  font-size: 1.6rem;
}
.contactFilters {
  width: 100%;
}
@media (max-width: 1023px) {
  .contactFilters {
    width: 100%;
  }
}
@media (max-width: 1023px) {
  .leftHeader.studentSearch {
    display: none;
  }
}
.studentDirectory {
  padding: 0 0 0 50%;
  margin-top: -70px;
  display: block;
}
@media (min-width: 1440px) {
  .studentDirectory {
    margin-top: -50px;
  }
}
@media (max-width: 1023px) {
  .studentDirectory {
    margin-top: 10px;
    padding: 3rem 0 0 0;
    display: none;
  }
}
.studentList .yearGroup__students > div {
  position: relative;
  margin-bottom: 30px;
}
.studentList .yearGroup__students > div .group_directory {
  font-family: JakartaExtraBold;
  font-size: 27px;
  color: #282624;
  height: 50px;
}
@media (min-width: 1440px) {
  .studentList .yearGroup__students > div .group_directory {
    font-size: calc(36px + 6 * ((100vw - 1440px) / 680));
  }
}
.studentList .yearGroup__students > div .group_listing {
  padding-left: 50px;
  margin-bottom: 150px;
}
.studentList .yearGroup__students > div .group_listing a {
  font-family: Arimo;
  font-weight: 400;
  font-size: 14px;
}
@media (min-width: 1440px) {
  .studentList .yearGroup__students > div .group_listing a {
    font-size: calc(14px + 6 * ((100vw - 1440px) / 680));
  }
}
.yearGroup h3 {
  font-size: 1.8rem;
  font-weight: 700;
}
.yearGroup__students {
  /**
    display: flex;
    flex-direction: column;
    flex-flow: column wrap;
    align-items: flex-start;
    **/
}
@media (min-width: 1024px) {
  .yearGroup__students {
    column-count: 2;
  }
}
.yearGroup__students div {
  margin-bottom: 10px;
}
.yearGroup__students a {
  color: #282624;
  font-size: 1.6rem;
  text-decoration: none;
}
@media (max-width: 1440px) {
  .yearGroup__students a {
    padding-right: 5%;
  }
}
.yearGroup__students a:hover {
  text-decoration: underline;
}
@media (max-width: 1023px) {
  .yearGroup__students {
    flex-direction: column;
    flex-wrap: nowrap;
    padding-bottom: 3rem;
    height: auto !important;
  }
  .yearGroup__students div {
    width: 100%;
    height: auto;
  }
  .yearGroup__students a {
    color: #282624;
    font-size: 1.6rem;
  }
}
.divider-light {
  color: #ffffff;
  display: flex;
  justify-content: space-between;
  padding-top: 1rem;
  border-top: 1px solid #ffffff;
}
.divider-dark {
  color: #282624;
  display: flex;
  justify-content: space-between;
  padding-top: 1rem;
  border-top: 1px solid #282624;
}
.divider-left {
  display: flex;
  justify-content: space-between;
  width: 40%;
}
.divider-left p {
  font-size: 1.2rem;
  margin-top: 0;
  font-weight: 300;
}
@media (max-width: 1024px) {
  .divider-left {
    width: 70%;
  }
}
.dot-light {
  width: 1.3rem;
  height: 1.3rem;
  border-radius: 50%;
  background: #ffffff;
}
.dot-dark {
  width: 1.3rem;
  height: 1.3rem;
  border-radius: 50%;
  background: #282624;
}
.filters {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding-top: 3rem;
}
@media (max-width: 1024px) {
  .filters {
    flex-direction: column;
  }
}
.filters__left {
  display: flex;
  width: 50%;
  justify-content: space-between;
}
@media (max-width: 1024px) {
  .filters__left {
    flex-direction: column;
    width: 100%;
  }
}
.filters__right {
  display: flex;
}
@media (max-width: 1024px) {
  .filters__right {
    flex-direction: column;
    width: 100%;
  }
}
label {
  font-size: 1.4rem;
  padding-bottom: 0.5rem;
}
@media (max-width: 1024px) {
  label {
    font-size: 1.6rem;
    border-bottom: 1px solid #282624;
  }
}
.MuiNativeSelect-icon {
  transform: scale(1.5);
  color: #282624 !important;
}
.MuiInput-underline:after {
  border-bottom: none !important;
}
.MuiInput-underline:before {
  border-bottom: none !important;
}
.MuiInput-underline:hover:not(.Mui-disabled):before {
  border-bottom: none !important;
}
.MuiNativeSelect-select:focus {
  background: none !important;
}
.MuiInputBase-input {
  padding-top: 0rem !important;
  padding-bottom: 0.7rem !important;
  padding-right: 2rem !important;
  height: auto !important;
}
.select-Label {
  padding-left: 0.5rem !important;
}
.select {
  font-size: 1.4rem !important;
  color: #282624 !important;
}
.select::before {
  content: none !important;
}
.select:focus {
  background: none !important;
}
@media (max-width: 1024px) {
  .select {
    border-bottom: 1px solid #282624;
    margin-bottom: 2rem;
    font-size: 1.6rem !important;
  }
}
input {
  border: none;
  border-bottom: 1px solid #282624;
  font-weight: 300;
  border-radius: 0;
}
input:focus {
  outline: none;
}
@media (max-width: 1023px) {
  input {
    border-bottom: 1px solid #282624;
    margin-bottom: 2rem;
    font-size: 1.6rem;
    padding: 0.7rem 0;
  }
}
.search {
  border: none;
  background: none;
  font-weight: 300;
}
.search:focus {
  outline: none;
}
@media (max-width: 1023px) {
  .search {
    margin-bottom: 2rem;
    border-bottom: 1px solid #282624;
    font-size: 1.6rem;
    padding-bottom: 0.7rem;
  }
}
@media (max-width: 1024px) {
  .mobile-degree-select {
    width: 100%;
  }
  .mobile-degree-select .select {
    width: 100%;
  }
}
@media (max-width: 1024px) {
  .mobile-yearGroup-select {
    width: 100%;
  }
  .mobile-yearGroup-select label {
    display: inline-block;
    width: 13%;
  }
  .mobile-yearGroup-select .select {
    width: 86%;
  }
}
@media (max-width: 1024px) {
  .mobile-semester-select {
    width: 100%;
  }
  .mobile-semester-select label {
    display: inline-block;
    width: 25%;
  }
  .mobile-semester-select .select {
    width: 75%;
  }
}
.mobile-year-select {
  margin: 0.3rem 0 0 0.5rem;
}
@media (max-width: 1024px) {
  .mobile-year-select {
    width: 100%;
    margin-top: 0px;
    margin-left: 0px;
  }
  .mobile-year-select .select {
    width: 100%;
  }
}
@media (max-width: 1023px) {
  form {
    width: 100%;
  }
  form input {
    width: 70%;
  }
  form button {
    width: 30%;
  }
}
.footer {
  border-top: 1px solid #1a1a1a;
  margin: 0 auto;
  overflow: hidden;
  padding: 40px 15px 0;
  font-size: 10px;
  line-height: 10px;
  width: 100%;
}
.footer .sofeLogo {
  width: 42px;
}
@media (min-width: 1024px) {
  .footer .sofeLogo {
    width: 200px;
  }
}
@media (min-width: 1024px) {
  .footer {
    padding: 40px 40px 0;
    font-size: 12px;
    line-height: 16px;
  }
}
@media (min-width: 1440px) {
  .footer {
    width: 100%;
    padding: 40px 60px 0;
  }
}
.footer__content {
  display: flex;
  justify-content: space-between;
  z-index: 5;
}
@media (max-width: 414px) {
  .footer__content {
    flex-direction: row;
    overflow: hidden;
    position: relative;
  }
}
.footer__left {
  width: 250px;
}
.footer__left img {
  margin-bottom: 40px;
}
.aut-mini {
  float: left;
  padding-right: 35px;
}
.addressArt {
  font-family: JakartaMedium;
}
.addressArt span {
  font-family: JakartaExtraBold;
}
.footer__directory {
  display: inline-block;
  text-decoration: none;
  height: 3rem;
  z-index: 10;
  text-transform: uppercase;
  margin-right: 30px;
  font-family: JakartaMedium;
  font-weight: 600;
  color: #282624;
  font-size: 12px;
}
@media (max-width: 1024px) {
  .footer__directory {
    width: 100%;
  }
}
@media (min-width: 1440px) {
  .footer__directory {
    line-height: 1;
  }
}
.footer__directory:hover {
  font-family: JakartaExtraBold;
  border-bottom: 1px solid #000;
  padding-bottom: 5px;
  color: #1a1a1a;
  text-decoration: none;
}
.footer__middle {
  width: 40%;
}
@media (max-width: 1024px) {
  .footer__middle {
    width: 80%;
    padding: 0 10px;
  }
}
.footer__aut__link {
  font-size: 3rem;
  font-weight: 300;
}
@media (max-width: 1024px) {
  .footer__aut__link {
    font-size: 2.2rem;
  }
}
.footer__aut__link__black {
  color: #282624;
  text-decoration: underline;
  z-index: 10;
}
.footer__aut__info {
  display: flex;
  justify-content: space-between;
}
.footer__aut__info h4 {
  font-weight: normal;
  margin-bottom: 1.5rem;
  margin-top: 0;
  font-family: "Open Sans", sans-serif;
  font-weight: 600;
  font-size: 6px;
  line-height: 9px;
}
@media (min-width: 1024px) {
  .footer__aut__info h4 {
    font-size: 10px;
    line-height: 16px;
  }
}
@media (min-width: 1440px) {
  .footer__aut__info h4 {
    font-size: calc(14px + 6 * ((100vw - 1440px) / 680));
    line-height: 1.4;
  }
}
.footer__aut__info a:hover {
  text-decoration: underline;
}
.footer__aut__info a, .footer__aut__info p {
  color: #282624;
  text-decoration: none;
  font-family: "Open Sans", sans-serif;
  font-weight: 400;
  font-size: 6px;
  line-height: 9px;
}
@media (min-width: 1024px) {
  .footer__aut__info a, .footer__aut__info p {
    font-size: 10px;
    line-height: 16px;
  }
}
@media (min-width: 1440px) {
  .footer__aut__info a, .footer__aut__info p {
    font-size: calc(14px + 6 * ((100vw - 1440px) / 680));
    line-height: 1.2;
  }
}
.footer__right {
  display: flex;
  flex-direction: row;
  align-content: flex-end;
  justify-content: flex-end;
  width: 50%;
  margin: 0;
}
@media (max-width: 1024px) {
  .footer__right {
    width: 50%;
    min-width: 65px;
    padding: 0;
    padding-right: 30px;
    padding-top: 18px;
  }
}
@media (max-width: 414px) {
  .footer__right {
    min-width: 42px;
  }
}
@media (max-width: 1024px) {
  .footer__right a {
    display: none;
  }
}
.autLogo {
  display: inline-block;
  position: relative;
  height: 90px;
  width: auto;
}
@media (min-width: 1024px) {
  .autLogo {
    height: 90px;
  }
}
@media (min-width: 1440px) {
  .autLogo {
    height: 90px;
  }
}
.autLogo img {
  height: 100%;
}
@media (max-width: 1024px) {
  .autLogo {
    display: block !important;
  }
}
.mobile-search-logo {
  display: none;
}
.autLogo-mobile-container {
  display: none;
}
@media (max-width: 1024px) {
  .autLogo-mobile-container {
    display: inline-block;
    position: relative;
    width: 40%;
  }
  .autLogo-mobile-container img {
    width: 100%;
    height: 100%;
  }
}
.copyright {
  font-size: 1.4rem;
  font-weight: 300;
  display: inline-block;
  margin: 0 0 0 0;
}
@media (max-width: 1024px) {
  .copyright {
    font-size: 0.8rem;
    margin: 4rem 0 0 0;
  }
}
@media (max-width: 1024px) {
  .footer__bottom {
    display: flex;
    justify-content: space-between;
    align-content: flex-end;
    margin: 0 -3rem -5rem 0;
  }
}
.header {
  /*display: flex;
    justify-content: space-between;
    align-items: center;*/
  padding: 34px 15px;
  width: 100%;
  top: 0;
  z-index: 1;
  margin: 0 auto;
  position: relative;
}
@media (min-width: 1024px) {
  .header {
    padding: 34px 40px;
  }
}
@media (min-width: 1440px) {
  .header {
    width: 100%;
    padding: 34px 60px;
  }
  .header.deptHeader {
    padding-bottom: 130px;
  }
}
header.fixed {
  position: fixed;
  z-index: 11;
  width: 100%;
}
header.fixed + div {
  padding-top: 85px;
}
.inside-page header.fixed + div {
  padding-top: 120px;
}
.header__program {
  font-size: 1.4rem;
  font-weight: 400;
  color: #f58220;
  margin: 0;
}
@media (max-width: 1024px) {
  .header__program {
    display: none;
  }
}
.header__links {
  float: right;
}
.header__links a {
  color: #282624;
  font-size: 12px;
  font-family: JakartaMedium;
  font-weight: 500;
  text-transform: uppercase;
  text-decoration: none;
  margin-left: 0;
  margin-right: 30px;
  line-height: 1.4;
}
.header__links a:nth-last-child(3) {
  margin-right: 65px;
}
.header__links a:hover {
  font-family: JakartaExtraBold;
  border-bottom: 1px solid #000;
  font-weight: bold;
}
.header__links a.active {
  font-family: JakartaExtraBold;
  border-bottom: 1px solid #000;
  font-weight: bold;
}
.header__links.black a {
  color: #FFF;
}
.header__links.black a:hover {
  border-bottom: 1px solid #FFF;
}
.header__links.black a.active {
  border-bottom: 1px solid #FFF;
  font-family: JakartaExtraBold;
  font-weight: bold;
}
.header__links-mobile-closed {
  display: none;
}
.header__links-mobile-closed a {
  display: inline-block;
}
.header__links-mobile-closed a#menu_557606 {
  width: 110px;
}
.header__links-mobile-closed a#menu_557612 {
  width: 60px;
}
.header__links-mobile-closed a#menu_557618 {
  width: 50px;
}
.header__links-mobile-closed a#menu_560259 {
  width: 64px;
}
@media (min-width: 1024px) {
  .header__links-mobile-closed {
    display: block;
  }
}
@media (max-width: 1024px) {
  .header__links-mobile-open {
    z-index: 5;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 400px;
    background: #1a1a1a;
    font-size: 1.4rem;
    font-weight: 700;
  }
  .header__links-mobile-open div {
    display: flex;
    flex-direction: column;
    padding: 20% 0 0 50%;
  }
  .header__links-mobile-open a {
    text-transform: uppercase;
    color: #ffffff;
    text-decoration: none;
    margin-left: 5rem;
    font-size: 27px;
    margin: 0 0 4rem 0;
    font-family: "Open Sans", sans-serif;
    font-weight: 600;
  }
}
.header__links-mobile-open .mobile-search-logo {
  display: block;
  position: absolute;
  left: 15px;
  top: 15px;
  width: 88px;
  height: 88px;
}
.sofeLogo {
  /**
    width: 18.3rem;
    @media (max-width: $desktop-breakpoint) {
        width: 12.2rem;
    }**/
}
.mobileMenu {
  position: relative;
  float: right;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 2.3rem;
  z-index: 7;
}
@media (min-width: 1024px) {
  .mobileMenu {
    display: none;
    position: relative;
  }
}
.mobileMenuText {
  position: absolute;
  left: -50px;
  font-family: "Open Sans", sans-serif;
  font-weight: 600;
  font-size: 14px;
}
@media (min-width: 1024px) {
  .mobileMenuText {
    display: none;
  }
}
.mobileMenu__line {
  height: 0.2rem;
  width: 3rem;
  transition-duration: 0.5s;
  -webkit-transition-duration: 0.5s;
  transform-origin: center right;
}
.inside-page .mobileMenu-dark {
  background: #282624;
}
.home-page .mobileMenu-dark {
  background: #ffffff;
}
.home-page .mobileMenuText {
  color: #ffffff;
}
.mobileMenu-light {
  background: #282624;
}
.menuTop-open {
  transform: rotate(-45deg);
  background-color: #ffffff;
}
.menuBottom-open {
  transform: rotate(45deg);
  background-color: #ffffff;
}
.mobile_mainBlock {
  display: none;
}
@media (max-width: 1439px) {
  .mobile_mainBlock {
    display: block;
    font-family: "Open Sans", sans-serif;
    font-weight: 500;
    font-size: 28px;
    line-height: 28px;
  }
}
@media (max-width: 1023px) {
  .mobile_mainBlock {
    display: block;
    font-family: "Open Sans", sans-serif;
    font-weight: 600;
    font-size: 43px;
    line-height: 43px;
  }
}
.mainBlock {
  display: block;
  padding: 0 0 10rem 0;
  height: 500px;
  position: relative;
}
@media (max-width: 1023px) {
  .mainBlock {
    height: auto;
    display: none;
  }
}
.mainBlock .first_image_dept, .mainBlock .second_image_dept {
  display: none;
}
.mainBlock.randomBannerloaded .first_image_dept, .mainBlock.randomBannerloaded .second_image_dept {
  display: block;
}
@media (min-width: 414px) {
  .mainBlock > div:first-child {
    position: absolute;
    left: 50%;
    transform: translate(-50%);
  }
}
.mainBlock img.imageRightBottom {
  width: 219px;
}
.mainBlock .left.mainBanner {
  margin-bottom: 15px;
  position: relative;
}
@media (min-width: 414px) {
  .mainBlock .left.mainBanner {
    margin-bottom: 0;
    margin-right: 15px;
    display: inline-block;
  }
}
.mainBlock .left.mainBanner > span {
  position: absolute;
  width: 100px;
  height: 100px;
}
.mainBlock .left.mainBanner #anchor1 {
  left: 0;
  top: 0;
}
.mainBlock .left.mainBanner #anchor2 {
  right: 0;
  top: 0;
}
.mainBlock .left.mainBanner #anchor3 {
  left: 0;
  bottom: 0;
}
.mainBlock .left.mainBanner #anchor4 {
  right: 0;
  bottom: 0;
}
.mainBlock .right.mainBanner {
  position: relative;
  display: inline-block;
}
.mainBlock .right.mainBanner > span {
  position: absolute;
  width: 100px;
  height: 100px;
}
.mainBlock .right.mainBanner #anchor5 {
  left: 0;
  top: 0;
}
.mainBlock .right.mainBanner #anchor6 {
  right: 0;
  top: 0;
}
.mainBlock .right.mainBanner #anchor7 {
  left: 0;
  bottom: 0;
}
.mainBlock .right.mainBanner #anchor8 {
  right: 0;
  bottom: 0;
}
.mainBlock .bannerContainer {
  position: relative;
  display: block;
  width: 219px;
  margin: 0 auto;
  display: none;
}
@media (min-width: 414px) {
  .mainBlock .bannerContainer {
    margin: 0;
    width: auto;
    position: absolute;
    left: 50%;
    transform: translate(-50%);
  }
}
.mainBlock .bannerContainer .animationLeftTop {
  position: absolute;
  left: 0;
  top: 0;
  width: 100px;
  height: 100px;
}
.mainBlock .bannerContainer .animationLeftTop1 {
  position: absolute;
  right: 118px;
  top: 0;
  width: 100px;
  height: 100px;
}
.mainBlock .bannerContainer .animationRightTop {
  position: absolute;
  left: 118px;
  top: 1px;
  width: 100px;
  height: 100px;
}
.mainBlock .bannerContainer .animationRightTop1 {
  position: absolute;
  right: 0;
  top: 1px;
  width: 100px;
  height: 100px;
}
.mainBlock .bannerContainer .animationLeftBottom {
  position: absolute;
  left: 0;
  bottom: 5px;
  width: 100px;
  height: 100px;
}
.mainBlock .bannerContainer .animationLeftBottom1 {
  position: absolute;
  right: 118px;
  bottom: 5px;
  width: 100px;
  height: 100px;
}
.mainBlock .bannerContainer .animationRightBottom {
  position: absolute;
  left: 118px;
  bottom: 5px;
  width: 100px;
  height: 100px;
}
.mainBlock .bannerContainer .animationRightBottom1 {
  position: absolute;
  right: 0;
  bottom: 5px;
  width: 100px;
  height: 100px;
}
.mainBlock .bannerContainer .imageRightBottom {
  margin-bottom: 15px;
}
@media (min-width: 414px) {
  .mainBlock .bannerContainer .imageRightBottom {
    margin-bottom: 0;
    margin-right: 15px;
  }
}
.mainBlock p {
  font-size: 70px;
  font-family: "Open Sans";
  font-weight: 400;
  line-height: 85px;
  width: 0;
}
@media (min-width: 414px) {
  .mainBlock p {
    position: absolute;
  }
}
@media (min-width: 414px) {
  .mainBlock .com p {
    top: 35px;
    left: 120px;
  }
}
@media (min-width: 414px) {
  .mainBlock .digital p {
    top: 40px;
    left: -125px;
  }
}
@media (min-width: 414px) {
  .mainBlock .fashion p {
    top: 170px;
    left: -265px;
  }
}
@media (min-width: 414px) {
  .mainBlock .industrial p {
    top: 160px;
    right: -370px;
  }
}
@media (min-width: 414px) {
  .mainBlock .spatial p {
    top: 40px;
    left: 340px;
  }
}
@media (min-width: 414px) {
  .mainBlock .textile p {
    top: 40px;
    right: -262px;
  }
}
@media (min-width: 414px) {
  .mainBlock .postgraduate p {
    top: 170px;
    right: -495px;
  }
}
.mainBlock .visual p {
  top: 165px;
  right: -475px;
}
.mainBlock + .mainBlockText {
  display: flex;
  justify-content: flex-start;
  font-family: "Open Sans";
  font-weight: 500;
  font-size: 36px;
  line-height: 45px;
  position: relative;
  flex-direction: column;
}
@media (max-width: 1023px) {
  .mainBlock + .mainBlockText {
    display: none;
  }
}
button.go_bottom {
  position: absolute;
  bottom: 0;
  right: 0;
  background-color: transparent;
  border: 0;
  -webkit-animation: bounce 2s infinite;
  animation: bounce 2s infinite;
}
.titleBlock {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 0 0 15rem 0;
  line-height: 1;
}
@media (max-width: 1023px) {
  .titleBlock {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0 0 5rem 0;
  }
}
.pageHeader {
  font-size: 60px;
  font-weight: 300;
  font-family: JakartaSemiBold;
  margin: 0;
  width: 55%;
}
@media (max-width: 1023px) {
  .pageHeader {
    font-size: 5rem;
    width: 100%;
  }
}
.pageHeader1 {
  font-size: 68px;
  font-weight: 500;
  font-family: "Open Sans";
  margin: 0;
  width: 50%;
  position: absolute;
  left: 0;
  top: 0;
}
@media (max-width: 1439px) {
  .pageHeader1 {
    width: 48px;
    font-size: 52px;
    width: 100%;
    line-height: 1.2;
    position: relative;
    margin-bottom: 40px;
  }
}
@media (max-width: 1023px) {
  .pageHeader1 {
    font-size: 22px;
    width: 100%;
    position: relative;
  }
}
.individualProject__headerRight {
  width: 100%;
  margin: 15% 0 0 0;
  flex-direction: row;
  justify-content: flex-start;
}
@media (min-width: 1024px) {
  .individualProject__headerRight {
    position: absolute;
    bottom: 40px;
    right: 0;
    width: 10%;
    text-align: left;
    word-wrap: break-word;
  }
  .individualProject__headerRight p {
    margin-right: 0;
    margin-bottom: 10px;
  }
}
.individualProject__headerRight p {
  margin-right: 10px;
}
.individualProject__tags {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding-left: 8%;
  width: 50%;
}
.individualProject__tags a {
  font-size: 1.4rem;
  font-weight: 300;
  margin: 0.3rem 0 0.3rem 0;
  line-height: 2rem;
  color: #ffffff;
  text-decoration: none;
  transition-duration: 0.3s;
  -webkit-transition-duration: 0.3s;
}
.individualProject__tags a:hover {
  color: #c4c4c4;
}
.individualProject__awards {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
  width: 40%;
}
.individualProject__awards a {
  line-height: 1;
}
.individualProject__awards img {
  width: 100%;
  height: auto;
  margin-bottom: 2.5rem;
}
.individualProject__block1 {
  display: flex;
  font-size: 1.4rem;
  margin: 0 0 10rem 0;
}
@media (max-width: 1023px) {
  .individualProject__block1 {
    flex-direction: column;
  }
}
.individualProject__block1-left {
  width: 50%;
}
.individualProject__block1-left h3 {
  margin-top: 5rem;
  font-size: 1.6rem;
  font-weight: 300;
}
@media (max-width: 1023px) {
  .individualProject__block1-left h3 {
    margin-top: 3rem;
  }
}
@media (max-width: 1023px) {
  .individualProject__block1-left {
    width: 100%;
  }
}
.individualProject__block1-right {
  display: flex;
  justify-content: space-between;
  align-content: flex-start;
  width: 40%;
  margin: 0 0 0 10%;
}
@media (max-width: 1023px) {
  .individualProject__block1-right {
    margin: 0 0 0 0;
    flex-direction: column;
    width: 100%;
    font-weight: 400;
  }
}
.individualProjects__students a {
  font-size: 1.6rem;
  color: #ffffff;
}
.individualProjects__students p {
  margin: 1.4rem 0 0 0;
}
.individualProject__block2 {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-left: -1.66%;
  margin-right: -1.66%;
}
@media (max-width: 1023px) {
  .individualProject__block2 {
    margin: 0 0 0 0;
  }
}
.individualProject__videoContainer {
  margin-bottom: 120px;
}
.individualProject__videoContainer.awardProject {
  margin-bottom: 180px;
}
.individualProject__imageContainer {
  margin-bottom: 20px;
}
@media (min-width: 1024px) {
  .individualProject__imageContainer {
    margin: 0 0 30px 0;
  }
}
@media (min-width: 1440px) {
  .individualProject__imageContainer {
    margin: 0 0 60px 0;
  }
}
.individualProject__imageContainer.awardProject {
  margin-bottom: 140px;
}
@media (min-width: 1024px) {
  .individualProject__imageContainer.awardProject {
    margin: 0 0 150px 0;
  }
}
@media (min-width: 1440px) {
  .individualProject__imageContainer.awardProject {
    margin: 0 0 180px 0;
  }
}
.individualProject__imageContainer img {
  max-width: 100%;
  width: 100%;
}
.individualProject__imageContainer figcaption {
  display: none;
}
@media (min-width: 1024px) {
  .individualProject__imageContainer figcaption {
    display: inline-block;
  }
}
@media (min-width: 1440px) {
  .individualProject__imageContainer figcaption {
    display: block;
    width: 230px;
  }
}
@media (max-width: 1439px) and (min-width: 1024px) {
  .individualProject__imageContainer.individualProject__Container2 img, .individualProject__imageContainer.individualProject__Container3 img, .individualProject__imageContainer.individualProject__Container4 img {
    width: calc(100% - 235px);
    display: inline-block;
  }
  .individualProject__imageContainer.individualProject__Container2 figcaption, .individualProject__imageContainer.individualProject__Container3 figcaption, .individualProject__imageContainer.individualProject__Container4 figcaption {
    width: 235px;
    padding: 0 25px;
    display: inline-block;
  }
}
.individualProject__video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.individualProject__block2-images {
  display: flex;
  justify-content: flex-start;
  width: 100%;
}
.individualProject__block2-images > div {
  width: 33.3%;
  height: auto;
}
.individualProject__block2-images > div:nth-child(1) {
  padding: 0 2.2% 0 0%;
}
.individualProject__block2-images > div:nth-child(2) {
  padding: 0 1.1% 0 1.1%;
}
.individualProject__block2-images > div:nth-child(3) {
  padding: 0 0 0 2.2%;
}
@media (max-width: 1023px) {
  .individualProject__block2-images {
    flex-direction: column;
  }
  .individualProject__block2-images > div {
    width: 100%;
    padding: 0 1.66% 3rem 1.66% !important;
  }
}
.individualProject__block2-images img {
  max-width: 100%;
}
.individualProject__block3 {
  display: flex;
  justify-content: space-between;
  padding: 10rem 0 10rem 0;
}
@media (max-width: 1023px) {
  .individualProject__block3 {
    flex-direction: column;
    padding: 3rem 0 10rem 0;
  }
}
.individualProject__block3-left {
  width: 60%;
  font-size: 1.6rem;
}
.individualProject__block3-left p {
  margin-top: 0;
}
@media (max-width: 1023px) {
  .individualProject__block3-left {
    width: 90%;
    margin-bottom: 10rem;
  }
}
.individualProject__block3-right {
  width: 20%;
  font-size: 1.8rem;
}
.individualProject__block3-right a {
  color: #ffffff;
}
@media (max-width: 1023px) {
  .individualProject__block3-right {
    width: 100%;
  }
}
.img-hover {
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.img-hover:hover {
  transform: scale(1.01);
}
.title-back {
  margin: 0 0 4rem 0;
}
.mobile-description {
  font-weight: 300;
  margin: 8rem 0 -2rem 0;
}
.otherProjects {
  margin-bottom: 3rem;
}
@media (max-width: 1023px) {
  .otherProjects {
    margin-bottom: 0;
  }
}
.loading {
  display: block;
  color: #ffffff;
  font-size: 3rem;
  font-weight: 800;
  margin: auto auto;
}
@media (max-width: 1023px) {
  .loading {
    font-size: 1.8rem;
    font-weight: 700;
  }
}
.loading-dot1 {
  opacity: 0;
  -webkit-animation: dot 0.8s infinite;
  -webkit-animation-delay: 0s;
  animation: dot 0.8s infinite;
  animation-delay: 0s;
}
.loading-dot2 {
  opacity: 0;
  -webkit-animation: dot 0.8s infinite;
  -webkit-animation-delay: 0.2s;
  animation: dot 0.8s infinite;
  animation-delay: 0.2s;
}
.loading-dot3 {
  opacity: 0;
  -webkit-animation: dot 0.8s infinite;
  -webkit-animation-delay: 0.3s;
  animation: dot 0.8s infinite;
  animation-delay: 0.3s;
}
@-webkit-keyframes dot {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes dot {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.loading-container {
  width: 100%;
  text-align: center;
  margin: 3rem 0 3rem 0;
}
.loading-container-directory {
  width: 100%;
  margin: 3rem 0 3rem 0;
}
@media (max-width: 1023px) {
  .loading-container-directory {
    width: 85%;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }
}
.loader-container {
  display: flex;
  position: fixed;
  margin: 0 0 0 0;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  background: #282624;
  z-index: 100;
}
.loading-text {
  color: #282624;
  font-size: 1.6rem;
}
.project {
  width: 100%;
  height: min-content;
  margin-left: 1.66%;
  margin-right: 1.66%;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  /**
    filter: saturate(0);
    **/
  /**
    @media (min-width: $desktop-breakpoint + 1) {
        &:hover {
            filter: saturate(1);
            transform: scale(1.01);
        }
    }
    

    @media (max-width: $desktop-breakpoint) {
        width: 100%;
        margin: 0 0 0 0;
        filter: saturate(1);
    }
**/
}
@media (min-width: 1024px) {
  .project {
    flex: 0 45%;
  }
}
@media (min-width: 1440px) {
  .project {
    flex: 0 30%;
  }
}
.project img {
  width: 100%;
  vertical-align: top;
}
.project a {
  text-decoration: none;
}
.project a span {
  position: relative;
  display: block;
}
.project a span:hover:after {
  background-color: #1a1a1a;
  content: "";
  height: 100%;
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.first_image_dept img, .second_image_dept img {
  max-width: 100%;
  width: 100%;
}
.project__description, .project__description-white {
  padding-bottom: 2rem;
  position: relative;
  top: 0;
  z-index: -1;
  transition-duration: 0.3s;
}
.project__description p, .project__description-white p {
  color: #282624;
  font-size: 18px;
  line-height: 1.4;
  line-height: 2.4rem;
  margin: 0.5rem 0 0.5rem 0;
}
@media (min-width: 1440px) {
  .project__description p, .project__description-white p {
    font-size: calc(18px + 6 * ((100vw - 1440px) / 680));
  }
}
@media (max-width: 1023px) {
  .project__description, .project__description-white {
    top: 0;
    margin: 0 0 2rem 0;
  }
}
.project__preview__students {
  font-size: 18px;
  line-height: 23px;
  font-weight: 400;
  font-family: Arimo;
}
.project__preview__title, .project__preview__award {
  font-weight: 400;
  font-family: Arimo;
}
p.project__preview__award {
  margin-top: 20px;
}
.project__description-white p {
  color: #ffffff;
}
.project__preview__tags {
  font-style: italic;
}
.projectCount {
  font-size: 1.4rem;
  font-weight: 300;
  color: #c4c4c4;
  font-style: italic;
  padding-bottom: 1rem;
  margin-top: 3rem;
}
.relatedTitle {
  margin: 5rem 0 5rem 0;
  font-weight: 800;
  font-size: 1.4rem;
}
.tags {
  display: flex;
  justify-content: space-between;
  align-content: flex-start;
  flex-wrap: wrap;
  width: 31.3rem;
}
.tags button {
  border: none;
  background: none;
  text-align: left;
  display: inline-block;
  padding: 0;
  width: 50%;
  height: 3rem;
  font-size: 1.4rem;
  font-weight: 300;
  text-decoration: none;
}
.tags button:focus {
  outline: none;
}
@media (max-width: 1023px) {
  .tags {
    margin: 6rem 0 3rem 0;
  }
}
.tags-default {
  color: #282624;
}
.tags-orange {
  color: #f58220;
}
.body.home-page .header a:visited, .body.home-page .header a:focus, .body.home-page .header a:active, .body.home-page .header a:hover, .body.home-page .header a.active:visited, .body.home-page .header a.active:focus, .body.home-page .header a.active:active, .body.home-page .header a.active:hover {
  text-decoration: none !important;
}
.body.home-page header, .body.home-page .blue, .body.home-page .contentContainer > div:first-child {
  background: #1a1a1a;
}
.body.home-page header a:focus, .body.home-page header button:focus, .body.home-page header a.active:focus, .body.home-page .blue a:focus, .body.home-page .blue button:focus, .body.home-page .blue a.active:focus, .body.home-page .contentContainer > div:first-child a:focus, .body.home-page .contentContainer > div:first-child button:focus, .body.home-page .contentContainer > div:first-child a.active:focus {
  outline: none;
}
.body.home-page header a:hover, .body.home-page header button:hover, .body.home-page header a.active:hover, .body.home-page .blue a:hover, .body.home-page .blue button:hover, .body.home-page .blue a.active:hover, .body.home-page .contentContainer > div:first-child a:hover, .body.home-page .contentContainer > div:first-child button:hover, .body.home-page .contentContainer > div:first-child a.active:hover {
  text-decoration: underline;
}
.body.home-page .contentContainer {
  color: white;
}
.body.home-page .header__links a {
  color: #fff;
}
.body.home-page .header__links a.active {
  font-weight: 800;
}
.body.home-page .contentContainer {
  padding: 0;
  width: 100%;
}
.body.home-page .contentContainer > div {
  color: #282624;
  width: 100%;
  margin: 0 auto;
  padding: 0 15px;
}
@media (min-width: 1024px) {
  .body.home-page .contentContainer > div {
    padding: 3rem 40px;
  }
}
@media (min-width: 1440px) {
  .body.home-page .contentContainer > div {
    width: 100%;
    padding: 3rem 60px;
  }
}
.body.home-page .contentContainer > div:first-child {
  background-color: #1a1a1a;
  color: #f7f5ed !IMPORTANT;
  width: 100%;
}
.body.home-page .contentContainer > div:first-child > div {
  width: 100%;
  margin: 0 auto;
}
@media (min-width: 1024px) {
  .body.home-page .contentContainer > div:first-child > div {
    padding: 3rem 0;
  }
}
@media (min-width: 1440px) {
  .body.home-page .contentContainer > div:first-child > div {
    width: 100%;
    padding: 5% 0 5% 0;
  }
}
.body.home-page .mobileMenu .mobileMenu-dark {
  color: #fff;
}
.body.inside-page header {
  background: #f7f5ed;
}
.body.inside-page .contentContainer {
  color: #1a1a1a;
}
.body.inside-page .header__links a {
  color: #282624;
}
.MuiInputBase-root {
  color: rgba(0, 0, 0, 0.87);
  cursor: text;
  display: inline-flex;
  position: relative;
  font-size: 1rem;
  box-sizing: border-box;
  align-items: center;
  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
  font-weight: 400;
  line-height: 1.1876em;
  letter-spacing: 0.00938em;
}
.MuiInputBase-input {
  font: inherit;
  color: currentColor;
  width: 100%;
  border: 0;
  height: 1.1876em;
  margin: 0;
  display: block;
  padding: 6px 0 7px;
  min-width: 0;
  background: none;
  box-sizing: content-box;
  animation-name: mui-auto-fill-cancel;
  letter-spacing: inherit;
  animation-duration: 10ms;
  -webkit-tap-highlight-color: transparent;
}
.MuiNativeSelect-select {
  cursor: pointer;
  min-width: 16px;
  user-select: none;
  border-radius: 0;
  -moz-appearance: none;
  -webkit-appearance: none;
}
.MuiNativeSelect-select:focus {
  border-radius: 0;
  background-color: rgba(0, 0, 0, 0.05);
}
.MuiInputBase-input:focus {
  outline: 0;
}
.MuiNativeSelect-select.MuiNativeSelect-select {
  padding-right: 24px;
}
.MuiNativeSelect-icon {
  top: calc(50% - 12px);
  color: rgba(0, 0, 0, 0.54);
  right: 0;
  position: absolute;
  pointer-events: none;
}
.MuiSvgIcon-root {
  fill: currentColor;
  width: 1em;
  height: 1em;
  display: inline-block;
  font-size: 1.5rem;
  transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  flex-shrink: 0;
  user-select: none;
}
.mfp-container.mfp-image-holder .mfp-arrow::before, .mfp-container.mfp-image-holder .mfp-arrow::after {
  border: medium inset transparent;
}
.mfp-container.mfp-image-holder .mfp-arrow::before {
  border-top-width: 21px;
  border-bottom-width: 21px;
}
.mfp-container.mfp-image-holder .mfp-arrow-left::before {
  border-right: 27px solid #3f3f3f;
}
.mfp-container.mfp-image-holder .mfp-arrow-right:before {
  border-left: 27px solid #3f3f3f;
}
.mfp-container.mfp-image-holder .mfp-arrow::after {
  border-top-width: 13px;
  border-bottom-width: 13px;
}
.mfp-container.mfp-image-holder .mfp-arrow-left::after {
  border-right: 17px solid white;
}
.mfp-container.mfp-image-holder .mfp-arrow-right:after {
  border-left: 17px solid white;
}
.projectBlock {
  border-top: 1px solid #fff;
  padding: 30px 0;
}
.projectBlock:last-child {
  border-bottom: 1px solid #fff;
}
.projectBlock a.featuredLink {
  margin-top: -40px;
  float: right;
  color: #282624;
}
@media (min-width: 1024px) {
  .projectBlock a.featuredLink {
    margin-top: 0;
    color: #f58220;
  }
}
.projectBlock .projectImage {
  padding: 0 15px;
}
@media (min-width: 1024px) {
  .projectBlock .projectImage {
    width: 30%;
    display: inline-block;
  }
}
.projectBlock .projectImage img {
  max-width: 100%;
}
.projectBlock .projectDescription {
  vertical-align: top;
  padding: 0 15px;
}
@media (min-width: 1024px) {
  .projectBlock .projectDescription {
    width: 60%;
    display: inline-block;
  }
}
.projectBlock .projectDescription h3 {
  font-size: 2rem;
  font-weight: 700;
  margin-top: 0;
}
.projectBlock .projectDescription p {
  font-size: 1.6rem;
}
.projectBlock .projectDescription .projectInfo p {
  margin: 0;
  font-size: 1.2rem;
}
@media (min-width: 1024px) {
  .projectBlock .projectDescription .projectInfo p {
    display: inline-block;
    width: 49%;
  }
}
.projectBlock .projectDescription .projectInfo p.projectTag {
  width: 80%;
}
@media (min-width: 1024px) {
  .projectBlock .projectDescription .projectInfo p.projectTag {
    width: 49%;
  }
}
@media (min-width: 1024px) {
  .projectBlock .projectContent {
    min-height: 200px;
  }
}
.awardIndividual {
  padding: 0 0 30px 0;
  margin-bottom: 50px;
}
.awardIndividual img {
  width: 150px;
  height: auto;
  display: block;
  margin: 0 auto;
}
@media (min-width: 1024px) {
  .awardIndividual img {
    display: inline;
    margin: 0 50px 0 0;
  }
}
.popupStyle {
  width: 100%;
}
.popupStyle iframe {
  width: 100%;
}
.popupStyle iframe body {
  width: 100%;
}
.popupStyle iframe img {
  max-width: 100%;
}
.first_image_dept, .second_image_dept {
  position: absolute;
}
.first_image_dept img, .second_image_dept img {
  height: auto;
  max-width: 100%;
}
.dept_title {
  font-family: Arimo;
  font-size: 26px;
  color: #282624;
  text-transform: uppercase;
  padding-left: 40px;
  padding-right: 40px;
  margin-bottom: 0px;
}
@media (max-width: 1439px) {
  .dept_title {
    font-size: 22px;
  }
}
@media (max-width: 1023px) {
  .dept_title {
    font-size: 12px;
    padding-left: 15px;
    padding-right: 15px;
  }
}
.dept_list {
  font-family: JakartaMedium;
  font-size: 24px;
  display: inline-block;
  margin: 0;
  padding: 0;
  line-height: 1;
  width: auto;
  color: #282624;
  text-decoration: none;
}
.dept_list:hover {
  text-decoration: underline;
}
@media (min-width: 1024px) {
  .dept_list {
    font-size: 48px;
  }
}
@media (min-width: 1440px) {
  .dept_list {
    font-size: 58px;
  }
}
.studentSearch {
  padding-right: 5%;
}
.studentSearch > div:first-child {
  padding-left: 40px;
  position: relative;
  display: block;
}
@media (max-width: 1023px) {
  .studentSearch > div:first-child {
    display: none;
  }
}
.studentSearch > div:first-child:before {
  position: absolute;
  background-image: url(https://artanddesign.aut.ac.nz/__data/assets/file/0004/694174/search-icon-grey.svg);
  width: 25px;
  height: 27px;
  left: 3px;
  top: 0px;
  content: "";
}
.studentSearch #studentSearch {
  padding: 5px;
  border: 0;
  font-family: JakartaMedium;
  font-weight: 500;
  font-size: 16px;
  background-color: transparent;
}
.studentSearch #studentSearch::-webkit-input-placeholder {
  font-family: JakartaMedium;
  font-weight: 500;
  font-size: 16px;
  color: #ccc;
}
.studentSearch #studentSearch:-ms-input-placeholder {
  font-family: JakartaMedium;
  font-weight: 500;
  font-size: 16px;
  color: #ccc;
}
.studentSearch #studentSearch::placeholder {
  font-family: JakartaMedium;
  font-weight: 500;
  font-size: 16px;
  color: #ccc;
}
.home-page .topSearch img {
  top: 10px;
  filter: invert(1);
}
.topSearch {
  display: inline-block;
  position: relative;
  width: 27px;
  height: 27px;
}
@media (max-width: 1023px) {
  .topSearch {
    display: none;
  }
}
.topSearch:hover {
  border: 0 !important;
}
.topSearch img {
  position: absolute;
  top: 10px;
}
@media (max-width: 1023px) {
  .topSearch img {
    display: none;
  }
}
.mobile-search-text {
  display: none;
}
@media (max-width: 1023px) {
  .mobile-search-text {
    display: block;
  }
}
.header__links > div {
  position: relative;
}
#searchForm {
  display: none;
}
#searchForm #search_box_form {
  position: relative;
}
@media (max-width: 1023px) {
  #searchForm {
    display: block;
    padding: 0;
  }
}
#searchForm #funnelquerybox {
  position: absolute;
  top: -25px;
  left: 0;
  right: 0;
  background-color: #fff;
}
@media (max-width: 1023px) {
  #searchForm #funnelquerybox {
    position: relative;
    padding: 0;
    top: 0;
    background-color: transparent;
  }
}
#searchForm #funnelquerybox > div {
  padding-left: 30px;
  position: relative;
}
@media (max-width: 1023px) {
  #searchForm #funnelquerybox > div {
    padding: 0;
  }
}
#searchForm #funnelquerybox > div::before {
  position: absolute;
  content: "";
  background-image: url(https://artanddesign.aut.ac.nz/__data/assets/image/0010/438265/search.png);
  width: 27px;
  height: 27px;
  left: 0;
  top: 6px;
}
@media (max-width: 1023px) {
  #searchForm #funnelquerybox > div::before {
    display: none;
  }
}
#searchForm #funnelquerybox > div input#query {
  padding: 10px;
  border-bottom: 0;
  width: 90%;
  height: 40px;
}
#searchForm #funnelquerybox > div button {
  background-color: transparent;
  border: 0;
}
@media (max-width: 1023px) {
  #searchForm #funnelquerybox > div button {
    display: none;
  }
}
#searchForm .search-button {
  display: none;
}
@media (max-width: 1023px) {
  #searchForm .search-button {
    position: absolute;
    content: "";
    background-image: url(https://artanddesign.aut.ac.nz/__data/assets/image/0010/438265/search.png);
    width: 27px;
    height: 27px;
    left: calc(85% - 20px);
    top: 6px;
    display: block;
    background-color: transparent;
    border: 0;
    color: transparent;
  }
}
.header__links-mobile-open #searchForm #funnelquerybox input#query {
  background-color: #fff;
  color: #282624;
}
.home-page #searchForm #funnelquerybox {
  background-color: #1a1a1a;
}
.home-page #searchForm #funnelquerybox input {
  background-color: #1a1a1a;
  color: #fff;
}
.home-page #searchForm #funnelquerybox input::-webkit-input-placeholder {
  color: #fff;
}
.home-page #searchForm #funnelquerybox input:-ms-input-placeholder {
  color: #fff;
}
.home-page #searchForm #funnelquerybox input::placeholder {
  color: #fff;
}
.home-page #searchForm #funnelquerybox > div::before {
  filter: invert(1);
}
.home-page #searchForm #funnelquerybox button img {
  filter: invert(1);
}
.mainBlue {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: -1;
}
.wrapper {
  position: relative;
  margin: 40px auto;
  background: white;
}
.wrapper {
  width: 323px;
  height: 323px;
}
.wrapper .pie {
  width: 50%;
  height: 100%;
  transform-origin: 100% 50%;
  position: absolute;
  background: #444431;
  border: 0;
}
.wrapper .spinner {
  border-radius: 100% 0 0 100% / 50% 0 0 50%;
  z-index: 200;
  border-right: none;
}
.wrapper:hover .spinner, .wrapper:hover .filler, .wrapper:hover .mask {
  animation-play-state: running;
}
.wrapper .filler {
  border-radius: 0% 100% 100% 0% / 0% 50% 50% 0%;
  left: 50%;
  opacity: 0;
  z-index: 100;
  border-left: none;
}
.wrapper .mask {
  width: 50%;
  height: 100%;
  position: absolute;
  background: inherit;
  opacity: 1;
  z-index: 300;
}
@keyframes rota {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes opa {
  0% {
    opacity: 1;
  }
  50%, 100% {
    opacity: 0;
  }
}
.site-desc {
  padding: 20px 0;
}
@media (min-width: 1024px) {
  .site-desc {
    padding: 120px 0 0;
  }
}
.site-desc h2 {
  font-family: JakartaSemiBold;
  font-weight: 600;
  font-size: 4vw;
  line-height: 1.4;
  margin-bottom: 0;
}
@media (min-width: 414px) {
  .site-desc h2 {
    font-size: 22px;
    line-height: 22px;
  }
}
@media (min-width: 1024px) {
  .site-desc h2 {
    font-size: 48px;
    line-height: 64px;
    margin-bottom: 30px;
  }
}
@media (min-width: 1440px) {
  .site-desc h2 {
    font-size: calc(41px + 6 * ((100vw - 1440px) / 680));
    line-height: 1.2;
    width: 51%;
  }
}
.site-desc .titleBreak {
  display: none;
}
@media (min-width: 1440px) {
  .site-desc .titleBreak {
    display: block;
  }
}
.site-desc-text {
  padding-left: 39%;
  margin-top: 70px;
  padding-top: 20px;
}
@media (max-width: 1439px) {
  .site-desc-text {
    padding-left: 30%;
    margin-top: 0;
  }
}
@media (max-width: 1023px) {
  .site-desc-text {
    padding-left: 20%;
  }
}
.site-desc-text p {
  font-family: Arimo;
  font-size: 24px;
  line-height: 29px;
  margin-top: 0;
}
@media (max-width: 1439px) {
  .site-desc-text p {
    font-size: 18px;
    line-height: 21px;
    -webkit-columns: 2;
    -moz-columns: 2;
    columns: 2;
    -webkit-column-gap: 1em;
    -moz-column-gap: 1em;
    column-gap: 1em;
  }
}
@media (max-width: 1023px) {
  .site-desc-text p {
    font-size: 14px;
    line-height: 17px;
    -webkit-columns: auto;
    -moz-columns: auto;
    columns: auto;
    -webkit-column-gap: inherit;
    -moz-column-gap: inherit;
    column-gap: inherit;
  }
}
@media only screen and (min-width: 1440px) {
  .site-desc-text p {
    font-size: 24px;
    line-height: 1.2;
  }
}
.about .site-desc-text {
  padding-left: 0px;
  margin-top: 0px;
}
.about .site-desc-text #desc-text {
  font-size: 16px !important;
}
.about .site-desc-text p {
  line-height: 0.9 !important;
}
.about h1 {
  font-size: 50px !important;
}
.about h2 {
  font-size: 50px !important;
  font-family: JakartaRegular !important;
  margin-top: 50px;
}
.about.areas h3 {
  font-size: 37px !important;
  font-family: JakartaSemiBold;
}
.about.areas .thumbnailTile {
  padding-right: 130px;
}
.site-desc-wraper {
  position: relative;
}
.site-desc-wraper h2 {
  margin-top: 0;
  text-transform: uppercase;
}
@media only screen and (min-width: 1440px) {
  .site-desc-wraper h2 {
    position: absolute;
    left: 0;
  }
}
#welcome {
  font-family: JakartaSemiBold;
  font-size: 26px;
}
.bestof {
  display: flex;
  justify-content: space-between;
  align-content: flex-start;
  flex-wrap: wrap;
  width: 70%;
}
@media (max-width: 1023px) {
  .bestof {
    width: auto;
  }
}
.bestof p {
  font-size: 18px;
  line-height: 22px;
  font-family: Arimo;
  margin-top: 0;
}
@media only screen and (min-width: 1440px) {
  .bestof p {
    font-size: calc(18px + 6 * ((100vw - 1440px) / 680));
    line-height: 1.2;
  }
}
.support {
  position: relative;
  padding-bottom: 10px;
}
@media (min-width: 1024px) {
  .support {
    margin-top: -35px;
  }
}
.support p {
  font-size: 17px;
  line-height: 22px;
  font-family: Arimo;
  font-weight: 500;
}
@media only screen and (min-width: 1440px) {
  .support p {
    font-size: calc(18px + 6 * ((100vw - 1440px) / 680));
    line-height: 1.2;
  }
}
.support > div {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: space-around;
}
@media (max-width: 1023px) {
  .support > div {
    display: block;
  }
  .support > div img {
    display: block;
    margin: 0 auto;
    vertical-align: middle;
    padding: 10px 0;
  }
}
.support .go_bottom {
  bottom: -50px;
}
.halfWidth {
  display: inline-block;
  width: 49%;
  vertical-align: top;
}
@media (max-width: 1023px) {
  .halfWidth {
    width: 100%;
    display: block;
  }
}
.contentContainer > div.box-two:first-child {
  padding-top: 0 !important;
  margin-top: -100px !important;
}
@media (max-width: 1439px) {
  .contentContainer > div.search_result.box-two:first-child {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
}
.box-two {
  padding-top: 80px !important;
}
.box-two .leftBox, .box-two .rightBox {
  vertical-align: top;
}
.box-two .leftBox {
  display: none;
  width: 33.3%;
  padding-right: 10%;
}
@media (min-width: 1024px) {
  .box-two .leftBox {
    display: inline-block;
  }
}
.box-two .leftBox h3 {
  font-size: 16px;
  line-height: 22px;
  font-family: Arimo;
  font-weight: 500;
  margin-top: 0;
}
@media only screen and (min-width: 1440px) {
  .box-two .leftBox h3 {
    font-size: calc(18px + 6 * ((100vw - 1440px) / 680));
    line-height: 1.2;
  }
}
.box-two .leftBox a {
  font-size: 14px;
  line-height: 1;
  font-family: "Inter";
  color: #282624;
  text-decoration: none;
}
@media only screen and (min-width: 1440px) {
  .box-two .leftBox a {
    font-size: 14px;
  }
}
.box-two .leftBox a[disabled] {
  color: #ccc;
  border-color: #ccc;
  pointer-events: none;
}
.box-two .rightBox {
  display: block;
  width: 100%;
}
@media (min-width: 1024px) {
  .box-two .rightBox {
    display: inline-block;
    width: 66.3%;
  }
}
.box-two .box {
  padding-bottom: 60px;
}
.mfp-iframe-scaler iframe {
  background-color: #fff;
  padding: 50px;
}
@media (min-width: 1440px) {
  .indivisual_project {
    padding-top: 120px;
  }
}
.indivisual_project .pageHeader {
  width: 100%;
}
.indivisual_project .dept_tags {
  width: 80%;
  display: none;
}
@media (min-width: 1024px) {
  .indivisual_project .dept_tags {
    display: block;
  }
}
.indivisual_project .container {
  padding: 0;
  font-size: 14px;
  font-family: "Open Sans";
  font-weight: 400;
}
@media only screen and (min-width: 1440px) {
  .indivisual_project .container {
    font-size: calc(14px + 6 * ((100vw - 1440px) / 680));
    line-height: 1.2;
  }
}
@media (min-width: 1440px) {
  .indivisual_project .container {
    -webkit-columns: 2 310px;
    -moz-columns: 2 310px;
    columns: 2 310px;
    -webkit-column-gap: 1em;
    -moz-column-gap: 1em;
    column-gap: 1em;
  }
  .indivisual_project .wrapper2Column {
    padding: 0 0.5em;
  }
}
.indivisual_project .titleBlock {
  display: block;
  padding: 0;
  position: relative;
}
.indivisual_project .titleBlock h1 {
  font-size: 43px;
  line-height: 46px;
  font-family: "Open Sans";
  font-weight: 500;
  display: block;
}
@media (min-width: 1024px) {
  .indivisual_project .titleBlock h1 {
    font-size: 52px;
    line-height: 64px;
    width: 80%;
  }
}
@media only screen and (min-width: 1440px) {
  .indivisual_project .titleBlock h1 {
    font-size: calc(100px + 6 * ((100vw - 1440px) / 680));
    line-height: 1.1;
  }
}
.indivisual_project .titleBlock h2 {
  font-size: 43px;
  line-height: 46px;
  font-family: "Open Sans";
  font-weight: 300;
  display: block;
  margin-top: 0;
  margin-bottom: 40px;
}
@media (min-width: 1024px) {
  .indivisual_project .titleBlock h2 {
    font-size: 52px;
    line-height: 64px;
    width: 80%;
  }
}
@media only screen and (min-width: 1440px) {
  .indivisual_project .titleBlock h2 {
    font-size: calc(100px + 6 * ((100vw - 1440px) / 680));
    line-height: 1.1;
  }
}
.indivisual_project .titleBlock span {
  font-size: 18px;
  line-height: 23px;
  font-family: "Open Sans";
  font-weight: 400;
  opacity: 0.4;
  margin-right: 30px;
}
.indivisual_project .titleBlock span.dept {
  opacity: 1;
}
.indivisual_project .individualProject__imageContainer a {
  text-decoration: none;
}
.indivisual_project p {
  margin-top: 0;
}
.indivisual_project .halfColumn {
  padding-bottom: 30px;
}
.indivisual_project .halfColumn > div {
  vertical-align: top;
}
@media (max-width: 1439px) {
  .indivisual_project .halfColumn > div.halfWidth:first-child {
    width: 30%;
  }
  .indivisual_project .halfColumn > div.halfWidth:nth-child(2) {
    width: 68%;
  }
}
@media (max-width: 1023px) {
  .indivisual_project .halfColumn > div.halfWidth:first-child, .indivisual_project .halfColumn > div.halfWidth:nth-child(2) {
    display: block;
    width: 100%;
  }
}
.indivisual_project .halfColumn > div p {
  font-size: 14px;
  line-height: 20px;
  font-family: "Inter";
  font-weight: 400;
}
@media only screen and (min-width: 1440px) {
  .indivisual_project .halfColumn > div p {
    font-size: calc(18px + 6 * ((100vw - 1440px) / 680));
    line-height: 1.2;
  }
}
.indivisual_project .halfColumn > div p.b {
  font-size: 18px;
  line-height: 23px;
  font-family: "Inter";
  font-weight: 400;
  width: 100%;
  display: inline-block;
}
@media only screen and (min-width: 1024px) {
  .indivisual_project .halfColumn > div p.b {
    padding-right: 5rem;
    float: right;
    text-align: left;
    width: 300px;
  }
}
@media only screen and (min-width: 1440px) {
  .indivisual_project .halfColumn > div p.b {
    font-size: calc(22px + 6 * ((100vw - 1440px) / 680));
    line-height: 1.2;
  }
}
@media (max-width: 1023px) {
  .indivisual_project .halfColumn > div p.b {
    max-width: 100%;
  }
}
.indivisual_project .individualProjects__block2 {
  margin-top: 40px;
}
.indivisual_project .project_awards {
  min-height: 120px;
  vertical-align: top;
  background-image: url(https://artanddesign.aut.ac.nz/__data/assets/image/0015/1050504/ad25-award-logo.png);
  background-size: 120px;
  background-position: center left;
  background-repeat: no-repeat;
  color: #1a1a1a;
  width: 100%;
  padding: 20px 30px 0 150px;
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.2;
  margin-left: 10px;
}
.indivisual_project .project_awards div.award_title {
  font-weight: 600;
  margin-bottom: 3px;
  display: block;
}
@media (min-width: 1024px) {
  .indivisual_project .project_awards {
    float: right;
    width: 50%;
  }
}
@media (min-width: 1440px) {
  .indivisual_project .project_awards {
    margin-top: 0;
    width: 34%;
  }
}
@media (max-width: 1023px) {
  .indivisual_project.Landscape .individualProject__Container1 {
    margin-left: -15px;
    margin-right: -15px;
    width: calc(100% + 30px) !important;
  }
}
.indivisual_project.Landscape .individualProject__Container1, .indivisual_project.Landscape .individualProject__Container2 {
  width: 100%;
  display: block;
}
@media (min-width: 1440px) {
  .indivisual_project.Landscape .individualProject__Container1, .indivisual_project.Landscape .individualProject__Container2 {
    width: 74.2%;
  }
}
.indivisual_project.Landscape .individualProject__Container2 + div .leftHalf, .indivisual_project.Landscape .individualProject__Container2 + div .rightHalf {
  display: inline-block;
  width: 49%;
  vertical-align: top;
}
@media (max-width: 1439px) {
  .indivisual_project.Landscape .individualProject__Container2 + div .leftHalf, .indivisual_project.Landscape .individualProject__Container2 + div .rightHalf {
    width: 100%;
    display: block;
  }
}
@media (min-width: 1440px) {
  .indivisual_project.Landscape .individualProject__Container2 + div .leftHalf > div {
    margin-bottom: 120px;
    width: 78%;
  }
}
@media (min-width: 1024px) {
  .indivisual_project.Landscape .container {
    padding: 0 80px;
  }
}
@media (min-width: 1440px) {
  .indivisual_project.Landscape .container {
    padding: 0;
  }
}
@media (min-width: 1440px) {
  .indivisual_project.Portrait .project_awards {
    margin-right: -50%;
    width: 50%;
  }
}
.indivisual_project.Portrait .individualProject__Container1 {
  display: block;
  width: 100%;
}
@media (min-width: 1440px) {
  .indivisual_project.Portrait .individualProject__Container1 {
    width: 49%;
    display: block;
  }
}
@media (max-width: 1439px) {
  .indivisual_project.Portrait .halfWidth.ind {
    width: 100%;
    display: block;
  }
}
.indivisual_project.Portrait .individualProject__Container2, .indivisual_project.Portrait .individualProject__Container3, .indivisual_project.Portrait .individualProject__Container4 {
  display: block;
  width: 78.2%;
}
@media (max-width: 1439px) {
  .indivisual_project.Portrait .individualProject__Container2, .indivisual_project.Portrait .individualProject__Container3, .indivisual_project.Portrait .individualProject__Container4 {
    width: 100%;
    display: block;
  }
}
.indivisual_project.Portrait .leftHalf, .indivisual_project.Portrait .rightHalf {
  display: inline-block;
  width: 49%;
  vertical-align: top;
}
@media (max-width: 1439px) {
  .indivisual_project.Portrait .leftHalf, .indivisual_project.Portrait .rightHalf {
    width: 100%;
    display: block;
  }
}
@media (min-width: 1024px) {
  .indivisual_project.Portrait .container {
    padding: 0 80px;
  }
}
@media (min-width: 1440px) {
  .indivisual_project.Portrait .container {
    padding: 0;
  }
}
.indivisual_project.Mixed .individualProject__Container1, .indivisual_project.Mixed .individualProject__Container2 {
  display: block;
  width: 100%;
}
@media (min-width: 1440px) {
  .indivisual_project.Mixed .individualProject__Container1, .indivisual_project.Mixed .individualProject__Container2 {
    width: 74.2%;
    display: block;
  }
}
@media (max-width: 1439px) {
  .indivisual_project.Mixed .halfWidth.ind {
    width: 100%;
    display: block;
  }
}
.indivisual_project.Mixed .individualProject__Container3, .indivisual_project.Mixed .individualProject__Container4 {
  width: 82%;
}
@media (max-width: 1439px) {
  .indivisual_project.Mixed .individualProject__Container3, .indivisual_project.Mixed .individualProject__Container4 {
    width: 100%;
    display: block;
  }
}
.indivisual_project.Mixed .individualProject__Container2 + div .leftHalf, .indivisual_project.Mixed .individualProject__Container2 + div .rightHalf {
  display: inline-block;
  width: 49%;
  vertical-align: top;
  padding-right: 2%;
}
@media (max-width: 1439px) {
  .indivisual_project.Mixed .individualProject__Container2 + div .leftHalf, .indivisual_project.Mixed .individualProject__Container2 + div .rightHalf {
    width: 100%;
    display: block;
  }
}
.indivisual_project.Mixed .individualProject__Container2 + div .leftHalf > div {
  margin-bottom: 120px;
}
@media (min-width: 1024px) {
  .indivisual_project.Mixed .container {
    padding: 0 80px;
  }
}
@media (min-width: 1440px) {
  .indivisual_project.Mixed .container {
    padding: 0;
    width: 73%;
    -webkit-columns: 3;
    -moz-columns: 3;
    columns: 3;
    -webkit-column-gap: 1em;
    -moz-column-gap: 1em;
    column-gap: 1em;
  }
  .indivisual_project.Mixed .wrapper2Column {
    padding: 0;
  }
  .indivisual_project.Mixed .wrapper2Column > div {
    padding-right: 5%;
  }
}
#studentSearchinProject {
  background-color: #1a1a1a;
  padding-bottom: 100px;
  position: relative;
}
#studentSearchinProject .nameAnchor {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  padding-top: 2rem;
}
#studentSearchinProject .nameAnchor a {
  color: #fff;
  font-family: "Inter";
  font-weight: 500;
  font-size: 15px;
  line-height: 18px;
  text-decoration: none;
}
@media (min-width: 1024px) {
  #studentSearchinProject .nameAnchor {
    display: none;
  }
}
#studentSearchinProject .leftHeader {
  display: none;
}
@media (min-width: 1024px) {
  #studentSearchinProject .leftHeader {
    display: inline-block;
    width: 49%;
    padding-right: 10%;
  }
}
#studentSearchinProject .leftHeader > div:first-child {
  margin-bottom: 0;
}
#studentSearchinProject .leftHeader > div {
  margin-bottom: 30px;
  max-width: 60%;
}
@media (max-width: 1023px) {
  #studentSearchinProject .studentSearch > div:first-child {
    display: block;
  }
}
@media (max-width: 413px) {
  #studentSearchinProject .studentSearch > div:first-child {
    display: block;
  }
}
#studentSearchinProject .studentDirectory {
  vertical-align: top;
  padding-left: 50px;
  padding-bottom: 5%;
  margin-top: 0;
  display: block;
}
@media (min-width: 1024px) {
  #studentSearchinProject .studentDirectory {
    width: 50%;
    display: inline-block;
    padding-left: 0;
  }
}
@media (min-width: 1440px) {
  #studentSearchinProject .studentDirectory {
    display: inline-block;
    padding-left: 0;
  }
}
#studentSearchinProject .studentSearch div:first-child:before {
  top: 0;
}
#studentSearchinProject .studentSearch p {
  color: #fff;
  display: block;
  min-width: 300px;
  font-family: Arimo;
  font-weight: 600;
  font-size: 18px;
  line-height: 18px;
  margin-top: 0;
}
@media only screen and (min-width: 1440px) {
  #studentSearchinProject .studentSearch p {
    font-size: calc(18px + 6 * ((100vw - 1440px) / 680));
    line-height: 1;
  }
}
#studentSearchinProject .studentSearch a {
  color: #fff;
  font-family: "Inter";
  font-weight: 400;
  font-size: 14px;
  line-height: 14px;
  text-decoration: none;
  border: 1px solid #fff;
  border-radius: 5px;
  padding: 6px 15px;
  min-height: 30px;
  display: inline-block;
  margin: 0 7px 10px 0;
}
#studentSearchinProject .studentSearch a.active {
  padding: 6px 15px 6px 15px;
  filter: invert(1);
  background-color: #282624;
}
#studentSearchinProject .studentSearch a.hide {
  display: none;
}
#studentSearchinProject .studentSearch a[disabled] {
  opacity: 0.6;
  pointer-events: none;
}
@media (max-width: 1023px) {
  #studentSearchinProject .yearGroup__students div {
    height: auto;
  }
}
#studentSearchinProject .studentList .yearGroup__students > div .group_directory, #studentSearchinProject .yearGroup__students a {
  color: #fff;
}
#studentSearchinProject #studentSearch {
  background-color: #1a1a1a;
  color: #fff;
  font-family: "Open Sans";
  font-weight: 600;
  font-size: 14px;
  padding: 3px 0px;
  min-width: 300px;
  margin-bottom: 30px;
}
#studentSearchinProject #studentSearch::placeholder {
  color: #fff;
  opacity: 1;
  font-size: 14px;
  font-family: "Open Sans";
  font-weight: 400;
}
#studentSearchinProject #studentSearch:-ms-input-placeholder {
  color: #fff;
  opacity: 1;
  font-size: 14px;
  font-family: "Open Sans";
  font-weight: 400;
}
#studentSearchinProject #studentSearch::-ms-input-placeholder {
  color: #fff;
  opacity: 1;
  font-size: 14px;
  font-family: "Open Sans";
  font-weight: 400;
}
#mobileDeptListing a {
  display: block;
  font-size: 18px;
  font-family: "Inter";
  font-weight: 400;
  line-height: 23px;
  color: #fff;
  text-decoration: none;
}
@media only screen and (min-width: 1440px) {
  #mobileDeptListing a {
    font-size: calc(18px + 6 * ((100vw - 1440px) / 680));
    line-height: 1.2;
  }
}
*:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
img {
  max-width: 100%;
}
.hide {
  display: none;
}
.clearfix:before {
  content: " ";
  display: table;
}
.clearfix:after {
  clear: both;
  content: " ";
  display: table;
}
.row {
  margin-left: -15px;
  margin-right: -15px;
}
.row:before {
  content: " ";
  display: table;
}
.row:after {
  clear: both;
  content: " ";
  display: table;
}
.row > div {
  float: left;
  padding-left: 15px;
  padding-right: 15px;
}
.row > div.clearfix {
  float: none;
}
.row .col-xs-12 {
  width: 100%;
}
@media only screen and (min-width: 1024px) {
  .row .col-md-3 {
    width: 25%;
  }
  .row .col-md-4 {
    width: 33.33333333%;
  }
  .row .col-md-6 {
    width: 50%;
  }
  .row .col-md-8 {
    width: 66.66666667%;
  }
  .row .col-md-9 {
    width: 75%;
  }
  .row .visible-md {
    display: block;
  }
  .row .col-md-2 {
    width: 20%;
  }
}
@media only screen and (min-width: 1440px) {
  .row .col-lg-4 {
    width: 33.333333%;
  }
  .row .visible-md {
    display: none;
  }
  .row .visible-lg {
    display: block;
  }
}
.subHeading {
  font-size: 14px;
  display: block;
  line-height: 1.1;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 0px;
}
@media only screen and (min-width: 1440px) {
  .subHeading {
    font-size: 16px;
  }
}
.deptHeading {
  padding-left: 100px;
  margin-left: 50px;
  position: relative;
  background-repeat: no-repeat;
  background-position: top left;
  background-size: 92px;
}
.deptHeading.communication_design {
  background-image: url("https://artanddesign.aut.ac.nz/__data/assets/image/0008/812780/communication.png");
}
.deptHeading.fashion_design {
  background-image: url("https://artanddesign.aut.ac.nz/__data/assets/image/0006/812787/fashion.png");
}
.deptHeading.digital_design {
  background-image: url("https://artanddesign.aut.ac.nz/__data/assets/image/0003/812784/digital.png");
}
.deptHeading.industrial_design {
  background-image: url("https://artanddesign.aut.ac.nz/__data/assets/image/0011/812783/industrial.png");
}
.deptHeading.interaction_design {
  background-image: url("https://artanddesign.aut.ac.nz/__data/assets/image/0009/812781/interaction.png");
}
.deptHeading.spatial_design {
  background-image: url("https://artanddesign.aut.ac.nz/__data/assets/image/0004/812785/spatial.png");
}
.deptHeading.visual_arts {
  background-image: url("https://artanddesign.aut.ac.nz/__data/assets/image/0010/812782/visual.png");
}
.deptHeading.postgraduate_studies {
  background-image: url("https://artanddesign.aut.ac.nz/__data/assets/image/0005/812786/postgrad.png");
}
.deptTop {
  position: relative;
  background-repeat: no-repeat;
  background-position: right;
  background-size: auto 100%;
}
.deptTop.communication_design {
  background-image: url("https://artanddesign.aut.ac.nz/__data/assets/image/0005/558572/communication-loop.gif");
}
.deptTop.fashion_design {
  background-image: url("https://artanddesign.aut.ac.nz/__data/assets/image/0004/558571/fashion-loop.gif");
}
.deptTop.digital_design {
  background-image: url("https://artanddesign.aut.ac.nz/__data/assets/image/0006/558573/digital-loop.gif");
}
.deptTop.industrial_design {
  background-image: url("https://artanddesign.aut.ac.nz/__data/assets/image/0010/558568/industrial-loop.gif");
}
.deptTop.spatial_design {
  background-image: url("https://artanddesign.aut.ac.nz/__data/assets/image/0009/558567/spatial-loop.gif");
}
.deptTop.textile_design {
  background-image: url("https://artanddesign.aut.ac.nz/__data/assets/image/0009/435483/Textile-Design-FINAL.gif");
}
.deptTop.visual_arts {
  background-image: url("https://artanddesign.aut.ac.nz/__data/assets/image/0007/558565/visual-arts-loop.gif");
}
.deptTop.postgraduate_studies {
  background-image: url("https://artanddesign.aut.ac.nz/__data/assets/image/0004/558562/postgrad-loop.gif");
}
.headingArea {
  width: 300px;
}
.headingArea h1 {
  font-family: JakartaMedium;
  font-size: 35px;
  font-weight: normal;
  margin-top: 0;
  margin-bottom: 15px;
  line-height: 1;
}
@media only screen and (min-width: 1024px) {
  .headingArea h1 {
    font-size: 66px;
    margin-bottom: 20px;
  }
}
@media only screen and (min-width: 1440px) {
  .headingArea h1 {
    font-size: 66px;
  }
}
@media only screen and (min-width: 1024px) {
  .headingArea {
    width: 200px;
  }
}
@media only screen and (min-width: 1440px) {
  .headingArea {
    width: 1080px;
  }
}
.backArrow {
  margin-bottom: 30px;
}
@media only screen and (min-width: 1440px) {
  .backArrow {
    display: none;
  }
}
.filterSection {
  display: none;
}
@media only screen and (min-width: 1024px) {
  .filterSection {
    display: block;
    width: 210px;
    padding-right: 8% !important;
  }
}
@media only screen and (min-width: 1440px) {
  .filterSection {
    width: 310px;
    padding-right: 10% !important;
  }
}
.filterBtn {
  box-shadow: none;
  min-height: 30px;
  border-radius: 5px;
  background-color: #f7f5ed;
  padding: 6px 15px;
  border: 1px solid #1a1a1a;
  font-size: 14px;
  line-height: 1;
  margin: 0 7px 10px 0;
  float: left;
  color: #1a1a1a;
}
.filterBtn:hover {
  text-decoration: none;
  color: #282624;
}
.filterBtn[disabled] {
  color: #ccc;
  border-color: #fff;
}
.filterBtn[disabled]:hover {
  color: #ccc;
}
.filterRemoveBtn {
  box-shadow: none;
  min-height: 30px;
  border-radius: 5px;
  background-color: #1a1a1a;
  padding: 6px 45px 6px 15px;
  border: 1px solid #1a1a1a;
  font-size: 14px;
  line-height: 1;
  margin: 0 7px 10px 0;
  color: #f7f5ed;
  background-image: url(https://artanddesign.aut.ac.nz/__data/assets/file/0008/559907/cross-21.svg);
  background-repeat: no-repeat;
  background-position: right 15px center;
  float: left;
  font-family: Arimo;
}
.filterRemoveBtn:hover {
  text-decoration: none !important;
}
.filterTitle {
  font-family: Arimo;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 15px;
  text-transform: uppercase;
}
@media (min-width: 1440px) {
  .filterTitle {
    font-size: calc(14px + 6 * ((100vw - 1440px) / 680));
  }
}
.filterPart {
  margin-bottom: 40px;
  padding-right: 10%;
}
.filterTags {
  display: none;
}
.filterTags a.filterBtn {
  font-size: 18px;
  border: none;
  float: none;
  display: block;
  height: auto;
  padding: 0;
  text-align: left;
  border-radius: 0;
  background-color: transparent;
  color: #1a1a1a;
}
.filterTags a.filterBtn:hover, .filterTags a.filterBtn:active, .filterTags a.filterBtn:focus {
  text-decoration: underline;
}
.filterTags a.filterBtn[disabled] {
  opacity: 0.4;
  pointer-events: none;
}
.filterTags a.filterBtn.hide {
  display: none;
}
.projectView {
  margin-bottom: 40px;
  font-size: 18px;
  line-height: 1.4;
}
.projectView img {
  display: block;
}
.projectView .viewText {
  display: block;
  font-family: "Inter", sans-serif;
}
.projectView .viewText.nameText {
  font-weight: 600;
}
.projectView a {
  color: #282624;
  text-decoration: none;
}
.projectView a:hover, .projectView a:active, .projectView a:focus {
  color: #282624;
  text-decoration: underline;
}
@media only screen and (min-width: 1024px) {
  .projectView {
    margin-bottom: 70px;
  }
}
@media only screen and (min-width: 1440px) {
  .projectView {
    margin-bottom: 100px;
  }
}
.viewImg {
  display: block;
  margin-bottom: 20px;
  position: relative;
}
.viewImg:hover:after {
  background-color: #1a1a1a;
  opacity: 0.8;
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.viewImg img {
  width: 100%;
}
.viewImgTop {
  overflow: hidden;
  width: 100%;
  padding-top: 100%;
  position: relative;
}
.viewImgTop img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.clearBtnComma {
  display: none;
}
@media only screen and (min-width: 1024px) {
  .clearBtnComma {
    display: inline;
  }
}
.clearBtn[data-toggle=practice], .clearBtn[data-toggle=theme] {
  display: none;
}
@media only screen and (min-width: 1024px) {
  .clearBtn[data-toggle=practice], .clearBtn[data-toggle=theme] {
    display: inline;
  }
}
.filterCatSubTitle {
  font-family: Arimo;
  font-size: 15px;
  line-height: 1.1;
  margin-bottom: 5px;
  font-weight: 400;
  color: #f7f5ed;
  text-transform: uppercase;
}
@media only screen and (min-width: 1024px) {
  .filterCatSubTitle {
    font-size: 20px;
    margin-bottom: 5px;
  }
}
@media only screen and (min-width: 1440px) {
  .filterCatSubTitle {
    font-size: 21px;
  }
}
.filterCategory {
  font-family: JakartaMedium;
  font-size: 36px;
  line-height: 1.1;
  margin-bottom: 50px;
  font-weight: 300;
  width: 100%;
}
.filterCategory a {
  color: #f7f5ed;
  font-family: JakartaMedium;
}
.filterCategory.viewAllSec {
  margin-bottom: 0;
}
.filterCategory a:hover {
  text-decoration: underline !important;
  color: #f7f5ed;
  line-height: 1;
}
.filterCategory a.active {
  text-decoration: underline;
  color: #f7f5ed;
}
@media only screen and (min-width: 1024px) {
  .filterCategory {
    font-size: 66px;
    width: 85%;
  }
}
@media only screen and (min-width: 1440px) {
  .filterCategory {
    font-size: 66px;
    width: 85%;
    max-width: 1300px;
  }
}
.blueClear {
  min-height: 100vh;
  position: relative;
  padding-bottom: 50px !important;
}
#viewBelow {
  display: none;
  position: fixed;
  right: 50px;
  bottom: 50px;
  -webkit-animation: bounce 2s infinite;
  animation: bounce 2s infinite;
  width: 18px;
}
@media only screen and (min-width: 1024px) {
  #viewBelow {
    display: block;
  }
}
#tags {
  position: relative;
  min-height: 30vh;
  padding-top: 30px;
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 0;
}
@media only screen and (min-width: 1024px) {
  #tags {
    min-height: 50vh;
    padding-top: 70px;
    padding-left: 0;
    padding-right: 0;
  }
}
#tags .selectedArea {
  margin-bottom: 25px;
}
#tags .filterRemoveBtn {
  border-color: #fff;
  font-size: 18px;
  background-color: transparent;
  color: #fff;
  background-image: url(https://artanddesign.aut.ac.nz/__data/assets/file/0010/439426/cross.svg);
}
#tags .allBtn {
  display: inline-block;
  font-family: "JakartaMedium";
  font-size: 8px;
  line-height: 1.1;
  color: #fff;
}
@media only screen and (min-width: 1024px) {
  #tags .allBtn {
    font-size: 28px;
  }
}
@media only screen and (min-width: 1440px) {
  #tags .allBtn {
    font-size: 36px;
  }
}
@media only screen and (min-width: 1440px) {
  #tags .allBtn {
    margin-top: 70px;
  }
}
@-webkit-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-30px);
  }
  60% {
    -webkit-transform: translateY(-15px);
  }
}
@-moz-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -moz-transform: translateY(0);
  }
  40% {
    -moz-transform: translateY(-30px);
  }
  60% {
    -moz-transform: translateY(-15px);
  }
}
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-30px);
    -moz-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    -o-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -webkit-transform: translateY(-15px);
    -moz-transform: translateY(-15px);
    -ms-transform: translateY(-15px);
    -o-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}
#projectTagResult {
  padding-top: 80px;
}
#projectTagResult > div:first-child {
  padding-left: 0 !important;
}
.deptSlider img {
  height: 356px;
  width: auto;
}
@media only screen and (min-width: 1024px) {
  .deptSlider img {
    min-height: 491px;
  }
}
@media only screen and (min-width: 1440px) {
  .deptSlider img {
    min-height: 356px;
  }
}
.deptSlider.slick-slide {
  width: auto !important;
  visibility: hidden;
}
.deptSlider.slick-initialized.slick-slider {
  visibility: visible;
}
#departmentListing {
  display: none;
}
p.departmentLabel {
  font-family: "Open Sans", sans-serif;
  font-size: 36px;
  line-height: 85px;
  font-weight: 500;
  margin: 10px 0 0;
}
@media only screen and (min-width: 1440px) {
  p.departmentLabel {
    font-size: calc(36px + 6 * ((100vw - 1440px) / 680));
    line-height: 1.4;
  }
}
a.listingLabel {
  font-family: JakartaMedium;
  font-size: 50px;
  line-height: 66px;
  font-weight: 400;
  margin-bottom: 0px;
  color: #1a1a1a;
  text-decoration: none;
  display: inline-block;
}
@media only screen and (min-width: 1024px) {
  a.listingLabel {
    font-size: 58px;
    line-height: 66px;
  }
}
@media only screen and (min-width: 1440px) {
  a.listingLabel {
    font-size: 58px;
    line-height: 1.4;
  }
}
a.listingLabel:hover {
  text-decoration: underline;
}
.deptSlider {
  margin-bottom: 80px;
}
.deptSlider > div {
  display: inline-block;
}
.deptSlider > div.slick-list {
  display: block;
}
@media only screen and (min-width: 1440px) {
  .deptSlider {
    margin-bottom: 100px;
  }
}
.slick-prev {
  background-image: url(https://artanddesign.aut.ac.nz/__data/assets/image/0010/447607/left_black_arrow.png);
  background-position: 0;
  width: 25px;
  left: -30px;
  background-size: 100%;
}
.slick-next {
  background-image: url(https://artanddesign.aut.ac.nz/__data/assets/image/0011/447608/right_black_arrow.png);
  background-position: 0;
  right: -30px;
  width: 25px;
  background-size: 100%;
}
.deptListing {
  position: relative;
  padding: 8px;
}
@media only screen and (min-width: 414px) {
  .deptListing {
    float: left;
    width: 50%;
  }
}
@media only screen and (min-width: 1024px) {
  .deptListing {
    width: 25%;
  }
}
@media only screen and (min-width: 1440px) {
  .deptListing {
    width: 16.6%;
  }
}
.deptListing > a {
  display: block;
}
.deptListing .deptListInner {
  margin: 6px;
  position: relative;
}
.deptListing .project-desc {
  visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  color: #fff;
  text-align: center;
  background-color: rgba(68, 68, 49, 0.8);
  display: flex;
  pointer-events: none;
  margin: 8px;
}
.deptListing .project-desc:hover {
  text-decoration: underline;
}
.deptListing .project-desc > div {
  flex-direction: column;
  display: flex;
  align-self: center;
  flex: 1;
  padding: 0 10px;
  word-break: break-word;
}
.deptListing .project-desc > div .project-author {
  font-size: 39px;
  line-height: 49px;
  font-family: "Open Sans";
  font-weight: 500;
}
@media only screen and (min-width: 1440px) {
  .deptListing .project-desc > div .project-author {
    font-size: calc(39px + 6 * ((100vw - 1440px) / 680));
    line-height: 1.4;
  }
}
.deptListing .project-desc > div .project-name {
  font-size: 39px;
  line-height: 49px;
  font-family: "Inter";
  font-weight: 400;
}
@media only screen and (min-width: 1440px) {
  .deptListing .project-desc > div .project-name {
    font-size: calc(39px + 6 * ((100vw - 1440px) / 680));
    line-height: 1.4;
  }
}
.circles-wrapper {
  width: 646px;
  height: 646px;
  position: fixed;
  top: 50%;
  z-index: -1;
  left: 50%;
  margin-left: -323px;
  margin-top: -273px;
  display: none;
}
@media only screen and (min-width: 800px) {
  .circles-wrapper {
    display: block;
  }
}
.circles-wrapper, .circle, .inner-circle, .mask-full {
  border-radius: 1000px;
}
.circle, .inner-circle, .mask-full {
  overflow: hidden;
}
.circle {
  margin: auto;
  width: 646px;
  height: 646px;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  visibility: hidden;
}
.inner-circle {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  border: 1px solid white;
  background-color: #1a1a1a;
}
.mask-full {
  content: "";
  position: absolute;
  width: 45px;
  height: 45px;
  top: 1px;
  left: 1px;
  z-index: 15;
  background: #fff;
}
.mask-left, .mask-right {
  position: absolute;
  width: 100%;
  height: 50%;
  overflow: hidden;
  z-index: 14;
}
.mask-left .fill, .mask-right .fill {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: all 0.05s linear;
  background: white;
}
.mask-left {
  top: 50%;
  left: 0;
  overflow: hidden;
}
.mask-left .fill {
  border-radius: 0 0 1000px 1000px;
  transform-origin: 50% 0;
}
.mask-right {
  top: 0;
  left: 0;
}
.mask-right .fill {
  border-radius: 1000px 1000px 0 0;
  transform-origin: 50% 100%;
}
.circle.is-active {
  width: 646px;
  height: 646px;
  opacity: 1;
  visibility: visible;
}
.circle.is-active .mask-full {
  top: 8px;
  left: 8px;
  width: 54px;
  height: 54px;
}
.circles-wrapper:hover {
  padding-top: 75px;
}
.circles-wrapper:hover .circle {
  position: relative;
  margin-bottom: 5px;
  opacity: 1;
  visibility: visible;
}
.circles-wrapper:hover .year {
  opacity: 1;
  transform: rotate(0);
}
.circles-wrapper:hover .circle.is-active {
  position: absolute;
  top: 0;
}
.dept_search.active, .dept_award.active {
  padding: 6px 15px 6px 15px;
  background-color: #1a1a1a;
  color: #f7f5ed !important;
  border: 0;
}
.landSection {
  position: relative;
  margin-bottom: 30px;
}
.landSection img {
  width: 100%;
  display: none;
  max-width: 78%;
  margin: 0 auto;
}
@media only screen and (min-width: 1024px) {
  .landSection img {
    display: block;
  }
}
@media only screen and (min-width: 1024px) {
  .landSection {
    margin-bottom: 100px;
  }
}
@media only screen and (min-width: 1440px) {
  .landSection {
    margin-bottom: 150px;
  }
}
.landContent {
  position: relative;
  top: 0;
  background-image: url(https://artanddesign.aut.ac.nz/__data/assets/file/0004/451651/artdesign-map-01.svg);
  background-position: top center;
  background-repeat: no-repeat;
  padding-top: 60px;
}
@media only screen and (min-width: 1024px) {
  .landContent {
    position: absolute;
    background-image: none;
    margin-top: 130px;
    padding-top: 0;
  }
}
@media only screen and (min-width: 1440px) {
  .landContent {
    margin-top: 270px;
  }
}
.numSection {
  margin-bottom: 40px;
}
.numSection p {
  margin: 0;
  font-size: 43px;
  line-height: 1;
  font-family: "Open Sans", sans-serif;
  font-weight: 500;
}
@media only screen and (min-width: 1024px) {
  .numSection {
    margin-bottom: 20px;
  }
  .numSection p {
    font-size: 73px;
    line-height: 92px;
  }
}
@media only screen and (min-width: 1440px) {
  .numSection {
    margin-bottom: -50px;
  }
  .numSection p {
    font-size: calc(100px + 6 * ((100vw - 1440px) / 680));
    line-height: 1.1;
    font-weight: 300;
  }
}
.mainIntroText {
  margin-bottom: 20px;
  padding-top: 50px;
}
.mainIntroText p {
  margin: 0;
  font-size: 22px;
  line-height: 33px;
  font-family: "Open Sans", sans-serif;
  font-weight: 500;
}
@media only screen and (min-width: 1024px) {
  .mainIntroText {
    margin-bottom: 50px;
    padding-top: 80px;
  }
  .mainIntroText p {
    font-size: 52px;
    line-height: 64px;
  }
}
@media only screen and (min-width: 1440px) {
  .mainIntroText {
    width: 80%;
    margin-bottom: 90px;
    padding-top: 190px;
  }
  .mainIntroText p {
    font-size: calc(60px + 6 * ((100vw - 1440px) / 680));
    line-height: 1.4;
    font-weight: 400;
  }
}
.aboutText {
  padding-left: 30%;
}
.aboutText p {
  margin-bottom: 20px;
  font-size: 14px;
  line-height: 17px;
  font-family: "Inter", sans-serif;
  margin-top: 0;
}
.aboutText .halfWidth {
  width: 100%;
  display: block;
}
@media only screen and (min-width: 1024px) {
  .aboutText {
    padding-left: 20%;
  }
  .aboutText .halfWidth {
    width: 45%;
    display: inline-block;
  }
  .aboutText .halfWidth:first-child {
    margin-right: 5%;
  }
  .aboutText p {
    font-size: 21px;
    line-height: 25px;
  }
}
@media only screen and (min-width: 1440px) {
  .aboutText {
    padding-left: 50%;
  }
}
@media only screen and (min-width: 1440px) and (min-width: 1440px) {
  .aboutText p {
    font-size: calc(21px + 6 * ((100vw - 1440px) / 680));
    line-height: 1.2;
  }
}
#homeFirstScreen {
  display: none;
  background-color: #f7f5ed;
}
@media (min-width: 1440px) {
  #homeFirstScreen {
    display: block;
  }
}
@media (min-width: 1440px) {
  #homeFirstScreen + .contentContainer {
    padding: 0% 60px 5% 60px;
  }
}
.firstScreenInner {
  margin: 0 60px;
  position: relative;
  min-height: 80vh;
}
.mainBannerArea {
  width: 1135px;
  height: 100px;
  position: absolute;
  left: 50%;
  top: 0%;
  transform: translate(-50%);
  margin-top: -70px;
}
#fullLogo {
  max-width: 100%;
  width: 100%;
  height: auto;
  display: block;
}
#anchor1 {
  top: 0;
  left: 0;
}
#anchor2 {
  top: 0;
  left: 24%;
  width: 26%;
}
#anchor3 {
  top: 50%;
  left: 0;
}
#anchor4 {
  top: 50%;
  left: 24%;
  width: 26%;
}
#anchor5 {
  top: 0;
  right: 24%;
  width: 26%;
}
#anchor6 {
  top: 0;
  right: 0;
}
#anchor7 {
  top: 53%;
  right: 24%;
  width: 26%;
}
#anchor8 {
  top: 50%;
  right: 0;
}
.animationLogo {
  position: absolute;
  width: 22%;
  display: none;
  z-index: 1;
}
#anchor1Image {
  top: 0;
  left: 0;
}
#anchor2Image {
  top: 0;
  left: 26%;
}
#anchor3Image {
  top: 53.8%;
  left: 0;
}
#anchor4Image {
  top: 53.8%;
  left: 26%;
}
#anchor5Image {
  top: 0;
  right: 26%;
}
#anchor6Image {
  top: 0;
  right: 0;
}
#anchor7Image {
  top: 53.8%;
  right: 26%;
}
#anchor8Image {
  top: 53.8%;
  right: 0;
}
.deptName {
  font-family: "Open Sans";
  font-weight: 400;
  line-height: 85px;
  display: none;
  position: absolute;
  margin: 0;
}
@media (min-width: 1440px) {
  .deptName {
    font-size: calc(70px + 6 * ((100vw - 1440px) / 680));
  }
}
#anchor1Label {
  top: 110%;
  left: 22%;
}
#anchor2Label {
  top: 49%;
  right: 106%;
}
#anchor3Label {
  top: 110%;
  right: 100%;
}
#anchor4Label {
  top: 110%;
  left: 50%;
}
#anchor5Label {
  /*top: 53%;
    left: 74.2%;*/
  top: 110%;
  right: 25%;
}
#anchor6Label {
  top: 45%;
  left: 107%;
}
#anchor7Label {
  top: 110%;
  left: 74.2%;
}
#anchor8Label {
  top: 110%;
  right: 22%;
}
/*
.aniLeft{
    left: -100%;
}
.aniRight{
    left: 200%;
}
.aniLeft2{
    right: 200%;
}
*/
.deptImage {
  display: none;
  position: absolute;
}
.deptImage[data-type=portrait] {
  width: 47%;
  height: auto;
}
.deptImage[data-type=landscape] {
  width: auto;
  height: 97%;
}
.deptImage[data-dept=D01][data-type=portrait] {
  top: 46%;
  left: -58%;
}
.deptImage[data-dept=D01][data-type=landscape] {
  left: 111%;
  top: -52%;
}
.deptImage[data-dept=D02][data-type=portrait] {
  top: 0;
  left: 148%;
}
.deptImage[data-dept=D02][data-type=landscape] {
  top: 121%;
  left: 26%;
}
.deptImage[data-dept=D03][data-type=portrait] {
  top: 54.5%;
  left: 110%;
}
.deptImage[data-dept=D03][data-type=landscape] {
  bottom: 46%;
  left: -95.3%;
}
.deptImage[data-dept=D04][data-type=portrait] {
  top: 54.5%;
  left: -58%;
}
.deptImage[data-dept=D04][data-type=landscape] {
  left: 111%;
  bottom: 46%;
}
/*
.deptImage[data-dept=D05][data-type=portrait]{
    top: 0;
    left: 148%;
}
.deptImage[data-dept=D05][data-type=landscape]{
    top: 45%;
    left: -95%;
}*/
.deptImage[data-dept=D05][data-type=portrait] {
  top: 46%;
  left: 110%;
}
.deptImage[data-dept=D05][data-type=landscape] {
  top: -52%;
  left: -95%;
}
.deptImage[data-dept=D06][data-type=portrait] {
  top: 46%;
  left: -58%;
}
.deptImage[data-dept=D06][data-type=landscape] {
  top: 125%;
  left: 77.8%;
}
.deptImage[data-dept=D07][data-type=portrait] {
  top: 100%;
  left: 148%;
}
.deptImage[data-dept=D07][data-type=landscape] {
  top: 54.5%;
  left: -95%;
}
.deptImage[data-dept=D08][data-type=portrait] {
  top: 54.5%;
  left: 110%;
}
.deptImage[data-dept=D08][data-type=landscape] {
  bottom: 46%;
  left: -95.3%;
}
#deptTitle, #progTitle {
  font-family: "JakartaSemiBold";
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 15px;
}
@media (min-width: 1440px) {
  #deptTitle, #progTitle {
    font-size: calc(14px + 6 * ((100vw - 1440px) / 680));
  }
}
.mainBlockText {
  display: flex;
  justify-content: flex-start;
  font-family: "Open Sans";
  font-weight: 500;
  font-size: 36px;
  line-height: 45px;
  position: absolute;
  width: 100%;
  bottom: 150px;
  flex-direction: column;
}
.mainBlockText .quotes {
  font-weight: 400;
  position: absolute;
  z-index: 1;
}
.mainBlockText .staticText {
  position: relative;
  z-index: 2;
  background-color: #fff;
}
.schoolLabel {
  width: 453px;
}
.animLogo {
  display: none;
}
.logoLetter {
  width: 108px;
  height: 108px;
  float: left;
  margin-left: 34px;
}
.logoLetter:first-child {
  margin-left: 0;
}
.homeLogoText {
  font-family: "Open Sans", sans-serif;
  font-size: 41px;
  line-height: 1;
  color: #282624;
  text-decoration: none;
  font-weight: 600;
  text-transform: uppercase;
  text-align: center;
  margin-top: 90px;
}
.homeLogoText span {
  display: none;
}
.lightLogoText {
  font-family: Redaction\ 20;
  font-size: 50px;
  color: #444431;
  text-decoration: none;
  float: left;
  line-height: 1;
}
.lightLogoText:hover, .lightLogoText:focus, .lightLogoText:active {
  color: #444431;
  text-decoration: none;
}
@media (min-width: 1024px) {
  .lightLogoText {
    font-size: 24px;
  }
}
.lightLogoText.blue {
  color: #E4E4D3;
}
.lightLogoText.blue:hover, .lightLogoText.blue:focus, .lightLogoText.blue:active {
  color: #E4E4D3;
}
.logoText {
  display: inline-block;
  width: 118px;
  height: 40px;
}
@media (min-width: 1024px) {
  .logoText {
    width: 118px;
    height: 40px;
  }
}
.logoText img {
  width: 118px;
}
@media (min-width: 1024px) {
  .logoText img {
    width: 118px;
  }
}
.introContainer {
  background-color: #f7f5ed;
  background-size: auto 100%;
}
.introContainer h1 {
  font-family: JakartaSemiBold;
  color: #282624;
  line-height: 1;
}
@media (min-width: 1024px) {
  .introContainer h1 {
    font-size: 60px;
  }
}
@media (min-width: 1440px) {
  .introContainer h1 {
    font-size: 70px;
  }
}
.deptContainer {
  background-color: #f7f5ed;
}
.deptTopHeader {
  background-color: #f7f5ed;
}
.autLogoHeader {
  width: 65px;
  position: absolute;
  display: block;
  margin-top: -34px;
  right: 0;
}
.dept_link_wraper {
  padding: 20px 15px;
}
.dept_link_wraper:last-child {
  border: none;
}
@media (min-width: 1024px) {
  .dept_link_wraper {
    padding: 26px 40px;
  }
}
.homeStudentContainer {
  display: none;
}
@media (min-width: 1024px) {
  .homeStudentContainer {
    display: block;
  }
}
.listingBox {
  margin-bottom: 100px;
}
.listingHeadingWraper {
  padding: 0 8px;
  position: relative;
}
.listSeeAll {
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  line-height: 1;
  position: absolute;
  right: 16px;
  bottom: 0;
  font-weight: 600;
  text-decoration: none;
  color: #1a1a1a;
}
.aboutContentWraper {
  position: relative;
}
.aboutContnent {
  font-size: 18px;
  line-height: 2;
}
@media (min-width: 1024px) {
  .aboutContnent {
    padding-right: 300px;
  }
}
@media (min-width: 1440px) {
  .aboutContnent {
    padding-right: 500px;
  }
}
@media (min-width: 1024px) {
  .aboutContentRight {
    border-left: 1px solid #1a1a1a;
    padding-left: 30px;
    padding-top: 50px;
    position: absolute;
    bottom: 0;
    right: 0;
  }
}
.aboutContentRight p:first-child {
  font-weight: 600;
}
.embedResponsive {
  position: relative;
  display: block;
  height: 0;
  padding: 0;
  overflow: hidden;
  padding-bottom: 56.25%;
}