/* Fonts–––––––––––––––––––––––––––––––––––––––––––––––––– */
/*@import url("https://use.typekit.net/lht3omv.css");*/
@font-face {
  font-family: 'aon-001regular';
  src: url('../fonts/AoN001Regular.woff') format('woff'), url('../fonts/AoN001Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
}

@font-face {
  font-family: 'aon-001bold';
  src: url('../fonts/AoN001Bold.woff') format('woff'), url('../fonts/AoN001Bold.woff2') format('woff2');
  font-weight: bold;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
}

.videoWrapper {
  margin-top: 180px;
  position: relative;
  padding-bottom: 56.25%;
  /* 16:9 */
  height: 0;
}

.videoWrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.full-width-container {
  width:100%;
}

body p{
  font-size: 1.8rem;
}

.copyright {
  font-size: 1.2rem;
}

.portfolio-header-video {
  border-radius: 20px;
}

.portfolio-header-video iframe{
  border-radius: 20px;
}

iframe {
  z-index: 100;
}

.cover{
	background:rgb(0,0,0,0);
	z-index:500;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
}

.grey-video {
  background: #f7f7f7;
}

.loader {
  width: 20%;
  height: 4.8px;
  display: block;
  position: absolute;
  overflow: hidden;
  top: 50%;
  left: 40%;
  z-index: 1;
}

.loader::after {
  content: '';
  width: 96px;
  height: 4.8px;
  background: #dbdbdb;
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
  border-radius: 4px;
  animation: hitZak 1.8s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
}

@keyframes hitZak {
  0% {
    left: 0;
    transform: translateX(-1%);
    width: 20px;
  }

  50% {
    width: 96px;
  }

  100% {
    left: 100%;
    transform: translateX(-99%);
    width: 20px;
  }
}

.showreel{

}

.landing-hide-mobile {
  display: none;
}

@media (min-width: 768px) {
.landing-hide-mobile {
  display: block;
}
}

.showreel-container{
  width: 100%!important;
  background: rgb(29, 29, 29);
  margin: 0 auto;
  padding-bottom: 200px;
    padding-top: 200px;
}

.collections-heading {
  text-align: center;
  max-width: 80vw;
  margin: 0 auto;
  font-size: 7vw;
  line-height: 1.2;
  margin-bottom: 3rem;
  max-width: 980px;
}

#intro-collections {
  transition: all 1s ease-out;
}

#intro-collections ul {
  text-align: center;
}

.full-height {
  height: 100vh;
  opacity: 0;
  animation: 2s ease-out 0.5s Fadein;
  -webkit-animation-fill-mode: forwards;
}

/* Shared–––––––––––––––––––––––––––––––––––––––––––––––––– */
.button {
  border-radius: 100px;
}

/* NEW */
.collection {
  display: block;
  position: relative;
}

.collection-button {
  display: inline-block;
  text-align: center;
  background: #fff;
  color: #272727;
  font-size: 1.5rem;
  border-style: solid;
  border-width: 2px;
  border-color: #272727;
  border-radius: 8em;
  padding: 0.7rem 2rem 0.3rem 2rem;
  margin-bottom: 0.5rem;
  margin-right: 1rem;
  transition: all 0.4s ease-out;
  text-decoration: none;
  letter-spacing: 0.4px;
}

.collection-button:hover {
  background: #272727;
  color: #fff;
  transform: translate(0px, -5px);
}

/* Sections–––––––––––––––––––––––––––––––––––––––––––––––––– */
.section {
  background-color: #fff;
}

.hero {
  padding-top: 30vh;
}

.description-text {
  font-size: 1.8rem;
}

@keyframes Fadein {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.absolute {
  position: absolute;
  bottom: 0;
}

.contributors_list {
  padding-top: 0.8rem;
  font-size: 1.2rem;
}

.contributors_list li {
  margin-bottom: 0.5rem;
}

.contributors_list li a:hover {
  margin-bottom: 4px;
}

.close-btn a {
  font-size: 2rem;
  position: absolute;
  top: 1rem;
  right: 2rem;
  color: #272727;
  font-weight: 400;
  text-decoration: none;
}

/* Selection & scrolling–––––––––––––––––––––––––––––––––––––––––––––––––– */
html:not(.has-scroll-init) {
  /*cursor: wait;*/
  overflow: hidden;
}

html.has-scroll-smooth {
  overflow: hidden;
}

.has-scroll-smooth {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

html.has-scroll-dragging {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.has-scroll-smooth body {
  overflow: hidden;
}

::-moz-selection {
  background-color: #272727;
  color: #fff;
  text-shadow: none;
}

::selection {
  background-color: #272727;
  color: #fff;
  text-shadow: none;
}

.o-scroll {
  top: 0;
}

/* New–––––––––––––––––––––––––––––––––––––––––––––––––– */
.c-header_title {
  perspective: 600px;
  -webkit-perspective: 600px;
}

.c-header_line {
  right: 0;
  transform: scaleX(0);
  transition: transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.c-header_line.is-inview {
  transform: scaleX(1);
}

.c-header_title_line {
  display: block;
  opacity: 0;
  transform-origin: center top;
  transform-style: preserve-3d;
  transform: translateY(100%) rotateX(-80deg);
  transition: opacity 0s cubic-bezier(0.215, 0.61, 0.355, 1), transform 0s cubic-bezier(0.215, 0.61, 0.355, 1);
}

html.is-ready .c-header_title_line {
  transform: none;
  opacity: 1;
  transition-duration: 0.8s;
}

html.is-ready .c-header_title_line:first-child {
  transition-delay: 0.1s;
}

html.is-ready .c-header_title_line:nth-child(2) {
  transition-delay: 0.2s;
}

html.is-ready .c-header_title_line:nth-child(3) {
  transition-delay: 0.3s;
}

html.is-ready .c-header_title_line:nth-child(4) {
  transition-delay: 0.4s;
}

.c-header_title_line span {
  display: inline-block;
}

html.has-scroll-smooth {
  overflow: hidden;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

.c-cta_line {
  margin: 0;
  transform: scaleX(0);
  transition: transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.c-cta_line.-margin {
  margin-bottom: 30px;
}

.c-cta_line.is-inview {
  transform: scaleX(1);
}

.c-header_title_line.-version {
  text-transform: none;
  font-size: 0;
}

.c-header_heading {
  padding: 1.875rem 0;
}

.c-header_heading_label {
  display: block;
  transition: transform 0s cubic-bezier(0.215, 0.61, 0.355, 1);
  transform: translateY(-60px);
}

html.is-ready .c-header_heading_label {
  transform: none;
  transition-duration: 0.6s;
}

html.is-ready .o-layout_item:nth-child(2) .c-header_heading_label {
  transition-delay: 0.1s;
}

.o-image_wrapper {
  position: relative;
  overflow: hidden;
  transition: all 0.4s ease-out;
}

.o-image {
  opacity: 1;
  transition: all 0.4s ease-out;
}

.o-image img {
  width: 100%;
  opacity: 0;
  transform: scale(1.4);
  transition: opacity 1.2s cubic-bezier(0.215, 0.61, 0.355, 1), transform 1.2s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.o-image.is-inview img {
  opacity: 1;
  transform: scale(1);
  transition-delay: 0.4s;
}

.o-image.is-inview {}

.reverse-bg{
  background: #222;
  color:#fff;
}

.reverse-bg.is-inview{
  background: #222;
  color:#fff;
  transition: all 0.4s cubic-bezier(0.45, 0.05, 0.55, 0.95) 5s;
}

.project-link {
  display: block;
  margin-top: 0;
  transition: all 0.4s cubic-bezier(0.45, 0.05, 0.55, 0.95);
  opacity: 1;
  margin-top: 1rem;
  transition: all 0.5s ease-out;
}

.project-link::after {
  position: absolute;
  content: '';
  height: 2px;
  bottom: -7px;
  left: 0;
  right: 0;
  width: 0%;
  background: #272727;
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.45, 0.05, 0.55, 0.95);
}

.arrow {
  background-image: url("../images/assets/arrow-new.svg");
  position: absolute;
  right: 0;
  bottom: 5px;
  background-size: contain;
  background-repeat: no-repeat;
  display: inline-block;
  width: 30px;
  height: 15px;
  opacity: 0;
  transition: all 0.4s ease-out;
}

.project-box {
  display: block;
  margin-top: 4rem;
  border-radius: 20px;
}

.project-box:hover {
  transition: all 0.4s ease-out;
}

.project-box:hover {
  background-size: 100% 100%;
}

.project-box:hover>.project-link {
  opacity: 1;
  margin-top: 1rem;
  margin-left: 0.5rem;
}

.project-box:hover>.client-name {
  opacity: 1;
  margin-right: 0.5rem;
}

.project-box:hover>.project-link::after {
  opacity: 1;
  width: 100%;
}

.project-box:hover .arrow {
  opacity: 0.8;
  transition-delay: 0.5s;
}

.project-box:hover .o-image {
  transform: scale(1.1);
}

.client-name {
  text-align: right;
  font-size: 1.6rem;
  margin-bottom: 1rem;
}

.c-fixed_wrapper {
  position: relative;
  overflow: hidden;
}

@media (min-width: 1000px) {
  .c-fixed_wrapper {
    height: 100vh;
  }
}

@media (max-width: 999px) {
  .c-fixed_wrapper {
    height: 50vh;
  }
}

.c-fixed_target {
  bottom: -100vh;
}

.c-fixed, .c-fixed_target {
  position: absolute;
  top: -100vh;
  right: 0;
  left: 0;
}

.c-fixed {
  height: 100%;
  background-size: contain;
  background-position: 50%;
  opacity: 1;
}

html:not(.has-scroll-smooth) .c-fixed {
  top: 0;
}

#stick {
  height: 100vh;
}

#stick p {
  padding-top: 50vh;
}

/* Spacers–––––––––––––––––––––––––––––––––––––––––––––––––– */
.x-small-margin {
  padding-top: 2rem;
}

.small-margin {
  padding-top: 2rem;
}

@media (min-width: 700px) {
.small-margin {
  padding-top: 5rem;
}
}

.medium-margin {
  padding-top: 10rem;
}

.large-margin {
  padding-top: 15rem;
}

@media (min-width: 1000px) {
  .large-margin {
    padding-top: 30rem;
  }
}

/* Footer–––––––––––––––––––––––––––––––––––––––––––––––––– */
.footer-header {
  text-align: center;
  margin: 0 auto;
  display: block;
  margin-top: 5rem;
}

.footer {
  display: block;
  text-align: center;
  margin: 0 auto;
}

.more-projects {
  width: 90%;
  position: relative;
}

.no-bg {
  background: transparent;
}

.appear-after {
  opacity: 0;
  animation: 2s ease-out 0.5s 1 Fadein;
  -webkit-animation-fill-mode: forwards;
}

.say-hello {
  font-size: 2.2rem;
  padding-top: 2rem;
  padding-bottom: 2.5rem;
}

.copyright {
  display: block;
}

.social-nav {
  display: block;
  padding-inline-start: 0;
  margin-bottom: 1.5rem;
}

.social-nav li {
  display: inline-block;
}

.twitter, .instagram, .spotify, .yt {
  width: 35px;
  height: 25px;
  background-size: contain;
  background-repeat: no-repeat;
  display: inline-block;
  background-position: center;
}

.twitter {
  background-image: url('../images/assets/twitter.svg');
}

.instagram {
  background-image: url('../images/assets/instagram.svg');
}

.spotify {
  background-image: url('../images/assets/spotify.svg');
}

.yt {
  background-image: url('../images/assets/yt.svg');
}

.collection ul {
  text-align: center;
  margin: 0 auto;
  display: block;
  padding-inline-start: 0;
  list-style: none;
  margin-bottom: 2rem;
}

.collection-footer ul {
  text-align: center;
}

.collection ul li {
  display: inline-block;
}

.collection-footer {
  text-align: center;
  max-width: 960px;
  margin: 0 auto;
}

.back-to-all {
  font-size: 2.2rem;
  font-weight: 400;
  padding-top: 1rem;
  text-align: center;
  display: block;
  transition: all 0.4s ease-out;
  margin: 0 auto;
  color: #272727;
  text-decoration: none;
  margin-bottom: 4rem;
  height: 30px;
  width: fit-content;
}

.footer-link {
  text-align: center;
  margin: 0 auto;
  display: block;
  margin-bottom: 3rem;
  margin-top: 1rem;
}

.project-categories {
  margin-top:5rem;
}

/* LInk effects–––––––––––––––––––––––––––––––––––––––––––––––––– */
.content__item {
  font-size: 2rem;
  position: absolute;
  top: 1rem;
  right: 2rem;
  color: #272727;
  font-weight: 400;
  text-decoration: none;
}

.content__item2 {
  font-size: 2rem;
  position: absolute;
  top: 1rem;
  right: 2rem;
  color: #272727;
  font-weight: 400;
  text-decoration: none;
}

.link {
  cursor: pointer;
  position: relative;
  white-space: nowrap;
}

.link::before, .link::after {
  position: absolute;
  width: 100%;
  height: 1px;
  background: #272727;
  top: 100%;
  left: 0;
  pointer-events: none;
}

.link::before {
  content: '';
}

.link--elara::before {
  transform-origin: 50% 100%;
  transition: clip-path 0.3s, transform 0.3s cubic-bezier(0.2, 1, 0.8, 1);
  clip-path: polygon(0% 0%, 0% 100%, 0 100%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%, 100% 100%, 100% 0%);
}

.link--elara:hover::before {
  transform: translate3d(0, 2px, 0) scale3d(1.08, 3, 1);
  clip-path: polygon(0% 0%, 0% 100%, 50% 100%, 50% 0, 50% 0, 50% 100%, 50% 100%, 0 100%, 100% 100%, 100% 0%);
}

.link--elara span {
  display: inline-block;
  transition: transform 0.6s cubic-bezier(0.2, 1, 0.8, 1);
  color: #272727;
}

.link--elara:hover span {
  transform: translate3d(0, -2px, 0);
}

.spacer {
  height: 100vh;
  display: block;
  background-color: #fff;
}

.large-typed {
  font-size: 5rem;
  line-height: 1;
}

/* Font Alternates–––––––––––––––––––––––––––––––––––––––––––––––––– */
.alt-a {
  font-feature-settings: "ss01";
}

.alt-u {
  font-feature-settings: "ss02";
}

.alt-n {
  font-feature-settings: "ss03";
}

.alt-d {
  font-feature-settings: "ss04";
}

.alt-p {
  font-feature-settings: "ss05";
}

.alt-q {
  font-feature-settings: "ss06";
}

.alt-r {
  font-feature-settings: "ss07";
}

.alt-m {
  font-feature-settings: "ss08";
}

.alt-g {
  font-feature-settings: "ss09";
}

.alt-f {
  font-feature-settings: "ss10";
}

.alt-b {
  font-feature-settings: "ss11";
}

.alt-h {
  font-feature-settings: "ss12";
}

.alt-t {
  font-feature-settings: "ss13";
}

.alt-s {
  font-feature-settings: "ss14";
}

.alts-all {
  font-feature-settings: "ss01", "ss02", "ss03", "ss04", "ss05", "ss06", "ss07", "ss08", "ss09", "ss10", "ss11", "ss12", "ss13", "ss14", "ss15", "ss16";
}

.alt-r-n-a {
  font-feature-settings: "ss07", "ss03", "ss01";
}

.alt-u-n-d {
  font-feature-settings: "ss02", "ss03", "ss04";
}

.alt-m-g-d {
  font-feature-settings: "ss08", "ss09", "ss04";
}

.alt-n-g-d {
  font-feature-settings: "ss03", "ss09", "ss04";
}

.alt-u-g-a {
  font-feature-settings: "ss02", "ss09", "ss01";
}

.alt-a-n {
  font-feature-settings: "ss01", "ss03";
}

.alt-a-g {
  font-feature-settings: "ss01", "ss09";
}

.alt-r-g {
  font-feature-settings: "ss07", "ss11";
}

.alt-n-g {
  font-feature-settings: "ss03", "ss11";
}

.alt-u-d {
  font-feature-settings: "ss02", "ss04";
}

.alt-r-d-t {
  font-feature-settings: "ss07", "ss04", "ss13";
}

.alt-party {
  font-feature-settings: "ss15";
}

/* Websites page–––––––––––––––––––––––––––––––––––––––––––––––––– */
.finlathen {
  background-color: #FFF2F4;
  padding-top: 10rem;
  padding-bottom: 10rem;
}

.hilltown {
  background-color: #E6F2F6;
  padding-top: 10rem;
  padding-bottom: 10rem;
}

.right-text {
  text-align: right;
}

/* Typography page–––––––––––––––––––––––––––––––––––––––––––––––––– */
@font-face {
  font-family: '4/webfont/PrototypeGX';
  /*src: url("AvenirNext_Variable.ttf") format("truetype");
	*/
  src: url("PrototypeGX.ttf") format("truetype");
}

@font-face {
  font-family: 'PrototypeGX';
  /*src: url("AvenirNext_Variable.ttf") format("truetype");
	*/
  src: url("PrototypeGX.ttf") format("truetype");
}

textarea {
  font-family: "PrototypeGX";
  font-size: 7rem;
  font-variation-settings: 'wght'500, 'wdth'100, 'CRSB'50, 'ROUN'0;
  display: block;
  border: 0;
  background: transparent;
  overflow: hidden;
  resize: none;
  width: 100%;
  font-kerning: auto;
  text-align: center;
  line-height: 1em;
  text-align: left;
}

.text-area-d {
  height: 50vh;
}

#weightSlider, #widthSlider, #crossbarSlider, #roundedSlider, #sizeSlider, #lineheightSlider, #trackingSlider {
  margin-top: 5rem;
}

.svg-bg {
  background-image: url('../images/collections/animation/pi.svg');
  background-size: cover;
}

.caption-centred {
  position: relative;
  height: 50vh;
}

.caption-top {
  position: relative;
  height: 10rem;
}

.caption-centred p {
  font-size: 1.5rem;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.caption-top p {
  font-size: 1.5rem;
  position: absolute;
}

.portfolio-heading {
  text-align: center;
  margin: 0 auto;
  font-size: 5vw;
  margin-top: 10rem;
  margin-bottom: 10rem;
}

.home-heading {
      position: absolute;
    top: 50vh;
    margin: 0 auto;
    font-size: 7vw;
    display: block;
    z-index: 800;
    padding: 20px 20px 0px 20px;
    background: #fff;
}

.home-design {
    background: #272727;
    color: #fff;
    padding: 10px 20px 0px 10px;
}

.sub-line {
  font-size: 5.2rem;
  margin-top: 2rem;
}

ul.project-categories {
  margin-bottom: 0rem;
}

.project-categories li {
  display: inline-block;
  opacity: 0.5;
  font-size: 2.5rem;
}

.project-categories {
  display: block;
  opacity: 0.5;
  font-size: 1.5rem;
  margin-bottom: 0;
}

.project-heading-container {
  margin: 0 auto;
  margin-top: 0rem;
}

.project-heading {
  text-align: center;
  font-size: 2rem;
  line-height: 1.2;
  background-image: linear-gradient(180deg, transparent 96%, #272727 0);
  background-size: 0 100%;
  background-repeat: no-repeat;
  text-decoration: none;
  transition: background-size 0.4s ease;
}

/*.project-heading:hover {
  background-size: 100% 100%;
  max-width:600px;
}*/


.project-descriptions {
  font-size: 3rem;
  margin-top: 1rem;
  line-height: 1.3;
  max-width: 600px;
}

.project-content {
  font-size:2rem;
  max-width: 600px;
}

.almighty-foods-heading {
  margin-top: 2rem;
}

.bold-type {
  font-family: 'aon-001bold';
  font-weight: bold;
}

@keyframes ArrowAnim {
  0% {
    margin-top: 0px;
  }

  50% {
    margin-top: 20px;
  }

  100% {
    margin-top: 0px;
  }
}

.down-arrow {
  width: 50px;
  height: 50px;
  margin-top: 0px;
  /*background-size: cover;
	background-image: url('../images/assets/arrow-down.svg');*/
  display: block;
  position: relative;
  animation: 2s ease-out 0.5s ArrowAnim;
  animation-iteration-count: infinite;
}

/* Logo ---------------------------------------------------------- */
.page-header {
  margin-top: 5vw;
}

#aon-logo {
  width: 230px;
  height: 60px;
  display: block;
  background-image: url(../images/assets/aon-logo-low.jpg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.project-aon-logo {
  margin-top: 5vw;
  margin-left: 5%;
  opacity: 0;
  animation: 2s ease-out 0.5s 1 Fadein;
  -webkit-animation-fill-mode: forwards;
}

/* for high resolution display */
@media only screen and (min--moz-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {
  #aon-logo {
    background: url(../images/assets/aon-logo.jpg);
    background-repeat: no-repeat;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }
}

/* Nav ---------------------------------------------------------- */
.mobile-hide {
  display: none;
}

#close-link {
  z-index: 999;
  font-size: 2rem;
  position: fixed;
  top: 0rem;
  right: 0rem;
  background: #fff;
  padding: 0.5rem 2rem;
}

#fixed-link {
  z-index: 999;
  position: sticky;
}

.hamburger {
  position: absolute;
  width: 40px;
  height: 30px;
  top: 10px;
  /*right: 30px;*/
  right: 15px;
  z-index: 550;
  cursor: pointer;
}

.hamburger div {
  position: relative;
  width: 44px;
  height: 3px;
  border-radius: 3px;
  background-color: #272727;
  margin-top: 7px;
  transition: all 0.3s cubic-bezier(0.77, 0.2, 0.05, 1.0);
}

#toggle {
  display: none;
}

#toggle:checked+.hamburger .top {
  transform: rotate(-45deg);
  margin-top: 22.5px;
}

#toggle:checked+.hamburger .meat {
  transform: rotate(45deg);
  margin-top: -5px;
}

#toggle:checked+.hamburger .bottom {
  transform: scale(0);
}

#toggle:checked+.hamburger+.nav {
  top: -10%;
}

#toggle:checked+.hamburger div {
  background-color: #fff;
}

.nav {
  position: fixed;
  width: 100%;
  height: 120%;
  background-color: #272727;
  top: -140%;
  right: 0;
  bottom: 0;
  overflow: hidden;
  transition: all 0.8s cubic-bezier(0.77, 0.2, 0.05, 1.0);
  z-index: 510;
}

.nav .nav-wrapper {
  position: relative;
  overflow-y: auto;
  height: 100%;
}

nav {
  height: 100vh;
  width: 200px;
  margin-left: 10vw;
  align-items: center;
  justify-content: center;
}

nav a {
  color: #fff;
  opacity: 0;
  text-decoration: none;
  font-size: 20px;
  transition: all 0.1s ease;
  z-index: 30;
  margin-top: 1rem;
  display: block;
}

nav ul li a:hover {
  background: #fff;
  color: #272727 !important;
  border-radius: 8em;
  display: block;
  padding: 0.9rem 3rem 0.5rem 3rem;
}

nav a:first-child {
  margin-top: 0;
}

nav ul {
  padding-top: 25vh;
  overflow-wrap: normal;
}
/*
.nav{
  background-color: red;
}

.nav-wrapper {
  background-color: blue;
}

nav {
  background-color: yellow;
}

ul {
  background-color: pink;
}*/

#toggle:checked+.hamburger+.nav .nav-wrapper nav a {
  opacity: 1;
  transform: scale(1);
  z-index: 40;
  color: #fff;
  display: block;
  transition-duration: 0.5s;
}

#toggle:checked+.hamburger+.nav .nav-wrapper nav ul li a:hover {
  opacity: 1;
  transform: scale(1);
  text-align: center;
  width: 150px;
}

/* LANDING PAGE */
.restricted-container {
  overflow: hidden;
  background: #1d1d1d;
  width: 100%;
  height: 500px;
}

.rotated-container {
  transform: rotate(-22.5deg);
  position: relative;
  width: 300%;
  height: 600%;
  top: -110px;
}

.vertical-container {
  width: 100%;
  height: 500%;
  position: relative;
  top: -280px;
}

.vertical-restricted-container {
  overflow: hidden;
  width: 100%;
  background: #1d1d1d;
  height: 1800px;
}

ul.nav-social-icons {
  padding-top: 0;
}

.nav-social-icons a {
  width: 38px;
  height: 42px;
  display: inline-block !important;
}

.nav-social-icons a:hover {
  transform: scale(1.2) !important;
}

.insta-icon {
  margin-left: 3rem;
}

.landing-button {
  margin-top: 2rem;
}

.landing-hello {
  font-size: 10.5rem;
  padding-bottom: 0;
  margin-bottom: 0;
}

.landing-copy {
  max-width: 550px;
}

.landing-video {
  
}

/* loading animation ---------------------------------------------


.videoWrapper.is-loading {
    background: #eee;
    background: linear-gradient(110deg, #ececec 8%, #f5f5f5 18%, #ececec 33%);
    border-radius: 5px;
    background-size: 200% 100%;
    animation: 1.5s shine linear infinite;
}

@keyframes shine {
  to {
    background-position-x: -200%;
  }
}
*/


.personality {
  font-size: 8rem;
text-align: right;
margin-top: 0;
margin-bottom:0rem;
}

.identities {
  font-size: 8rem;
text-align: left;
margin-top: 0;
margin-bottom:0rem;
}

.identity-block {
  width:20vw;
  height: 20vw;
  margin-right:2rem;
  display: inline-block;
  border-radius: 2rem;
  background-size: cover;
}

.identity-1 {
  background-image: url("../images/projects/landing/identity-1.jpg");
}

.identity-2 {
  background-image: url("../images/projects/landing/identity-2.jpg");
}

.identity-3 {
  background-image: url("../images/projects/landing/identity-3.jpg");
}

.identity-4 {
  background-image: url("../images/projects/landing/identity-4.jpg");
}

.identity-5 {
  background-image: url("../images/projects/landing/identity-5.jpg");
}


.c-section-divider {
  display: flex;
  align-items: center;
  width: 100%;
}

.c-section-divider_text {
  font-size: 20px;
  opacity: 0.75;
  color: #272727;
  margin: 0;
  margin-right: 1rem;
  white-space: nowrap;
}

.c-section-divider_rule {
  flex: 1;
  height: 1px;
  background: #272727;
  opacity: 0.25;
  display: block;
}

/* Bryte x-ray cursor reveal */
.c-xray {
  position: relative;
  width: 100%;
  margin: 0;
  /* Base image always visible */
  background: url("../images/projects/bryte/party-bg.webp") no-repeat center center;
  background-size: cover;
  overflow: hidden;
}

/* Reveal image on top, masked by cursor circle */
#bryte-xray-img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  -webkit-mask-image: url("../images/projects/bryte/bryte-mask.png");
  mask-image: url("../images/projects/bryte/bryte-mask.png");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 25vw 25vw; /* match your mask size */
  mask-size: 25vw 25vw;
  cursor: none; /* optional: hide native cursor */
    -webkit-mask-mode: luminance;
  mask-mode: luminance;
}

.round-32 {
  border-radius:32px;
}

/* Ensure box sizing matches rest of site */
.c-xray,
#bryte-xray-img {
  box-sizing: border-box;
}

/* INteractive patterns –––––––––––––––––––––––––––––––––––––––––––––––––– */

.interactive-video{
  width: 100%;
  border-radius: 16px;
}

.rounded-video {
  border-radius: 16px;
}

.big-quote{
      display: block;
    margin: 0 auto;
    background: #F797C5;
    max-width: 800px;
    padding: 10vw;
    border-radius: 32px;
}

.big-quote h2{
    font-size: 5rem;
}


.bryte-link:before {
  content: "";
  background-image: url("../images/projects/bryte/star.svg");
  background-size: contain;
  background-repeat: no-repeat;
  width: 16px;             
  height: 16px;
  display: inline-block;
  margin-right: 0.5rem;
}


.bryte-link {
font-size: 2rem;
}

.bryte-link a {

font-size: 2rem;
border-bottom:2px solid #272727;
}

.centred{
  text-align: center;
}


.featured-projects {
  font-size: 1.4rem;
  margin-bottom: 2rem;
}

/*.featured-projects:before {
  content: "";
  display: inline-block;
  width: 8px;          
  height: 8px;         
  margin-right: 0.4em;
  background-image: url("../images/assets/dot.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}*/



a.highlight {
  position: relative;
  color: #272727;
  text-decoration: none;
  padding-left: 0;
  display: inline-block;
}

/* Inner span holds the text so transforms never affect wrapping */
a.highlight span {
  display: inline-block;
  transition: transform 0.25s ease-out, color 0.25s ease-out;
}

/* Hover: move the text only */
a.highlight:hover span,
a.highlight:focus span {
  transform: translateX(24px);
  color: #272727; /* keep colour stable */
}

/* Left animated border */
a.highlight::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;

  width: 0;
  background: #272727;

  transition: width 0.15s ease-out, opacity 0.15s ease-out;
  opacity: 0;
}

/* Animate the bar in */
a.highlight:hover::before,
a.highlight:focus::before {
  width: 4px;
  opacity: 1;
}

/* Media Queries–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Bigger than 500 */
@media (min-width: 500px) {
  .rotated-container {
    width: 300%;
    height: 600%;
    top: -260px;
  }
}

/* Bigger than 550 */
@media (min-width: 550px) {
  .nav {
    width: 75%;
  }

  .description-text {
    font-size: 1.8rem;
  }

  .vertical-restricted-container {
    height: 700px;
  }
}

@media only screen and (min-width: 700px) {
  .nav {
    width: 50%;
  }

  .sliders {
    width: 40vw;
    margin: 0 auto;
  }

  nav a {
    font-size: 40px;
  }

  .hamburger {
    position: absolute;
    width: 50px;
    height: 45px;
    right: 15px;
  }

  .portfolio-heading {
    font-size: 3vw;
  }

  body p{
  font-size: 2.5rem;
}

.project-categories {
  font-size: 1.8rem;
  padding-bottom:1rem;
  margin-top:0;
}
}

/* Bigger than 750 */
@media (min-width: 750px) {
  
.featured-projects {
  font-size: 2.0rem;
}
  .collections-heading {
    margin-bottom: 5rem;
  }

  .videoWrapper {
    margin-top: 80px;
  }

  .collection-button {
    border-width: 3px;
    padding: 0.7rem 2rem 0.3rem 2rem;
    margin-bottom: 1rem;
  }

  .collections-heading {
    font-size: 5rem;
  }

  .project-categories li {
    font-size: 2.0rem;
  }

  .project-heading-container {
    margin-top: 4rem;
  }

  .hero-heading {
    font-size: 2.6rem;
  }

  .project-descriptions {
    font-size: 4rem;
    margin-top: 1rem;
  }

  .first-project-description {
       font-size: 4.5rem;
    margin-top: 1rem;
    max-width: 740px;
  }


  .section-description {
    max-width: 60%;
    margin-left: auto;
    margin-right: auto;
  }

  .categories {
    padding: 15rem 0 8rem;
  }

  .portfolio-heading {
    margin-top: 30rem;
    max-width: 50vw;
    text-align: center;
  }

  .sub-line {
    font-size: 10rem;
    max-width: 1200px;
  }

  .project-heading {
    font-size: 2.5rem;
    display: block;
    text-align: left;
    max-width: 950px;
  }

  #aon-logo {
    width: 300px;
    display: block;
  }

  .mobile-hide {
    display: block;
  }

  .restricted-container {
    height: 800px;
  }

  .rotated-container {
    width: 240%;
  }

  .vertical-container {
    width: 120%;
    height: 500%;
    position: relative;
    top: -280px;
  }

  .landing-hello {
    font-size: 14rem;
  }
}

/* Bigger than 1000 */
@media (min-width: 1000px) {
  .portfolio-heading {
    margin-top: 20rem;
  }

  .hero-heading {
    font-size: 15.0rem;
  }


  .project-heading {
    font-size: 3.2rem;
  }

  .description-text {
    font-size: 1.8rem;
  }

  .collection-button {
    font-size: 2.4rem;
  }

  .large-typed {
    font-size: 7rem;
  }

  .collection-footer ul {
    max-width: 100%
  }

  textarea {
    font-size: 10rem;
  }

  .down-arrow {
    width: 70px;
    height: 70px;
  }

  .legibility {
    text-rendering: optimizeLegibility;
  }

  .project-box {
    margin-top: 4rem;
  }

  .rotated-container {
    width: 200%;
  }

  /* Bigger than 1200 */
  @media (min-width: 1200px) {
    .portfolio-heading {
      margin-top: 30rem;
    }

    .description-text {
      font-size: 2.4rem;
      margin-top: 1.5rem;
    }

    .contributors_list li {
      margin-bottom: 1rem;
    }

    .contributors_list {
      font-size: 1.5rem;
      margin-top: 1.5rem;
    }

    #type-container1 {
      max-width: 900px;
    }

    .collection ul {
      max-width: 920px;
    }

    .collection-footer ul {
      max-width: 100%
    }

    .footer-header {
      font-size: 5rem;
    }

    .rotated-container {
      width: 180%;
      top: -360px;
    }
  }

  @media (min-width: 1500px) {
    .rotated-container {
      width: 150%;
      top: -360px;
    }

    .landing-hello {
      font-size: 18rem;
    }

      .project-heading {
    font-size: 4rem;
  }
  }

  /*iPad Pro 9.7"*/
  /* Portrait */
  @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
    .ipad-pro-padding {
      padding-top: 50rem;
    }
  }

  /* Landscape */
  @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
    .ipad-pro-padding {
      padding-top: 50rem;
    }
  }

  /*iPad Pro 10.5"*/
  /* Portrait */
  /* Declare the same value for min- and max-width to avoid colliding with desktops */
  /* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/
  @media only screen and (min-device-width: 830px) and (max-device-width: 900px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
    .ipad-pro-padding {
      padding-top: 50rem;
    }
  }

  /* Landscape */
  /* Declare the same value for min- and max-width to avoid colliding with desktops */
  /* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/
  @media only screen and (min-device-width: 1112px) and (max-device-width: 1112px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
    .ipad-pro-padding {
      padding-top: 50rem;
    }
  }

  /*ipad PRo 12.9"*/
  /* Portrait */
  /* Declare the same value for min- and max-width to avoid colliding with desktops */
  /* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/
  @media only screen and (min-device-width: 1024px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
    .ipad-pro-padding {
      padding-top: 50rem;
    }
  }

  /* Landscape */
  /* Declare the same value for min- and max-width to avoid colliding with desktops */
  /* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/
  @media only screen and (min-device-width: 1366px) and (max-device-width: 1366px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
    .ipad-pro-padding {
      padding-top: 50rem;
    }
  }